<!doctype HTML>
<html>
<head>
<title>The Binary Quiz - Beat Your Last Time - RJM Programming - December, 2014</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var mode='binary';
var lastelapsedtime = -1;
var numsels = 8;
var maxnum = 1;
var earr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var filledin = [0, 0, 0, 0, 0];
var score = 'n/a';
var goes = 0;
var cshort = 'b';
var mnum = 255;
var imode = -1;
var sdate, edate;
var calcval = [-1, -1, -1, -1, -1];

function display() {
document.getElementById(mode).style.display = 'block';
if (mode == 'binary') {
mnum = 255;
cshort ='b';
filledin = [0, 0, 0, 0, 0];
maxnum = 1;
numsels = 8;
document.getElementById('octal').style.display = 'none';
document.getElementById('hexadecimal').style.display = 'none';
} else if (mode == 'octal') {
mnum = 4095;
cshort ='o';
filledin = [0, 0, 0, 0, 0];
maxnum = 7;
numsels = 4;
document.getElementById('binary').style.display = 'none';
document.getElementById('hexadecimal').style.display = 'none';
} else if (mode == 'hexadecimal') {
mnum = 255;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 15;
numsels = 2;
document.getElementById('octal').style.display = 'none';
document.getElementById('binary').style.display = 'none';
}
startoff();
}

function changed(tid,tvalue) {
//alert(tid + ' is now ' + tvalue);
var i, gval=0, one=1;
for (i=(numsels - 1); i>=0; i--) {
gval += eval((one * document.getElementById(tid.substring(0,3) + i).value.replace('a','10').replace('b','11').replace('c','12').replace('d','13').replace('e','14').replace('f','15')));
one = eval(one * (maxnum + 1));
}
document.getElementById("j" + cshort + tid.substring(1,2)).innerHTML = " = " + gval;
if (gval == document.getElementById("i" + cshort + tid.substring(1,2)).value) {
filledin[tid.substring(1,2)] = 1;
for (i=(numsels - 1); i>=0; i--) {
if (document.getElementById(tid.substring(0,3) + i).value < 1) document.getElementById(tid.substring(0,3) + i).value = "0";
}
}
var alldone=true;
for (i=0; i<5; i++) {
if (filledin[i] == 0) alldone = false;
}
var another = 'y';
if (alldone) {
edate = new Date();
var nextscore = eval((edate - sdate) / 1000.0);
if (score == 'n/a') {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(": " + score, ": " + nextscore);
another = prompt('Congratulations! ... Another go?', 'y');
} else {
if (eval(score - nextscore) >= 0.0) {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(": " + score, ": " + nextscore);
another = prompt('Congratulations! New best time of ' + nextscore + ' ... Another go?', 'y');
} else {
another = prompt('Congratulations! But your time ' + nextscore + ' does not beat previous best time of ' + score + ' ... Another go?', 'y');
nextscore = score;
}
}
document.getElementById('base').value = mode;
score = nextscore;
if (another == 'y') startoff();
}
}

function oblur(tid,tvalue) {
if (calcval[tid.substring(2,3)] <= -1) {
document.getElementById(tid).value = -calcval[tid.substring(2,3)];
} else {
if (eval(tvalue - calcval[tid.substring(2,3)]) == 0 || eval(tvalue - document.getElementById("j" + cshort + tid.substring(2,3)).innerHTML.replace(" = ","")) == 0) {
filledin[tid.substring(2,3)] = 1;
document.getElementById("j" + cshort + tid.substring(2,3)).innerHTML = " = " + tvalue;
} else {
if (1 == 2) alert(tvalue);
if (1 == 2) alert(calcval[tid.substring(2,3)]);
if (1 == 2) alert(eval(tvalue - calcval[tid.substring(2,3)]));
if (1 == 2) alert(eval(tvalue - document.getElementById("j" + cshort + tid.substring(2,3)).innerHTML.replace(" = ","")));
}
var alldone=true;
for (i=0; i<5; i++) {
if (filledin[i] == 0) alldone = false;
}
var another = 'y';
if (alldone) {
edate = new Date();
var nextscore = eval((edate - sdate) / 1000.0);
if (score == 'n/a') {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(": " + score, ": " + nextscore);
another = prompt('Congratulations! ... Another go?', 'y');
} else {
if (eval(score - nextscore) >= 0.0) {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(": " + score, ": " + nextscore);
another = prompt('Congratulations! New best time of ' + nextscore + ' ... Another go?', 'y');
} else {
another = prompt('Congratulations! But your time ' + nextscore + ' does not beat previous best time of ' + score + ' ... Another go?', 'y');
nextscore = score;
}
}
document.getElementById('base').value = mode;
score = nextscore;
if (another == 'y') startoff();
}
}
}

