index.html 3.28 KB
Newer Older
Kevin Lyda's avatar
Kevin Lyda committed
1 2 3 4
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
Kevin Lyda's avatar
Kevin Lyda committed
5
  <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />
Kevin Lyda's avatar
Kevin Lyda committed
6 7 8
    <title>Cube Root Training</title>
  </head>
  <body>
Kevin Lyda's avatar
Kevin Lyda committed
9 10
  <div id=main>
  <b>Cube Root Training</b>
Kevin Lyda's avatar
Kevin Lyda committed
11 12 13
  <p>
    <span style="white-space:nowrap;"><span style="font-size:larger;"
        >&#8731;</span><span id=cube style="text-decoration:overline;">
Kevin Lyda's avatar
Kevin Lyda committed
14 15
      </span>&nbsp;=&nbsp;
      <input type=number id=cuberoot value="" min=10 max=99>
Kevin Lyda's avatar
Kevin Lyda committed
16 17
    </span>
  </p>
Kevin Lyda's avatar
Kevin Lyda committed
18 19
  <p id=result></p>
  <p id=stats></p>
Kevin Lyda's avatar
Kevin Lyda committed
20
  </div>
Kevin Lyda's avatar
Kevin Lyda committed
21 22 23 24 25
  <script>
var cube = document.getElementById("cube");
var cuberoot = document.getElementById("cuberoot");
var result = document.getElementById("result");
var stats = document.getElementById("stats");
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
var began, finished, generated;
var elapsed = 0, guesses = 0, correct = 0;
var generator = [];

Array.prototype.shuffle = function () {
  var i = this.length, val, j;

  if (i > 2) {
    while (i > 0) {
      j = Math.floor(Math.random() * i);
      i--;
      if (i != j) {
        val = this[i];
        this[i] = this[j];
        this[j] = val;
      }
    }
  }
  return this;
}

Array.prototype.random = function() {
  if (this.length == 0) {
    for (var i = 10; i < 100; i++) {
      this.push(i);
      if (i % 10 > 0) {
        this.push(i);
      }
    }
    this.shuffle();
  }
  return this.shift();
}
Kevin Lyda's avatar
Kevin Lyda committed
59 60 61 62 63

cuberoot.addEventListener("keydown", function (e) {
  if (e.keyCode === 13) {
    check_cuberoot(e);
  }
Kevin Lyda's avatar
Kevin Lyda committed
64 65 66 67 68 69 70
});

cuberoot.addEventListener("keyup", function (e) {
  if (cuberoot.value.length >= 2) {
    check_cuberoot(e);
  }
});
Kevin Lyda's avatar
Kevin Lyda committed
71 72 73 74 75 76 77 78 79 80 81

function humanize_ms(ms) {
  if (ms < 1000) {
    return ms + "ms";
  } else {
    return (Math.floor(ms / 100) / 10) + "s";
  }
}

function start_round() {
  if (guesses > 0) {
82
    stats.innerHTML = "Got " + correct + " out of " + guesses +
Kevin Lyda's avatar
Kevin Lyda committed
83 84
                      ". Last round took " + humanize_ms(finished - began) +
                      "." + ((correct > 0)
85
                          ?" Avg time of correct guesses was " +
Kevin Lyda's avatar
Kevin Lyda committed
86 87 88
                          humanize_ms(elapsed / correct) + "."
                          :"");
  }
89
  generated = generator.random();
Kevin Lyda's avatar
Kevin Lyda committed
90
  cube.innerHTML = "&nbsp;" + Math.pow(generated, 3) + "&nbsp;";
Kevin Lyda's avatar
Kevin Lyda committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
  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 {
106 107 108
    generator.push(generated, generated);
    generator.shuffle();
    result.innerHTML = 'Incorrect! <span style="white-space:nowrap;">' +
Kevin Lyda's avatar
Kevin Lyda committed
109 110 111 112
      '<span style="font-size:larger;">&#8731;</span>' +
      '<span style="text-decoration:overline;">&nbsp;' +
      Math.pow(generated, 3) +
      '&nbsp;</span> = ' + generated + '</span>.';
Kevin Lyda's avatar
Kevin Lyda committed
113 114 115 116
  }
  start_round();
}

117
function make_text_readable() {
118
  if (screen.width <= 480) {
119
    document.body.style.fontSize = "8vw";
120
    cuberoot.style = "font-size:8vw;";
121
  } else if (screen.width <= 1024) {
122
    document.body.style.fontSize = "6vw";
123 124 125 126
    cuberoot.style = "font-size:6vw;";
  } else {
    document.body.style.fontSize = "48px";
    cuberoot.style = "font-size:48px;";
127
  }
Kevin Lyda's avatar
Kevin Lyda committed
128 129
}

130 131 132
window.onload = make_text_readable;
window.onresize = make_text_readable;

Kevin Lyda's avatar
Kevin Lyda committed
133 134 135 136
start_round();
  </script>
  </body>
</html>