JavaScript for Simulation Education

Neal J. Sample and Mark G. Arnold
Department of Computer Science
Box 3682
University of Wyoming
Laramie, WY 82071

Abstract

A goal for both on-campus and distance education is how to provide a quality laboratory experience with limited resources. One approach that can help is computer simulation, which allows a student to create a simplified model of a complex system and observe the consequences. This opens up many possibilities that can enhance teaching and learning, and can help the student develop competence in technical problem solving. Until recently, however, most computer simulations required software available only in specialized labs on campus. Successful deployment of web-based computer simulations enables more cost effective delivery of quality laboratory material to both on- and off-campus students.

Acknowledgments

This project was supported in part by a grant from the Center for Teaching Excellence at the University of Wyoming. Some of the web pages shown at http://plum.uwyo.edu/~comporgn were developed by Susan McClendon and Russel Ingram. The authors would also like to thank the students in COSC 2150 at the University of Wyoming who have been "guinea pigs" for the web based materials described here.

Objective

The Computer Organization class at the University of Wyoming uses a model of a simple computer to teach students the relationship between hardware and software. To learn this academic subject matter, students must understand the concepts of interpreters, the "fetch/execute" cycle, and machine language. These concepts, which apply to all computers built during the last half century, are often difficult for students to learn on a complex machine like the Pentium(TM). The web-based computer simulator we built makes these concepts much more understandable. The simulator gives the student a chance to observe and experiment with a simulated machine. On the web, the student can manipulate the internals of an entire computer. For instance, the memory and registers of the simulator can be changed on-screen, something that would be impossible with a physical device. Because the material is web-based, it can be used in both traditional and distance education settings.

Perspectives

Simulation can be used to teach most academic subjects, but it is especially helpful in subjects like science and engineering where computer simulations are commonly used by professionals. In our case, we are using a computer running a JavaScript program from the Internet to simulate the actions of another much simpler computer. Our purpose for using this simulation is to teach the enduring concepts of Computer Science. We need to make a distinction between the Computer Science concepts (such as the fetch/execute cycle) we are trying to teach and the computer technology (such as Netscape) that enables us to do so. Our pedagogical challenge is to use the latest computer technologies (such as JavaScript) to teach the enduring concepts of Computer Science. In this regard, the danger we face is the same as anyone who is trying to use the Internet to teach an academic subject: we do not want the medium to become the message. But since our subject is called Computer Organization, we need to emphasize this distinction.

We will describe the lessons learned about our simulator from two semesters of experience in the Computer Organization class. In the first semester, many students said that the simulator was somewhat difficult to use. In part this was due to factors beyond our control, such as the limited resources (diskless 386s and 486s running Netscape) available to our students. As to the factors that were within our control, we concluded that part of the problem was that we did not fully exploit the unique properties of our web-based tool. As a consequence of this realization, we created a series of more focused exercises, which we used the second semester. Student reaction to these exercises was favorable. We plan to continue to improve our simulator, and deploy additional exercises based on the positive feedback we have received from students.

Methods

In order to make our vision of a web-based Computer Organization simulator a reality, we needed a language in which to write this fairly complicated program which could run on the majority of web browsers. We chose JavaScript, which is a full-featured procedural programming language, very similar to Pascal and C. It is available on most current web browsers (from both Netscape and Microsoft). Like its kindred language Java, JavaScript allows software distributed over the web to run on a student's local workstation by the simple act of browsing. Quite unlike Java, JavaScript is not object-oriented; JavaScript is much easier to learn and much easier to use for the development of innovative courseware. Anyone who has programmed in C or Pascal and who is mildly familiar with the HTML used to create static web pages can use JavaScript to create dynamic web pages that interact with students.

Although this approach will be of special interest to those who teach computer science, it should also be of general interest to anyone contemplating the development of interactive web-based courseware. Because the use of JavaScript does not require any more resources than text-only web pages, it is a logical choice for development without a large capital investment. Also, because JavaScript is so flexible, programs for everything from calculus to geophysics can be built with the same simple tools. JavaScript holds great promise for development of various laboratory tools that can be used for effective local and distance education.

About This Paper

This paper is divided into five main sections (I-V). While they do not have to be read sequentially, it makes good sense to so. The first section of the paper reflects on some of the advantages of simulation education in general. The second section is about our experiences in developing a complex simulator and delivering it to students. The third section is a brief introduction to JavaScript, the language that our simulation was developed with. The fourth section presents some critical observations and recommendations. The fifth section gives students' comments about our simulator. The last section is an appendix that explains more about the PDP-8, the machine which our simulator simulates.

	I.    Simulation Education	(read: "Why should I simulate?")

	II.   Lessons Learned		(read: "Was it really that easy?")

	III.  JavaScript		(read: "Can I do this stuff?")

	IV.   Conclusions		(read: "What does it all mean?")

	V.    Students' Comments	(read: "How did the students like it?")

	VI.   References    		(read: "Where can I find out more?")

	VII.  Appendix			(read: "Tell me more about the PDP-8!")

I. Simulation Education

The practicality of computer simulation (such as the one we implemented) has been made possible by the explosion of Internet access in the last decade. The ability to deliver content without regard to time or location make Internet simulations especially valuable.

Cost

The first reason to look at Internet-based simulation is that the cost can be so low. There are three main reasons that simulation is less expensive than the real thing: there is no equipment to buy; there is no equipment to maintain; and access is not restricted by physical equipment locations.

While there are costs associated with the development of simulations, which we will discuss in the next section, the costs of access are relatively low, and dropping all the time. Even if students do not have Internet access in their homes/dormitories, simulations can still be accessed from general purpose labs on campus.

