<!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; }
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 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";
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) { // thanks to https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave
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 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:' + recttd.top + 'px;left:' + recttd.left + 'px;width:' + recttd.width + 'px;height:' + recttd.height + 'px;' + '');
} else {
document.getElementById('divs').innerHTML+=tds[jj].outerHTML.replace('<td','<div style="position:absolute;top:' + recttd.top + 'px;left:' + recttd.left + 'px;width:' + recttd.width + 'px;height:' + 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='' + recttd.top + 'px';
document.getElementById('log').style.left='' + recttd.left + 'px';
document.getElementById('log').style.width='' + recttd.width + 'px';
document.getElementById('log').style.height='' + 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' + 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' + ii;
ii++;
cell.addEventListener('click', handler);
cell.addEventListener('mouseout', handler);
cell.addEventListener('mouseover', handler);
}
askq();
}
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);'>
<h1 style='cursor:pointer;' 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>
<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>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>
<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>