<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cube Root Training</title>
</head>
<body>
<h1>Cube Root Training</h1>
<p>
<span style="white-space:nowrap;"><span style="font-size:larger;"
>∛</span><span id=cube style="text-decoration:overline;">
</span> = <input type=text id=cuberoot value="" size=2>
</span>
</p>
<p id=result></p>
<p id=stats></p>
<script>
var cube = document.getElementById("cube");
var cuberoot = document.getElementById("cuberoot");
var result = document.getElementById("result");
var stats = document.getElementById("stats");
var began;
var finished;
var elapsed = 0;
var generated;
var guesses = 0;
var correct = 0;
cuberoot.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
check_cuberoot(e);
}
})
function humanize_ms(ms) {
if (ms < 1000) {
return ms + "ms";
} else {
return (Math.floor(ms / 100) / 10) + "s";
}
}
function start_round() {
if (guesses > 0) {
stats.innerHTML = "Got " + correct + " correct out of " + guesses +
". Last round took " + humanize_ms(finished - began) +
"." + ((correct > 0)
?" Average time of correct guess was " +
humanize_ms(elapsed / correct) + "."
:"");
}
generated = Math.floor(Math.random() * 90) + 10;
cube.innerHTML = " " + Math.pow(generated, 3) + " ";
began = Date.now();
cuberoot.value = "";
cuberoot.focus();
}
function check_cuberoot(e) {
var guess = e.target.value;
guesses++;
finished = Date.now();
if (guess == generated) {
correct++;
elapsed += (finished - began);
result.innerHTML = "Correct!";
} else {
result.innerHTML = 'Not correct! <span style="white-space:nowrap;">' +
'<span style="font-size:larger;">∛</span>' +
'<span style="text-decoration:overline;"> ' +
Math.pow(generated, 3) +
' </span> = ' + generated + '</span>.';
}
start_round();
}
start_round();
</script>
</body>
</html>