topical media & game development
game-javascript-math-kennedy-mathChallenge.htm / htm
<html>
<head>
<title>Mathematics Challenge!!!</title>
<script language="JavaScript">
// constants - DO NOT ASSIGN TO THEM (javascript doesn't have constants)
var kNumberOfProblems = 10;
var kTableIdForProblems = "practiceMathTableProblems";
var kTableIdForAnswers = "practiceMathTableAnswers";
var kTableIdForResults = "practiceMathTableResults";
var kMultiplication = 'x';
var kAddition = '+';
var kSubtraction = '-';
var kDivision = '\367';
var kNotAnswered = -1;
var kBiggestOperand = 11;
// global variables
var gStartTime = 0;
var gProblemArray = new Array(); // array of objects that hold the two operands and the operation
// functions
function assert(isTrue, message) { if (!isTrue) { alert(message) } }
function myPop (string){
var generator=window.open('',
'name',
'width=400,height=100,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200');
generator.document.write('<html><head><title>Math Challenge!</title></head><body>');
generator.document.write(string);
generator.document.write('<center><a href="javascript:self.close()">Close</a></center>');
generator.document.write('</body></html>');
generator.document.close();
}
function requestPrintTest(operation){
if (document.getElementById) {
// clear the old answers.
document.practiceMathForm.problem0.value = '';
document.practiceMathForm.problem1.value = '';
document.practiceMathForm.problem2.value = '';
document.practiceMathForm.problem3.value = '';
document.practiceMathForm.problem4.value = '';
document.practiceMathForm.problem5.value = '';
document.practiceMathForm.problem6.value = '';
document.practiceMathForm.problem7.value = '';
document.practiceMathForm.problem8.value = '';
document.practiceMathForm.problem9.value = '';
// clear old dynamically created table stuff.
clearChildNodes(kTableIdForProblems);
clearChildNodes(kTableIdForAnswers);
clearChildNodes(kTableIdForResults);
// assure bug-free redraw in Gecko engine by letting window show cleared table
if (navigator.product && navigator.product == "Gecko") {
setTimeout("printTest("+"'"+operation+"'"+")", 0);
}
else {
printTest(operation);
}
}
else {
alert("Sorry, dynamic table feature works with IE5 or later for Windows, and Netscape 6 or later.");
}
gStartTime = getCurrentTimeInSeconds();
}
function requestPrintResults(){
// disable the "I am finished!" button
document.practiceMathForm.finishedButton.disabled=true;
// this is stupid but...
if ('' != document.practiceMathForm.problem0.value)
gProblemArray[0].theirAnswer = document.practiceMathForm.problem0.value;
else
gProblemArray[0].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem1.value)
gProblemArray[1].theirAnswer = document.practiceMathForm.problem1.value;
else
gProblemArray[1].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem2.value)
gProblemArray[2].theirAnswer = document.practiceMathForm.problem2.value;
else
gProblemArray[2].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem3.value)
gProblemArray[3].theirAnswer = document.practiceMathForm.problem3.value;
else
gProblemArray[3].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem4.value)
gProblemArray[4].theirAnswer = document.practiceMathForm.problem4.value;
else
gProblemArray[4].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem5.value)
gProblemArray[5].theirAnswer = document.practiceMathForm.problem5.value;
else
gProblemArray[5].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem6.value)
gProblemArray[6].theirAnswer = document.practiceMathForm.problem6.value;
else
gProblemArray[6].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem7.value)
gProblemArray[7].theirAnswer = document.practiceMathForm.problem7.value;
else
gProblemArray[7].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem8.value)
gProblemArray[8].theirAnswer = document.practiceMathForm.problem8.value;
else
gProblemArray[8].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem9.value)
gProblemArray[9].theirAnswer = document.practiceMathForm.problem9.value;
else
gProblemArray[9].theirAnswer = kNotAnswered;
if (document.getElementById) {
clearChildNodes(kTableIdForAnswers);
clearChildNodes(kTableIdForResults);
// assure bug-free redraw in Gecko engine by letting window show cleared table
if (navigator.product && navigator.product == "Gecko") {
setTimeout("printResults()", 0);
}
else {
printResults();
}
}
else {
alert("Sorry, dynamic table feature works with IE5 or later for Windows, and Netscape 6 or later.");
}
}
function printTest(operation){
// initialize problem array
initializeMathProblemsArray(operation);
// dynamically generate the appropriate challenge
printChallengeProblems();
enableFinishedButton();
}
function getCurrentTimeInSeconds(){
return Math.round(new Date().valueOf()/1000);
}
function printResults(){
// get stop time
assert((0 != gStartTime), "Corrupt start time.");
var elapsedTimeSecs= getCurrentTimeInSeconds() - gStartTime + 1;
// print results
printAnswersAndResults(elapsedTimeSecs);
// email results?
}
function initializeMathProblemsArray(operation){
// first create an array of all possible problems
var arrayIndex = 0, i, j;
switch (operation) {
case kAddition :
for (i = 0; i <= (kBiggestOperand+1); i++){
for (j = 0; j <= (kBiggestOperand+1); j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kAddition, answer:(i+j), theirAnswer:kNotAnswered};
}
}
break;
case kSubtraction :
for (i = 0; i <= kBiggestOperand; i++){
for (j = i; j <= kBiggestOperand; j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kSubtraction, answer:(j-i), theirAnswer:kNotAnswered};
}
}
break;
case kMultiplication :
for (i = 0; i <= kBiggestOperand; i++){
for (j = 0; j <= kBiggestOperand; j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kMultiplication, answer:(i*j), theirAnswer:kNotAnswered};
}
}
break;
case kDivision :
// division by zero problems
for (i = 1; i <= (kBiggestOperand-1); i++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:0, value2:i, operation:kDivision, answer:0, theirAnswer:kNotAnswered};
}
// the rest....
for (i = 1; i <= (kBiggestOperand-1); i++){
for (j = i; j <= (kBiggestOperand-1); j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:(i*j), value2:j, operation:kDivision, answer:i, theirAnswer:kNotAnswered};
}
}
break;
default:
alert("BUG: hey this ain't cool - bad operation.");
}
// now crop a subset of the problems for actual use (randomly...)
var ranNumber;
while(gProblemArray.length > kNumberOfProblems)
{
ranNumber = Math.round(Math.random()*(gProblemArray.length-1));
gProblemArray.splice(ranNumber, 1);
}
}
function printChallengeProblems(){
var br, u, tr, td, txt, txtBox, font;
var tbody = document.getElementById(kTableIdForProblems);
// create holder for accumulated tbody elements and text nodes
var frag = document.createDocumentFragment();
// loop through data source
assert((kNumberOfProblems==gProblemArray.length), "printChallengeProblems: array has been corrupted?");
tr = document.createElement("tr");
for (var i = 0; i < kNumberOfProblems; i++) {
td = document.createElement("td");
td.setAttribute("align", "right");
font = document.createElement("font");
//font.setAttribute("size", "-1");
txt = document.createTextNode(gProblemArray[i].value1);
font.appendChild(txt);
td.appendChild(font);
br = document.createElement("br");
td.appendChild(br);
u = document.createElement("u");
font = document.createElement("font");
//font.setAttribute("size", "-1");
txt = document.createTextNode(gProblemArray[i].operation + " " + gProblemArray[i].value2);
font.appendChild(txt);
u.appendChild(font);
td.appendChild(u);
tr.appendChild(td);
}
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
}
function enableFinishedButton(){
// enable the "I am finished!" button
document.practiceMathForm.finishedButton.disabled=false;
}
// this function should really be broken into two functions...
function printAnswersAndResults(elapsedTimeInSeconds){
var tbody, tr, td, txt, font, br;
var numRight = 0;
tbody = document.getElementById(kTableIdForAnswers);
// create holder for accumulated tbody elements and text nodes
var frag = document.createDocumentFragment();
// loop through and print the answers
assert((kNumberOfProblems==gProblemArray.length), "printChallengeProblems: array has been corrupted?");
tr = document.createElement("tr");
for (var i = 0; i < kNumberOfProblems; i++){
td = document.createElement("td");
td.setAttribute("align", "right");
br = document.createElement("br");
td.appendChild(br);
font = document.createElement("font");
// did they get it right?
if(gProblemArray[i].theirAnswer == gProblemArray[i].answer) {
numRight++;
}
else {
font = document.createElement("font");
font.setAttribute("size", "-1");
font.setAttribute("color","red");
txt = document.createTextNode(gProblemArray[i].value1 +
gProblemArray[i].operation +
gProblemArray[i].value2 + "=" +
gProblemArray[i].answer);
font.appendChild(txt);
}
td.appendChild(font);
tr.appendChild(td);
}
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
// print results
tbody = document.getElementById(kTableIdForResults);
// create holder for accumulated tbody elements and text nodes
frag = document.createDocumentFragment();
assert((kNumberOfProblems>=numRight),"kNumberOfProblems<numRight!!!");
var percent = Math.round((numRight/kNumberOfProblems)*100);
var message;
if (100 == percent)
message = "Perfect!!!";
else if (100 > percent && 80 <= percent)
message = "Very Good!";
else if (80 > percent && 70 <= percent)
message = "Good!";
else
message = "Hai ti, you need more practice.";
tr = document.createElement("tr");
td = document.createElement("td");
td.setAttribute("align", "center");
td.setAttribute("colspan", kNumberOfProblems);
font = document.createElement("font");
font.setAttribute("size", "+1");
txt = document.createTextNode(numRight + " right out of " + kNumberOfProblems +
" in " + elapsedTimeInSeconds + " seconds. " + percent + "%! " + message);
font.appendChild(txt);
td.appendChild(font);
tr.appendChild(td);
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
}
// Remove existing content of an element
function clearChildNodes(elemID) {
var elem = document.getElementById(elemID);
while (elem.childNodes.length > 0)
{
elem.removeChild(elem.firstChild);
}
}
</script>
</head>
<body onload="requestPrintTest('+');">
<table id="stars" width="100%" border="0" align="center" valign="top"><tr>
<td valign="center"><font size="+1" color="red">*</font></td>
<td valign="center"><font size="+4" color="yellow">*</font></td>
<td valign="center"><font size="+2" color="blue">*</font></td>
<td valign="center"><font size="+5" color="green">*</font></td>
<td valign="center"><font size="+3" color="purple">*</font></td>
<td valign="center"><font size="+4" color="pink">*</font></td>
<td valign="center"><font size="+2" color="orange">*</font></td>
<td valign="center"><font size="+3" color="brown">*</font></td>
<td valign="center"><font size="+1" color="black">*</font></td>
<td valign="center"><font size="+3" color="brown">*</font></td>
<td valign="center"><font size="+2" color="orange">*</font></td>
<td valign="center"><font size="+4" color="pink">*</font></td>
<td valign="center"><font size="+3" color="purple">*</font></td>
<td valign="center"><font size="+5" color="green">*</font></td>
<td valign="center"><font size="+2" color="blue">*</font></td>
<td valign="center"><font size="+4" color="yellow">*</font></td>
<td valign="center"><font size="+1" color="red">*</font></td>
</tr></table>
<table id="titleBar" width="100%" valign="top" align="center"><tr>
<td align="left"><font size="+2"><b>Mathematics Challenge!</b></font></td>
<td align="right">
<font size="-1">
<a href="javascript:myPop('Use the Tab key to move between problems!');">Hints</a> |
<a href="javascript:myPop('Wrote this for my learners... Tested in IE6, Firefox & Konqueror.');">About This Tutor</a> |
<a href="mailto:aarontkennedy@gmail.com">;Email Suggestions</a>
</font>
</td></tr></table><br>
<form name="practiceMathForm">
<table align="center" width="90%" border="0">
<tbody id="practiceMathTableProblems"></tbody>
<tr>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem0"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem1"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem2"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem3"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem4"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem5"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem6"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem7"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem8"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem9"></td>
</tr>
<tbody id="practiceMathTableAnswers"></tbody>
</table>
<table align="center" width="90%" border="0">
<tbody id="practiceMathTableResults"></tbody>
</table><br>
<center>
<input name="finishedButton" type="button" value="I am finished!" onClick="requestPrintResults(); return false;">
</center>
<table width="100%" border="0" valign="bottom" align="center"><tr>
<td valign="center" align="center">
<input type="button" value="Addition" onClick="requestPrintTest('+'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Subtraction" onClick="requestPrintTest('-'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Multiplication" onClick="requestPrintTest('x'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Division" onClick="requestPrintTest('\367'); return false;"></td>
</tr></table>
</form>
<table id="stars2" width="100%" border="0" valign="bottom" align="center"><tr>
<td valign="center"><font size="+2" color="brown">*</font></td>
<td valign="center"><font size="+1" color="blue">*</font></td>
<td valign="center"><font size="+3" color="yellow">*</font></td>
<td valign="center"><font size="+1" color="green">*</font></td>
<td valign="center"><font size="+4" color="purple">*</font></td>
<td valign="center"><font size="+1" color="brown">*</font></td>
<td valign="center"><font size="+3" color="orange">*</font></td>
<td valign="center"><font size="+4" color="pink">*</font></td>
<td valign="center"><font size="+2" color="red">*</font></td>
<td valign="center"><font size="+4" color="pink">*</font></td>
<td valign="center"><font size="+3" color="orange">*</font></td>
<td valign="center"><font size="+1" color="brown">*</font></td>
<td valign="center"><font size="+4" color="purple">*</font></td>
<td valign="center"><font size="+1" color="green">*</font></td>
<td valign="center"><font size="+3" color="yellow">*</font></td>
<td valign="center"><font size="+1" color="blue">*</font></td>
<td valign="center"><font size="+2" color="brown">*</font></td>
</tr></table>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
