lkarch.org/tools/mathisfun/www.mathsisfun.com/data/images/median.js

function medianMain(){w=420;h=220;var s="";s+='<div style="position:relative; width:'+w+'px; height:'+h+'px; border: 2px solid #ddeeff; border-radius: 10px;  margin:auto; display:block;">';s+='<canvas id="canvasId" width="'+w+'" height="'+h+'" style="z-index:1;"></canvas>';s+='<div style="z-index:2; position:absolute; top:82px; left:10px; font: 12px/16px Arial, Tahoma, sans-serif; ">';s+='<div class="median-container">';s+='</div>';s+='<div id="median-hint" style="font: 15px/18px Arial, sans-serif; height: 50px;"></div>';s+='<div id="median-results" style="font: bold 16px/18px Arial, sans-serif; height: 20px;"></div>';s+='<div>';s+='<input id="median-answer" type="text" style="color: #0000ff; width:100px; background-color: #eeffee; text-align:center; padding-left:5px; font-size: 24px; border-radius: 10px; ">';s+='<input class="togglebtn" id="median-check" type="button" value="Check">';s+='<input class="togglebtn" id="median-try" type="button" value="Try Another!">';s+='<input class="togglebtn" id="median-help" type="button" value="Help">';s+='</div>';s+='</div>';s+='<div id="copyrt" style="font: 7pt arial; font-weight: bold; color: #6600cc; position:absolute; bottom:3px; left:1px; text-align:center;">&copy; 2015 MathsIsFun.com  v 0.8</div>';s+='</div>';document.write(s);el=document.getElementById('canvasId');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);console.log('aaa');MIN=1;MAX=99;shapes=[];startX=10;cellWidth=40;spacing=10;dragging=false;numbers=[];gameCount=0;hints=['Sort the list (drag them left or right), find the median, type in your answer.','Remember the Median is the "middle number" in a sorted list of numbers.','What if I have 2 numbers in the middle?!!! Calculate the average of those 2 numbers to find the median.'];currentHint=0;newGame();document.getElementById('median-check').addEventListener('click',checkMedian);document.getElementById('median-try').addEventListener('click',newGame);document.getElementById('median-help').addEventListener('click',nextHint);el.addEventListener("mousedown",mouseDownListener,false);el.addEventListener('touchstart',ontouchstart,false);el.addEventListener("mousemove",dopointer,false);}
function checkMedian(){var answer=document.getElementById('median-answer').value,half=Math.floor(numbers.length/2),results=document.getElementById('median-results');numbers.sort(function(a,b){return a-b;});if(numbers.length%2){median=numbers[half];}else{median=(numbers[half-1]+numbers[half])/2.0;}
if(answer==median){results.innerHTML='Yes! Median = '+median;results.classList.add('median-success');results.classList.remove('median-error');}else{results.innerHTML='Oops... try again.';results.classList.add('median-error');results.classList.remove('median-success');}}
function newGame(){var numLen,number;gameCount++;numbers=[];if(gameCount<3){numLen=2+gameCount;}else{numLen=4+Math.round(Math.random()*4);}
for(var n=0;n<numLen;n++){number=Math.round(Math.random()*(MAX-MIN)+MIN);numbers.push(number);}
MAX+=2;MIN-=5;setHint(0);document.getElementById('median-results').innerHTML='';document.getElementById('median-answer').value='';makeShapes(numbers);drawShapes();}
function nextHint(){if(++currentHint===hints.length){currentHint=0;}
setHint();}
function setHint(index){if(index!==undefined){currentHint=index;}
document.getElementById('median-hint').innerHTML=hints[currentHint];}
function ontouchstart(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;mouseDownListener(evt)}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;mouseMoveListener(evt);evt.preventDefault();}
function ontouchend(evt){theCanvas.addEventListener('touchstart',ontouchstart,false);window.removeEventListener("touchend",ontouchend,false);if(dragging){dragging=false;window.removeEventListener("touchmove",ontouchmove,false);}}
function dopointer(e){document.body.style.cursor="default";var bRect=el.getBoundingClientRect();mouseX=(e.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(e.clientY-bRect.top)*(el.height/ratio/bRect.height);for(i=0;i<shapes.length;i++){if(hitTest(shapes[i],mouseX,mouseY)){document.body.style.cursor="pointer";}}}
function mouseDownListener(evt){var i;var highestIndex=-1;var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);for(i=0;i<shapes.length;i++){if(hitTest(shapes[i],mouseX,mouseY)){dragging=true;if(i>highestIndex){dragHoldX=mouseX-shapes[i].x;dragHoldY=mouseY-shapes[i].y;highestIndex=i;dragIndex=i;}}}
if(dragging){if(evt.touchQ){window.addEventListener('touchmove',ontouchmove,false);}else{window.addEventListener("mousemove",mouseMoveListener,false);}}
if(evt.touchQ){theCanvas.removeEventListener("touchstart",ontouchstart,false);window.addEventListener("touchend",ontouchend,false);}else{el.removeEventListener("mousedown",mouseDownListener,false);window.addEventListener("mouseup",mouseUpListener,false);}
if(evt.preventDefault){evt.preventDefault();}
else if(evt.returnValue){evt.returnValue=false;}
return false;}
function mouseUpListener(evt){el.addEventListener("mousedown",mouseDownListener,false);window.removeEventListener("mouseup",mouseUpListener,false);if(dragging){dragging=false;window.removeEventListener("mousemove",mouseMoveListener,false);}}
function mouseMoveListener(evt){if(dragIndex<0)return;var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);var minX=0;var maxX=el.width-shapes[dragIndex].wd;var posX=mouseX-dragHoldX;posX=(posX<minX)?minX:((posX>maxX)?maxX:posX);var posY=20;shapes[dragIndex].x=posX;shapes[dragIndex].y=posY;var xCurr=-1000;var moveQ=false;var moveNo=0;var moveTo=0;for(var i=0;i<shapes.length;i++){var shape=shapes[i];if(shape.x>xCurr){}else{moveQ=true;if(i==dragIndex){moveNo=i-1;moveTo=i;}else{moveNo=i;moveTo=i-1;}}
xCurr=shape.x;}
if(moveQ){if(dragIndex==moveNo)dragIndex=moveTo;if(dragIndex==moveTo)dragIndex=moveNo;var temp=shapes[moveNo];shapes[moveNo]=shapes[moveTo];shapes[moveTo]=temp;setTilesPos();}
drawShapes();}
function setTilesPos(){for(var i=0;i<shapes.length;i++){if(i!=dragIndex){shapes[i].x=startX+(i*(cellWidth+spacing));}else{}}}
function hitTest(shape,mx,my){if(mx<shape.x)return false;if(my<shape.y)return false;if(mx>(shape.x+shape.wd))return false;if(my>(shape.y+shape.ht))return false;return true;}
function makeShapes(numbers){shapes=[];for(var i=0;i<numbers.length;i++){var tempX=startX+i*(cellWidth+spacing);var tempY=20;var tempColor="rgb("+0+","+0+","+255+")";tempShape={x:tempX,y:tempY,wd:cellWidth,ht:cellWidth,color:tempColor,txt:numbers[i].toString()};shapes.push(tempShape);}}
function drawShapes(){g=el.getContext("2d");g.clearRect(0,0,el.width,el.height);g.lineWidth=1;g.strokeStyle="#aaaaaa";for(var i=0;i<shapes.length;i++){g.lineWidth=1;g.strokeStyle="rgba(0, 0, 0, 1)";g.fillStyle="rgba(200, 200, 255, 0.3)";g.beginPath();g.rect(shapes[i].x,shapes[i].y,shapes[i].wd,shapes[i].ht);g.closePath();g.stroke();g.fill();g.strokeStyle="rgba(0, 0, 0, 1)";g.fillStyle="rgba(0, 0, 0, 1)";g.font="bold 17px Arial";g.textAlign="center";g.fillText(shapes[i].txt,shapes[i].x+shapes[i].wd/2,shapes[i].y+shapes[i].ht/2+6,100);}}