topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

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



  <html>
  <head>
  <title>Win Big Money!</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 kMinOperand = 0;
  var kMaxOperand = 12;
  
  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>Win Big Money!</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);
  }
  
  // from Gordon McComb
  function floatFix (Val, Places) {
      var Res = "" + Math.round(Val * Math.pow(10, Places));
      var Dec = Res.length - Places;
      if (Places != 0)
      OutString = Res.substring(0, Dec) + "." + Res.substring(Dec, Res.length);
  else
  OutString = Res;
      return (OutString);
  }
  
  function requestHelp(){
     var generator=window.open('','name','height=400,width=700,scrollbars=1');
     
     generator.document.write('<html><head><title>Money and Decimals!</title></head><body bgcolor="white">');   
  
     generator.document.write('<b><center><font size="+3">Money and Decimals!</font></center></b>');
     generator.document.write('You can <i>add</i>, <i>subtract</i>, <i>multiply</i>, and <i>divide</i> money and decimals. ');
  
     generator.document.write('<br><br><b><center>Place Values of Money and Decimals</center></b>');
     generator.document.write('To work with money or decimals, you must know and use <i>place value</i>.');  
     generator.document.write('You already know place values for whole numbers.');
     generator.document.write('<br><b>Example:</b> ');
     generator.document.write('<br>In the number 23, the two is in the <i>tens</i> place and the three is in the <i>units</i> place. ');
  
     generator.document.write('<br><br>With decimals, we get to know more place values: <i>tenths</i> and <i>hundredths</i>. ');
     generator.document.write('The whole number is to the left of the decimal and the tenths and hundredths come after the decimal. ');
     generator.document.write('<br><b>Example:</b> ');
     generator.document.write('<br>Write the place values of the digits in 23,45 ');
     generator.document.write('<br>The two is in the <i>tens</i> place, the three is in the <i>units</i> place, ');
     generator.document.write('four in the <i>tenths</i> place and the five in the <i>hundredths</i> place. ');
     
     generator.document.write('<br><br><b>Try These!</b> Give the place value of the underlined digit: ');
     generator.document.write('<br>1. <u>9</u>,76 place value = <a href="javascript:alert(\'The 9 is in the units place.\');">Answer</a>');
     generator.document.write('<br>2. 103,4<u>5</u> place value = <a href="javascript:alert(\'The 5 is in the hundredths place.\');">Answer</a>');
     generator.document.write('<br>3. 16,<u>8</u> place value = <a href="javascript:alert(\'The 8 is in the tenths place.\');">Answer</a>');
     generator.document.write('<br>4. 0,<u>8</u>9 place value = <a href="javascript:alert(\'The 8 is in the tenths place.\');">Answer</a>');
     generator.document.write('<br>5. 1<u>7</u>00,50 place value = <a href="javascript:alert(\'The 7 is in the hundreds place.\');">Answer</a>');
     
     generator.document.write('<br><br>How many cents in a dollar? There are always <b>100 cents</b> in a dollar! ');
     generator.document.write('That is why we show money with two decimal places because that is hundredths! ');
     
     generator.document.write('<br><br><b><center>Adding or Subtracting Money and Decimals</center></b>');
     generator.document.write('When adding or subtracting money or decimals, make sure the decimals are in a line so you add <i>tens</i> to <i>tens</i>, ');
     generator.document.write('<i>units</i> to <i>units</i>, <i>tenths</i> to <i>tenths</i>... ');
     generator.document.write('<br><b>Examples:</b> ');
     generator.document.write('<br><font color="white">+$1</font>1<font color="white">---</font>* Remember to carry!'); 
     generator.document.write('<br><font color="white">+</font>$14,57 ');
     generator.document.write('<br><u>+<font color="white">1</font>6,62</u> ');
     generator.document.write('<br><font color="white">+</font>$21,19 ');
     
     generator.document.write('<br><br><font color="white">-</font><font size="-2">8 14 12</font><font color="white">---</font>* Remember to borrow!'); 
     generator.document.write('<br><font color="white">-</font><s>9</s><s>5</s>,25 ');
     generator.document.write('<br><u>-$25,50</u> ');
     generator.document.write('<br><font color="white">-</font>$69,75 <br><br>');   
     
     generator.document.write('<b><center>Multiplying Money and Decimals</center></b>');
     generator.document.write('When multiplying decimals, first forget the decimals and multiply. ');
     generator.document.write('Then count decimal places in the numbers you multiplied and put that many decimal places in the answer. ');
     generator.document.write('<br><b>Examples:</b> ');
     generator.document.write('<br>1,20 x 3 = ? ');
     generator.document.write('<br>First, what is 120 x 3?  120 x 3 = 360 ');
     generator.document.write('<br>Second, how many decimal places in 1,20 and 3? 1,<u>20</u> has two places and 3 has zero places. ');
     generator.document.write('<br>Last: <b>1,20 x 3 = 3,<u>60</u></b> ');
     
     generator.document.write('<br><br>11,40 x 2 = ? ');
     generator.document.write('<br>1140 x 2 = 2280 <font color="white">___</font> 11,<u>40</u> and 2 have two decimal places. ');
     generator.document.write('<br><b>11,40 x 2 = 22,80</b> '); 
  
     generator.document.write('<br><br><b><center>Dividing Money and Decimals</center></b>');
     generator.document.write('Use long division.  Move the decimal up into the answer.');
     generator.document.write('<br><b>Example:</b> ');
     generator.document.write('<br><font color="white">3|</font><u>1,22</u> ');
     generator.document.write('<br>3|3,66 <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 range start =" + rangeStart + " and rangeEnd = " + rangeEnd);
     return Math.round(Math.random()*(rangeEnd-rangeStart)+rangeStart);
  }
  
  function getRandomTwoPlaceDecimalInRange(rangeStart, rangeEnd){
     assert((rangeStart < rangeEnd), "getRandomTwoPlaceDecimalInRange: Invalid Input range start =" + rangeStart + " and rangeEnd = " + rangeEnd); 
     
     var value = Math.round(getRandomNumberInRange(100*rangeStart, 100*rangeEnd))/100;
               
     //assert(Math.round(value*100) == (100*value), "getRandomTwoPlaceDecimalInRange: bad return value: " + value);
     assert(((value <= rangeEnd) && (value >= rangeStart)), "getRandomTwoPlaceDecimalInRange: bad return value: " + value + " not in range: " + rangeStart + " and " + rangeEnd);
     
     return (1*value);
  }
  
  // from Grant Gatchel
  function printMoneyFromDecimal(money){
     money = money + 0;
     var moneyString = "" + Math.round(money*Math.pow(10,2))/Math.pow(10,2);
  
     // then massage the data to get a useful price
     if (moneyString.indexOf('.') == -1)
        return moneyString + '.00';
     
     var seperation = moneyString.length - moneyString.indexOf('.');
     if (moneyString > 3)
        return moneyString.substring(0,moneyString.length-seperation+3);
     else if (seperation == 2)
        return moneyString + '0';
  
     return moneyString;
  }
  
  function getProblemString(){
     return (printMoneyFromDecimal(this.operandLeft) + " " + this.operation + " " + printMoneyFromDecimal(this.operandRight) + " = " );
  }
  
  function getMultiplicationProblemString(){
     return (printMoneyFromDecimal(this.operandLeft) + " " + this.operation + " " + this.operandRight + " =");
  }
  
  function isCorrectAnswer(theirAnswer){return (printMoneyFromDecimal(this.answer) == printMoneyFromDecimal(theirAnswer));}  
  
  function AdditionProblem() {
     this.operation = kAddition;
     this.operandLeft = getRandomTwoPlaceDecimalInRange(kMinOperand, kMaxOperand);   
     this.operandRight = getRandomTwoPlaceDecimalInRange(kMinOperand, kMaxOperand);
     this.answer = this.operandLeft + this.operandRight;
     this.getProblemString = getProblemString;
     this.isCorrectAnswer = isCorrectAnswer;
     this.toString = getProblemString;
     this.getSolutionString = getSolutionString;
     
     function getSolutionString() {
        return (this.toString() + " " + printMoneyFromDecimal(this.answer) + " Remember to add tens to tens, units to units... Also, do not forget to carry.");
     }
  }  
  
  function SubtractionProblem(){
     this.operation=kSubtraction;
     // set the operands
     this.operandLeft=getRandomTwoPlaceDecimalInRange(kMinOperand, kMaxOperand);
     this.operandRight=getRandomTwoPlaceDecimalInRange(kMinOperand, this.operandLeft);
     // set the answer
     this.answer=this.operandLeft-this.operandRight;
     this.getProblemString = getProblemString;
     this.isCorrectAnswer = isCorrectAnswer;
     this.toString = getProblemString;   
     this.getSolutionString = getSolutionString;
     
     function getSolutionString() {
        return (this.toString() + " " + printMoneyFromDecimal(this.answer) + " Remember to subtract tens from tens, units from units... Also, do not forget to borrow.");
     }   
  }
  
  function MultiplicationProblem(){
     this.operation=kMultiplication;
     // set the operands
     this.operandRight=getRandomNumberInRange(kMinOperand, kMaxOperand);
     this.operandLeft=getRandomTwoPlaceDecimalInRange(kMinOperand, kMaxOperand);
     // set the answer
     this.answer=(this.operandRight*this.operandLeft);
     this.getProblemString = getMultiplicationProblemString;
     this.isCorrectAnswer = isCorrectAnswer;
     this.toString = getMultiplicationProblemString;      
     this.getSolutionString = getSolutionString;
     
     function getSolutionString() {
        if (0 == this.operandRight || 0 == this.operandLeft)
           return (this.toString() + " " + printMoneyFromDecimal(this.answer) + "  Any number times 0 is 0.");
        else
           return (this.toString() + " " + printMoneyFromDecimal(this.answer) + " Multiply " + this.operandRight + " times each digit in " + this.operandLeft + " and count decimal places.");
     }   
  }
  
  function DivisionProblem(){
     this.operation=kDivision;
     // set the operand
     this.operandRight=getRandomNumberInRange(1, 3);
     // set the answer
     this.answer=getRandomTwoPlaceDecimalInRange(kMinOperand, 3);
     this.operandLeft=this.answer*this.operandRight;
     this.operandLeft=Math.round(this.operandLeft*100)/100;
     this.getProblemString = getMultiplicationProblemString;
     this.isCorrectAnswer = isCorrectAnswer;
     this.toString = getMultiplicationProblemString;      
     this.getSolutionString = getSolutionString;
     
     function getSolutionString() {
        assert((0 != this.operandRight), "Division by Zero!");
        if (0 == this.operandLeft)
           return (this.toString() + " " + printMoneyFromDecimal(this.answer) + "  Zero divided by a number is zero.");
        else
           return (this.toString() + " " + printMoneyFromDecimal(this.answer) + " Divide " + this.operandRight + " into " + this.operandLeft + " with long division and move the decimal up.");
     }   
  }
  
  function requestPrintTest(operation){
     if (document.getElementById) {
        // clear the old answers.
        document.winBigMoney.answer1.value = '';
        document.winBigMoney.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.winBigMoney.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.winBigMoney.finishedButton.disabled=false;
  }
  
  function printResults(){
     // check their answers
     var numCorrect = 2;
   
     if (('' == document.winBigMoney.answer1.value) ||
         !gProblem1.isCorrectAnswer(document.winBigMoney.answer1.value)){
        numCorrect--;
        writeTxtAtTDidOptions("solution1", gProblem1.getSolutionString(), "-1", "red");
     }    
     if (('' == document.winBigMoney.answer1.value) ||
        !gProblem2.isCorrectAnswer(document.winBigMoney.answer2.value)){ 
        numCorrect--;
        writeTxtAtTDidOptions("solution2", gProblem2.getSolutionString(), "-1", "red");
     }
     // print the results (the score)
     if (2 == numCorrect)
        writeTxtAtTDid("testResults", "Perfect!  Iiyaloo, owa lula!", "+2", "black");
     else if (1 == numCorrect)
        writeTxtAtTDid("testResults", "Meme ange, one correct.", "+1", "black");
     else
        writeTxtAtTDid("testResults", "Zero correct. Ou na okulilonga!", "+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="right" border="0">
     <tr>
        <td colspan="15" align="right">
               <a href="javascript:requestPrintTest('+');" style="text-decoration: none"> <font color="green">+</font></a> |
           <a href="javascript:requestPrintTest('-');" style="text-decoration: none"> <font color="green">&#150</font></a> |
           <a href="javascript:requestPrintTest('x');" style="text-decoration: none"> <font color="green">&#215</font></a> |
           <a href="javascript:requestPrintTest('\367');" style="text-decoration: none"> <font color="green">&#247</font></a> |
           <a href="javascript:requestHelp();"><font size="-1" color="green">Help Me!</font></a> |          
           <a href="javascript:myPop('Tested in IE6 and Safari');"><font size="-1" color="green">About This Site</font></a> |
           <a href="mailto:aarontkennedy@gmail.com">;<font size="-1" color="green">Suggestions</font></a>
        </td>      
     </tr>
     <tr>
        <td width="12%"></td>
        <td width="3%" valign="center" align="right"><font color="green" size="+0"></font></td>
            <td width="3%" valign="center" align="right"><font color="green" size="+0"></font></td>
        <td width="3%" valign="center" align="right"><font color="green" size="+1"></font></td>
        <td width="3%" valign="center" align="right"><font color="green" size="+1"></font></td>
        <td width="3%" valign="center" align="right"><font color="green" size="+2"></font></td>
        <td width="3%" valign="center" align="right"><font color="green" size="+2"></font></td>
        <td width="40%" valign="center" align="center"><font color="green" size="+3"><blink>Win</blink> Big Money!!!</font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+2"></font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+2"></font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+1"></font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+1"></font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+0"></font></td>
        <td width="3%" valign="center" align="left"><font color="green" size="+0"></font></td>
        <td width="12%"></td>
     </tr>
  </table><br><br><br><br><br><br>
  
  <form name="winBigMoney">
     <table align="center" width="100%" border="0">
     <tr>
        <td width="23%" align="right" id="problem1"></td>
        <td width="10%" align="left"><font size-1></font><input type"text" size="6" name="answer1"></td>
        <td width="23%" align="right" id="problem2"></td>
        <td width="10%" align="left"><font size-1></font><input type"text" size="6" 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="right"> <font color="green"><blink></blink></font> </td>
     <td align="center"><a href="javascript:requestPrintTest('+');">
        <font color="black">Addition</font></a></td>
     <td align="center"> <font color="green"><blink></blink></font> </td>
     <td align="center"><a href="javascript:requestPrintTest('-');">
        <font color="black">Subtraction</font></a></td>
     <td align="center"> <font color="green"><blink></blink></font> </td>
     <td align="center"><a href="javascript:requestPrintTest('x');">
        <font color="black">Multiplication</font></a></td>
     <td align="center"> <font color="green"><blink></blink></font> </td>
     <td align="center"><a href="javascript:requestPrintTest('\367');">
        <font color="black">Division</font></a></td>
     <td align="center"> <font color="green"><blink></blink></font> </td>
     <td align="center"><a href="javascript:requestHelp();">
        <font color="black">Help Me!</font></a></td> 
     <td align="left"> <font color="green"><blink></blink></font> </td>          
  </tr></table> 
  
  <center>
  <font color="red" size="-1"><blink>
  ** Computers are like calculators! Use a <font size="+2"><b>.</b></font> for decimals here and a <font size="+2"><b>,</b></font> for decimals in class!!! **
  </blink></font>  
  </center>   
     
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.