<!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];
var gtid=null;

function thenstuff() {
var sih='', sv='';
var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';
var sels=document.getElementsByTagName('select');
for (var isels=0; isels<sels.length; isels++) {
sv=sels[isels].value;
if (('' + sels[isels].id) != 'base') {
sih=sels[isels].innerHTML;
parts=sih.split(' value="' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '"');
if (eval('' + parts.length) > 1) {
wasbit=parts[1];
nowbit=wasbit;
subparts=wasbit.split('</option');
for (isp=eval(-2 + subparts.length); isp>=0; isp--) {
numtodo=subparts[isp].split('>')[eval(-1 + subparts[isp].split('>').length)];
nowbit=nowbit.replace('>' + numtodo + '<', '><');
}
}
if (sih.indexOf(wasbit) != -1) {
sels[isels].innerHTML=sih.replace(wasbit, nowbit).replace('>' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '<', '><');
sels[isels].value=sv;
} else {
sels[isels].innerHTML=sih.replace(wasbit, nowbit).replace('>' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '<', '><');
sels[isels].value=sv;
//alert('oops ' + sih + ' ... ' + wasbit);
}
}
}
}

function hidestuff() {
var sih='', sv='';
var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';
var sels=document.getElementsByTagName('select');
//if (1 == 1) {
// restorestuff();
//}
for (var isels=0; isels<sels.length; isels++) {
sv=sels[isels].value;
if (('' + sels[isels].id) != 'base') {
sih=sels[isels].innerHTML;
parts=sih.split(' value="00"><');
if (eval('' + parts.length) > 1) {
wasbit=parts[1];
nowbit=wasbit;
subparts=wasbit.split('</option');
for (isp=eval(-2 + subparts.length); isp>=0; isp--) {
numtodo=subparts[isp].split(' value="')[1].split('"')[0];
nowbit=nowbit.replace(' value="' + numtodo + '"><', ' value="' + numtodo + '">' + numtodo + '<');
//alert(subparts[isp] + ' ... regarding ' + numtodo);
}
if (nowbit != wasbit) {
//alert(nowbit + ' via ' + wasbit);
if (sih.indexOf(wasbit) != -1) {
sih=sih.replace(wasbit, nowbit);
} //else {
//alert('ooPs ' + wasbit);
//}
}
}
//alert(maxnum);

wasbit='youllneverfindthis';

if (1 == 1) {
if (sih != '') {
sels[isels].innerHTML=sih;
sels[isels].value=sv;
}
} else {
parts=sih.split(' value="' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '"');
if (eval('' + parts.length) > 1) {
wasbit=parts[1];
nowbit=wasbit;
subparts=wasbit.split('</option');
for (isp=eval(-2 + subparts.length); isp>=0; isp--) {
numtodo=subparts[isp].split('>')[eval(-1 + subparts[isp].split('>').length)];
nowbit=nowbit.replace('>' + numtodo + '<', '><');
}
}
if (sih.indexOf(wasbit) != -1) {
sels[isels].innerHTML=sih.replace(wasbit, nowbit);
sels[isels].value=sv;
} else {
sels[isels].innerHTML=sih;
sels[isels].value=sv;
//alert('oops ' + sih + ' ... ' + wasbit);
}
}
}
}

setTimeout(thenstuff, 800);
}

function restorestuff() {
var sv='';
var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';
if (1 == 2) {
var opts=document.getElementsByTagName('options');
for (var iopts=0; iopts<opts.length; iopts++) {
if (opts[iopts].value != '00') {
if (opts[iopts].innerText != opts[iopts].value) {
opts[iopts].Text=opts[iopts].value;
}
}
}
}

var sels=document.getElementsByTagName('select');
for (var isels=0; isels<sels.length; isels++) {
sv=sels[isels].value;
if (('' + sels[isels].id) != 'base') {
parts=sels[isels].innerHTML.split(' value="00"><');
if (eval('' + parts.length) > 1) {
wasbit=parts[1];
nowbit=wasbit;
subparts=wasbit.split('</option');
for (isp=eval(-2 + subparts.length); isp>=0; isp--) {
numtodo=subparts[isp].split(' value="')[1].split('"')[0];
nowbit=nowbit.replace(' value="' + numtodo + '"><', ' value="' + numtodo + '">' + numtodo + '<');
//alert(subparts[isp] + ' ... regarding ' + numtodo);
}
if (nowbit != wasbit) {
//alert(nowbit + ' via ' + wasbit);
sels[isels].innerHTML=sels[isels].innerHTML.replace(wasbit, nowbit);
sels[isels].value=sv;
}
}
}
}
}

function display() {
if (!document.getElementById(mode)) {
document.getElementById('hexadecimal').style.display = 'block';
//restorestuff();
setTimeout(hidestuff, 500);
} else {
document.getElementById(mode).style.display = 'block';
setTimeout(restorestuff, 500);
}

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 == '3') {
mnum = 8;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 2;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == '4') {
mnum = 15;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 3;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == '5') {
mnum = 24;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 4;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == '6') {
mnum = 35;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 5;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == '7') {
mnum = 48;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 6;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').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 == '9') {
mnum = 80;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 8;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'A') {
mnum = 99;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 9;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'B') {
mnum = 120;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 10;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'C') {
mnum = 143;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 11;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'D') {
mnum = 168;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 12;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'E') {
mnum = 195;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 13;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').style.display = 'none';
} else if (mode == 'F') {
mnum = 224;
cshort ='h';
filledin = [0, 0, 0, 0, 0];
maxnum = 14;
numsels = 2;
document.getElementById('binary').style.display = 'none';
//document.getElementById('hexadecimal').style.display = 'none';
document.getElementById('octal').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);
if (('' + tvalue).toLowerCase() > ('' + maxnum).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f')) {
gtid=document.getElementById(tid);
setTimeout(function(){ gtid.value='00'; }, 1000);
tvalue='00';
//alert('Sorry ... but that is an illegal character in base ' + eval(1 + maxnum));
return false;
}
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--) {
try {
document.getElementById(cshort + i + "s" + ii).value = '00';
} catch(erty) {
alert(cshort + i + "s" + ii);
}
}
if (filledin[i] >= 25) {
filledin[i] = Math.floor(Math.random() * (mnum + 1)) + 1;
if (eval('' + filledin[i]) > eval('' + 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 (eval('' + filledin[i]) > eval('' + 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 * eval('' + 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'))));
//if (document.getElementById(cshort + i + "s" + ii).innerHTML.indexOf('>' + cii + '<') == -1) {
// 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('A','10').replace('B','11').replace('C','12').replace('D','13').replace('E','14').replace('F','15').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='3'>Base 3</option>
<option value='4'>Base 4</option>
<option value='5'>Base 5</option>
<option value='6'>Base 6</option>
<option value='7'>Base 7</option>
<option value='octal'>Octal</option>
<option value='9'>Base 9</option>
<option value='A'>Decimal</option>
<option value='B'>Base 11</option>
<option value='C'>Base 12</option>
<option value='D'>Base 13</option>
<option value='E'>Base 14</option>
<option value='F'>Base 15</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>