lkarch.org/tools/mathisfun/www.mathsisfun.com/numbers/images/mean-user.js

function meanuserMain(){this.version='0.91';w=480;h=380;var s="";s+='<div style="position:relative; width:'+w+'px; height:'+h+'px; border-radius: 10px;  margin:auto; display:block; background-color: #ddeeff; ">';s+='<div id="title" style="font: bold 22px Arial; text-align: left; color: darkblue; ">';s+='</div>';s+='<div id="pic" style="position: absolute; right: 0; top: 0;">';s+='</div>';s+='<div id="userAnswer" style="margin: 20px 0 0 0; text-align: center;">';s+='</div>';s+='<div id="answer" style="color: blue; text-align: center;">';s+='</div>';s+='<div id="success" style="font: bold 40px Arial; text-align: center; color: gold; ">';s+='</div>';s+='<input id="playBtn" onclick="restart()" type="button" style="z-index:2; position:absolute; right:3px; bottom:3px;" value="Another"  class="togglebtn" />';s+='<div id="copyrt" style="font: 7pt arial; font-weight: bold; color: #6600cc; position:absolute; left:5px; bottom:3px;">&copy; 2015 MathsIsFun.com  v'+this.version+'</div>';s+='</div>';document.write(s);games=[];games.push(["Average age of a basketball team","Player","is","year","s old","18","32","basket-photo1.gif"]);games.push(["Average weight of a group of chimpanzees","Chimp","weighs","kg","","40","70","yinyan-chimp.gif"]);games.push(["Average time for rats to finish a maze","Rat","took","second","s","30","60","fatty-rat.gif"]);games.push(["Average temperature","Day","is","degree","s","-30","30","thermometer1.gif"]);gameNo=0;vals=[];init();go();}
function init(){gameNo=(++gameNo)%games.length;game=games[gameNo];var div=document.getElementById('title');div.innerHTML=game[0];div=document.getElementById('userAnswer');div.innerHTML=getQHTML();div=document.getElementById('pic');div.innerHTML='<img src="../numbers/images/'+game[7]+'" style="height: 150px;">';}
function getQHTML(){var s='';itemCount=3+(Math.random()*2)>>0;var min=game[5];var max=game[6];console.log("getQHTML",itemCount,min,max);vals=[];s+='<ul style="margin: 20px 0 30px 0; text-align: left; font: 16px Arial; line-height: 28px;">';for(var i=0;i<itemCount;i++){var val=+min+(Math.random()*(max-min))>>0;vals.push(val);var qStr=game[1]+' '+(i+1).toString()+' '+game[2]+' '+val+' '+game[3]+game[4];console.log("getQHTML",val,qStr);s+='<li>';s+=qStr;s+='</li>';}
s+='</ul>';s+='<div style="width:80px; display: inline-block; font: 22px Arial;">';s+='<div>';s+='Sum';s+='</div>';s+='<div style="border-top: 2px solid black;">';s+='Count';s+='</div>';s+='</div>';s+='<div style="display: inline-block; font: 26px Arial; vertical-align: top; margin: 12px 5px 0 5px;">';s+='&nbsp; = &nbsp;';s+='</div>';s+='<div style="width:'+(itemCount*60)+'px; display: inline-block;">';s+='<div>';console.log("vals",vals);for(i=0;i<itemCount;i++){if(i>0)s+=' + ';s+='<input type="text" id="val'+i+'" style="color: #0000ff; background-color: #eeffee; text-align:center; font: 20px Arial; width:35px; border-radius: 10px; " value="" onKeyUp="go()" />';}
s+='</div>';s+='<div style="border-top: 2px solid black; font: 20px Arial;">';s+=itemCount;s+='</div>';s+='</div>';return s;}
function getAHTML(OKQ){var s='';s+='<div style="font: 18px Arial; ">';s+='<div style="line-height: 14px;">';s+='&nbsp;';s+='</div>';s+='<div style="display: inline-block; font: 26px Arial; vertical-align: top; margin: 12px 5px 0 5px;">';s+='&nbsp; = &nbsp;';s+='</div>';s+='<div style="width:'+(itemCount*40)+'px; display: inline-block;">';s+='<div>';var sumUser=0;for(var i=0;i<itemCount;i++){if(i>0)s+=' + ';var valUser=document.getElementById('val'+i).value<<0;s+=valUser.toString();sumUser+=valUser;}
s+='</div>';s+='<div style="border-top: 2px solid black;">';s+=itemCount;s+='</div>';s+='</div>';s+='<div style="display: inline-block; font: 26px Arial; vertical-align: top; margin: 12px 5px 0 5px;">';s+='&nbsp; = &nbsp;';s+='</div>';s+='<div style="width:40px; display: inline-block;">';s+='<div>';s+=sumUser.toString();s+='</div>';s+='<div style="border-top: 2px solid black;">';s+=itemCount.toString();s+='</div>';s+='</div>';if(OKQ){var mean=(((sumUser/itemCount)*100)>>0)/100;s+='<div style="display: inline-block; font: 26px Arial; vertical-align: top; margin: 12px 5px 0 5px;">';s+='&nbsp; = &nbsp;';s+=mean.toString();s+='</div>';}
s+='</div>';return s;}
function go(){var failCount=0;for(var i=0,len=vals.length;i<len;i++){var val=vals[i];var valUser=document.getElementById('val'+i).value<<0;console.log("go",val,valUser);if(valUser==val){}else{failCount++;}}
if(failCount==0){document.getElementById('success').innerHTML='Well Done !';}else{document.getElementById('success').innerHTML='';}
document.getElementById('answer').innerHTML=getAHTML(failCount==0);}
function restart(){this.aCount=2;this.bCount=5;init();go();}