Section One: JavaScript Tutorials

 Description:

Students enjoy using recently learned concepts before being assessed as to their comprehension. A method particularly suited to Web-based learning is the JavaScript Self-Guided Tutorial. JavaScript is a language used by Web browsers (Netscape and Internet Explorer) to add a level of dynamic interactivity not available through normal "text-based" Web language (namely HTML, the HyperText Markup Language.) I have developed a methodology which allows students to "quiz themselves" using a multiple-choice answer guide on the Web. The student picks the answer they think is correct, and after pushing a button they discover the answer. In this JavaScript methodology, the instructor never discovers who has been using neither the tutorial nor the results of the tutorial - this is a "stress free" student working environment with no academic consequences.

The JavaScript methodology will allow anyone who is capable of using a text editor (SimpleText, NotePad, etc.) to write custom JavaScript tutorials which can be placed on the web using a template (i.e. an example of a working tutorial) and replacing appropriate sections. Once on the Web, a browser (Netscape or Internet Explorer) can be used to activate the tutorial by calling the appropriate Universal Resource Locator (URL, which is basically a "web address" to use in Netscape or Internet Explorer).


Methodology:

The JavaScript tutorial is nothing more than a text file on a web server with commands imbedded within it to cause a multiple choice question and answer problem to be generated. As with any text file, the typist can change any aspect of the typing as desired - including the question content and answers.

JavaScript tutorials can be altered as easily as a text file. There are two basic sections of code within the template that need to be maintained for the program to work, but you may change the appearance and content of the questions to fit your needs easily. One component asks the question while the other checks the result.

In the body of the HTML Web document, you will need to place code that looks something like this:

Question 1: What color is the sky?<p>

<Form name="questn1">
<ul>
<li><input type = "radio" onClick="answer=1"> Blue </li>
<li><input type = "radio" onClick="answer=2"> Red </li>
</ul>

<INPUT TYPE="button" VALUE="Check Answer" onClick="check1(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result1" size="70">
</form>

This is the code that allows an interface to be generated for the student that will ask some type of question. Here the question is "What color is the sky?" The possible answers for this question are "Blue" and "Red". Notice that Blue is given as Answer #1 (see the onClick="answer=1" portion) while Red is assigned Answer #2. In addition, a "Check Answer" button is present as well as a "Clear" button. "Clear" erases any text the user entered in the textbox, while "Check Answer" compares the student answer to the "correct" answer.

It is important to distinguish between the possible answers because the computer does not know which response is correct. We can gaze easily upon the sky and see that it is blue and not red, but the computer does not have that type of logic built in to its operating system. Computers are only as capable as we make them. What this means is that if we used the code as is, nothing would happen. The user would be presented with an interface dialog box (called a Form), but nothing would happen if the "Check Answer" button was pressed.

To remedy this shortcoming, we will add a second section of code to the beginning of the text file. We can call this the "Check function" and it will look something like this:

