File: //home/awaldron/www/aw/math.php
<?php
// add, sub, mlt, div
$op = $_GET['op'];
if (empty($op)) $op = "add";
$n1 = rand(1, 10);
$n2 = rand(1, 10);
if ($op == 'add') {
$ans = $n1 + $n2;
$opout = "+";
}
if ($op == 'mlt') {
$ans = $n1 * $n2;
$opout = "x";
}
if ($op == 'sub') {
if ($n2 > $n1) {
$tmp = $n1;
$n1 = $n2;
$n2 = $tmp;
}
$ans = $n1 - $n2;
$opout = "-";
}
if ($op == 'div') {
$ans = $n1 * $n2;
$tmp = $n1;
$n1 = $ans;
$ans = $tmp;
$opout = "÷";
}
//echo $n1 . ' ' . $opout . ' ' . $n2 . ' = ' . $ans . '<br/><br/>';
?>
<html>
<head><title>Alexa Math</title></head>
<body>
<style>
.link {
display: inline-block;
width:150px;
padding:8px 20px;
margin:6px;
background: #fa97d6;
color:#4d153d;
font-weight: bold;
}
.link:hover {
background: #ffCC00;
}
input { outline: none; border:0; }
</style>
<center>
<table style="font-size:136px;font-family:Helvetica;font-weight:bold;">
<tr><td align="right"> </td><td align="right"><?=$n1?></td><td> </td></tr>
<tr><td align="right"><?=$opout?></td><td align="right"> <?=$n2?></td><td> </td></tr>
<tr><td colspan=2><div style="border:solid 2px #000000;"></div></td><td></td></tr>
<tr><td colspan=2 align="right"><input type="text" id="myAnswer" style="text-align:right;font-size:136px;width:235px;font-family:Helvetica;font-weight:bold;"/></td><td id="timer" style="width:50px;text-align:right;color:#DDDDDD;font-size:24px;">10</td></tr>
</table>
<input type="hidden" id="theAnswer" value="<?=$ans?>" />
<div id="response"></div>
<br><br>
<a class="link" href="math.php?op=add">Addition</a>
<a class="link" href="math.php?op=sub">Subtraction</a>
<a class="link" href="math.php?op=mlt">Multiplicaiton</a>
<a class="link" href="math.php?op=div">Division</a>
</center>
<span style="color:#FFFFFF;">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var theAnswer = $('#theAnswer').val();
var alen = theAnswer.length;
var counter = 0;
var interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want to display it.
var timer = 10 - counter;
$('#timer').html(timer);
if (counter == 10) {
// Display a login box
clearInterval(interval);
$('#myAnswer').val(theAnswer).attr('disabled','disabled');
$('#response').html('<span style="color:#666666;font-size:72px;font-family:Helvetica;font-weight:bold;">TIME\'S UP!! <a href="math.php?op=<?=$op?>">Next ></a></span>');
}
}, 1000);
$('#myAnswer').keyup(function() {
console.log($(this).val().length + '==' + alen);
if ( $(this).val().length == alen ) {
var myAnswer = $('#myAnswer').val();
if (myAnswer.length == 0) {
$('#response').html('');
} else if (myAnswer == theAnswer) {
$('#response').html('<span style="color:#009900;font-size:72px;font-family:Helvetica;font-weight:bold;">CORRECT!! <a href="math.php?op=<?=$op?>">Next ></a></span>');
clearInterval(interval);
} else {
$('#response').html('<span style="color:#990000;font-size:72px;font-family:Helvetica;font-weight:bold;">NOOOOOOOO!!</span>');
}
}
});
$('#myAnswer').focus();
});
</script>