Math Flash Cards

Patrick Lewis Apr 4, 2003

This is a multiple choice Math Flash card game for addition, subtraction, and multiplication. You can change the difficulty (how large the numbers get in the problem) and which math function to use. It also tracks your accuracy and response time. Works with IE and Netscape 6

Math Flash cards v1.9

Choose difficulty		Choose Math function




		?



Player scoring:
Name:
Correct:	0
Incorrect:	0
Accuracy:	0%
Speed:	0 sec
- - - - - - Highscores - - - - - -
Name	Difficulty	Accuracy	Speed

Instructions

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.

To start a session, click on the 'New Player' button. Enter your name, then click on the 'Start game' button to begin answering the problems. To answer a problem, just click on the button under the answer you want.

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 'Stop game' button. This will put your current score in the Highscores area at the bottom.

To switch players, click on the 'New Player' button. As you switch players, the previous player's score will be added to the Highscores area.

Copyright © 2003 Patrick Lewis. All rights reserved.
Reproduction in whole or in part without permission is prohibited.

The JavaScript Source: Games: Math Flash Cards

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- ONE STEP TO INSTALL MATH FLASH CARDS:

1.  Copy the coding into the BODY of your HTML document  -->

<BODY>

<style>

</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="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>

<table width=490 cellpadding=10>
<tr class="sect1"><td>
<center><h2>Instructions</h2></center>

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>

</td></tr>
</table>

</form>

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.");
}

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;
		}
	}
}

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;}

}

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");
	}
}

</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>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Math Flash Cards

Instructions

Leave a Response

Attention JavaScript Coders

Go Deeper