When the user starts viewing an interactive tutorial page, the screen appears as shown in Figure 2.2.3.a.

Figure 2.2.3.a: Interactive Tutorial Page.

The table of contents has been reviewed in the Basic Page. The 'Tool Bar' has been reviewed in the UI overview. Inside the main panel there are two smaller panels. The left panel contains a sample bit of code, the right one contains the sample code's output.

The screen consists of three subsections, the only difference between the interactive and basic pages is what is inside the main panel. Inside the main panel are two boxes with two buttons inbetween them. The left box contains example code written by the tutorial author. This example code may be directly edited by the user while they are viewing this tutorial page. Where as the right box contians the output of the example code, after it is run. In order to run the example code, the 'Run' button between the two boxes must be clicked. The 'Reset' Button reverts the example code to what was originally published by the tutorial author. Below the main panel are 'Prev Page' (Previous) and 'Next Page' buttons. These work exactly the same as explained on the basic tutorial page.

From the initial view, Figure 2.2.3.a, the user clicks 'Run'.

Figure 2.2.3.b: Run Interactive Code.

The output of the run code appears as seen in Figure 2.2.3.b. Whether the output is stdout, or stderr it appears in this box.

From Figure 2.2.3.b, the user then actively changes the sample code in the left box to something they want to try out. The user then clicks the 'Run' button once more.

Figure 2.2.3.c: Change and Run Interactive Code.

The output of the changed code is placed in the right box, while not clearing the prior output. (Figure 2.2.3.c)

The user then clicks the 'Clear' button, erasing the run code, leaving the right box blank. (Figure 2.2.3.d)

Figure 2.2.3.d: Clear Run Code.

The user then clicks the 'Refresh' button, reseting the sample code to it's original settings. The page appears the same as it did when first viewed. (Figure 2.2.3.a)