<!doctype html>
<head>
<title>Thanks to https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
td { font-size: 40px; font-color: purple; text-align: center; border: 1px dotted lightblue; background-color: white; }
div { 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 inarow=0;
var timestart=null, timeend=null;
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;
var modeofgame="Simple Maths Timer Game";
var othermodeofgame="Onmouseover and Onmouseout Monitor";
var prevcell='';
var thiscid, prevcid;
var one=1, otherone=-1;
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;

function onres() {
deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
}

function percenth(inhs) {
return inhs;
document.getElementById('divs').style.height='' + deviceHeight + 'px';
return '' + eval(eval(eval(inhs.split('px')[0]) * 100) / deviceHeight) + '%';
}

function percentw(inws) {
return inws;
document.getElementById('divs').style.width='' + deviceWidth + 'px';
//alert('' + deviceWidth + ' ' + inws + ' ' + '' + eval(eval(eval(inws.split('px')[0]) * 100) / deviceWidth) + '%');
return '' + eval(eval(eval(inws.split('px')[0]) * 100) / deviceWidth) + '%';
}

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; if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { setTimeout(antihuhc, 400); } else { 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) { // thanks to https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

function str(el) {
huhc='';
if (!el) return "null"
if (('' + el.className).indexOf('cell') != -1) { thiscid=eval(('' + el.className).split('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;

//var inarow=0;
//var timestart=null, timeend=null;


if (event.type == 'mouseover') {
event.target.style.background = 'pink'
if (huhc != lasthuhc) { document.getElementById('sofar').innerHTML+=huhc; if (huhc != '') { lasthuhc=huhc; if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { setTimeout(antihuhc, 400); } else { setTimeout(antihuhc, 200); } } }
if (modeofgame == "Smooth Spinner Game") {
if (prevcell == '') {
inarow=1;
timeend=null;
timestart=new Date();
prevcell=str(event.target);
prevcid=thiscid;
} else if (thiscid == prevcid) {
inarow=inarow;
} else if (eval(10 + thiscid) == eval(one + prevcid) || eval(10 + thiscid) == eval(otherone + prevcid) || eval(-10 + thiscid) == eval(one + prevcid) || eval(-10 + thiscid) == eval(otherone + prevcid) || eval(0 + thiscid) == eval(one + prevcid) || eval(0 + thiscid) == eval(otherone + prevcid)) {
if (inarow == 1) {
if (eval(10 + thiscid) == eval(one + prevcid) || eval(-10 + thiscid) == eval(one + prevcid) || eval(0 + thiscid) == eval(one + prevcid)) {
otherone=one;
} else {
one=otherone;
}
}
inarow++;
prevcell=str(event.target);
prevcid=thiscid;
} else {
timeend=new Date();
document.getElementById('score').style.display='block';
document.getElementById('score').innerHTML='Not smooth enough ... though you were smooth enough for ' + inarow + ' in a row at speed value of ' + eval(1000 * inarow / (timeend - timestart));
alert(document.getElementById('score').innerHTML);
prevcell='';
inarow=0;
one=1;
otherone-1;
}
}
} else if (event.type == 'click') {
if (huhc != lasthuhc) { document.getElementById('sofar').innerHTML+=huhc; if (huhc != '') { lasthuhc=huhc; setTimeout(antihuhc, 200); } }
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (modeofgame == "Smooth Spinner Game") {
if (prevcell == '') {
inarow=1;
timeend=null;
timestart=new Date();
prevcell=str(event.target);
prevcid=thiscid;
} else if (thiscid == prevcid) {
inarow=inarow;
} else if (eval(10 + thiscid) == eval(one + prevcid) || eval(10 + thiscid) == eval(otherone + prevcid) || eval(-10 + thiscid) == eval(one + prevcid) || eval(-10 + thiscid) == eval(otherone + prevcid) || eval(0 + thiscid) == eval(one + prevcid) || eval(0 + thiscid) == eval(otherone + prevcid)) {
if (inarow == 1) {
if (eval(10 + thiscid) == eval(one + prevcid) || eval(-10 + thiscid) == eval(one + prevcid) || eval(0 + thiscid) == eval(one + prevcid)) {
otherone=one;
} else {
one=otherone;
}
}
inarow++;
prevcell=str(event.target);
prevcid=thiscid;
} else {
timeend=new Date();
document.getElementById('score').style.display='block';
document.getElementById('score').innerHTML='Not smooth enough ... though you were smooth enough for ' + inarow + ' in a row at speed value of ' + eval(1000 * inarow / (timeend - timestart));
alert(document.getElementById('score').innerHTML);
prevcell='';
inarow=0;
one=1;
otherone-1;
}
}
}
}
if (event.type == 'mouseout') {
event.target.style.background = ''
}
}

function divonl() {
var ii=0, recttd=null, rectth=null;
var tds=document.getElementsByTagName('td');
for (var jj=0; jj<tds.length; jj++) {
recttd=tds[jj].getBoundingClientRect();
if (tds[jj].outerHTML.indexOf(' style="') != -1) {
document.getElementById('divs').innerHTML+=tds[jj].outerHTML.replace('<td','<div').replace('</td','</div').replace(' style="',' style="position:absolute;top:' + percenth(recttd.top + 'px') + ';left:' + percentw(recttd.left + 'px') + ';width:' + percentw(recttd.width + 'px') + ';height:' + percenth(recttd.height + 'px') + ';' + '');
} else {
document.getElementById('divs').innerHTML+=tds[jj].outerHTML.replace('<td','<div style="position:absolute;top:' + percenth(recttd.top + 'px') + ';left:' + percentw(recttd.left + 'px') + ';width:' + percentw(recttd.width + 'px') + ';height:' + percenth(recttd.height + 'px') + ';' + '"').replace('</td','</div')
}
}
tds=document.getElementsByTagName('th');
recttd=tds[0].getBoundingClientRect();
rectth=tds[1].getBoundingClientRect();
document.getElementById('mytable').style.visibility='hidden';
document.getElementById('log').style.position='absolute';
document.getElementById('log').style.top='' + percenth(recttd.top + 'px');
document.getElementById('log').style.left='' + percentw(recttd.left + 'px');
document.getElementById('log').style.width='' + percentw(recttd.width + 'px');
document.getElementById('log').style.height='' + percenth(eval(Math.abs(rectth.top - recttd.top) + rectth.height) + 'px');
document.getElementById('log').style.display='block';
document.getElementById('score').style.display='none';
document.getElementById('sofar').style.display='none';
document.getElementById('bclear').style.display='none';
document.getElementById('prebonus').style.display='none';
document.getElementById('bonus').style.display='none';
const divs = document.querySelectorAll("#divs div");
for (const div of divs) {
div.className='cell' + div.innerHTML; //ii;
ii++;
div.addEventListener('click', handler);
div.addEventListener('mouseout', handler);
div.addEventListener('mouseover', handler);
}
//askq();
}

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' + cell.innerHTML; //ii;
ii++;
cell.addEventListener('click', handler);
cell.addEventListener('mouseout', handler);
cell.addEventListener('mouseover', handler);
}
askq();
}

function stoggle(osel) {
var three=3, wasv='', newoi=' versus ', cs=['Simple Maths Timer Game','Onmouseover and Onmouseout Monitor','Smooth Spinner Game'], nv=osel.value;
if (osel.value != modeofgame) {
wasv=document.getElementById('myh1').innerHTML.split('&')[0].split('<')[0];
document.getElementById('soption').value=nv;
for (var ics=0; ics<cs.length; ics++) {
if (cs[ics] != nv) { if (newoi == ' versus ') { newoi+=cs[ics]; document.getElementById('o2').value=cs[ics]; document.getElementById('o2').innerHTML=cs[ics]; } else { newoi+=' or ' + cs[ics]; document.getElementById('o' + three).value=cs[ics]; document.getElementById('o' + three).innerHTML=cs[ics]; three++; } }
}
document.getElementById('soption').innerHTML=newoi;
document.getElementById('myh1').innerHTML=nv;
document.getElementById('stoggle').value=nv;
modeofgame=nv;
if (modeofgame == "Simple Maths Timer Game" && wasv != "Simple Maths Timer Game") { //"Onmouseover and Onmouseout Monitor") {
location.href=document.URL;
} else if (modeofgame == "Onmouseover and Onmouseout Monitor") {
divonl();
} else if (modeofgame == "Smooth Spinner Game") {
document.getElementById('score').innerHTML='';
document.getElementById('sofar').style.display='none';
document.getElementById('bclear').style.display='none';
document.getElementById('prebonus').style.display='none';
document.getElementById('bonus').style.display='none';
if (wasv == "Simple Maths Timer Game") {
document.getElementById('myq').style.fontSize='10px';
document.getElementById('mya').style.fontSize='10px';
document.getElementById('myq').innerHTML='Hover or Click<br> clockwise or anticlockwise';
document.getElementById('mya').innerHTML=' ... as fast<br> as you can ...';
}
}
}
}

function toggle(oh1) {
var spare=othermodeofgame;
//var modeofgame="Simple Maths Timer Game";
//var othermodeofgame="Onmouseover and Onmouseout Monitor";
if (modeofgame == "Simple Maths Timer Game") {
othermodeofgame=modeofgame;
modeofgame=spare;
document.getElementById('myh1').innerHTML=modeofgame + '<font size=1 id=fmyh1> versus ' + othermodeofgame + '</font>';
divonl();
} else {
othermodeofgame=modeofgame;
modeofgame=spare;
document.getElementById('myh1').innerHTML=modeofgame + '<font size=1 id=fmyh1> versus ' + othermodeofgame + '</font>';
location.href=document.URL;
}
}

</script>
</head>
<body onload='onl();' onkeypress='precheckans(event);' onresize='onres();'>

<h1 style='cursor:pointer;display:inline-block;' data-onclick=toggle(this); id=myh1 title='Click can toggle'>Simple Maths Timer Game<!--font size=1 id='fmyh1'> versus Onmouseover and Onmouseout Monitor</font--></h1>    <select style=display:inline-block; onchange=stoggle(this); id=stoggle><option id=soption value='Simple Maths Timer Game'> versus Onmouseover and Onmouseout Monitor or Smooth Spinner Game</option><option id=o2 value='Onmouseover and Onmouseout Monitor'>Onmouseover and Onmouseout Monitor</option><option id=o3 value='Smooth Spinner Game'>Smooth Spinner Game</option></select>
<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' id=prebonus></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>9</td><th id=myq></th><td>3</td></tr>
<tr><td>8</td><th id=mya><input style='background-color:orange;' onmouseover='checkans();' onclick='checkans();' type=button value='Check Answer' title='Check answer'></input></th><td>4</td></tr>
<tr><td>7</td><td>6</td><td>5</td></tr>
</table>



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

<textarea style='display:none;' id=log rows=40 cols=90>
</textarea>

<div id=divs></div>
</body>
</html>