It is important to realize that the cost of using a simulation can be many several orders of magnitude less than the cost of the actual object being simulated. Imagine that a computer science instructor wanted to teach her students about parallel processing. She could simply purchase a top-end supercomputer to demonstrate the concept. Of course, few institutions of higher education could afford such an extravagant purchase for any situation, much less as part of an independent exercise for a single class. On the other hand, with some effort expended by the instructor, a reasonable facsimile of the original supercomputer can be developed. While the speed of the simulation would not approach the speed of the original, the functionality would be available to demonstrate concepts to the students. (Many of our examples come from the realm of computer science, as that is our background, but simulations can just as easily demonstrate chemical processes, geological events, or economic interactions, etc.)

There was an unforeseen cost advantage from our own PDP-8 work. The simulator that we developed mimics equipment that is ideally suited to teach the introductory concepts in our Computer Organization class but that is no longer available through standard purchasing channels. The actual equipment is also fragile and costly to maintain. We now have a mechanism that can overcome some of the limitations imposed by the failure of aging hardware so that the superb design that C. Gordon Bell created three decades ago can continue to illustrate the foundation concepts in Computer Organization.

It is sometimes difficult, especially with swelling class sizes, to find seats for students in front of actual lab equipment. When using the web for deployment, a finished simulation can essentially be distributed to one user or a thousand without an increase in cost.

Location

Simulation education can help overcome problems imposed by time and location as well. Some students, especially students with strict commitments outside of their academic programs (i.e., families, work, etc.), cannot easily bend their schedules around limited lab hours. Students who commute also have trouble with lab locations. In these situations, the ability to use a simulation on the Internet at any arbitrary time and place can be invaluable. With simple and clear online instructions (supplemented by appropriate printed documentation), students can use simulations without much instructor support. Our experience has shown that it can be a task in itself to get students familiar with web tools such as Netscape, and that some instructor interaction will invariably be required.

There are some situations were traditional lab exercises demand a restriction on resources and locations. For instance, certain Chemistry laboratory projects cannot be done without dangerous chemicals and specialized safety equipment that is only available in specific on-campus locations. In those situations it would be impossible to give students the ability to complete projects outside of the lab location. With chemical simulations available on the Internet, and simple to rules to guide a series of reactions for a fixed set of reagents, students can perform reactions that were only previously available in expensive labs with expensive equipment and consumable resources.

While simulations could not, and should not, replace all laboratory experiences, there are some which are clear candidates for replacement. In addition to any of those, simulations can be used to augment almost any existing lab course.

II. Lessons Learned

Content of the Computer Organization Class

The Computer Organization class at the University of Wyoming gives a student the opportunity to discover for herself the answer to the most important question she can ask about computer science and engineering:

• "What is the nature of a computer?"

Our web based simulator is designed to expose the student to the details behind this question, and give the student an opportunity to realize what the answer means. This simulator implements the complete instruction set of the PDP-8, a classic small computer that is ideally suited to achieve our pedagogical goals. As the student struggles to understand these details, she may wonder:

• "Why is simple good?"
• "Why the PDP-8?"

Using the Simulator in the Computer Organization Class

Our simulator consists of JavaScript and HTML with seven visible frames:

• "Registers" show the current state of the simulation
• "Flowchart" steps that the student clicks to advance the simulation
• "Assignments, Messages and Simulation Results"
• "Pseudo-keyboard" simulating computer input (used only in later problems)
• "Memory" for storing octal object code and data
• "Memory control" (top right) for interactive modification of "Memory"
• "Load File" textbox for transfer of "object code" into "Memory"

As of the time of this writing, we have used this simulator in the Computer Organization class twice. The first semester we deployed this tool, students used it to write programs in machine language, and the students viewed the simulator like any other Computer Science tool. That traditional computing paradigm did not fully exploit the unique nature of a web-based tool. The URL of the simulator we used that semester is: http://w3.uwyo.edu/~nsample/pdp8/main.htm , which requires JavaScript to use. At the end of the semester, the students wrote a short paper about their experiences with the tool. Many students found this approach somewhat difficult.

Pitfalls during the first semester

Several things became clear to us that first semester we used the simulator.

• The plague of platform independence.
• The need for adequate facilities.
• The need for printed documentation.
• The need for partially directed assignments.

One of the supposed advantages of JavaScript is that it is independent of browser (Netscape or Microsoft), operating system (3.11, 95, NT, UNIX) and platform (Intel, Sun, SGI). For small programs, like the quadratic equation solver illustrated later, this is usually true. For complex programs, like our simulator, there is a tendency for one to use features that are not implemented identically on different platforms. The problem is not so much with the JavaScript language itself (which seems to be fairly consistent between Microsoft and Netscape), but with the HTML in which the JavaScript is embedded. For example, the "Psuedo-keyboard" in our simulator is formed by input buttons in HTML. With Netscape, these are automatically scaled to fit the letter, creating an image of the standard QWERTY arrangement on the screen. On the other hand, Microsoft insists each button be a fixed size, which makes the "Psuedo-keyboard" functional but ugly. Although there are workarounds for such problems, we decided we could only afford at present to support Netscape 3.0.

Although about one half of the class had access to equipment (at home or in restricted labs on campus) capable of running Netscape 3.0 reasonably, the other half had to rely on the facilities provided by our central Division of Information Technology. These later facilities, primarily consisting of diskless 386s and 486s with 640 by 480 video booting from a central server with no laser printers, were just barely adequate to run our simulator. The Division of Information Technology resisted installing Netscape 3.0 on their server for about a month even though Netscape is free to academic institutions.

Some proponents of web-based education advocate that it can be a replacement for printed documentation, such as handouts and textbooks. Perhaps this could be true in an environment with resources to hire enough lab assistants to hold the hands of each student and to provide free laser prints of all HTML pages. In the resource-constrained environment in which we operate, printed documentation is essential. Surprisingly for a sophomore level Computer Science class, many of the students had never used Netscape before. It was necessary for us to spend time in class covering the use of the simulator, and to make handouts that show precisely how to use it. The need for documentation was compounded by the constraints on facilities mentioned above.

