Welcome to Codio! For this class, we’ll be using Codio in a couple of different ways. First, the course textbook will consist of several tutorials built in Codio using the same Guide interface that you are using right now. Secondly, most of the programming projects in this course will also be handled through Codio. Codio has many unique features, including a fully online development environment and automatic grading that make this course scalable and accessible.
To begin, click the Next button below, or the Right Arrow at the top of this page to continue to the next guide page in this Codio project.
Each module will usually contain at least one Codio Tutorial project. This project is a small portion of a much larger textbook developed in Codio, which is also available in its entirety through Canvas. Look for the Textbook module in your Canvas modules. In fact, this very project you are working in right now is a part of that textbook.
In these Codio tutorials, there will be several pages of content introducing the material for that module. Some of the pages will look just like this one, with text, images, and maybe even a short video to help you learn the material. If you’d like to see an outline of the pages available as part of this module, click the “hamburger” menu button at the top-right of the page.
Some of the pages may also include short questions to check for understanding of the material. You’ll need to answer these questions as they appear in order to get points for completing the tutorial module. Remember that the tutorials make up part of your grade in this course, so make sure you answer all of the questions in the tutorial module before submitting it. In some cases, you’ll be able to resubmit your answers until you get a correct answer, but other questions will not allow that. In fact, below is a quick example of what one of those questions would be like. Take a moment to answer the question correctly, then continue to the next page of this module.
On some pages, the Codio guide may also switch to a different view, shown here, allowing you to work directly with code. On the far left is the file tree, which shows all of the files accessible to you for this example. Then, in the middle, you should also see the file or files that are part of this example. You can freely open additional files if needed in that panel, or rearrange the panels as needed. However, whenever you enter this page, it will reset the view back to the default.
In the first programming module of the course, we’ll discuss more information about how to use Codio to run any code that you’ve created. For now, we’ll just use text files to introduce the interface.
Once you’ve completed the example, most pages will include a section at the bottom that allows you to check your work. Just like the other questions, these assessments will count toward your grade on the tutorial project. See if you can complete the exercise and pass the test below.
Now that you’ve seen a few pages in Codio, let’s take a minute to discuss some of the features of the Codio user interface. Of course, Codio has some amazing documentation, so feel free to check that out as you work with Codio.
First, let’s look at the menu items at the top of the page. There are several available to you that are worth mentioning. For starters, you can click the Codio Icon at any time to go directly to your Codio dashboard. The first item on the Codio menu will take you directly here as well. There you can see all of the projects attached to your account, and create new projects at any time. However, you won’t see the projects attached to the course here, since they must be accessed directly through Canvas. Under the Codio menu, you can also find options to manage your preferences. Here you can adjust things such as the editor settings and theme. Feel free to adjust the settings to match your personal preferences.
The Project menu allows you to work with the currently loaded Codio project. Generally you won’t need to access many of these items unless your project stops working. However, they are provided for your use in case you need them.
The File menu contains options for manipulating the file tree, such as creating new files, renaming them, saving them, and even downloading and uploading files. As you work on larger projects, you’ll be using many of these options to manage the files within your project.
Next, the Edit menu gives you access to the Undo and Redo action. Since Codio is a web-based platform, you’ll need to get used to using keyboard shortcuts to handle the Copy and Paste actions. For most systems, you can use CTRL+C for copy and CTRL+V for paste. On Mac, use CMD+C and CMD+V instead.
The Find menu contains entries for searching documents and performing a find-and-replace operation. Most of those actions should be pretty self-explanatory.
The View menu allows you to customize your view in Codio. Here we’ll find options for managing panels, open tabs, editor settings, and more. Feel free to make use of these options to arrange your Codio view as you prefer. Also, at the bottom of this menu is a Play Guide option, which is very helpful if you accidentally close the guide and need to reopen it.
Under the Tools menu, you’ll find an option for accessing the Terminal in your project. The Terminal gives you console access to the box that your project is running on, and allows you to install software and configure it as needed. As you work through the content in this program, we’ll slowly introduce the Terminal and some of the tasks it can perform. In addition, the Tools menu has options for working with SSH and Git, two more tools which will be introduced in later modules. Lastly, it also has an entry for the Command Bar, which is a quick shortcut to the full list of commands that can be performed in Codio. Feel free to check it out if you are looking for a particular command or action.
The Education menu is very important, though it only has a single entry. The Mark as Completed option allows you to indicate that you have completed this Codio project or tutorial. Once you select that option, your work will automatically be graded and your grade will be sent to Canvas. From there, you can access the next project or module in the course.
Don’t Submit Projects Accidentally!
Be very careful when completing a project! Once you’ve marked a project as completed, it will become read-only, and you won’t be able to make any additional changes to the project. So, you’ll need to make sure you’ve finished everything in the project first. If you accidentally mark a project as completed, you may contact the instructors for help. Depending on the situation, they may be able to unlock it for you so you can continue your work. However, due to the fact that you may have access to the solutions once you’ve submitted a project, unlocking a completed project is entirely at the discretion of the instructor.
Finally, the Help menu gives you access to many of the support features in Codio. If you get stuck, you may want to review some of the help options available here. Of course, you can always make a post in Piazza as well!
You may also see some additional options to the right of the menus. These options can be used to perform actions that are preconfigured into the Codio project, such as compile and run a file, load a website, or even use the built-in debugger on your project. In the Codio tutorials such as this one, these menus will contain options to compile and run a single file in a variety of programming languages, debug a file, as well as open a simple Terminal window. We’ll introduce some of the other options you may see in the first Codio programming project, which is part of a later module.
There are also a few other items in the interface you should be aware of. First, in the File Tree, there is a Play icon that can also be used to open the guide for the current project.
In the guide, there are a couple of options available by clicking the gear icon in the upper-right of the page. First, there is an option to Restore Current Files. This option will restore the contents of any currently open files back to the default contents from when you first opened the project. In addition, this menu also contains another way to mark the current project as completed.
That covers most of the major features of the Codio interface that we’ll be using in this program. If you have any questions about how to use Codio, feel free to post in the Codio folder on Piazza.