lkarch.org/tools/mathisfun/www.mathsisfun.com/numbers/images/block-choose.js

var w,h,g,my={}
function blockchooseMain(){my.version='0.82'
w=420;h=540;my.canTop=70
my.timeQ=false
my.imgType='chocs'
my.lvls=[{name:'Easy',ansMin:3,ansMax:8,minGap:1,maxGap:4},{name:'Medium',ansMin:8,ansMax:25,minGap:1,maxGap:3},{name:'Hard',ansMin:14,ansMax:25,minGap:1,maxGap:2}]
my.lvl=my.lvls[0]
my.transTime='0.5s'
my.mTot=50;my.mWd=32
my.blocks=[new Block(0),new Block(0)]
my.blockTot=2
my.lblsQ=false
var s=''
s+='<style>'
s+='.clickbtn { display: inline-block; position: relative; text-align: center; margin: 2px; text-decoration: none; font: 14px/25px Arial, sans-serif; color: #19667d; border: 1px solid #88aaff; border-radius: 10px; cursor: pointer; background: linear-gradient(to top right, rgba(170,190,255,1) 0%, rgba(255,255,255,1) 100%); }'
s+='.clickbtn:hover { background: linear-gradient(to top, rgba(255,255,0,1) 0%, rgba(255,255,255,1) 100%); }'
s+='</style>'
my.soundHome=(document.domain=='localhost')?'/mathsisfun/images/sounds/':'/images/sounds/'
s+='<audio id="sndyes" src="'+my.soundHome+'yes2.mp3" preload="auto"></audio>';s+='<audio id="sndno" src="'+my.soundHome+'no.mp3" preload="auto"></audio>';s+='<div style="position:relative; width:'+w+'px; height:'+h+'px; border: none; border-radius: 9px; margin:auto; display:block; box-shadow: 0px 0px 19px 10px rgba(0,0,68,0.26); ">';s+='<canvas id="canvasId" width="'+w+'" height="'+(h-my.canTop)+'" style="position:absolute; left:0; top:'+my.canTop+'px; z-index:-1;"></canvas>';for(var i=0;i<my.blockTot;i++){s+='<div id="marbles'+i+'" style="position:absolute; left:'+i*w/2+'px; top:'+my.canTop+'px; z-index:2; transition: all 0.1s linear ; cursor: pointer;"  onmousedown="ansCheck(this)"></div>';if(my.lblsQ){s+='<div id="lblx'+i+'" style="position:absolute; font: bold 38px/42px Arial, sans-serif; text-align:center; transition: all '+my.transTime+' ease-in-out;">1</div>';s+='<div id="lbly'+i+'" style="position:absolute; font: bold 38px/42px Arial, sans-serif; text-align:left; transition: all '+my.transTime+' ease-in-out;">1</div>';s+='<div id="ans'+i+'" style=" position:absolute; left:5%; top:145px; width:220px; border-radius:10px; padding: 5px;  background-color: #ffd; font: bold 38px/42px Arial, sans-serif; text-align:center; transition: all '+my.transTime+' ease-in-out; z-index:3;"></div>';}}
s+='<div id="result" style="position: absolute; left: 10px; top: 155px; width: '+(w-70)+'px; text-align: center; padding: 20px; border: 6px outset rgba(150,150,150,0.5); border-radius: 20px; background-color: rgba(0,0,100,0.7); z-index: 30; transition:opacity '+my.transTime+'; visibility:visible; ">';s+='<div id="msg" style="font: 20px Verdana; color: white;"></div>';s+='<br>';s+='<div style="font: 18px Arial; margin:auto; padding:3px;">';s+='<style>input[type="radio"]:checked+label {font-weight: bold;}</style>';s+=radioHTML('Level','level',my.lvls,'levelChg');s+='</div>';s+='<button style="font: 14px Arial; height:30px; text-align:right; z-index: 10;" class="clickbtn" onclick="gameStart()" >New Game</button>';s+='<button style="font: 14px Arial; height:30px; text-align:right; z-index: 10;" class="clickbtn" onclick="optionsShow(false)" > X </button>';s+='</div>';s+='<div id="ansBoxes" style="position: absolute; left: 300px; top: '+(my.canTop+200)+'px; width: 140px; ">';s+='</div>';s+='<div id="scoreboard" style="position: relative; width: 99%; background-color:#eee; border-radius: 10px; border: 2px solid #ddd; text-align:center; margin: auto;">';s+=boxHTML('right','Right');s+=boxHTML('wrong','Wrong');if(my.timeQ){s+=boxHTML('avgspeed','Avg Time');s+='<div style="display:inline-block; border-left: 3px solid green; height: 44px; margin-top:10px;"></div>';s+=boxHTML('speed','Time (s)');}
s+='</div>';s+='<div  style="position:absolute; right:5px; bottom:22px; " >';s+='<button id="options" style="font: 14px Arial; height:30px; text-align:right; z-index: 10; margin-right:10px;" class="clickbtn" onclick="optionsShow(true)" >Options</button>';my.soundQ=true
s+=soundBtnHTML()
s+='</div>';s+='<div style="font: 11px Arial; color: #6600cc; position:absolute; right:3px; bottom:3px; text-align:center;">&copy; 2020 MathsIsFun.com v'+my.version+'</div>';s+='</div>';document.write(s);var el=document.getElementById('canvasId');var ratio=2;el.width=w*ratio;el.height=(h-my.canTop)*ratio;el.style.width=w+"px";el.style.height=(h-my.canTop)+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);var imgHome=(document.domain=='localhost')?'/mathsisfun/numbers/images/':'/numbers/images/'
for(var blockN=0;blockN<my.blockTot;blockN++){s='';for(var i=0;i<my.mTot;i++){s+='<div id="mbl'+blockN+'_'+i+'" style="display:inline-block; position:absolute; transition: all '+my.transTime+' ease-in-out;">'
if(my.imgType=='chocs'){s+='<img src="'+imgHome+'choc-block.svg" style="width:'+my.mWd+'px; max-width:'+my.mWd+'px; z-index:-1;" />'
s+='<canvas id="can'+blockN+'_'+i+'" width="'+my.mWd*2+'" height="'+my.mWd*2+'" style="position:absolute; left:0; top: 0; z-index:10;"></canvas>';}
if(my.imgType=='balls'){var n=i%8;s+='<img id="mbl'+i+'" src="'+imgHome+'marbles/marble'+n+'.gif" width="'+my.mWd+'" style="position:absolute;" />'
s+='<canvas id="can'+blockN+'_'+i+'" width="'+my.mWd*2+'" height="'+my.mWd*2+'" style="position:absolute; left:0; top: 0; z-index:10;"></canvas>';}
s+='</div>'}
document.getElementById('marbles'+blockN).innerHTML=s;}
numsDraw()
numsShow(false)
gameStart();}
function levelChg(n){my.lvl=my.lvls[n]}
function gameStart(){my.rightN=0;my.doneN=0;my.elapsedTot=0;my.maxRoundsN=10;my.prev={wdn:0,htn:0}
optionsShow(false)
displayUpdate(0)
go();}
function optionsShow(showQ){var div=document.getElementById('result');if(showQ){div.style.visibility='visible';div.style.opacity=1;}else{div.style.visibility='hidden';div.style.opacity=0;}}
function displayUpdate(elapsed){document.getElementById('right').innerHTML=my.rightN;document.getElementById('wrong').innerHTML=my.doneN-my.rightN;if(my.timeQ){document.getElementById('speed').innerHTML=(elapsed<<0)/1000;document.getElementById('avgspeed').innerHTML=((my.elapsedTot/my.doneN)<<0)/1000;}}
function showOpts(stt){var div=document.getElementById('ansBoxes');div.style.visibility='visible';var s='';s+='<style>.opthover:hover {font-weight: bold; color: darkblue; background-color:#fad; border: 2px solid yellow;  }</style>';var val=stt;var n=0;for(var i=0;i<4;i++){s+='<div style="font: 27px Verdana;">';for(var j=0;j<3;j++){var id=n+'-'+val;s+='<div id="'+id+'" class="opthover" style="display: inline-block; width:40px; height:40px; text-align: center;  border: 2px solid white; cursor:pointer; background-color:#ded;" onmousedown="doAns(this)">';s+=val;s+='</div>';val++;n++;}
s+='</div>';}
div.innerHTML=s;}
function ansCheck(me){var choseN=parseInt(me.id.substr(-1))
var largerN=my.blocks[0].ans()<my.blocks[1].ans()?1:0
console.log('ansCheck',me.id,choseN,largerN)
my.endTime=performance.now();var elapsed=my.endTime-my.sttTime;my.elapsedTot+=elapsed;var correctQ=false;if(choseN==largerN){if(my.soundQ)document.getElementById('sndyes').play();correctQ=true;my.rightN++;spinAll(0)
spinAll(1)}else{if(my.soundQ)document.getElementById('sndno').play();shakeAll(0,10)
shakeAll(1,12)}
numsShow(true)
my.doneN++;if(my.doneN<my.maxRoundsN){var wait=correctQ?1500:2500;setTimeout(go,wait);}else{doSuccess();}
displayUpdate(elapsed);}
function doAns(me){if(!my.ansAvailQ)return
my.ansAvailQ=false
my.endTime=performance.now();var elapsed=my.endTime-my.sttTime;my.elapsedTot+=elapsed;me.style.border='2px solid black';if(my.lblsQ){var div=document.getElementById('ans'+0)
div.style.display='block'}
var ids=me.id.split('-');var ans=ids.pop();my.doneN++;var correctQ=false;if(ans==my.ans){if(my.soundQ)document.getElementById('sndyes').play();correctQ=true;my.rightN++;spinAll(0)
spinAll(1)}else{if(my.soundQ)document.getElementById('sndno').play();shakeAll(0,10)
shakeAll(1,-10)}
numsShow(true)
displayUpdate(elapsed);if(my.doneN<my.maxRoundsN){var wait=correctQ?1100:3000;setTimeout(go,wait);}else{doSuccess();}}
function doSuccess(){console.log("doSuccess");var s='';if(my.rightN/my.doneN>0.6){s+='Well Done!<br>';}
s+='You got '+my.rightN+' of '+my.doneN+' correct<br>';if(my.timeQ){s+=((my.elapsedTot/my.doneN)<<0)/1000+' second average';}
var div=document.getElementById('msg');div.innerHTML=s;optionsShow(true)}
function go(){var prevBlock=null
for(var i=0;i<my.blockTot;i++){var block=my.blocks[i]
var gap=0
do{block.sizeNew()
gap=(i==0)?my.lvl.minGap:Math.abs(block.ans()-prevBlock.ans())}while(gap<my.lvl.minGap||gap>my.lvl.maxGap)
prevBlock=block
drawBoxes(i,block.wdn,block.htn)}
my.ansAvailQ=true
my.sttTime=performance.now()}
function spinAll(blockN){var block=my.blocks[blockN];block.rot=(block.rot==0)?360:0
for(var i=0;i<my.mTot;i++){var div=document.getElementById('mbl'+blockN+'_'+i)
div.style.transform='rotate('+block.rot+'deg)'}}
function shakeAll(blockN,dist){var div=document.getElementById('marbles'+blockN)
div.style.transform='translateX('+dist+'px)'
setTimeout(function(){div.style.transform='translateX('+(-dist)+'px)'
setTimeout(function(){div.style.transform='translateX(0px)'},200)},200)}
function numsDraw(){for(var blockN=0;blockN<my.blockTot;blockN++){for(var i=0;i<my.mTot;i++){var el=document.getElementById('can'+blockN+'_'+i);var ratio=1;var g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);g.textAlign='center'
g.font='16px Arial'
g.textAlign='center'
g.fillStyle='#F5DEB3'
if(my.imgType=='balls')g.fillStyle='white'
g.fillText((i+1),my.mWd/2-1,my.mWd/2+6)}}}
function numsShow(onQ){for(var blockN=0;blockN<my.blockTot;blockN++){for(var i=0;i<my.mTot;i++){var div=document.getElementById('can'+blockN+'_'+i);if(onQ){div.style.display='block'}else{div.style.display='none'}}}}
function drawBoxes(blockN,wdn,htn){numsShow(false)
var div=document.getElementById('marbles'+blockN)
var marbleMax=(w/2-10)/my.mWd
var lt=blockN*w/2+(marbleMax-wdn)*my.mWd/2
div.style.left=lt+'px';var lt=10
var tp=20
var mTp=tp;var m=0
for(var i=0;i<htn;i++){var mLt=lt
for(var j=0;j<wdn;j++){var div=document.getElementById('mbl'+blockN+'_'+m);div.style.transitionDuration='0.5s'
div.style.opacity=1;div.style.left=mLt+'px';div.style.top=mTp+'px';mLt+=my.mWd;m++;}
mTp+=my.mWd;}
for(i=m;i<my.mTot;i++){var div=document.getElementById('mbl'+blockN+'_'+i);div.style.opacity=0;div.style.top=(h-my.canTop-50)+'px';}
tp+=my.canTop
if(my.lblsQ){var div=document.getElementById('lblx'+blockN)
div.style.left=(lt)+'px'
div.style.top=(tp+htn*my.mWd+5)+'px'
div.style.width=(wdn*my.mWd)+'px'
div.innerHTML=wdn
var div=document.getElementById('lbly'+blockN)
div.style.left=(lt+wdn*my.mWd+5)+'px'
div.style.top=(tp+(my.mWd*htn/2)-20)+'px'
div.innerHTML=htn
var div=document.getElementById('ans'+blockN)
div.style.display='none'
div.style.top=(tp+htn*my.mWd+44)+'px'
div.innerHTML=wdn+' x '+htn+' = '+wdn*htn}}
function boxHTML(id,title){var s='';s+='<div style="display:inline-block; width:80px; padding: 4px; border-radius: 10px; text-align:center;">';s+='<span style="display: inline-block; width:80px; color:black; font: 14px Arial; text-align:center;">'+title+'</span><br>';s+='<span id = "'+id+'"  style="display: inline-block;width:70px; padding: 5px; border-radius: 10px; background-color: #ffe; color:blue; font: 24px Arial; text-align:center;">0</span></div>';return s;}
function soundBtnHTML(){var s=''
s+='<style> '
s+=' .speaker { height: 30px; width: 30px; position: relative; overflow: hidden; display: inline-block; vertical-align:top; } '
s+=' .speaker span { display: block; width: 9px; height: 9px; background-color: blue; margin: 10px 0 0 1px; }'
s+=' .speaker span:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent blue transparent transparent; border-width: 10px 16px 10px 15px; left: -13px; top: 5px; }'
s+=' .speaker span:before { transform: rotate(45deg); border-radius: 0 60px 0 0; content: ""; position: absolute; width: 5px; height: 5px; border-style: double; border-color: blue; border-width: 7px 7px 0 0; left: 18px; top: 9px; transition: all 0.2s ease-out; }'
s+=' .speaker:hover span:before { transform: scale(.8) translate(-3px, 0) rotate(42deg); }'
s+=' .speaker.mute span:before { transform: scale(.5) translate(-15px, 0) rotate(36deg); opacity: 0; }'
s+=' </style>'
s+='<div id="sound" onClick="soundToggle()" class="speaker"><span></span></div>'
return s}
function soundToggle(){var btn='sound'
if(my.soundQ){my.soundQ=false
document.getElementById(btn).classList.add("mute")}else{my.soundQ=true
document.getElementById(btn).classList.remove("mute")}}
CanvasRenderingContext2D.prototype.roundRect=function(x,y,w,h,r){if(w<2*r)r=w/2;if(h<2*r)r=h/2;this.moveTo(x+r,y);this.arcTo(x+w,y,x+w,y+h,r);this.arcTo(x+w,y+h,x,y+h,r);this.arcTo(x,y+h,x,y,r);this.arcTo(x,y,x+w,y,r);return this;};function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1)+min);}
function radioHTML(prompt,id,lbls,func){var s='';s+='<div style="display:inline-block; border: 1px solid white; border-radius:5px; padding:3px; margin:3px; background-color:rgba(255,255,255,0.5);">';for(var i=0;i<lbls.length;i++){var lbl=lbls[i];var idi=id+i;var chkStr=(i==0)?' checked ':'';s+='<input id="'+idi+'" type="radio" name="'+id+'" value="'+lbl.name+'" onclick="'+func+'('+i+');" autocomplete="off" '+chkStr+' >';s+='<label for="'+idi+'">'+lbl.name+' </label>';}
s+='</div>';return s;}
class Block{constructor(){this.rot=0
this.prev={wdn:0,htn:0}}
sizeNew(){var okq,wdn,htn
var min=my.lvl.ansMin+my.doneN*0.5
var max=my.lvl.ansMax+my.doneN*1.5
console.log('sizeNew',min,max)
do{wdn=getRandomInt(1,6)
htn=getRandomInt(1,11)
okq=true
if(wdn*htn<min)okq=false
if(wdn*htn>max)okq=false}while(!okq);console.log('go',wdn,htn)
this.prev.wdn=wdn
this.prev.htn=htn
this.wdn=wdn
this.htn=htn}
ans(){return this.wdn*this.htn}}