Full version: jsB@nk » Game » Math Flash cards
URL: https://www.javascriptbank.com/math-flash-cards.html
This is a multiple choice Math Flash card game for addition, subtraction, and multiplication.
Full version: jsB@nk » Game » Math Flash cards
URL: https://www.javascriptbank.com/math-flash-cards.html
<style><!--/*Patrick Lewis , [email protected]*/.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>// ############ MATH FLASH CARDS - JAN 17, 2003// ############ CREATED BY PATRICK LEWIS// ############ VERSION 1.9function 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 SNIFFERif (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 ANSWERSfakie=",";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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form name="Flash"><table border="0" cellpadding="2" cellspacing="0" width="480"><tbody><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><option value="20" setting="Medium">Medium (0-20)</option><option value="50" setting="Hard">Hard (0-50)</option><option value="100" setting="Expert">Expert (0-100)</option></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><option value="Subt.">Subtraction</option><option value="Mult.">Multiplication</option><option value="Rnd ±">Random (+ and -)</option><option value="Rnd All">Random all (+, -, and x)</option></select></th></tr><tr class="sect1"><td width="120"><center><input type="button" value="New player" onclick="ResetGame();"></center></td><td width="120"><center><input type="button" value="Start game" onclick="StartGame();" style="background-color: rgb(119, 221, 119);"></center></td><td width="120"><center><input type="button" value="Stop game" onclick="StopGame();" style="background-color: rgb(221, 119, 119);"></center></td><td width="120"><center><input type="button" value="Instructions" onclick="window.location='#inst'"></center></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="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></center></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:</b></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></tbody></table><a name="inst"></a><table width="490" cellpadding="10"><tbody><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 © 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></center></td></tr></tbody></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->