index.html

  
 <!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;"
        >&#8731;</span><span id=cube style="text-decoration:overline;">
      </span>&nbsp;=&nbsp;<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 = "&nbsp;" + Math.pow(generated, 3) + "&nbsp;";
  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;">' +