function startoff() {
var i, ii, one = 1, tid = cshort + "0s0", gval = 0;
var cii = '';
for (i=0; i<5; i++) {
calcval[i] = -1;
document.getElementById("i" + cshort + i).value = '';
document.getElementById("j" + cshort + i).innerHTML = '';
filledin[i] = Math.floor(Math.random() * 50) + 0;
for (ii=(numsels - 1); ii>=0; ii--) {
document.getElementById(cshort + i + "s" + ii).value = '00';
}
if (filledin[i] >= 25) {
filledin[i] = Math.floor(Math.random() * (mnum + 1)) + 1;
if (filledin[i] > mnum) filledin[i] = mnum;
document.getElementById("i" + cshort + i).value = filledin[i];
calcval[i] = -filledin[i];
} else {
gval = 0;
one = 1;
for (ii=(numsels - 1); ii>=0; ii--) {
filledin[i] = Math.floor(Math.random() * (maxnum + 1)) + 0;
if (filledin[i] > maxnum) filledin[i] = maxnum;
if (filledin[i] == "00") filledin[i] = "0";
//alert(cshort + i + "s" + ii);
cii = '' + filledin[i];
document.getElementById(cshort + i + "s" + ii).value = cii.replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f');
gval += eval((one * document.getElementById(cshort + i + "s" + ii).value.replace('a','10').replace('b','11').replace('c','12').replace('d','13').replace('e','14').replace('f','15')));
//alert("one=" + one + " ... " + filledin[i] + " resulted in [" + cshort + i + "s" + ii + "]=" + document.getElementById(cshort + i + "s" + ii).value + " for gval=" + gval);
one = eval(one * (maxnum + 1));
}
calcval[i] = gval;
}
filledin[i] = 0;
//alert("finish of " + i);
}


sdate = new Date();
}

function huh(tocheck, actuala) {
var huhv=prompt('What is your LHS answer?', '0');
if (huhv != null) {
if (huhv != '') {
if (huhv.substring(0,1) >= '0' && huhv.substring(0,1) <= '9') {
if (('' + actuala) == ('' + huhv)) {
document.getElementById('i' + document.getElementById('base').value.substring(0,1) + tocheck).value=huhv;
document.getElementById('jb' + tocheck).innerHTML='✔'
//changed('i' + document.getElementById('base').value.substring(0,1) + tocheck, huhv);
oblur('i' + document.getElementById('base').value.substring(0,1) + tocheck, huhv);
} else if (('' + actuala) != ('' + huhv)) {
document.getElementById('i' + document.getElementById('base').value.substring(0,1) + tocheck).value=huhv;
document.getElementById('jb' + tocheck).innerHTML='❌'
//changed('i' + document.getElementById('base').value.substring(0,1) + tocheck, huhv);
oblur('i' + document.getElementById('base').value.substring(0,1) + tocheck, huhv);
} else {
document.getElementById('i' + document.getElementById('base').value.substring(0,1) + tocheck).value=huhv;
oblur('i' + document.getElementById('base').value.substring(0,1) + tocheck, huhv);
}
}
}
}
}

function lhsb(bo) {
var pretocheck=('' + bo.id).replace('check','');
var modeis=pretocheck.substring(0,1);
var tocheck=eval(('' + bo.id).replace('check','').replace(modeis,''));
var oneis=1;
var maxoneis=0;
var powv=0;
var retv='<input type=button onclick=huh(' + tocheck + ',0); value=❓ title="Fill out LHS"></input>';
var lhsv=-1;
var rhsv=0;
var baseis=eval(('' + modeis).replace('h','16').replace('o','8').replace('b','2'));
console.log('baseis=' + baseis);
while (document.getElementById(modeis + tocheck + 's' + oneis)) {
//alert('dropdown ' + modeis + tocheck + 's' + oneis + ' value is ' + document.getElementById(modeis + tocheck + 's' + oneis).value);
oneis++;
}
oneis--;
maxoneis=oneis;
console.log('oneis=' + oneis);
lhsv=('' + document.getElementById('i' + modeis + tocheck).value);
while (document.getElementById(modeis + tocheck + 's' + oneis)) {
//alert('dropdown ' + modeis + tocheck + 's' + oneis + ' value is ' + document.getElementById(modeis + tocheck + 's' + oneis).value);
if (document.getElementById(modeis + tocheck + 's' + oneis).value == '00') { document.getElementById(modeis + tocheck + 's' + oneis).value='0'; }
rhsv+=eval(eval('' + document.getElementById(modeis + tocheck + 's' + oneis).value.toLowerCase().replace('a','10').replace('b','11').replace('c','12').replace('d','13').replace('e','14').replace('f','15')) * Math.pow(eval(baseis), powv));
powv++;
oneis--;
}
retv='<input type=button onclick=huh(' + tocheck + ',' + rhsv + '); value=❓ title="Fill out LHS"></input>';
//console.log('lhsv=' + lhsv + ' and rshv' + rhsv + ' and tocheck=' + tocheck + ' and retv=' + retv);
if (lhsv != '') {
if (('' + lhsv) == ('' + rhsv)) {
retv='✔';
} else {
retv='❌';
}
}
document.getElementById('j' + modeis + tocheck).innerHTML=retv;
}

