The recommended way to do the exercises is to (1) read the description in the pane at right, (2) write your code at the insertion point marked in the left pane (3) check the syntax of the code and (4) run it in the small window at right. Then go to step 2 and repeat as necessary until all tests are passed. Your solution code can be saved to a file on your local hard drive by selecting it with the mouse, then copying (Windows, Ctrl-C), and then pasting into an editor (Windows, Ctrl-V) and save as a file (use the .html extension for the file name). You can use zip to put all exercises that are in the same assignment into a single file as appropriate.
A description of all of the GUI elements follows below.
- Code pane
- This is the large pane at left. It always contains the main source file for the example. This pane is driven by CodeMirror, and includes a robust editing capability. Keybindings for search/replace functionality on Windows and OS X, respectively, are given below. Ctrl-F / Cmd-F = Start searching, Ctrl-G / Cmd-G = Find next, Shift-Ctrl-G / Shift-Cmd-G = Find previous, Shift-Ctrl-F / Cmd-Option-F = Replace, Shift-Ctrl-R / Shift-Cmd-Option-F = Replace all.
- Result pane
- This is the large pane at right. It can contain a description of the exercise, the result of running tests on your code, or results of code syntax checking, depending on what button was just pressed.
- Download button
- Downloads a complete, unmodified, self-contained version of the example to your local hard drive. Usually not active for these exercises.
- Check Code button
- Checks your code for possible problems courtesy of JSHint.
- Run Code button
- Executes the code in the code pane. The live simulation runs in the results pane.
- Show Commentary button
- Displays a description of the example.
- Popup Canvas button
- Like the Run Code button, but the live simulation appears in a separate window. This window contains only the simulation and nothing else, so you can easily make the simulation full screen (F11 on Windows Chrome).
- Save button
- Saves a copy of the current contents of the code window in your browser. There is only one save slot shared by all examples, so saving overwrites whatever was saved last. It's a good idea to use the save button if you think your code might crash the browser session (possibly due to an infinite loop).
- Load button
- Restores whatever was saved last to the code pane.
