Rodrigue Byrne
Department of Computer Science
Memorial University of Newfoundland
St. John's, Newfoundland
A1B 3X5
Keywords: teaching programming, Web courses, Java applets, program interpreter toolkit
The Teaching Programming Toolkit is a collection of Java packages designed to create executable programming examples and environments on a Java enabled Web browser. The toolkit provides a generic high level interpreter, a component to display the code of an executing program, a terminal emulator, a component to display the variables of the emulated program, and a parser of the Pascal programming language. The toolkit is designed to create applets that demonstrate the execution of programs on a Web page. These applets enhance the Web pages, by allowing the student to see the dynamic behaviour of an executing program. The toolkit can of course be used to craft applets for use in many other CS courses.
The first applet created using the toolkit provides most of the functionality of a simple Integrated Development Environment (IDE). The IDE applet can be used to teach many of the program concepts required for a CS1 course. The IDE applet provides a code view window, a control panel, and a terminal window. The program's source is displayed in the code view window. The program's input or output occurs in the terminal window. The control panel contains buttons that control how the program in the code view window executes. An additional window can be opened to give a trace of the program's variables.
The IDE applet created using the toolkit is described in Section 2. Section 3 discusses other possible applets used for teaching. The main architectural features of the toolkit are presented in Section 4. Section 5 describes performance and reliability issues with Java Virtual Machines. Section 6 briefly discusses the development effort, and the benefits/liabilities of Java and the JDK environment. As usual the last section gives the conclusions and the future directions for the development of the toolkit.
A mini-IDE created from the toolkit allows many of the concepts introduced
in a CS1 course to be presented on a Web page.
Figure 1 show a screen shot of the IDE applet.
Figure 1: An IDE applet
The IDE contains the following four areas: a mode selection area on the top,
a status and control area on the middle left,
an area to display a code view on the middle right,
and a program input/output area on the bottom.
The top three button select either a running/debugging mode,
a compiling mode, or an editing mode.
The controls on the middle left provide features typical of a GUI based
debugger. A brief description of the controls is provided in
the following table.
| Control | Description |
|---|---|
| Start/Continue | Starts or continues execution of the program. |
| Stop | Stops execution of the program, the program's execution can be continued. |
| Step | Executes the current statement. If the statement is a routine call, then the next statement is the first statement of the routine. |
| Next | Executes the current statement. If the statement is a routine call then, the entire routine is executed. |
| Reset | Stops the execution and resets the program's state so that the program can start from its first statement. |
| Set Break | Sets a break point on the currently selected statement. |
| Clear Break | Clears a break point on the currently selected statement. |
| Clear Output | Erases the program's input/output window. |
| Show Env | Open a window that displays a trace of the program's variables. |
Figure 2 shows the environment display window. This window shows a trace of a program's execution. Each row corresponds to the state of the program after one step. Unassigned variables are initial set to NIL.
Figure 2: A program's environment
In addition to the ability to display a trace of the program's variables,
another important feature of the IDE applet is the ability
to display different representations of the program's variables.
This ability enables the creation of simple algorithm animation examples.
Figure 3 and Figure 4 shows an array depicted as a series of balls
and a series of bars respectively.
This display can be used to animate sorting algorithms.
Figure 3: An array shown as a sequence of labeled balls.
Figure 4: An array shown as a sequence of bars.
The Celsius to Fahrenheit program, shown in the code view
of Figure 1, is one of the classical introductory programs.
Since this IDE applet can be embedded in any Web page, the applet
and accompany text can be used to illustrate many of the concepts
in a CS1 course. Other concepts are:
 | programming language constructs (e.g., the IDE loads a program
with a while loop, and the text explains how the student can interact
with the IDE to show the behaviour of the while statement),
| specific algorithms (e.g., the quicksort algorithm),
| specific data structures (e.g., a stack),
| formal analysis (e.g., pre- and post- conditions), and
| debugging techniques.
| |
The following text is an example of the contents of a Web page that would accompany the Celsius to Fahrenheit program. This page could be the introductory part of a programming course.
|
In addition to the text on this page, there is a program contained in the IDE applet to calculate a table of Celsius to Fahrenheit conversions. The goal of this page is to introduce the operation of the IDE applet and the behaviour of the program. To see a complete execution of the Celsius to Fahrenheit program, click on the Start button in the IDE applet. The program's output should appear in the Program's Input/Output area in the IDE applet. To see the program execute only a single statement, click on the Step button. Notice that there is a mark showing the next statement to be executed.
.
.
.
|
It is important to note that knowledge of the toolkit is not necessary to use the IDE applet. A user of the applet would only need to know the Pascal programming language. The HTML tag for the IDE applet is:
<applet code=ide.class archive=Mun.zip width=550 height=500> <param name="program_source" value="first.p"> <param name="display_environment" value="off"> </applet>The first.p file is the source of the sample Pascal program.
Providing an example program where some of the expressions or statements need to be filled in can be an effective teaching technique. The toolkit provides the ability to describe a program with regions that need to be completed. Figure 5 shows such a program. The text typed into these regions is complied and merged in with the data structure used to interpret the program. This feature allows the instructor to construct examples where the student must complete to create a fully functioning program. Thus, an incremental approach in teaching many programming concepts can be followed (i.e., the student can modify code snippets without having to completely master the programming language's syntax).
Figure 5: A partial program that the student must complete
An IDE applet is not the only possible applet that can be created with the toolkit to aid in teaching programming. A brief description of other possibilities follow.
The IDE applet provides extensive control to the user over the program's execution. In some cases, not all of this control is required. This observation leads to the design of applets with more restrictive controls or views of the program's state. Some of the possible restricted applets are:
| an applet with a code view, input/output view, and a start/stop button
(e.g., this applet could be used in an introductory section to
illustrate the behaviour of a simple program without having
to explain the operation of the IDE),
| an applet with a code view, a display of a set of variables,
and a start/stop button (e.g., this applet could be used to introduce program tracing),
| an applet with only an input/output view,
| and an almost complete IDE applet with restrictions on
the active controls (i.e., Set/Clear Break would not be available).
| |
Restricted IDE applets allow for the creation of more specific examples that are not cluttered with extraneous details. A more gradual approach can be used, where new features are only introduced as required. An algorithm animation applet illustrates an example in which reduced control would be beneficial. The student could simply press a play button. While the applet with only an input/output view could be implemented by a Java applet directly or a Java Script program, it does allow the instructor the possibility to staying in the same framework.
Demonstrating concurrency in operating system courses can be challenging. The toolkit can construct an example containing two code views and a display of the common program variables. Many concurrency issues can be demonstrated with this applet. For example, the problem of implementing correct mutual exclusion algorithms can be demonstrated by providing a sample algorithm that the students can interactively executed to see where problems arise.
Another possible role for the toolkit is in the construction of online quizzes. Since the interpreter in the toolkit has complete control over the execution environment, a program with statements that have to be filled-in could be used as part of an online quiz. The student would have to complete the missing section, then start the interpreter, the online quiz applet could then examine the programs state and determine if the student had answered correctly. The result could be reported to the student and/or sent to a marker.
| display the execution of a high level programming language,
| display the values of the program's variables,
| display an animation using the program's variables,
| control the execution of a program, and
| parse and compile a high level programming language.
| |
The main architectural feature of the toolkit is a class that represents the abstract syntax of a programming language. Derived form this class is a set of subclasses where each subclass represents a high level language construct. These classes provide the basis for a set of packages that:
| display the concrete syntax of the program in a window, and
| execute the behaviour associated with each construct
(e.g., a for statement object will evaluated its body a fixed number of times).
| |
The requirement of using readily available Web browsers mandated the choice of the Java programming language. The object-oriented, exception handling, and thread features of the language all proved invaluable in the system construction. As an example, controlling the execution of the interpreted program is implemented by using a thread to execute the program and a thread to control the execution.
The Java programming language and the Web browser that implement the Java Virtual Machine are still relatively new. This newness implies that the computer environment used by students who are viewing the Web pages containing the IDE applet must be tested. One of the hopes for Java is its ability to run anywhere, unfortunately this is still not universally true. The IDE applet appears to work well on Netscape 4.0 and Netscape 3.0 on a Linux machine. There are problems with Internet Explorer 3.0 on Window95.
Another issue for any Web based course where the students connect over low speed lines is the size of the applet. The IDE applet is 924517 bytes (around 11 minutes of download time for a 14.4 modem). This size can be reduced, but even with a 50 percent reduction download times would be a concern. Where download times are a problem, a copy of the applets and associated pages should be made available so that they can be downloaded once.
The IDE applet has been tested on PCs ranging from a 486/75MHz to a PentiumPro/200MHz with acceptable performance.
The toolkit was developed over the 12 month period from September 1996 to August 1997. The toolkit contains approximately 30,000 lines of Java code (including comments). The ANTLR parser generator by the MageLang Institute was used to generate the Pascal parser. Adding languages similar to Pascal should only require the development of parser for that language. Most of the code was written by three fourth year computer science students.
I believe the feature set of Java allowed the project to proceed fairly smoothly with relatively novice programmers. Java's threading and OO support were major assess. Threading allowed the separation of the interpreter from the debugging controller. The architecture of the interpreter depended heavily on Java's OO features.
While the Java language seems to be a very effective tool, the implementation of the development environments and API class libraries require more work. The AWT class library in particular is not very stable. Developing applets requires careful testing of AWT features on the different target browsers. Currently, developing applets that work on the most common requires the 1.02 version of Java. This is a problem since key features of the AWT class library have changed in Java 1.1 and beyond.
The Teaching Programming Toolkit has been used to create an IDE applet, which in turn can used to demonstrate many of the concepts required by a CS1 course. Although the system is relatively new and under development it appears to be stable. However the system has not yet been used for a course. The toolkit is available in source code form under the GNU Copy Left license from the author.
The following areas are under active development:
| improvement in the handling of syntax errors,
| algorithm animation support with more data viewers (e.g., linked-lists),
| parsing and translation for a subset of Java, and
| general code clean up.
| |
Name: Rodrigue Byrne
Department: Department of Computer Science
Institution: Memorial University of Newfoundland
Postal address: St. John's, Newfoundland, A1B 3X5
E-mail address: rod@cs.mun.ca
Web address: http://www.cs.mun.ca/~rod