</script>
</head>
<body style='background-color:cyan;' onload='startoff();'>
<h1 align='center' id='myh1'>The <select id='base' onchange='mode=this.value; display();'><option value='binary'>Binary</option><option value='octal'>Octal</option><option value='hexadecimal'>Hexadecimal</option></select> Quiz - Beat Your Last Time - Time To Beat: n/a</h1>
<div align='center' id='binary' style='display:block;'>
<table id='btable'>
<tbody>
<tr><th style='background-color:yellow;'>LHS <input id=checkb0 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=1></input> <input id=checkb1 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=2></input> <input id=checkb2 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=3></input> <input id=checkb3 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=4></input> <input id=checkb4 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=5></input></th><th colspan=9 style='background-color:pink;'>RHS</th></tr>
<tr>
<td><input id='ib0' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='b0s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s4'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s5'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s6'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b0s7'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
</td><td id='jb0' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ib1' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='b1s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s4'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s5'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s6'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b1s7'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
</td><td id='jb1' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ib2' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='b2s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s4'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s5'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s6'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b2s7'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
</td><td id='jb2' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ib3' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='b3s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s4'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s5'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s6'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b3s7'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
</td><td id='jb3' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ib4' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='b4s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s4'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s5'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s6'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
<select onchange='changed(this.id,this.value);' id='b4s7'><option value='00'></option><option value='0'>0</option><option value='1'>1</option></select>
</td><td id='jb4' style='border:2px green solid;'>            </td>
</tr>
</table>
</div>
<div align='center' id='octal' style='display:none;'>
<table id='otable'>
<tbody>
<tr><th style='background-color:yellow;'>LHS <input id=checko0 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=1></input> <input id=checko1 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=2></input> <input id=checko2 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=3></input> <input id=checko3 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=4></input> <input id=checko4 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=5></input></th><th colspan=5 style='background-color:pink;'>RHS</th></tr>
<tr>
<td><input id='io0' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='o0s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o0s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o0s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o0s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
</td><td id='jo0' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='io1' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='o1s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o1s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o1s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o1s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
</td><td id='jo1' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='io2' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='o2s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o2s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o2s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o2s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
</td><td id='jo2' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='io3' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='o3s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o3s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o3s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o3s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
</td><td id='jo3' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='io4' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='o4s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o4s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o4s2'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
<select onchange='changed(this.id,this.value);' id='o4s3'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select>
</td><td id='jo4' style='border:2px green solid;'>            </td>
</tr>
</table>
</div>
<div align='center' id='hexadecimal' style='display:none;'>
<table id='htable'>
<tbody>
<tr><th style='background-color:yellow;'>LHS <input id=checkh0 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=1></input> <input id=checkh1 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=2></input> <input id=checkh2 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=3></input> <input id=checkh3 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=4></input> <input id=checkh4 onclick=lhsb(this); type=button style=display;inline-block; title='Check my answers regarding this LHS question' value=5></input></th><th colspan=3 style='background-color:pink;'>RHS</th></tr>
<tr>
<td><input id='ih0' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='h0s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
<select onchange='changed(this.id,this.value);' id='h0s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
</td><td id='jh0' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ih1' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='h1s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
<select onchange='changed(this.id,this.value);' id='h1s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
</td><td id='jh1' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ih2' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='h2s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
<select onchange='changed(this.id,this.value);' id='h2s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
</td><td id='jh2' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ih3' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='h3s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
<select onchange='changed(this.id,this.value);' id='h3s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
</td><td id='jh3' style='border:2px green solid;'>            </td>
</tr>
<tr>
<td><input id='ih4' type='number' onblur='oblur(this.id,this.value);' onchange='oblur(this.id,this.value);' value=''></input></td>
<td><select onchange='changed(this.id,this.value);' id='h4s0'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
<select onchange='changed(this.id,this.value);' id='h4s1'><option value='00'></option><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option><option value='e'>e</option><option value='f'>f</option></select>
</td><td id='jh4' style='border:2px green solid;'>            </td>
</tr>
</table>
</div>

</body>
</html>