topical media & game development
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">♥</font></td>
<td width="5%" valign="center" align="right"><font color="gray" size="+2">♥</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">♥</font></td>
<td width="5%" valign="center" align="left"><font color="gray" size="+1">♥</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">♥</font> </td>
<td align="center"><a href="javascript:requestPrintTest('-');">
<font color="black">Subtraction</font></a></td>
<td align="center"> <font color="gray">♥</font> </td>
<td align="center"><a href="javascript:requestPrintTest('x');">
<font color="black">Multiplication</font></a></td>
<td align="center"> <font color="gray">♥</font> </td>
<td align="center"><a href="javascript:requestPrintTest('\367');">
<font color="black">Division</font></a></td>
<td align="center"> <font color="gray">♥</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.