2.4.5 Viewing a Tutorial

The other major aspect of CSTutor is tutorial viewing. In this scenario the user has already opened a tutorial as covered in Section 2.4.1.

2.4.5.1 Page Navigation

The tutorial viewer home window mirrors the Roadmap view explained in Section 2.3.3. Figure 2.4.5.1a shows a sample window.

Figure 2.4.5.1a: Tutorial viewer with roadmap.


The user starts the tutorial by clicking on the first square, causing the system to pop up a new window with the contents of that section. The basic page viewer window is shown in Figure 2.4.5.1b. The page navigation window consists of a simple toolbar and a content area as depicted in Figure 2.4.5.1b.

Figure 2.4.5.1b: Blank Tutorial Viewer window with toolbar.


The toolbar buttons correspond to the following actions:

Print - prints the page content exactly as it appears in the window.
First - opens the initial tutorial page in the content panel.
Prev - opens the tutorial page that immediately precedes the currently open page. If the current page is the first in the tutorial, it remains unchanged.
Next - opens the tutorial page that immediately follows the currently open page. If the current page is the last in the tutorial, it remains unchanged.
Last - opens the final tutorial page in the content panel.
Chat - opens a new chat window for the room corresponding to the current tutorial. The user then has the ability to discuss the tutorial with any other users in the same section, as explained in Section 2.5.1.
Message Board - opens a new window containing the message board topic for the current tutorial, as explained in Section 2.5.3.
Favorite - adds the current tutorial to the Favorites folder. Section 2.4.4 contains more information about the History folders.

Figure 2.4.5.1c displays the window with the selected page loaded.

Figure 2.4.5.1c: Sample tutorial page.


The user has several options for navigating through the tutorial at this point, including: The user proceeds through each page in the tutorial via any combination of these methods until he has completed it. Quiz pages are covered in detail in Section 2.4.6.

2.4.5.2 Interactive Code Examples

Some pages may include embedded interactive code examples embedded. A sample code display is shown in Figure 2.4.5.2a.

Figure 2.4.5.2a: Sample code segment display


These interactive boxes utilize the Java BeanShell to execute fragments of Java code through the viewer window. They contain sample code that relates to the current tutorial, and allow the user to make changes and recompile the code.

The RUN button executes the code sample and prints the standard output in the OUTPUT box. If there are any compilation errors, the system prints them instead.
The RESET button restores the code sample to its original state if the user has modified it.

A sample code display with output is shown in Figure 2.4.5.2b.

Figure 2.4.5.2b: Sample code segment display with output





Prev: locating a tutorial | Next: taking a quiz | Up: functional | Top: index