A tutorial consists of a number of lessons. Each lesson can include one or more steps (numbered across the top-right of the page).
A lesson step consists of:
Prose providing learning material.
An outline for code to be written to practice the step’s material.
The following variables are available for use in code:
React- the React library.
output- the DOM node for the output area below.
Code is transformed with Babel before being executed, so you can use:
- ECMAScript 6 features
- ECMAScript 7 proposals experimentally supported by Babel.
Use the “Edit Mode” checkbox to toggle editing mode.
In editing mode, you can change the lesson name and edit the content of each step.
Step code & solution
In editing mode, “Code” and “Solution” tabs will appear in the coding area:
- Code is what the user will see in the coding panel when they open the step.
Note: Code will be automatically executed each time the step is opened.
- Solution (if provided) will allow use of the “Fix code” button to see a solution for the coding challenge.
Creating and deleting lessons and steps
In editing mode, extra toolbar buttons are also displayed to allow you to add new lessons and steps, or to delete the current lesson or step.
When you add more lessons to a tutorial, a menu will pop up on the left side of the page to allow you to navigate between them.
You can export the current lesson using the “Export Lesson” button, or the complete tutorial using the “Export Tutorial” button.
You will be prompted to download a
.json file containing exported data.
To import a lesson or a tutorial, use the “Import Lesson(s)” button to select a
.json file, or drag and drop a
.json file anywhere on the page.
Warning: if you import a tutorial, its lessons will replace everything you currently have.