This post is part of series which will show you how to create your own online course using Codio. This first post will cover the basics of adding content with Markdown, configuring page layouts and how to run code directly from a guide page allowing you to create powerful interactive learning material.
Let's begin by creating a new project for your first unit. I have used a previous stack as the starting point for my project, but you can start from any Stack or Starter Pack that is relevant to what you would like to teach.
Once your project has been created, navigate to Tools > Guides > Edit to open the Guide Editor.
Since this is a new project without a guide, Codio creates a .guides folder in your workspace and opens a guide page for editing. You can navigate around your guide pages and add, delete and re-order your pages using the menu icon at the top right of the guide.
Take a closer look at the Guide content in the screenshot. It has some basic Markdown examples and demonstrates how to add Codio Markdown buttons, which allow you to call scripts on your Codio box. For a complete guide on Markdown see the Markdown Syntax Specification.
To add a button to your guide add the following code {Button_Label}(Command) and replace Button_Label with your button text and Command with the program or script that should be run when the button is clicked. In this example we are going to run a Lua file using the lua command line application. You could easily change this to run a Python file python3 helloworld.lua or even display the result of built in command like ls.
Now that our guide has some content we need to configure this page to display the helloworld.lua file for students to edit. Click the Settings button and navigate to the Open Tabs section. Add a new open file tab with the correct name.
Now navigate to the Page section, change the layout to "2 Panels without tree" and toggle the Close Tabs option. This option is useful when you want open tabs from a previous guide page to be closed when a student progresses through your guide. Finally save your changes and you will be taken back to the Guide Editor.
Let's preview your guide by navigating to Tools > Guides > Play. The editor will be closed and the guide will opened in view mode, the exact same view a student would see. Scroll to the bottom of the page and click the button to see the result displayed directly in the guide. Try changing the code on the left and test it again. If you introduce a syntax error, Codio will capture the error and display it so that it can be debugged by the student,
Congratulations you have covered the basics of creating an online course. Try using what you have learnt to add more pages. Codio gives you a computer in your browser so don't create yet another digital textbook, add fun and challenging example programs students can edit and run.
In the upcoming posts we will show you how to add images and videos to your guides, create simple assessments like multiple choice questions and more advanced tests to assess student programs. Finally we will show you how to organise your material, assign it to classes and view student progress.
To stay up to date on our teacher resources and product development, follow us on our blog, Twitter or Facebook.
