topical media & game development

talk show tell print

game-javascript-casual-math-flash-cards-game.htm / htm



  
  <!-- ONE STEP TO INSTALL MATH FLASH CARDS:
  
    1.  Copy the coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  <!-- Original:  Patrick Lewis (gtrwiz-NOSPAM-@aol.com) -->
  <!-- Web Site:  http://www.PatrickLewis.net -->
  <style>
  <!--
  .Answer                {font-weight:bold; font-size:20px; text-align:center; text-decoration:none;}
  .Question        {font-weight:bold; font-size:40px; text-align:center;}
  .Sign                {font-weight:bold; font-size:30px; text-align:right; font-family:helvetica;}
  .High                {font-weight:bold; font-size:15px; text-align:center; }
  .sect1                {background-color:#efe9df;}
  .sect2                {background-color:#efefef;}
  .sect3                {background-color:#e9efdf;}
  .sect4                {background-color:#dfe9ef;}
  -->
  </style>
  
  <center>
  <form name=Flash>
  <font class=Sign>Math Flash cards </font><font class=High>v1.9</font><br>
  <table border=0 cellpadding=2 cellspacing=0 width=480>
  <tr class="sect1" onclick="if (gamestart){alert('Not during a game.  \nStop the game first.   ');}">
          <th colspan=2>Choose difficulty<br>
          <select name="diff">
                  <option value=10        setting="Easy">                Easy (0-10)
                  <option value=20        setting="Medium">        Medium (0-20)
                  <option value=50        setting="Hard">                Hard (0-50)
                  <option value=100        setting="Expert">        Expert (0-100)
          </select>
          </th>
          <th colspan=2>Choose Math function<br>
          <select  name="func" onclick="if (gamestart){alert('Not during a game.  \nStop the game first.   ');}">
                  <option        value="Add.">                Addition
                  <option        value="Subt.">                Subtraction
                  <option        value="Mult.">                Multiplication
                  <option        value="Rnd ">        Random (+  and -)
                  <option        value="Rnd All">        Random all (+, -, and x)
                  
          </select>
          </th>
  </td>
  <tr class="sect1">
          <td width=120><center><input type=button value="New player" onclick="ResetGame();"></td>
          <td width=120><center><input type=button value="Start game" onclick="StartGame();" style="background-color:#77dd77;"></td>
          <td width=120><center><input type=button value="Stop game" onclick="StopGame();" style="background-color:#dd7777;"></td>
          <td width=120><center><input type=button value="Instructions" onclick="window.location='#inst'"></td>
  </tr>
  
  <tr class="sect2">
          <td rowspan=3> </td>
          <td> </td>
          <td><div id="Q1" class="Question"> </div></td>
          <td rowspan=4> </td>
  </tr>
  <tr class="sect2">
          <td><div id="Sign" class="Sign"> </div></td>
          <td><div id="Q2" class="Question"> </div></td>
  </tr>
  <tr class="sect2">
          <td colspan=2><hr noshade width=75% align=right size=5 color=black></td>
  </tr>
  <tr class="sect2">
          <td colspan=2> </td>
          <td><center><font class="Question">?</font><br><br></td>
  </tr>
  <tr class="sect2">
          <td><div id="Ans1" class="Answer"> </div></td>
          <td><div id="Ans2" class="Answer"> </div></td>
          <td><div id="Ans3" class="Answer"> </div></td>
          <td><div id="Ans4" class="Answer"> </div></td>
  </tr>
  <tr class="sect2">
          <th><input type=button value="Answer A" id="A1" guess="" onclick="guessThis(this.guess)"></th>
          <th><input type=button value="Answer B" id="A2" guess="" onclick="guessThis(this.guess)"></th>
          <th><input type=button value="Answer C" id="A3" guess="" onclick="guessThis(this.guess)"></th>
          <th><input type=button value="Answer D" id="A4" guess="" onclick="guessThis(this.guess)"></th>
  </tr>
  <tr class="sect2">
          <td colspan=4><div id="Response" class="Answer"> </div></td>
  </tr>
  
  <tr class="sect3">
          <td colspan=4 valign=bottom><b>Player scoring:</td>
  </tr>
  <tr class="sect3">
          <td align=right>Name:</td>
          <td colspan=3><div id="Player" class="Answer"> </div></td>
  </tr>
  <tr class="sect3">
          <td align=right>Correct:</td>
          <td colspan=3><div id="Correct" class="Answer">0</div></td>
  </tr>
  <tr class="sect3">
          <td align=right>Incorrect:</td>
          <td colspan=3><div id="Missed" class="Answer">0</div></td>
  </tr>
  <tr class="sect3">
          <td align=right>Accuracy:</td>
          <td colspan=3><div id="Accuracy" class="Answer">0%</div></td>
  </tr>
  <tr class="sect3">
          <td align=right>Speed:</td>
          <td colspan=3><div id="Speed" class="Answer">0 sec</div></td>
  </tr>
  
  <tr class="sect4">        <th colspan=4>- - - - - - Highscores - - - - - -</th>
  </tr>
  <tr class="sect4">        <td><div id="HighName" class="High"><u><font color=#aa0000>Name</font></u><br></div></td>
          <td><div id="HighDiff" class="High"><u><font color=#aa0000>Difficulty</font></u><br></div></td>
          <td><div id="HighAcc" class="High"><u><font color=#aa0000>Accuracy</font></u><br></div></td>
          <td><div id="HighSpeed" class="High"><u><font color=#aa0000>Speed</font></u><br></div></td>
  </tr>
  </table>
  
  <br><br><br><br><br><br><br><br><br><br><br><br>
  
  <a name=inst></a>
  
  <table width=490 cellpadding=10>
  <tr class="sect1"><td>
  <center><h2>Instructions</h2></center>
  
  Before you begin, be sure to select the difficulty setting and math function that you want.   
  These options are at the top of the page and can only be changed after the game has stopped.   
  The difficulty option shows the range of numbers that the problem can be constructed from, (0-10 means the problem can be from 0+0 to 10+10.
  <br><br>
  
  To start a session, click on the '<b>New Player</b>' button.   
  Enter your name, then click on the '<b>Start game</b>' button to begin answering the problems.   
  To answer a problem, just click on the button under the answer you want.
  <br><br>
  
  The game will track how many answers you get right and wrong and how long it takes you to get the correct answer (in seconds).   
  You can stop the game at any time by clicking on the '<b>Stop game</b>' button.   
  This will put your current score in the Highscores area at the bottom.
  <br><br>
  
  To switch players, click on the '<b>New Player</b>' button.   
  As you switch players, the previous player's score will be added to the Highscores area.
  <br><br>
  
  <center><input type=button value="Back to the game" onclick="window.location='#top'">
  <br><br>
  <FONT SIZE="2" FACE="helvetica,arial,sans-serif"><FONT COLOR="A6A6A6">
  Copyright c 2003 <a href=http://www.patricklewis.net>Patrick Lewis</a>. All rights reserved.<BR>
  Reproduction in whole or in part without permission is prohibited.</FONT>
  </FONT>
  
  </td></tr>
  </table>
  
  </form>
  
  <script>
  //    

MATH FLASH CARDS - JAN 17, 2003




//

CREATED BY PATRICK LEWIS




//

WWW.PATRICKLEWIS.NET




//

VERSION 1.9




function BadBrowser () { alert(" * * * * * A T T E N T I O N * * * * * \n\nThis page will not work with your browser. \n\nUse either Netscape 6x or Internet Explorer 5x or higher. "); } //

SIMPLE BROWSER SNIFFER



if (document.layers) {navigator.family = "nn4"; BadBrowser();} if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = "opera"; BadBrowser();} if (document.all) {navigator.family = "ie4"} if (window.navigator.userAgent.toLowerCase().indexOf('gecko') != -1) {navigator.family = "gecko"; document.Flash.diff[0].setting = "Easy"; document.Flash.diff[1].setting = "Medium"; document.Flash.diff[2].setting = "Hard"; document.Flash.diff[3].setting = "Expert"; } if (window.navigator.platform.toLowerCase().indexOf('mac') != -1) {navigator.OS = "mac";} farray = new Array("+","-","*","+ -","+ - *"); fSignarray = new Array(); gamestart=false; named=false; good = new Array("Correct!","You got that one right.","Another one right.","You're doing great!", "You're going to the head of the class!","I knew you could get that one.","That was easy, wasn't it?", "That's the right answer.","Good going!",""); bad = new Array("Oops, try again.","Better luck next time","Try a different answer.","Nope, not that one.", "nope, that one was a little hard.","Hmmm, that is incorrect.","Nope, try again."); function ResetGame() { name=prompt("Enter your name.",""); if (name == "") {alert("Please enter your name or click on 'Cancel'. "); ResetGame();} else if (name == "null") {return;} WriteMessage("Player" , name); WriteMessage("Correct" , "0"); WriteMessage("Missed" , "0"); WriteMessage("Accuracy" , "0%"); WriteMessage("Speed" , "0 sec"); Timer = new Array(); named=true; WriteMessage("Response" , "<font color=#0000aa>Click on 'Start game' to begin."); } function StartGame() { if (!named) { WriteMessage("Response" , "<font color=#0000aa>Click on 'New player' and enter your name first."); return; } if (gamestart) {return;} WriteMessage("Correct" , "0"); WriteMessage("Missed" , "0"); WriteMessage("Accuracy" , "0%"); WriteMessage("Speed" , "0 sec"); Timer = new Array(); gamestart=true; WriteMessage("Response" , "<font color=#0000aa>Click on an answer button."); showProblem(); } function StopGame(){ if (!gamestart) {return;} else { if (window.navigator.userAgent.toLowerCase().indexOf('gecko') != -1) {navigator.family = "gecko";} if (navigator.family == "ie4") { WriteMessage("HighName" , Player.innerHTML +"<br>","add"); WriteMessage("HighDiff" , document.Flash.diff[document.Flash.diff.selectedIndex].setting+" "+ document.Flash.func[document.Flash.func.selectedIndex].value +"<br>","add"); WriteMessage("HighAcc" , Accuracy.innerHTML +" ("+ Correct.innerHTML +"/"+ (Math.floor(Correct.innerHTML)+Math.floor(Missed.innerHTML)) +")<br>","add"); WriteMessage("HighSpeed" , Speed.innerHTML +"<br>","add"); WriteMessage("Response" , "<font color=#0000aa>Look at your Highscore!"); gamestart=false; } else if (navigator.family == "gecko") { WriteMessage("HighName" , document.getElementById("Player").innerHTML +"<br>","add"); WriteMessage("HighDiff" , document.Flash.diff[document.Flash.diff.selectedIndex].setting +" "+ document.Flash.func[document.Flash.func.selectedIndex].value +"<br>","add"); WriteMessage("HighAcc" , document.getElementById("Accuracy").innerHTML +" ("+ document.getElementById("Correct").innerHTML +"/"+ (Math.floor(document.getElementById("Correct").innerHTML)+Math.floor(document.getElementById("Missed").innerHTML)) +")<br>","add"); WriteMessage("HighSpeed" , document.getElementById("Speed").innerHTML +"<br>","add"); WriteMessage("Response" , "<font color=#0000aa>Look at your Highscore!"); gamestart=false; } } } function showProblem () { StartTime = new Date().getTime(); if (document.Flash.func.selectedIndex < 3) { MathSign = farray[document.Flash.func.selectedIndex]; } else { RSign = farray[document.Flash.func.selectedIndex].split(" "); MathSign = RSign[Math.floor(Math.random() * RSign.length)]; } num1 = Math.floor(Math.random() * document.Flash.diff[document.Flash.diff.selectedIndex].value); num2 = Math.floor(Math.random() * document.Flash.diff[document.Flash.diff.selectedIndex].value); if (MathSign == "-") { if (num1 < num2) { temp=num1; num1=num2; num2=temp; } } WriteMessage("Q1" , num1); WriteMessage("Q2" , num2); if (MathSign == "*") {WriteMessage("Sign", "x");} else {WriteMessage("Sign", MathSign);} CorrectAns = eval(num1 + MathSign + num2); //
PUTS IN FAKE ANSWERS

fakie=","; for (x=1;x<5;x++) { if (MathSign == "+") {fakeans = Math.floor(Math.random() * (document.Flash.diff[document.Flash.diff.selectedIndex].value*2));} if (MathSign == "-") {fakeans = Math.floor(Math.random() * document.Flash.diff[document.Flash.diff.selectedIndex].value);} if (MathSign == "*") {fakeans = Math.floor(Math.random() * document.Flash.diff[document.Flash.diff.selectedIndex].value) * Math.floor(Math.random() * document.Flash.diff[document.Flash.diff.selectedIndex].value);} if (fakie.match(","+fakeans+",") || fakeans == CorrectAns) {x--;} else { fakie += fakeans+","; WriteMessage("Ans"+x , fakeans); if (navigator.family == "ie4") {document.all["A"+x].guess = fakeans;} else if (navigator.family == "gecko") {document.getElementById("A"+x).guess = fakeans;} } } CPick = Math.floor(Math.random() * 3)+1; WriteMessage("Ans"+CPick , CorrectAns); if (navigator.family == "ie4") {document.all["A"+CPick].guess = CorrectAns;} else if (navigator.family == "gecko") {document.getElementById("A"+CPick).guess = CorrectAns;} } function guessThis (number) { if (!gamestart) { WriteMessage("Response" , "<font color=#0000aa>Click 'Start game' first."); return; } if (number == CorrectAns) { EndTime=new Date().getTime(); Timer[Timer.length] = EndTime-StartTime; WriteMessage("Response" , "<font color=#00aa00>"+ good[Math.floor(Math.random() * (good.length-1))]); if (navigator.family == "ie4") {WriteMessage("Correct" , Math.floor(Correct.innerHTML)+1);} else if (navigator.family == "gecko") {WriteMessage("Correct" , Math.floor(document.getElementById("Correct").innerHTML)+1);} updateScore(); showProblem(); } else { WriteMessage("Response" , "<font color=#aa0000>"+ bad[ Math.floor(Math.random() * (bad.length-1))]); if (navigator.family == "ie4") {WriteMessage("Missed" , Math.floor(Missed.innerHTML)+1);} else if (navigator.family == "gecko") {WriteMessage("Missed" , Math.floor(document.getElementById("Missed").innerHTML)+1);} updateScore(); } } function updateScore () { if (navigator.family == "ie4") { Perc = (Math.floor(Correct.innerHTML ) / (Math.floor(Missed.innerHTML )+ Math.floor(Correct.innerHTML))) * 100; } else if (navigator.family == "gecko") { Perc = (Math.floor(document.getElementById("Correct").innerHTML ) / (Math.floor(document.getElementById("Missed").innerHTML )+ Math.floor(document.getElementById("Correct").innerHTML))) * 100; } WriteMessage("Accuracy" , Perc.toString().substring(0,4) +"%"); temptimer = 0; for (x=0;x<Timer.length;x++) { temptimer += Math.floor(Timer[x]); } newSpeed = (temptimer*.001/(Timer.length)).toString().substring(0,(temptimer*.001/(Timer.length)).toString().indexOf(".")+3); if (newSpeed != "Na") { WriteMessage("Speed" , (temptimer*.001/(Timer.length)).toString().substring(0,(temptimer*.001/(Timer.length)).toString().indexOf(".")+3) +" sec"); } } function WriteMessage(where,what,addto) { if (window.navigator.userAgent.toLowerCase().indexOf('gecko') != -1) {navigator.family = "gecko";} if (addto) { if (navigator.family == "ie4") {document.all[where].innerHTML += what;} if (navigator.family == "gecko") {document.getElementById(where).innerHTML += what;} } else { if (navigator.family == "ie4") {document.all[where].innerHTML = what;} if (navigator.family == "gecko") {document.getElementById(where).innerHTML = what;} } } </script> <p><center> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 16.05 KB -->


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