File: /home/awaldron/www/aw/math/index.html
<html>
<head>
<title>Mental Math Trainer</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/math.js"></script>
<link rel="stylesheet" type="text/css" href="css/math.css" />
<meta name="viewport" content="user-scalable = yes">
</head>
<body>
<div class="zoom">
<div id="welcome">
<center>
<p><img src="img/logo.png"></p>
<center><button id="start-game" class="button-secondary">Start Game</button></center>
<center><button id="open-settings" class="button-secondary">Settings</button></center>
</center>
</div>
<div id="game">
<br/><br/><br/>
<center>
<table class="problem card">
<tr><td align="right"> </td><td align="right" id="n1out"></td></tr>
<tr><td align="right" id="opout"></td><td align="right" id="n2out"></td></tr>
<tr><td colspan=2><div style="border:solid 1px #000000;"></div></td></tr>
<tr><td colspan=2 align="right" id="ansout"><input type="text" pattern="\d*" id="myAnswer" /></td></tr>
</table>
<div id="response">
<div id="timer">10</div>
<span id="ansCorrect">CORRECT!!</span>
<span id="ansWrong">Incorrect - Keep Trying!</span>
<span id="ansTimeout">TIME'S UP!!</span>
<span id="nextLink"> <a href="#" class="reload">Next ></a></span>
</div>
<table>
<tr><td><div id="press7" class="numBtn">7</div></td></td>
<td><div id="press8" class="numBtn">8</div></td>
<td><div id="press9" class="numBtn">9</div></tr>
<tr><td><div id="press4" class="numBtn">4</div></td>
<td><div id="press5" class="numBtn">5</div></td>
<td><div id="press6" class="numBtn">6</div></td></tr>
<tr><td><div id="press1" class="numBtn">1</div></td>
<td><div id="press2" class="numBtn">2</div></td>
<td><div id="press3" class="numBtn">3</div></td></tr>
<tr><td><div id="pressS" class="numBtn"><img src="img/gear.png" /></div></td>
<td><div id="press0" class="numBtn">0</div></td>
<td><div id="pressX" class="numBtn"><img src="img/backspace.png" /></div></td></tr>
<tr><td colspan=3> </td></tr>
</table>
<input type="hidden" id="theAnswer" value="" />
</center>
</div>
</div>
<div id="settings">
<br/><br/>
<div id="settings-inner">
<center>
<h1 style="margin:0;">Settings</h1>
<table id="options" cellspacing="0" cellpadding="2">
<tr><td> </td><td> </td><td>Min</td><td>Max</td></tr>
<tr bgcolor="#EEEEEE"><td>Operand 1</td>
<td><select id="f1type"><option value="r" selected="selected">Range</option><option value="f">Fixed</option></select></td>
<td><input type="number" pattern="\d*" id="f1a" value="0" min="0" max="12" /></td><td><input type="number" pattern="\d*" id="f1b" value="10" min="0" max="12" /></td>
</tr>
<tr><td>Operand 2</td>
<td><select id="f2type"><option value="r">Range</option><option value="f">Fixed</option></select></td>
<td><input type="number" pattern="\d*" id="f2a" value="0" min="0" max="12" /></td><td><input type="number" pattern="\d*" id="f2b" value="10" min="0" max="12" /></td>
</tr>
<tr bgcolor="#EEEEEE"><td>Timer</td>
<td><input type="number" pattern="\d*" id="timeout" value="10" min="3" max="60" /></td>
<td colspan=2>seconds</td>
</tr>
<tr><td>Addition</td>
<td><input type="checkbox" class="switch" id="addOn" value="1" checked="checked" /></td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#EEEEEE"><td>Subtraction</td>
<td><input type="checkbox" class="switch" id="subOn" value="1" /></td>
<td> </td>
<td> </td>
</tr>
<tr><td>Multiplication</td>
<td><input type="checkbox" class="switch" id="mltOn" value="1" /></td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#EEEEEE"><td>Division</td>
<td><input type="checkbox" class="switch" id="divOn" value="1" /></td>
<td> </td>
<td> </td>
</tr>
<tr><td>Background</td>
<td colspan="3">
<div class="bg-preview" style="background-image:url(img/classroom.jpg)" id="classroom"></div>
<div class="bg-preview" style="background-image:url(img/kitten.jpg)" id="kitten"></div>
<div class="bg-preview" style="background-image:url(img/dots.jpg)" id="dots"></div>
<div class="bg-preview" style="background-image:url(img/bg.jpg)" id="bg"></div>
<div class="bg-preview" style="background-image:url(img/sapphire.jpg)" id="sapphire"></div>
<br/>
<div class="bg-preview" style="background-image:url(img/fish.jpg)" id="fish"></div>
<div class="bg-preview" style="background-image:url(img/dog.jpg)" id="dog"></div>
<div class="bg-preview" style="background-image:url(img/garden.jpg)" id="garden"></div>
<div class="bg-preview" style="background-image:url(img/bubbles.jpg)" id="bubbles"></div>
<div class="bg-preview" style="background-image:url(img/graffiti.jpg)" id="graffiti"></div>
<br/>
</td>
</tr>
</table>
</center>
<center><button id="close-settings" class="button-secondary">Back to Game</button></center>
</div>
</div>
<div id="stats">
<div style="float:right;margin-right:15px;">Mental Math Trainer</div>
<div style="float:left;margin-left:15px;">Score: <span id="scRight">0</span> / <span id="scTotal">0</span> <span id="scPct">0</span>%</div>
</div>
</body>
</html>