Appendix B: A "Drill and Practice" JavaScript Example

This JavaScript program provides the user with a method to test their knowledge of converting between three temperature scales, namely Celsius, Fahrenheit and Kelvin. The scales are related mathematically by:

T(°C) = T(K) - 273.15

T(°F) = 1.8*T(°C) + 32

where T(K) is the Kelvin temperature, T(°C) is the Celsius temperature, and T(°F) is the Fahrenheit temperature.

When the "New Problem" is selected, one temperature appears. The user is expected to submit the remaining two temperatures in the adjoining fields using the given temperature and the conversion equations. Once the new temperatures have been entered, the user selects "Check Answer" to see the results of their work. The program tracks both the number of answers provided and the number of correct responses.

This program can be loaded directly into an Internet browser; an example is also available on the accompanying website (
http://www.gst-d2l.com/TLC/Temp.html).

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

<html>
<head>
<title>Converting Temperatures</title>

<script language=javascript>

//Last Updated 1/9/00 MAR

totl=0
corrt=0
tried=0

function clear(){
document.forms[0].first.value="" document.forms[0].second.value="" document.forms[0].third.value="" document.forms[0].results.value="" tried=0
}

//cleanse() is the function started when the page is loaded in the browser
//the total problems attempted and the number of correct responses are zeroed

function cleanse(){ clear() document.forms[0].total.value=0 document.forms[0].correct.value=0 }

//begin() is the function started when "New Problem" is pushed
//This function first clears all old values then sets the variables using random numbers

function begin(){ totl++
document.forms[0].total.value=totl
document.forms[0].results.value=""
tried=0
clear()
var K=1001
while (K>1000) { var K=Math.pow(200,Math.pow(10,Math.random()))
var C=K-273.15
var F=1.8*C + 32
}

//Convert K, C and F to four sig figs

if (K>100){K=Math.round(10*K)/10} else {K=Math.round(100*K)/100} if (C>100){C=Math.round(10*C)/10} else {C=Math.round(100*C)/100} if (F>100){F=Math.round(10*F)/10} else {F=Math.round(100*F)/100}

document.forms[0].first.value=K
document.forms[0].second.value=C
document.forms[0].third.value=F
//Decide if K, C or F will be displayed

var pick=Math.random()

if (pick<.33){ document.forms[0].first.value=""
document.forms[0].second.value=""
document.forms[0].first.focus()
document.forms[0].first.select()}
else {if(pick<.67){ document.forms[0].second.value=""
document.forms[0].third.value=""
document.forms[0].second.focus()
document.forms[0].second.select()}
else { document.forms[0].first.value=""
document.forms[0].third.value=""
document.forms[0].first.focus()
document.forms[0].first.select()}
}}

// This is the "Check Answer" function; results are posted to the second table

function answer(form){
if(tried==1){ alert("Sorry, you've already submitted this problem! Get a new one!") }
else {if(tried==2){ totl++;
document.forms[0].total.value=totl
}
// Check answer + check for negative values
if (1.0*form.first.value>.99*(1.0*form.second.value + 273) &
1.0*form.first.value<1.01*(1.0*form.second.value + 273) &
Math.abs(form.third.value)>Math.abs(.99*((1.8*form.second.value)+ 32)) &
Math.abs(form.third.value)<Math.abs(1.01*((1.8*form.second.value) + 32))) {
document.forms[0].results.value="correct"
tried=1
corrt++
document.forms[0].correct.value=corrt
} else {
tried=2
document.forms[0].results.value="incorrect"
}
}
}

</script>
</head>

<body BGCOLOR=#FFFFFF TEXT=#000000 onLoad="cleanse()">

<center><h2>Converting Temperatures</h2></center>

This tutorial will test your ability to convert between the Kelvin, Celsius and Fahrenheit scales.<p>

Remember:<br>

<ul>
<li>T(&#176;C) = K - 273.15
<li>T(&#176;F) = 1.8*T(&#176;C) + 32
</ul>

where <b>T(K)</b> is the Kelvin temperature, <b>T(&#176;C)</b> is the Celsius temperature, and <b>T(&#176;F)</b> is the Fahrenheit temperature.<p>

Your work will not be graded in this tutorial, but the ability to convert successfully between temperatures is essential to success in this class. Good luck!<p><hr><br>

<form>
<table border=4>
<tr> <TD ALIGN=CENTER><b>K</td>
<td align=center><b><sup>o</sup>C</td>
<td align=center><b><sup>o</sup>F</td>
</tr>
<tr> <td align=center><input type="text" name=first size=8 ></td>
<td align=center><input type="text" name=second size=8 ></td>
<td align=center><input type="text" name=third size=8 ></td>
</tr>
<tr> <td><input type="button" value="New Problem" onClick=begin()></td>
<td><input type="button" value="Check Answer" onClick=answer(this.form)></td>
</tr>
</table>
<br>
<table border=4>
<tr> <td align=center><b>Results</td>
<td align=center><b>Total Done</td>
<td><b>Total Correct</td>
</tr>
<tr> <td><input type="text" name="results" size=12></td>
<td align=center><input type="text" name="total" size=4 ></td>
<td align=center><input type="text" name="correct" size=4 ></td>
</tr>
</table>
</form>

<br><hr><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