The three pitfalls mentioned above are not unique to our simulator in JavaScript. Anyone developing web-based materials in a resource constrained environment, such as a state supported university, is likely to face similar difficulties. To a great extent, these issues were beyond our ability to control. The final issue though was totally at our discretion: what should we have the students do with our simulator? During that first semester, we viewed the Netscape/simulator combination as a program development tool that students could use to write programs from scratch. Therefore, we gave the students very open ended problems to solve. The pitfall with this is that the browser provides no direct way for a student to save her work to disk. Since interesting programming assignments often cannot be completed at one sitting, we resorted to making the student use a copy and paste approach. She would use the mouse to mark the version of the program she was working on, and then use the operating system to copy it and paste it into a notepad window, from which she could save it to disk. The opposite operation was required to bring this information back into the simulator at a later time.

Revised Assignments for the Second Semester

As a result of the student feedback, the assignments were modified so that a student used the simulator to conduct more focused experiments with machine language. The student edits (if necessary) the machine language program given by a text box. (The example program given in http://plum.uwyo.edu/~comporgn/web0.html is already correct, and does not need to be edited.) Next, the student sets up the registers appropriately (often by hitting the "ZERO" buttons, although any valid octal value can be entered into each register). Then the student hits the "Load File" button. The student repeatedly clicks on the four steps of the "fetch/execute" flowchart to simulate what the hardware does. Finally, the student fills in a HyperText Markup Language (HTML) form to answer specific questions about what she observed, and submits answers to the instructor via email. Student comments relating to these more focused experiments are given in section V.

While the new assignments are more focused than the original ones, they are still much more open ended than the typical drill and practice that one finds on the web. This is possible because the simulator allows the student the opportunity to observe how the simulated computer will malfunction when the student makes a mistake. This also allows students to find different ways to solve the problem; they are not forced into specific conclusions.

Future Work

At present, we provide a separate PDP-8 assembler on the web ( http://www.cs.uwyo.edu/~marnold/asm8.html ). The assembler is written in JavaScript without frames and has two text boxes (one for "source code", and the other for "object code" in octal). When the student clicks on the "Assemble" button, the assembler automatically converts the "source code" to the "object code". The assembler is not connected to the simulator in any way. This makes the process the student goes through to assemble and run a PDP-8 program terribly cumbersome:

• The student must enter the source code into the "source code" text box.
• The student clicks on the ASSEMBLE button;
• The student fixes syntax errors and clicks on ASSEMBLE again;
• The student marks the "object code" with the mouse and copies it;
• The student switches (ALT-TAB) to another browser window;
• The student pastes the object code into the "Load File" of the simulator;
• The student uses the simulator to conduct experiments with the object code.
• The simulator produces results, which the student has to mark and copy into the clipboard.
• The student then switches (ALT-TAB) to a notepad window, where the simulator results can be saved to disk or printed out for turning in.

A top priority for future work is to merge the simulator and assembler into a single web page. Instead of making the student copy the object code into the "Load File" text box, the assembler will directly put the object code into the simulator's memory. The problem with doing this is that there is not room on the screen for everything. To overcome this, we propose making one of the frames scrollable with the assembler and other new options hidden below the visible screen. Also, we may stop supporting the lowest resolution display (640 by 480) that the current simulator supports.

A related goal is to put the textbook on-line, with object and assembly code examples linked to the simulator/assembler the same way the proposed assignments will be. This will allow a student who does not understand a particular example in the textbook to try it out interactively simply by clicking on a link.

The current simulator only supports polled input and output. An important topic in the Computer Organization class is interrupts. We hope to expand the simulator to provide a good visualization of how interrupts are processed.

We had hoped that completed simulator assignments could be automatically graded, giving students instant feedback. This proved problematic, and in the end most were graded manually. One thing that we realized in the middle of the second semester is the need for data validation (a job for which JavaScript is well suited). The automatic grading program was deducting points when students made typos, such as using the letter "O" instead of the digit "0". With data validation code that checks a student's reply prior to submission, these problems were minimized. An important area for future work is to improve on our first attempts at data validation and automatic grading.

We currently provide the student feedback about grades with a web page that is a mixture of CGI and email. The student enters her email address, and the CGI script validates the student is currently enrolled in the course. If it is valid, the CGI script sends an email message to the student with current grade information. We choose this solution because it is at least as secure as a fully CGI solution (that provided instantaneous feedback with passwords maintained in the CGI server) without our having to maintain passwords. (The passwords for email are maintained by our central Division of Information Technology. ) The grade information is manually downloaded from a spreadsheet, and is not automatically tied to our simulator. An area for future investigation would be to have simulator assignments be automatically graded and recorded.

Lower priority issues that may be addressed in the future include making the simulator/assembler support multiple platforms (Intel, Macintosh, and UNIX) and multiple browsers (Netscape and Internet Explorer). Although the current simulator runs on Internet Explorer, the appearance of the "pseudo-keyboard" is very unattractive with that browser. A low priority goal is to make a version that looks better on Internet Explorer (perhaps using the image of a keyboard instead of the current buttons, which Internet Explorer refuses to treat reasonably.) A reduced version of the current simulator runs on Macintosh, but the memory requirements of the current version used by students are too large for the Macintosh. Many of the assignments do not need all of memory, and so it may be possible to provide versions that work on with Macintosh. Also, students have complained that the simulator is not usable with browsers provided by commercial services, such as America Online. It is unclear whether we will ever have the resources to support all these platforms.

Currently, the student has two choices to run a PDP-8 program: by clicking on the buttons that represent the steps of the fetch execute cycle (which we used exclusively during the second semester); or by clicking on the RUN button (which executes many instructions per second). The latter gives too much detail for large programs, but the former may not give enough. A low priority area for future work is to include more options for simulation, such as allowing a student to choose between speed and visual effect. For large simulations, it might be helpful to turn off all display, but early in the semester the visual effects are important. A related idea is to use the timer capabilities of JavaScript to allow automatic execution of PDP-8 instructions at a slow enough pace (say every two seconds) for the student to visualize what is going on.

III. JavaScript

We hold that JavaScript is an excellent way to deliver web-based simulations. The reasons to use JavaScript parallel the reasons to use simulations in general: ease and cost. While there are some compiled languages that are more extensible than JavaScript, including Java and ActiveX, their use generally comes at a much higher cost. How a simulation is built can be just as important as what the simulation does. A poorly written simulator is difficult to change, fix, or extend.

Cost

Simulations written in the JavaScript language can be developed on any computer that has the capability of editing a text file. Unlike the developer who chooses to use Java, the developer who chooses to use JavaScript has no compiler to purchase, install, or learn how to use. There are some Java compilers that are freely available, but the Java standard is continually changing and has taken several distinct differing paths. The free compilers usually implement only one these different "flavors" of Java. Since JavaScript is an interpreted language that does not need to be compiled, the language has been implemented in a fairly consistent way across different Internet browsers.

Moreover, since JavaScript is not compiled, the only program required to test a JavaScript application is a JavaScript enabled Internet browser. At least in their initial versions (some are like this still today), the compiled languages had built-in restrictions that prevent them from reading or writing to a local hard drive. That policy makes good sense for security reasons, but the restrictions have the unfortunate side-effect of requiring a developer to test code within an integrated development program or upload the complied code to another site. JavaScript also cannot read or write to a user's hard drive for security reasons, but unlike compiled languages, such as Java, JavaScript can be loaded directly into a browser from the developer's local hard drive for testing.

Finally, a JavaScript programmer does not need an integrated development environment or a dedicated debugger at any point in the development process. Since most Internet browsers today will also view files that are stored on a local hard drive, a text editor is the only other tool a designer needs besides the browser. According to market reports, more than 95% of users have JavaScript enabled browsers. Almost as many users have browsers that support the compiled Java standard, but Java is problematic for the reasons described above. While there are other compiled standards and scripting languages, the majority of browsers do not support them. These facts taken together lead us to conclude JavaScript is the proper language to develop web-based simulations that can can be accessed by the majority of students.

Development

The ability to develop effective teaching tools quickly and cheaply is critical to effective roll-out of Internet simulations. If simulations cannot be developed with a minimum of expense in time and resources, they do not deliver a net gain to instructors or users.

With a code base developed over a few months time, we have been able to develop simple extensions and changes to existing simulations literally in a matter of minutes. While it is not realistic that all developers could do things so quickly, with some effort even novice programmers can develop web-based simulations in a short time. We will walk through a short example that shows how a simple concept can be delivered to the students via the Internet.

The example we have chosen for demonstration is a program that solves quadratic equations. While this example is not as complex as a simulator, it illustrates the basic programming techniques required in JavaScript. There is a further extension of the program that "guides" students to answers, rather than simply returning the roots of a quadratic. The program is rather limited, but is available for use (http://www.cs.uwyo.edu/~nsample/quad.html). The extended version that implements "root guessing" is available on the Internet (http://www.cs.uwyo.edu/~nsample/quadguess.html). There is no documentation for these programs available on the web. They were not designed for use, only for demonstrating how easy it is to create JavaScript code.

Perhaps the second program could be used to allows students to check their answers. Perhaps it could be further extended and documented to be a student's first exposure to solving quadratic equations. We do not really know. The example is less to teach students of mathematics than it is to teach students of JavaScript!

The first thing a developer needs is a basic understanding of HTML (Hypertext Markup Language). Once a developer understands the basics of HTML, the addition of JavaScript to web pages is very simple. The instructions that follow assume that the reader has a rudimentary understanding of HTML.

Example Script

For a better understanding of the following instructions, the reader should be sure to examine the first example program ( http://www.cs.uwyo.edu/~nsample/quad.html ) and understand its layout. (With most browsers, this can be done with an option like View/Document Source.) This example will show that the HTML code is what determines how the web page will look. The JavaScript exists independent of the HTML and does not interfere with the layout of the page.

The first thing that has to be done with this quadratic equation solver is to allow for user input. The inputs in this case are the coefficients of the x terms. The interface is a simple text box that is written in HTML. The code does not require any JavaScript or programming, just the HTML:

<pre>

Enter Coefficient of X^2 here --> <INPUT TYPE=text SIZE=5 NAME=inputbox1 value=0><P>

Enter Coefficient of X here ----> <INPUT TYPE=text SIZE=5 NAME=inputbox2 value=0><P>

Enter Constant here ------------> <INPUT TYPE=text SIZE=5 NAME=inputbox3 value=0><P>

</pre>

These few lines of HTML are enough to set up a typing area for the coefficients of the quadratic. The second step of the process is to set up a space for the outputs, the roots of the equation. It only takes a few lines of HTML to do that as well:

<pre>

Root1 --> <INPUT TYPE="text" SIZE=50 NAME="outputbox1"><p>

Root2 --> <INPUT TYPE="text" SIZE=50 NAME="outputbox2">

</pre>

With the input and output fields ready for use, the only thing remaining is the activation key. In this case, we have chosen a simple button with the label "SOLVE." Once again, there does not have to be any actual JavaScript code to make the button. However, there is an additional bit of code that causes the button to activate JavaScript code when the user clicks on that button:

<INPUT TYPE=button VALUE="SOLVE" onclick=solve_quad(this.form);>

The VALUE="SOLVE" in the above code indicates that the text "SOLVE" will appear on the face of the button. This is still part of standard HTML. The code also tells the button what to do when it is clicked. It should run the function "solve_quad," using the current page as the scope (indicated by the "this.form" argument to the function). After the user enters the coefficients of the quadratic equation and clicks on the button, this JavaScript code executes:

<SCRIPT LANGUAGE="JavaScript">

//Function - Solving a Quadratic Equation
function solve_quad(form) 
{
    var a,b,c,              //coefficients of the quadratic equation
            d;              //discriminant

    //Is it is a quadratic equation? -- simple error checking 
    if (form.inputbox1.value == "" || form.inputbox1.value == " " ||
        form.inputbox1.value == "0")
    {
      alert("("+form.inputbox1.value+"x^2 + "+form.inputbox2.value+"x 
            + "+form.inputbox3.value+") is not an Quadratic Equation");
      return;
    }

    //Convert all input values to numbers
    a = parseFloat(form.inputbox1.value);
    b = parseFloat(form.inputbox2.value);
    c = parseFloat(form.inputbox3.value);

    //Calculate the discriminant
    d = Math.pow(b,2)  - (4*a*c);
    if (d >= 0)                     //this solution has real roots
    {
        form.outputbox1.value = -b/(2*a) + (Math.sqrt(d)/(2*a));
        form.outputbox2.value = -b/(2*a) - (Math.sqrt(d)/(2*a));
    }
    else                            //this solution has imaginary roots
    {
        form.outputbox1.value = -b/(2*a) + " + " + Math.abs((Math.sqrt(-d)/(2*a))) 
            + "i";
        form.outputbox2.value = -b/(2*a) + " - " + Math.abs((Math.sqrt(-d)/(2*a))) 
            + "i";
    }
}

</SCRIPT>

JavaScript functions are set off from the regular HTML code by the tags in lines 1 and 39. They indicate that the code which appears between them is a special script, in this case JavaScript. The function and its inputs are in shown in line 4. Note, the inputs passed by the button press must be type-checked by the programmer; JavaScript does not do any type-checking until runtime.

The variables are declared in lines 6 and 7. These variables do not need to be declared, as the JavaScript runtime system will create a new variable dynamically the first time it is used. It is still good practice to explicitly declare variables. Another note: the variables do not appear to be typed. Every variable in JavaScript is initially treated as a string, though numeric operations work properly if numeric values are assigned to a variable. Since JavaScript is so flexible with variables, the assignment "a = 7;" can be followed by "a = 'TestString';" without complaint or error.

Lines 10 and 11 perform a simple error check on the input data. The location "form.inputbox1.value" is an HTML location. It was created in the first lines of code included in this example. The comparison functions, as with the rest of the syntax, is similar to the C language.

Lines 13 and 14 warn the user if she did not input a quadratic equation. The input testing is by no means complete, but should give the reader a feel for the programming possibilities. The "alert" call sends a message to the user if her input values were not correct. On line 15, there is a "return" statement that ends the execution of the function, just like C.

Lines 19, 20, and 21 convert the input values into numeric values and stores them in temporary variables. While the conversion might not be necessary, there is a risk that the values will be treated as simple strings and not numeric values. The use of the built-in "parseFloat" function (for real numeric values) assures that the values placed into the variables will be numeric. There is a similar "parseInt" function for integer values which we do not need here, but which is very useful in our simulator.

Line 24 calls a function from the built-in math library to calculate the discriminant. The calculation is straightforward. While this is a very simple equation, functions of arbitrary complexity can be computed in JavaScript, for example, discrete time analysis for predator and prey population simulations.

Lines 27-28 and 32-35 show how easy it is to generate the output. By simply assigning a value to the HTML location specified by "form.outputbox1.value," the user sees the result of the calculation performed by the script.

IV. Conclusions

This project has shown that it is possible, with a minimum of resources, to develop quality web-based simulation tools using JavaScript. This new Internet simulation paradigm provides many opportunities to improve both teaching and learning. The use of the Internet makes this quality laboratory material available to both on and off campus students. The Internet can deliver material to students without regard to time or location. There is no new equipment to buy or maintain, and access is not restricted by physical equipment location.

We developed a simulation of the PDP-8 for use in the Computer Organization class at the University of Wyoming. Part of the success of our simulator in achieving its educational goals was based on the fact we chose to simulate the simple PDP-8. Unlike simulating an excessively complex machine that would confuse the student, the PDP-8 illustrates the fundamental concepts of machine language in a straightforward way. Also, its small size makes implementing the PDP-8 simulator in JavaScript a reasonable task. Our first semester of classroom use pointed out several pitfalls, which we tried to solve the second time we used the simulator. The second time proved much more helpful to students, but there are still many areas in which we plan to improve the simulator and accompanying web based materials.

JavaScript was invaluable in this incremental development process. Originally, we had not conceived of the more focused experiments we introduced in the second semester. Despite the fact that the simulator had originally been designed to be used for highly open ended problems, we were able to modify it quickly to facilitate the more focused exercises deployed during the second semester. We have given a short example here of how simple it is to program in JavaScript. Although our actual simulator is much more complex than our example quadratic equation solver, the later illustrates the major features of JavaScript.

We have shown that a JavaScript based simulator is a powerful teaching tool for Computer Science concepts. We believe that it should be possible for teachers in other disciplines to implement analogous simulators using JavaScript. Given its low cost and wide availability, we feel JavaScript is the best language for deploying such educational simulators on the web.

V. Students' Comments

During the second semester, students used our simulator (with the more directed assignments discussed earlier) in the Computer Organization class at the University of Wyoming. At the end of that semester, students were asked to write about what was most important to them in learning the material in this class. Of the thirty students in the class, thirteen chose to mention our JavaScript-based simulator (which many of them refer to as the "Netscape simulator".)

We have included the comments so that readers of this paper would know what the simulator was really like, according to the students. After all, the ability of the simulator to help teach the students is the only thing that matters. Their comments relating to the JavaScript-based simulator follow:

• "This simulator allowed me to actually view the process of a computer following the Fetch/Execute Cycle in slow motion and helped me observe exactly how a certain instruction behaved and was implemented by the computer. The simulator also helped me learn the exact steps of the Fetch/Execute Cycle. The Netscape simulator was very helpful for me because I learn best by watching things in action. Watching the simulator carry out my commands created a deeper understanding of the computer"
• "A netscape simulator of the PDP-8 was used in much the same way as the programming assignment simulator, by loading program ML into the simulated memory and then stepping through the Fetch/Execute Cycle. A visual "Traceout" was given in both cases to actually see what each instruction did with both the memory and the registers of the simulators. The Web Assignments were given through access of a Netscape home page and consisted of partial program ML so that each student could learn the concepts of the coarse [sic] by filling in the missing links to the program. Each of these assignments were designed in such a manner that the code could be figured out from class lecture material, but provided an educational opportunity to experience how instructions actually worked in a real machine. It's this hands on experience, I think that makes the Web assignment and also the PDP-8 programming assignments such powerful learning tools. The use of these tools provided a refresher of instructions and concepts of computer methods each time an assignment was given..."
• "Using the simulators in this class further clarified what we were learning. Instead of just doing something on paper or listening to an instructor tell you about it, you actually get to see what happens when certain instructions execute, and how everything changes. In order to accomplish these types of assignments, you have to think on a different level than usual. Seeing these things happen right in front of you as you entered input really made everything that you saw in the book and in class sink in. As an added plus, it was also very easy to see if you had made an error in the assignment itself, because when you actually feed it through the simulator, something would more than likely "blow up" in your face."
• "The web assignment seems very good! I really enjoy it! But after I submit, I still don't know that it is correct or not! Also if I had some mistakes, I wll never know where I did wrong! So I really hope after everyone submits their web assignment, we can have our assignment back with the correct answer sheet, by email or hard copy! Then it will be much better!"
• "The Netscape simulator, which is new this year, has helped me by allowing me to go through the language step-by-step. It actually puts what you have been thinking about onto the screen, and allows you to look at it and decide for yourself if you actually understand what has been being [sic] discussed or not. In the beginning, the Netscape simulator forced us to take a look at the steps taken in the fetch/execute cycle and begin to grasp its meaning thoroughly. If you thought that a particular instruction should come next, the simulator would inform you if you were wrong by telling what instruction actually followed."
• "The simulator on the Internet has students run small machine language programs on it. From these small programs the student learns the fundamentals of the fetch/execute cycle and how the instructions in machine language work. The homework assignments on the web gave me a good understanding of what should happen when I run the same program on the simulator I had created."
• "Even though the PDP-8 is several decades old, Another [sic] benefit this class has given, [sic] is the use of the World Wide Web. The simulator provided there helped me learn about the smaller machine language programs, and how they react. This allowed me to look at larger and larger examples and correctly predict their behavior."
• "The Netscape simulator was good because the interface was very user friendly. It was easy to see what was going on in the simulator because you could step through a program and immediately see what the values of each register were. The Netscape simulator also reinforced the concept of the fetch/execute syscle because you had to manually click on each button in order to step through the program."
• "The Netscape simulator was useful in the fact that it was easy to see what all the registers and memory were doing at every step in the fetch/execute cycle. ... The web assignments did have the advantage of allowing the student to learn about small machine language programs because it would work exactly as if a real PDP-8 would work. If something was wrong in the program it would react the same way it would in real life. It could crash the program ..."
• "Simple is good becuase it eases a person's learning. A person can learn something simple much easier than something difficult. Also, simplicity allows for easier use of the machine. The PDP-8 simulation greatly helped in understanding these concepts because it allowed for hands-on learning. You could see how the PDP-8 would actually react when given the machine language code. The web assignments on the Netscape simulator were useful because it required you to fill in unknown code. Since some of it was already written, the job was easier because of simple reasoning. This was good because you did not get frustrated writing all of the machine language."
• "The second simulation device used in the course is the world wide web accessed throught the NETSCAPE forum. This provides the student with yet more exposure to a small scale simulator. On this occasion the student is provided bits and pieces of code. The gaps in that code must be filled in with correct octal values in order for that code to become a "living breathing" program. Once correct code is established certain direct questions must be answered in order to prove the validity of the code. Thus, a student taking the course, [sic] is exposed to the same material in a different way making the project extermely beneficial. Although, I would like to add it would be more convenient if this web site was functional to the user accessing it through something other than NETSCAPE. An example would be America Online, or some other popular online service."
• "Up till [sic] now very little [sic] details have been discussed about how the PDP-8 is studied in Computer Organization. The truth is that if each student was given a complete version of the PDP-8 machine on the first day of class, the fees involved would ensure very few people in the class at all. The actual PDP-8 machine, like any other computer, is merely a concept and as a result the hardware version of the machine does not have to be studied. Merely a conceptual [sic] or "PDP-8 simulator" is required. ... Via an Internet page specified by the instructor, this simulator can run any PDP-8 machine level program. The contents of memory are displayed as the fetch- execute cycle runs as well as all of the registers of the PDP-8. The simulator can run a program which the user supplies, or more likely, various links can be accessed that contain assignments with pre-written programs to study details of the PDP-8. For instance, a class might be given a web assignment on how the AND instruction masks certain parts of memory to implement '%'in C or 'MOD' in Pascal. These assignments are then submitted from the web-page, graded and returned via the student's e-mail. This sort of interface is revolutionary to the way in which assignments are done. The Internet simulator allows the student to: A) Study a working simulator. B) Complete and turn in an assignment from a convenient location (e.g. a persons [sic] home or any computer connected to the Internet). C) Receive virtually immediate feedback."
• "In doing the Netscape simulator exercises, I was able to to watch how the Fetch/Execute cycle worked step-by-step. This step-by-step viewing enabled me to take the entire concept of the Fetch/execute Cycle apart to see how it worked."
• "Running programs on the web simulator provided a step by step observation of the cpu registers and the Fetch/Execute cycle. The web simulator also revealed the internal operations of the PDP-8's memory, which gave me the opportunity to see the memory changes during program execution. "

VI. References

• Mark G. Arnold and Susannah B. Taylor, Introduction to Computer Organization Using the PDP-8 , a textbook to appear at http://gmccomb.com/javascript/)

• David A. Patterson and John L. Hennessy, Computer Organization and Design: The Hardware/Software Interface, Morgan Kaufmann, San Mateo, 1994, pp. 40,150, A-4 - A-72.

• JavaScript Authoring Guide Netscape Communications Corp, 1995-1996, ( http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/" ).

• Gamelan JavaScript Resource Page, EarthWeb, Inc., 1997, ( http://www.earthweb.net/javascript/" ).

• Links provided by Jack Watson -- (http://www.goodnet.com/~watsonj/essays/webdevrefs.html)

VII. Appendix: More About the PDP-8 and Computer Organization

Why the PDP-8?

The PDP-8 was designed by C. Gordon Bell (perhaps the most brilliant computer designer in history) in 1965 for Digital Equipment Corporation (DEC). It continued to be produced in three decades. It single-handedly transformed the computer industry from a niche market to a mass market. It paved the way for the introduction of the more complex microprocessor by Intel in 1971, from which today's Pentiums are descended. The reason for choosing the PDP-8 for this course is its simplicity and elegance. These attributes make it the ideal vehicle to explain the universal nature of computers to students in Computer Organization.

What is the nature of a computer?

A computer is a machine that processes information. Because a computer is a machine, it is constructed by connecting certain hardware components:

• memory for storage of information
• registers for temporary storage of information

The PDP-8 illustrates most important concepts of Computer Organization using very few of these hardware components. Our simulator makes the hidden actions of such components visible. The small number of details on the PDP-8 simplifies the implementation of our JavaScript simulator.

Memory in the PDP-8

The memory of a computer contains the data it manipulates, and the machine language program that instructs the computer how to manipulate that data. The idea that programs can be stored in the same memory as data originated in the 1940's, and has been used in almost all computers since then.

All computer organize memory as an array of words, where in turn each word is an array of bits . In the case of the PDP-8, the memory is composed of 4096 words, and each PDP-8 word contains 12 bits. So, in total, the PDP-8's memory contains 49,152 bits of information. In contrast, the typical memory attached to a Pentium(TM) contains about one hundred million bits. Although the PDP-8's memory seems paltry in comparison, the PDP-8's memory is more than enough to do practical programming, and to contain programs that illustrate the important concepts taught in Computer Organization.

The relatively small size of the PDP-8's memory is an advantage for implementing a simulator in JavaScript. Because of the highly inefficient way in which browsers that support JavaScript allocate the physical memory of machines like the Pentium(TM), each simulated bit of the PDP-8 takes perhaps thousands of bits of the actual physical memory of the Pentium(TM).

Each PDP-8 word can store a single integer between -2048 and 2047 or alternatively a single unsigned integer between 0 and 4095. Also, rather than storing data, a word could be an instruction. In any case, the contents of memory is shown by the simulator in octal notation, between 0000 and 7777.

Registers in the PDP-8 simulation

One way in which the simplicity of the PDP-8 is obvious is with the set of registers required to build the machine. The central processing unit of the PDP-8 primarily consists of the following registers:

• Program Counter (PC) which contains the address in memory from which the next machine language instruction will be fetched.
• Instruction Register (IR) which contains the current machine language instruction to be executed.
• Accumulator (AC) which contains the data currently being manipulated by the computer.

There are a few additional minor details (Link, Interrupt Enable, and HALT), but in essence, that is all there is to the PDP-8. One of the constraints faced by anyone developing web based material is the "real estate" available on the screen. The above registers all fit in a small portion of the upper left corner of our PDP-8 simulator. Part of the beauty of the PDP-8 is that its entire operation at any instant in time can be summarized by such a small amount of information.

Although this is clearly an advantage for us as we implement the simulator, it is also an advantage for the student as she learns the material. Because there are fewer arcane details, there is less to memorize. Therefore, the student is more successful at memorizing what constitutes this machine language. All computers have a program counter and instruction register of some sort, and memorizing that they exist reinforces the universal ideas that are at the heart of the course. The only other main register is the AC, and so the PDP-8 is often known as a single accumulator machine.

Such single accumulator machines predominated the industry for many years, but are now viewed as antiquated technology by some authors. Our mission is to teach those universal abstract concepts of Computer Science that have endured for half of a century and are likely to continue to be important in the future.

Contrast the elegant simplicity of the single accumulator PDP-8 with the extensive set of registers found on the Pentium(TM). In addition to its program counter and instruction register, the Pentium(TM) has an alphabet soup of registers: AL, AX, EAX, BL, BX, EBX, CL, CX, ECX, DL, DX, EDX, SP, ESP, SI, ESI, DI, EDI, BP, EBP, CS, DS, ES, FS, GS, SS as well as registers for floating point, multimedia, and operating systems. Despite the vast difference in complexity, the PDP-8 and the Pentium(TM) are theoretically equivalent to each other. Any program of suitable length written in machine language for the PDP-8 can be translated to the Pentium(TM) and vice versa. Certainly there are concepts on the Pentium(TM) that have no direct counterpart on the PDP-8, such as the registers used in protected mode, but until the student understands concepts like self-modification (which can be illustrated beautifully on the PDP-8), she cannot understand what it is that the Pentium's protected mode protects.

A computer is a machine that processes information

To be precise in physics, you have to define fundamental physical units, like the meter. The same is true in computer science about information.

The fundamental unit of information is the bit. A bit represents the answer to some particular yes/no question that a programmer is concerned about. By convention, a bit that is 1 usually means yes, and a bit that is zero usually means no. There are twelve bits in each word of the PDP-8. Groups of three bits are abbreviated in octal:

000     0
001     1
010     2
011     3
100     4
101     5
110     6
111     7

Focused Exercises to show Universal Concepts

The following concepts apply to almost all general purpose computers built in the last half century. The URLs shown below are links to JavaScript pages that the student uses to simulate a PDP-8 program that illustrates these concepts:

• Economies of Scale Chapter 1
• Machine language and Fetch/execute. Chapter 3. (http://plum.uwyo.edu/~comporgn/web0.html)
• Type and polymorphism. Chapters 2,4,8,9. (http://plum.uwyo.edu/~comporgn/web3.html)
• Indirection and Subprograms. Chapters 6,7,11,12. (http://plum.uwyo.edu/~comporgn/web4.html)
• Compilers and Assemblers. Chapter 5. (http://www.cs.uwyo.edu/~marnold/asm8.html)
• Input, Output and Interrupts. Chapter 9. (http://www.cs.uwyo.edu/~marnold/wa9.html)

The chapters refer to the textbook, Introduction to Computer Organization Using the PDP-8 which will be put online during the summer of 1997 in PDF form.

Attributes of a general purpose computer

To sell a large number of computers, each machine needs to be general purpose. Different people can program it to do different things. To make this possible, a general purpose computer needs the following attributes:

• What step occurs next is not pre-defined (Chapter 3)
• What type data is not pre-defined (Chapter 2)
• Where the data is stored is not pre-defined (Chapter 6,7,11)
• How complex the data can get is not pre-defined (Chapter 12)

The chapters refer to the textbook, Introduction to Computer Organization Using the PDP-8 which will be put online during the summer of 1997 in PDF form.

Answering the question "what is the nature of a computer?" should be important to the student for both practical and philosophical reasons. On the practical side, it is programmable nature of the computer which has propelled the computer industry to become a significant factor in the world economy. It is likely a student will have a job in the computer industry after graduation because of this. The economies of scale in the computer industry necessitate such a programmable machine. This programmable nature ultimately stems from the "fetch/execute" cycle and related concepts, which are the subject matter of the Computer Organization class.

On the philosophical side, understanding the fundamental nature of the computer should give the student insight into what computers can do, and how they actually do it. This class focuses on universal concepts that have remained unchanged for the first half century of the computer industry. They are almost certainly going to remain important during the entire career of the student.

As small children, all of us were inquisitive about the nature of things. The best computer scientists and engineers combine this playful joy with a stern work ethic. Too many students today assume that when they take a class, knowledge will be poured into their brain in a painless process. Real education is just the opposite. The "hands on" assignments (http://plum.uwyo.edu/~comporgn/assign.html) in the Computer Organization class give the student the chance to make many mistakes. A child falls down often before mastering the technique of walking. The student may encounter similar pitfalls as she proceeds through this course. Many great scientists and engineers have credited their ultimate success to their early failures.

Our simulator gives the student the opportunity to fail. Unsupervised access to our simulator proved challenging to the students the first semester we used it. We now give more constrained assignments that guide the student toward the proper approach. Unlike the rote drill and practice one often sees implemented in JavaScript, the student using our new directed simulator assignments still has the opportunity to fail or to derive unique solutions not thought of by the instructor.

Why is simple good?

A child does not have to run a marathon before learning to walk. By analogy, a student should not have to learn about an excessively complex computer, like the Pentium (TM), before mastering the universal concepts that apply to all computers. Instead, in the Computer Organization class, the student first learns about one of the simplest and most beautiful computers that has ever existed: the PDP-8. Because it is simple, the extensive assignments (http://plum.uwyo.edu/~comporgn/assign.html) in this class are within within the student's grasp. Similar assignments dealing with another machine, say the Pentium (TM), would be beyond the student's grasp. The simple PDP-8 highlights the essential principles that are common to all computers. Because it is simple, the concepts are clear. The PDP-8 has three pedagogical advantages:

• Its small unsegmented memory is easy to understand and simulate.
• Its fixed sized instructions are easy to decode.
• Its simple machine language (consisting of 8 basic instruction) is easy to memorize and to easy to implement in the "fetch/execute cycle" of the simulator.

In contrast, the Pentium has three major disadvantages:

• Its large segmented memory is ugly.
• Its variable sized instructions make decoding hard.
• Its Byzantine machine language is impossible to memorize or implement in JavaScript.

Fixed sized instructions

• 7200 CLear the Accumulator (CLA)
• 7010 Rotate Accumulator Right (RAR)
• 7004 Rotate Accumulator Left (RAL)
• 7402 HaLT (HLT)

• 1xxx Add data from memory to AC (TAD)
• 3xxx Store AC into memory and clear AC (DCA)

Fetch/Execute Cycle

• FETCH: The instruction pointed to by the PC is copied into the IR.
• CALC EA: If necessary, calculate the address from which an operand will be fetched.
• INC PC: Increment PC so that it points to the next instruction to be executed (this may change due to JMP instructions).
• DEC/EXE: Decode (a series of decisions to determine what machine language instruction is in the IR) and Execute (carry out the actions specified by the specific instruction).