function check1(input,x) {
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==0) {
blank formatting spaceinput.result1.value = 'Select one of the choices, then press this button.';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==1) {
blank formatting spaceinput.result1.value = 'Correct answer!';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==2) {
blank formatting spaceinput.result1.value = 'Incorrect! Think about the color of the sky.';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"}

The Check functions hold the "answers" to the question. In this example, answer #1 (designated by x==1) contains the correct answer, while answer #2 (designated by x==2) contains an incorrect response. Answer #0 (again designated by x==0) contains the instructions to the student taking the test.

When the student clicks on Answer #1 (the Blue sky) and presses "Check Answer", the JavaScript language checks the "Check function" to see if Answer #1 is correct. In this example, Answer #1 is the correct response, so a message of "Correct answer!" is provided in the text box. When the student clicks on Answer #2 (the Red sky) and presses "Check Answer", the JavaScript language checks Answer #2 and provides the message "Incorrect! Think about the color of the sky." to the user. If the student does not click Answer #1 or Answer #2 but presses "Check Answer", nothing happens.

If you wish to add more than one question to the self-test, simple renumber sections from the previous two examples. For example, let's say you wish to have two questions, and one of the questions you wanted to give two possible answers while the other you wished to have three possible answers. As before, you would still need two sections (the check functions would be at the beginning of the document and the actual questions would be in the body). It might look like this:

function check1(input,x) {
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==0) {
blank formatting spaceinput.result1.value = 'Select one of the choices, then press this button.';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==1) {
blank formatting spaceinput.result1.value = 'Correct answer!';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==2) {
blank formatting spaceinput.result1.value = 'Incorrect! Think about the color of the sky.';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"}

function check2(input,x) {
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==0) {
blank formatting spaceinput.result2.value = 'Select one of the choices, then press this button.';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==1) {
blank formatting spaceinput.result2.value = 'Incorrect! Trees are not blue!';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==2) {
blank formatting spaceinput.result2.value = ' Correct answer!';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"if (x==3) {
blank formatting spaceinput.result2.value = 'Incorrect! Trees are not red!';}
img hspace=8 src="blankdot.gif" alt="blank formatting space"}

Question 1: What color is the sky?<p>

<Form name="questn1">
<ul>
<li><input type = "radio" onClick="answer=1"> Blue </li>
<li><input type = "radio" onClick="answer=2"> Red </li>
</ul>

<INPUT TYPE="button" VALUE="Check Answer" onClick="check1(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result1" size="70">
</form>

Question 2: What color is a tree?<p>

<Form name="questn2">
<ul>
<li><input type = "radio" onClick="answer=1"> Blue </li>
<li><input type = "radio" onClick="answer=2"> Green </li>
<li><input type = "radio" onClick="answer=3"> Red </li>
</ul>

<INPUT TYPE="button" VALUE="Check Answer" onClick="check2(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result2" size="70">
</form>

Notice how the two questions look quite similar; only key items have been altered. In the "Check functions", we changed function check1 to function check2, and we changed all of the input.result1.value entries to input.result2.value. This is telling JavaScript that we now have two questions - question #1 and question #2. Notice how question #2 now has three answer choices while question #1 still has only two.

The portions that go in the body (the form elements) need subtle changing as well. The <Form name="questn1"> in question #1 was changed to <Form name="questn2"> on question #2. We also changed onClick="check1(this.form,answer) to onClick="check2(this.form,answer) and we changed NAME="result1" to NAME="result2". All of this is essential to prevent the wrong answer from showing up in the wrong question. In addition, in question #2 we added a line (<input type = "radio" onClick="answer=3"> Red) to give the student an additional answer to contemplate.

It should be noted that the appearance of "curly brackets" (namely "{" and "}" symbols) are essential for successful coding. Do not erase or alter them without a thorough knowledge of JavaScript!

The result: voila! We now have two multiple choice questions, the first of which has two possible answers and the second has three possible answers. A working example of this code can be found here.

In theory we could continue, adding many more problems to our text file. Each problem could have as many or as few options to chose from as we so desired. True/False questions could be added. The only limiting factors are download time (if the file gets really big, but this should not prove to be too much of an obstacle) and typist durability (it takes some getting used to the format of the JavaScript tutorial, but not much.) Appendix A includes the complete code for a sample five question JavaScript Tutorial which can be altered easily to fit the programmer's requirements.

Results:

I have been using several JavaScript tutorials in my chemistry classes. Examples can be found at:


This type of tutorial works well for static questions - questions where only one answer is possible. A variety of wrong answers can be offered to the student; I generally use between two and five total answers, but even true and false options could be provided.

One nice feature of the JavaScript tutorial is that wrong answers can be supplied with hints to guide the student to the correct answer. If the instructor knows a certain error occurs in many students' work, the instructor may program in a hint that will direct the student to the missed step. In the physical sciences the "missing step" phenomenon occurs frequently, and the usefulness of the JavaScript tutorial methodology has become quite apparent.

I have found that an introduction section to the material being studied can be of help to the learning student. I include a few lines describing the process one would take to solve the problems being studied, and perhaps a few sample problems are included. The goal of this project is for the student to learn, so this seems apt.

Grading the JavaScript tutorial using a Perl-based interactive structure would be possible, although it will take advanced knowledge of Perl, CGI Programming and/or JavaScript.

A working JavaScript tutorial example using the code explained in this section can be found here.
The complete code for this example can be found in Appendix A.
Return to the Table of Contents for "Beyond the Internet Syllabus".
Return to the TLC Proposal Homepage.
Questions about this material should be addressed to the author,
Dr. Michael A. Russell,
Professor of Chemistry at
Mt. Hood Community College
Gresham, Oregon Last Updated on January 2, 2004