topical media & game development

talk show tell print

game-javascript-math-kennedy-IntegerLove.htm / htm



  <html>
  <head>
  <title>Integer Love!</title>
  <script language="JavaScript">
  // constants
  var kMultiplication = 'x';
  var kAddition = '+';
  var kSubtraction = '-';
  var kDivision = '\367';  // this is the octal representation of the division sign.
  var kNumberLineMax = 10;
  var kNumberLineMin = -10;
  
  var gProblem1 = new AdditionProblem();
  var gProblem2 = new AdditionProblem();
  
  // 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>Happy Fractions!</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 getCurrentTimeInSeconds(){
     return Math.round(new Date().valueOf()/1000);
  }
  
  function requestHelp(){
     var generator=window.open('','name','height=400,width=700,scrollbars=1');
     
     generator.document.write('<html><head><title>Integer Love!</title></head><body>');   
     generator.document.write('<b><center>Integers Are Numbers!</center></b><br>');
     generator.document.write('You can <i>add</i>, <i>subtract</i>, <i>multiply</i>, and <i>divide</i> integers. ');
     generator.document.write('Negative integers are <i>smaller</i> than 0.  ');
     generator.document.write('Positive integers are <i>bigger</i> than 0.   ');
     generator.document.write('For example, -4 is a negative integer and +4 is a positive integer.<br><br> ');
  
     generator.document.write('For negative integers, you must write the - sign.   ');
     generator.document.write('You do not have to write the + sign for positive integers.   ');
     generator.document.write('(7 is the same as +7 and 10 is the same is +10.)<br><br> ');
  
     generator.document.write('You can put integers on a number line.   ');
     generator.document.write('Negative numbers are on the left and positive numbers on the right. '); 
     generator.document.write('If you go to the left the numbers get smaller. ');
     generator.document.write('If you go to the right on the number line, the numbers get bigger.<br><br> ');
  
     generator.document.write('<table valign="top" align="center" cellpadding="0" cellspacing="0" border="0"><tr> ');
     generator.document.write('<td valign="center" align="right"><</td><td valign="center">
'); generator.document.write('<td width="1" valign="center" align="center">|</td><td valign="center">
'); generator.document.write('<td valign="center">
| '); generator.document.write('<td valign="center">

'); generator.document.write('<td width="1" valign="center" align="center">|</td><td valign="center">
'); generator.document.write('<td valign="center">
| '); generator.document.write('<td valign="center">

'); generator.document.write('<td width="1" valign="center" align="center">|</td><td valign="center">
'); generator.document.write('<td valign="center">
| '); generator.document.write('<td valign="center">

'); generator.document.write('<td width="1" valign="center" align="center">|</td><td valign="center">
'); generator.document.write('<td valign="center" align="left">></td></tr> '); generator.document.write('<tr><td></td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top"><font color="red">-3</font></td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top"><font color="red">-2</font></td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top"><font color="red">-1</font></td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top"><font color="gray">0</font></td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top">1</td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top">2</td> '); generator.document.write('<td width="4%" colspan="3" align="center" valign="top">3</td> '); generator.document.write('<td></td></tr> '); generator.document.write('</table><br><br>'); generator.document.write('<b><center>Adding Integers</center></b><br>'); generator.document.write('Start with the first number you want to add and find it on the number line. '); generator.document.write('Then if the second number is positive <i>then you count up</i> the number line to find the answer. '); generator.document.write('If the second number is negative <i>then you count down</i> the number line. '); generator.document.write('If you add a negative number, that is like subtracting. '); generator.document.write('<br><b>Examples:</b> '); generator.document.write('<br>3 + (-2) = 1 (find 3 on the line and count down 2.) '); generator.document.write('<br>-2 + 4 = 2 (find -2 on the line and count up 4.) <br><br>'); generator.document.write('<b><center>Subtracting Integers</center></b><br>'); generator.document.write('Start with the first number you want to subtract and find it on the number line. '); generator.document.write('Then if the second number is positive <i>then you count down</i> the number line to find the answer. '); generator.document.write('If the second number is negative <i>then you count up</i> the number line. '); generator.document.write('If you subtract a negative number then that is like adding. '); generator.document.write('<br><b>Examples:</b> '); generator.document.write('<br>-3 - (-2) = -1 (find -3 on the line and count up 2.) '); generator.document.write('<br>3 - 4 = -1 (find 3 on the line and count down 4.) <br><br>'); generator.document.write('<b><center>Multiplying Integers</center></b><br>'); generator.document.write('First, do not look at the negative signs if there are any. '); generator.document.write('Just multiply the numbers. '); generator.document.write('If both numbers being multiplied are positive then the answer is positive. '); generator.document.write('If both numbers are negative then the answer will be positive. '); generator.document.write('If one number is negative and the other is positive then the answer is negative.'); generator.document.write('<br><b>Examples:</b> '); generator.document.write('<br>9 x 9 = 81 (positive times a positive is positive) '); generator.document.write('<br>-9 x -9 = 81 (negative times a negative is positive) '); generator.document.write('<br>9 x -9 = -81 (positive times a negative is negative) '); generator.document.write('<br>-9 x 9 = -81 (negative times a positive is negative)<br><br>'); generator.document.write('<b><center>Dividing Integers</center></b><br>'); generator.document.write('First, do not look at the negative signs if there are some. '); generator.document.write('Just divide the numbers. '); generator.document.write('If both numbers being divided are positive then the answer is positive. '); generator.document.write('If both numbers are negative then the answer will be positive. '); generator.document.write('If one number is negative and the other is positive then the answer is negative. '); generator.document.write('<br><b>Examples:</b> '); generator.document.write('<br>63 \367 9 = 7 (positive divided by a positive is positive) '); generator.document.write('<br>-63 \367 -9 = 7 (negative divided by a negative is positive) '); generator.document.write('<br>63 \367 -9 = -7 (positive divided by a negative is negative) '); generator.document.write('<br>-63 \367 9 = -7 (negative divided by a positive is negative)<br><br>'); generator.document.write('<b><center>Remember, ask your teacher if you do not understand.</center></b>'); generator.document.write('<center><a href="javascript:self.close()">Close this window.</a></center>'); generator.document.write('</body></html>'); generator.document.close(); } function getRandomNumberInRange(rangeStart, rangeEnd){ assert((rangeStart<rangeEnd), "getRandomNumberInRange: Invalid Input"); var randomNumber = Math.round(Math.random()*(rangeEnd-rangeStart)); return (rangeStart+randomNumber); } function getProblemString(){ if (0 > this.operandLeft && 0 > this.operandRight) // if both are negative return ("(" + this.operandLeft + ") " + this.operation + " (" + this.operandRight + ") = "); if (0 > this.operandLeft) // if only the left is negative return ("(" + this.operandLeft + ") " + this.operation + " " + this.operandRight + " = "); if (0 > this.operandRight) // if only the right is negative return (this.operandLeft + " " + this.operation + " (" + this.operandRight + ") = "); return (this.operandLeft + " " + this.operation + " " + this.operandRight + " = "); } function isCorrectAnswer(theirAnswer){return (this.answer == (1*theirAnswer));} function AdditionProblem() { this.operation = kAddition; this.answer = getRandomNumberInRange(kNumberLineMin, kNumberLineMax); this.operandLeft = getRandomNumberInRange(kNumberLineMin, kNumberLineMax); this.operandRight = (this.answer-this.operandLeft); this.getProblemString = getProblemString; this.isCorrectAnswer = isCorrectAnswer; this.toString = getProblemString; this.getSolutionString = getSolutionString; function getSolutionString() { if (0 == this.operandRight) return (this.toString() + " " + this.answer + " Adding zero to a number always gives the same number as the answer."); else if (0 < this.operandRight) return (this.toString() + " " + this.answer + " Start with " + this.operandLeft + " on the number line, then add " + this.operandRight + " (count up)."); else return (this.toString() + " " + this.answer + " Start with " + this.operandLeft + " on the number line, then add " + this.operandRight + " (count down)."); } } function SubtractionProblem(){ this.operation=kSubtraction; // set the answer this.answer=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); // set the operands this.operandLeft=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); this.operandRight=(this.operandLeft-this.answer); this.getProblemString = getProblemString; this.isCorrectAnswer = isCorrectAnswer; this.toString = getProblemString; this.getSolutionString = getSolutionString; function getSolutionString() { if (0 == this.operandRight) return (this.toString() + " " + this.answer + ", Subtracting zero from a number always gives the same number as the answer."); else if (0 < this.operandRight) return (this.toString() + " " + this.answer + ", Start with " + this.operandLeft + " on the number line, then subtract " + this.operandRight + " (count down)."); else return (this.toString() + " " + this.answer + ", Start with " + this.operandLeft + " on the number line, then subtract " + this.operandRight + " (count up)."); } } function MultiplicationProblem(){ this.operation=kMultiplication; // set the operands this.operandRight=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); this.operandLeft=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); // set the answer this.answer=(this.operandRight*this.operandLeft); this.getProblemString = getProblemString; this.isCorrectAnswer = isCorrectAnswer; this.toString = getProblemString; this.getSolutionString = getSolutionString; function getSolutionString() { if (0 == this.operandRight || 0 == this.operandLeft) return (this.toString() + " " + this.answer + " Any number times 0 is 0."); else if (0 < this.operandRight && 0 < this.operandLeft) return (this.toString() + " " + this.answer + ", Multiplication is repeated addition. Add the number " + this.operandRight + ", " + this.operandLeft + " times."); else if (0 > this.operandRight && 0 > this.operandLeft) return (this.toString() + " " + this.answer + ", A negative number times a negative number gives a positive answer."); else return (this.toString() + " " + this.answer + ", A positive number times a negative number gives a negative answer."); } } function DivisionProblem(){ this.operation=kDivision; // set the answer this.answer=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); // set the operands this.operandRight=getRandomNumberInRange(kNumberLineMin, kNumberLineMax); if (0 == this.operandRight) {this.operandRight--;} this.operandLeft=(this.answer*this.operandRight); this.getProblemString = getProblemString; this.isCorrectAnswer = isCorrectAnswer; this.toString = getProblemString; this.getSolutionString = getSolutionString; function getSolutionString() { assert((0 != this.operandRight), "Division by Zero!"); if (0 == this.operandLeft) return (this.toString() + " " + this.answer + " Zero divided by a number is zero."); else if (0 < this.operandRight && 0 < this.operandLeft) return (this.toString() + " " + this.answer + ", Division is repeated subtraction. How many times can you subtract the number " + this.operandRight + " from " + this.operandLeft + "?"); else if (0 > this.operandRight && 0 > this.operandLeft) return (this.toString() + " " + this.answer + ", A negative number divided by a negative number gives a positive answer."); else return (this.toString() + " " + this.answer + ", Division with a positive number and a negative number gives a negative answer."); } } function requestPrintTest(operation){ if (document.getElementById) { // clear the old answers. document.integerLove.answer1.value = ''; document.integerLove.answer2.value = ''; // clear old dynamically created table stuff. clearChildNodes("problem1"); clearChildNodes("problem2"); clearChildNodes("testResults"); clearChildNodes("solution1"); clearChildNodes("solution2"); // 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."); } } function requestPrintResults(){ // disable the "I am finished!" button document.integerLove.finishedButton.disabled=true; if (document.getElementById) { clearChildNodes("testResults"); clearChildNodes("solution1"); clearChildNodes("solution2"); // 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){ printChallengeProblems(operation); enableFinishedButton(); } function enableFinishedButton(){ // enable the "I am finished!" button document.integerLove.finishedButton.disabled=false; } function printResults(){ // check their answers var numCorrect = 2; if (('' == document.integerLove.answer1.value) || !gProblem1.isCorrectAnswer(document.integerLove.answer1.value)){ numCorrect--; writeTxtAtTDidOptions("solution1", gProblem1.getSolutionString(), "-1", "red"); } if (('' == document.integerLove.answer1.value) || !gProblem2.isCorrectAnswer(document.integerLove.answer2.value)){ numCorrect--; writeTxtAtTDidOptions("solution2", gProblem2.getSolutionString(), "-1", "red"); } // print the results (the score) if (2 == numCorrect) writeTxtAtTDid("testResults", "Perfect! Great Job!", "+2", "black"); else if (1 == numCorrect) writeTxtAtTDid("testResults", "One correct. Try again.", "+1", "black"); else writeTxtAtTDid("testResults", "Zero correct. Meme ange, you need to practice more.", "+1", "black"); } function writeTxtAtTDid(tBodyID, string){ writeTxtAtTDidOptions(tBodyID, string, "+1", "black"); } function writeTxtAtTDidOptions(tBodyID, string, sizeString, colorString){ var tbody = document.getElementById(tBodyID); // create holder for accumulated tbody elements and text nodes var frag = document.createDocumentFragment(); var font = document.createElement("font"); font.setAttribute("size", sizeString); font.setAttribute("color", colorString); var txt = document.createTextNode(string); font.appendChild(txt); frag.appendChild(font); if (!tbody.appendChild(frag)) { alert("This browser doesn't support dynamic tables."); } } function printChallengeProblems(operation){ switch(operation){ case kAddition: gProblem1 = new AdditionProblem(); gProblem2 = new AdditionProblem(); break; case kSubtraction: gProblem1 = new SubtractionProblem(); gProblem2 = new SubtractionProblem(); break; case kMultiplication: gProblem1 = new MultiplicationProblem(); gProblem2 = new MultiplicationProblem(); break; case kDivision: gProblem1 = new DivisionProblem(); gProblem2 = new DivisionProblem(); break; default: alert("printChallengeProblems: Invalid operation."); } writeTxtAtTDid("problem1", gProblem1.getProblemString()); writeTxtAtTDid("problem2", gProblem2.getProblemString()); } // 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="javascript:requestPrintTest('+'); return false;"> <table width="100%" valign="top" align="center" border="0"> <tr> <td td colspan="9" align="right"> <a href="javascript:requestHelp();"><font size="-1" color="gray">Help Me!</font></a> | <a href="javascript:myPop('Made in Namibia for Namibians to improve their integer skills... Tested in IE6, Mozilla Firefox and Konqueror.');"> <font size="-1" color="gray">About This Site</font></a> | <a href="mailto:aarontkennedy@gmail.com">;<font size="-1" color="gray">Suggestions</font></a> </td> </tr> <tr> <td width="20%"></td> <td width="5%" valign="center" align="right"><font color="gray" size="+1">&#9829;</font></td> <td width="5%" valign="center" align="right"><font color="gray" size="+2">&#9829;</font></td> <td width="40%" valign="center" align="center"><font size="+3">Integer Love</font></td> <td width="5%" valign="center" align="left"><font color="gray" size="+2">&#9829;</font></td> <td width="5%" valign="center" align="left"><font color="gray" size="+1">&#9829;</font></td> <td width="20%"></td> </tr> </table><br><br> <table valign="top" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="3"></td> <td colspan="31" valign="bottom" align="left"> <font size="-1" color="red">< smaller numbers</font> </td> <td colspan="29" valign="bottom" align="right"> <font size="-1" color="green">bigger numbers ></font> </td> <td colspan="4"></td> </tr> <tr> <td valign="center" align="right"><</td> <td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center">
<td width="1" valign="center" align="center">|</td> <td valign="center">
<td valign="center" align="left">></td> </tr> <tr> <td></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-10</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-9</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-8</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-7</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-6</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-5</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-4</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-3</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-2</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="red">-1</font></td> <td width="4%" colspan="3" align="center" valign="top"><font color="gray">0</font></td> <td width="4%" colspan="3" align="center" valign="top">1</td> <td width="4%" colspan="3" align="center" valign="top">2</td> <td width="4%" colspan="3" align="center" valign="top">3</td> <td width="4%" colspan="3" align="center" valign="top">4</td> <td width="4%" colspan="3" align="center" valign="top">5</td> <td width="4%" colspan="3" align="center" valign="top">6</td> <td width="4%" colspan="3" align="center" valign="top">7</td> <td width="4%" colspan="3" align="center" valign="top">8</td> <td width="4%" colspan="3" align="center" valign="top">9</td> <td width="4%" colspan="3" align="center" valign="top">10</td> <td></td> </tr> </table><br><br> <form name="integerLove"> <table align="center" width="100%" border="0"> <tr> <td width="23%" align="right" id="problem1"></td> <td width="10%" align="left"><input type"text" size="3" name="answer1"></td> <td width="23%" align="right" id="problem2"></td> <td width="10%" align="left"><input type"text" size="3" name="answer2"></td> <td width="33%" align="center"> <input name="finishedButton" type="button" value="I am finished!" onClick="requestPrintResults(); return false;"> </td> </tr> <tr> <td colspan="5" align="center" id="solution1"></td> </tr> <td colspan="5" align="center" id="solution2"></td> </tr> <tr> <td colspan="5" align="center"><br></td> </tr> <tr> <td colspan="5" align="center" id="testResults"></td> </tr> </table> </form> <table width="100%" border="0" valign="bottom" align="center"><tr> <td align="center"><a href="javascript:requestPrintTest('+');"> <font color="black">Addition</font></a></td> <td align="center"> <font color="gray">&#9829;</font> </td> <td align="center"><a href="javascript:requestPrintTest('-');"> <font color="black">Subtraction</font></a></td> <td align="center"> <font color="gray">&#9829;</font> </td> <td align="center"><a href="javascript:requestPrintTest('x');"> <font color="black">Multiplication</font></a></td> <td align="center"> <font color="gray">&#9829;</font> </td> <td align="center"><a href="javascript:requestPrintTest('\367');"> <font color="black">Division</font></a></td> <td align="center"> <font color="gray">&#9829;</font> </td> <td align="center"><a href="javascript:requestHelp();"> <font color="black">Help Me!</font></a></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.