Appendix A: Sample Source Code for the JavaScript Tutorial

The code presented here will provide a five question tutorial where each question has three possible answers. These questions are not graded, but the student can receive feedback by pressing the "Check Answer" button. The "Clear" button removes any previously encountered text or selections. But be careful: do not remove any semicolons or brackets without a thorough knowledge of JavaScript.

A working copy of this program can be viewed by clicking http://www.gst-d2l.com/TLC/JavaEx.html. Enjoy!

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-


<html>
<head><title>Sample JavaScript Tutorial</title>
<SCRIPT LANGUAGE="JavaScript">
function check1(input,x) { if (x==0) {
input.result1.value = 'Select one of the choices, then press this button.';} if (x==1) {
input.result1.value = 'Correct answer!';} if (x==2) {
input.result1.value = 'The sky on Mars is red; what is the color of the sky on Earth?';} if (x==3) {
input.result1.value = 'Think of the sky color you see on a nice, clear, warm day...';} }
function check2(input,x) { if (x==0) { input.result2.value = 'Select one of the choices, then press this button.';} if (x==1) { input.result2.value = 'Trees are green.';} if (x==2) { input.result2.value = 'Correct answer!';} if (x==3) { input.result2.value = 'Most trees are green.';} }
function check3(input,x) { if (x==0) { input.result3.value = 'Select one of the choices, then press this button.';} if (x==1) { input.result3.value = 'Roses can be yellow, but not red roses.';} if (x==2) { input.result3.value = 'Roses can be white, but not red roses.';} if (x==3) { input.result3.value = 'Correct answer!';} }
function check4(input,x) { if (x==0) { input.result4.value = 'Select one of the choices, then press this button.';} if (x==1) { input.result4.value = 'Purple oranges do not exist.';} if (x==2) { input.result4.value = 'Correct answer!';} if (x==3) { input.result4.value = 'A black orange should be thrown away; what is the color of a new orange?';} }
function check5(input,x) { if (x==0) { input.result5.value = 'Select one of the choices, then press this button.';} if (x==1) { input.result5.value = 'White is the color of new paper.';} if (x==2) { input.result5.value = 'Red is the color of the sky on Mars.';} if (x==3) { input.result5.value = 'Correct answer!';} }
</SCRIPT>
</head>
<body BGCOLOR=#FFFFFF TEXT=#000000>
<center><h2><font color = "#ff0000">Sample JavaScript Tutorial</font></h2><p>
This is a sample tutorial with five questions. Enjoy!<br>
<i>Your answers to these questions will not affect your grade... relax and good luck!<br>
Feel free to contact <a href="mailto:mike.russell@mhcc.edu">me</a> if you have any comments or questions regarding this tutorial example.</i></center>
<p>
<hr>
<h3><font color = "#003300"><u>Review of Essential Information</u></font></h3><p>

Remember these concepts:<p>

<ul>
<li>The <b>sky</b> is blue<br>
<li>The <b>trees</b> are green<br>
<li>A <b>red rose</b> is red<br>
<li>An <b>orange</b> is orange<br>
<li>You should be able to determine the color of night.<br>
</ul>
<br>

<hr>

<h3><font color = "#003300"><u>Test Yourself on Common Concepts</u></font></h3><p>

1. The color of the sky is:<p>
<Form name="questn1">
<ul><li><input type = "radio" onClick="answer=1">blue</li>
<li><input type = "radio" onClick="answer=2">red</li>
<li><input type = "radio" onClick="answer=3">green</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>
<br><br>

2. The color of a tree is:<p>
<Form name="questn2">
<ul><li><input type = "radio" onClick="answer=1">indigo</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>
<br><br>
 
3. The color of a red rose is:<p>
<Form name="questn3">
<ul><li><input type = "radio" onClick="answer=1">yellow</li>
<li><input type = "radio" onClick="answer=2">white</li>
<li><input type = "radio" onClick="answer=3">red</li>
</ul>
<INPUT TYPE="button" VALUE="Check Answer" onClick="check3(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result3" size="70">
</form>
<br><br>

4. The color of an orange is:<p>
<Form name="questn4">
<ul><li><input type = "radio" onClick="answer=1">purple</li>
<li><input type = "radio" onClick="answer=2">orange</li>
<li><input type = "radio" onClick="answer=3">black</li>
</ul>
<INPUT TYPE="button" VALUE="Check Answer" onClick="check4(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result4" size="70">
</form>
<br><br>

5. The color of night is:<p>
<Form name="questn5">
<ul><li><input type = "radio" onClick="answer=1">white</li>
<li><input type = "radio" onClick="answer=2">red</li>
<li><input type = "radio" onClick="answer=3">black</li>
</ul>
<INPUT TYPE="button" VALUE="Check Answer" onClick="check5(this.form,answer)">
<INPUT TYPE="reset" VALUE="Clear" onClick="answer=0">
<INPUT TYPE="text" NAME="result5" size="70">
</form>
<br><br>

<center><i>Last modified:</i> January 9, 2000<br></font></center>

</BODY>
</HTML>
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 21, 2000