<!doctype html>
<head>
<title>Thanks to https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave</title>
<style>
td { font-size: 40px; font-color: purple; text-align: center; border: 1px dotted lightblue; background-color: white; }
th { font-size: 30px; background-color: silver; text-align: center; border: 2px solid blue; }
</style>
<script type='text/javascript'>
var container=null, log=null;
var score = 0;
var goes = 0;
var realgoes = 0;
var actsym = '+';
var answeridea = '';
var sansweridea = '';
var operatoris = '';
var num1 = 0;
var denom1 = 0;
var num2 = 0;
var denom2 = 0;
var ndenom = 0;
var xrand = 0;
var zz = "0";
var xaction = ['+', '+', '-', '*']; //, '/', '%', '**'];
var ansis='';
var huhc='';
var lasthuhc='';
var oktocheck=true;
var ibonus=0;
function fbonus() {
if (document.getElementById('bonus').innerHTML == '') {
ibonus=0;
}
if (ibonus > 0) {
ibonus--;
document.getElementById('bonus').innerHTML='Bonus Points: ' + ibonus;
}
if (ibonus > 0) {
setTimeout(fbonus, 1000);
}
}
function antiatc() {
oktocheck=true;
}
function antihuhc() {
lasthuhc='';
}
function placetn(x,y,what) {
document.getElementById('sofar').innerHTML='';
ansis=('' + eval(what));
ibonus=eval('' + what.replace(actsym, " " + actsym + " ").length);
ibonus*=2;
document.getElementById('bonus').innerHTML='Bonus Points: ' + ibonus;
setTimeout(fbonus, 1000);
document.getElementById('myq').innerHTML=what.replace(actsym, " " + actsym + " ");
}
function askq() { //add_question(inx, iny) {
var inx=0, iny=0;
//alert(99);
var zero = 0, thousand = 1000, hundred = 100;
var difficulty = "Easy";
var diffic = Math.floor((Math.random()*2)); //document.getElementById("difficulty").value;
if (diffic != 0) { difficulty="SuperHard"; }
//alert(98);
var mrand = 0, srand=0, nrand=0, frand=0, lx=inx, ly=iny, nx=inx, ny=iny, mx, my, j, k, tn="-1.0";
xrand = 0;
num1 = 0;
denom1 = 0;
num2 = 0;
denom2 = 0;
ndenom = 0;
if (difficulty.indexOf("Easy") != -1) {
xrand = Math.floor((Math.random()*2)+1); // 3
} else {
xrand = Math.floor((Math.random()*2)+1); // 6
}
//alert(xrand);
if (xrand == 6) {
imgaction = document.getElementById('power');
thousand = 12;
hundred = 12;
} else if (xrand == 5) {
imgaction = document.getElementById('mod');
zero = 1;
} else if (xrand == 4) {
imgaction = document.getElementById('divide');
zero = 1;
hundred = 12;
} else if (xrand == 3) {
imgaction = document.getElementById('multiply');
hundred = 12;
} else if (xrand == 2) {
imgaction = document.getElementById('minus');
} else {
imgaction = document.getElementById('plus');
}
actsym = imgaction.title;
//alert("inx=" + inx + ' ' + "iny=" + iny);
//context.drawImage(imgaction, inx, iny);
//alert("imgaction.style.width");
//alert(imgaction.width);
nx = eval(inx + 25 + 15);
//alert(nx + ' ' + imgaction.width);
mx = nx;
my = eval(iny - 25 - 15);
ly = eval(ly + 25 + 15);
if (difficulty.indexOf("Easy") != -1) {
while (tn.indexOf('.') != -1 || ('' + eval(tn)).indexOf('-') !=- 1) {
if (difficulty.indexOf("Super") != -1) {
mrand = Math.floor((Math.random()*10)+0);
} else {
mrand = Math.floor((Math.random()*100)+0);
}
tn = "" + mrand;
//placetn(mx, my, tn);
if (difficulty.indexOf("Super") != -1) {
mrand = Math.floor((Math.random()*10)+zero);
} else {
mrand = Math.floor((Math.random()*hundred)+zero);
}
tn += actsym + mrand;
}
placetn(nx, ny, tn);
} else {
while (tn.indexOf('.') != -1 || ('' + eval(tn)).indexOf('-') != -1) {
srand = Math.floor((Math.random()*2)+1);
mrand = Math.floor((Math.random()*1000)+0);
frand = 0; //Math.floor((Math.random()*100)+0);
frand=0;
if (srand <= 1 || 1 == 1) {
tn = "" + mrand;
} else {
tn = "-" + mrand;
}
if (frand != 0) tn = tn + "." + frand;
//placetn(mx, my, tn);
srand = Math.floor((Math.random()*2)+1);
mrand = Math.floor((Math.random()*thousand)+zero);
frand = 0; //Math.floor((Math.random()*100)+zero);
frand=0;
if (srand <= 1 || 1 == 1) {
tn += "" + actsym + mrand;
} else {
tn += "" + actsym + "-" + mrand;
}
if (frand != 0) tn = tn + "." + frand;
}
placetn(nx, ny, tn);
}
//img = document.getElementById('line');
//for (k=0; k<5; k++) {
// context.drawImage(img, lx, ly);
// lx = eval(lx + img.width);
//}
}
function precheckans(keyUpEvent) {
var isnumber=false;
if (!keyUpEvent.ctrlKey && !keyUpEvent.metaKey) {
if (((keyUpEvent.which || keyUpEvent.keyCode) >= 48 && (keyUpEvent.which || keyUpEvent.keyCode) <= 57) && !keyUpEvent.shiftKey) {
huhc='' + eval(-48 + (keyUpEvent.which || keyUpEvent.keyCode));
isnumber=true;
}
if (isnumber) {
document.getElementById('sofar').innerHTML+=huhc; if (huhc != '') { lasthuhc=huhc; setTimeout(antihuhc, 200); }
} else {
checkans();
}
}
}
function checkans() {
if (!oktocheck || document.getElementById('sofar').innerHTML == '') {
oktocheck=true;
} else {
oktocheck=true;
goes++;
if (document.getElementById('sofar').innerHTML.split(' ')[0].split('<')[0] == ansis) {
if (document.getElementById('bonus').innerHTML.replace('Bonus','').replace('Points','').replace(':','').trim().replace('0','') != '') { score+=eval(document.getElementById('bonus').innerHTML.replace('Bonus','').replace('Points','').replace(':','').trim()); document.getElementById('bonus').innerHTML=''; }
score++;
}
document.getElementById('bonus').innerHTML='';
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
setTimeout(askq, 1100);
}
}
function handler(event) {
function str(el) {
huhc='';
if (!el) return "null"
if (('' + el.className).indexOf('cell') != -1) { huhc=el.innerHTML; }
return el.id || el.className || el.tagName;
}
function strtwo(el) {
if (!el) return "null"
return el.id || el.className || el.tagName;
}
log.value += event.type + ': ' +
'target=' + str(event.target) +
', relatedTarget=' + strtwo(event.relatedTarget) + "\n";
log.scrollTop = log.scrollHeight;
if (event.type == 'mouseover') {
event.target.style.background = 'pink'
if (huhc != lasthuhc) { document.getElementById('sofar').innerHTML+=huhc; if (huhc != '') { lasthuhc=huhc; setTimeout(antihuhc, 200); } }
} else if (event.type == 'click') {
if (huhc != lasthuhc) { document.getElementById('sofar').innerHTML+=huhc; if (huhc != '') { lasthuhc=huhc; setTimeout(antihuhc, 200); } }
}
if (event.type == 'mouseout') {
event.target.style.background = ''
}
}
function onl() {
var ii=0;
log=document.getElementById('log');
// Thanks to https://flaviocopes.com/add-click-event-to-dom-list/
const cells = document.querySelectorAll("#mytable td");
for (const cell of cells) {
cell.className='cell' + ii;
ii++;
cell.addEventListener('click', handler);
cell.addEventListener('mouseout', handler);
cell.addEventListener('mouseover', handler);
}
askq();
}
</script>
</head>
<body onload='onl();' onkeypress='precheckans(event);'>
<h1>Simple Maths Timer Game</h1>
<h3>RJM Programming - September, 2019</h3>
<h3 id=score>Score: 0/0</h3>
<h4 id=sofar style='display:inline-block;'></h4> <input id=bclear style='display:inline-block;background-color:lightgray;' value="<-- Clear Answer" type=button onclick="document.getElementById('sofar').innerHTML='';" onmouseover="document.getElementById('sofar').innerHTML='';"></input> <input style='background-color:orange;display:inline-block;' onmouseover='checkans();' onclick='checkans();' type=button value='Check Answer or Keyboard Non-Number' title='Check answer'></input> <span id=bonus></span><br><br>
<table style='border:30px solid red;width:100%; background-color: yellow;' title='mytable' id=mytable cellpadding=40 cellspacing=40>
<tr><td>0</td><td>1</td><td>2</td></tr>
<tr><td>3</td><th id=myq></th><td>4</td></tr>
<tr><td>5</td><th id=mya><input style='background-color:orange;' onmouseover='checkans();' onclick='checkans();' type=button value='Check Answer' title='Check answer'></input></th><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<textarea style='display:none;' id=log rows=40 cols=90>
</textarea>
<input type=hidden title='**' id='power'></input>
<input type=hidden title='%' id='mod'></input>
<input type=hidden title='/' id='divide'></input>
<input type=hidden title='*' id='multiply'></input>
<input type=hidden title='-' id='minus'></input>
<input type=hidden title='+' id='plus'></input>
</body>
</html>