From 9cf0b6292d349a9f2f6e070a30a2130119f55c58 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Sun, 13 Dec 2015 23:10:27 -0500 Subject: Add history and averages for question timers. --- base.css | 29 +++++++++++++++++++++++++++-- index.html | 9 +++++++++ mult.js | 57 ++++++++++++++++++++++++++++++++++++--------------------- wide.css | 5 +++++ 4 files changed, 77 insertions(+), 23 deletions(-) diff --git a/base.css b/base.css index c21f456..5942889 100644 --- a/base.css +++ b/base.css @@ -1,12 +1,14 @@ +/* http://paletton.com/#uid=31c0s0kievNiOL7iHDdh6sMg2o2 */ + body { font-family: "Helvetica Neue", Helvetica, sans-serif; } form { display: table; - border: 1px solid #bf9730; + border: 1px solid #c0a860; border-radius: 10px; - background-color: #ffd873; + background-color: #fdda6d; box-shadow: 0 5px 5px #888; } @@ -55,4 +57,27 @@ form { #timer { display: none; +} + +#history { + border: 1px outset #5f4782; + border-radius: 10px; + background-color: #9363d6; + padding: 0.5em; + width: 3em; + position: absolute; + text-align: right; +} + +#history-list { + list-style: none; + padding: 0; +} + +#history li::after { + content: "s" +} + +#history summary::after { + content: "s" } \ No newline at end of file diff --git a/index.html b/index.html index 6f72b66..c186b5c 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,15 @@ +
+
    +
  1. 1.20
    2. +
  2. 75.52
    3. +
  3. 8.00
    4. +
+ 2.2 +
+
diff --git a/mult.js b/mult.js index 45fc9cd..c589096 100644 --- a/mult.js +++ b/mult.js @@ -1,6 +1,7 @@ var TABLE_SIZE = 12; -var startDate, op1, op2, ans; +var startDate; +var answerHistory = []; var testFormEl = document.getElementById('test-form'); var op1El = document.getElementById('op1'); @@ -13,35 +14,38 @@ var correctAnswerEl = document.getElementById('correct-answer'); var submitEl = document.getElementById('submit'); var timerEl = document.getElementById('timer'); var timeEl = document.getElementById('time'); +var historyEl = document.getElementById('history-list') +var averageEl = document.getElementById('history-average') + +function question() { + this.op1 = Math.round(Math.random() * (TABLE_SIZE-1) + 1); + this.op2 = Math.round(Math.random() * (TABLE_SIZE-1) + 1); + this.ans = this.op1 * this.op2; +} function setUp() { - op1 = Math.round(Math.random() * (TABLE_SIZE-1) + 1); - op2 = Math.round(Math.random() * (TABLE_SIZE-1) + 1); - ans = op1 * op2; - - op1El.innerHTML = op1; - op2El.innerHTML = op2; - answerEl.value = ''; - correctAnswerEl.innerHTML = ans; - testFormEl.onsubmit = checkAnswer; + q = new question(); - submitEl.innerHTML = 'Check'; - timerEl.style.display = 'none'; - correctEl.style.display = 'none'; - incorrectEl.style.display = 'none'; + op1El.innerHTML = q.op1; + op2El.innerHTML = q.op2; + answerEl.value = ''; + testFormEl.onsubmit = function () { checkAnswer(q); return false; }; answerEl.focus(); startDate = new Date(); } -function checkAnswer() { +function checkAnswer(q) { var endDate = new Date(); - timeEl.innerHTML = ((endDate - startDate)/1000).toFixed(1); + q.elapsed = (endDate - startDate)/1000 + time = q.elapsed.toFixed(1) + timeEl.innerHTML = time; timerEl.style.display = 'block'; - if (answerEl.value == ans) { + correctAnswerEl.innerHTML = q.ans; + if (answerEl.value == q.ans) { correctEl.style.display = 'inline'; incorrectEl.style.display = 'none'; } else { @@ -49,11 +53,22 @@ function checkAnswer() { correctEl.style.display = 'none'; } - testFormEl.onsubmit = refresh; - submitEl.innerHTML = 'Try another'; - answerEl.focus(); + addToHistory(time) + answerHistory.push(q) + averageEl.innerHTML = (answerHistory.reduce(function (acc, val) { return acc + val.elapsed }, 0) / answerHistory.length).toFixed(1) - return false; + setUp(); +} + +function addToHistory(time) { + var children = historyEl.childNodes; + for (i = children.length; i > 4; i--) { + historyEl.removeChild(children[children.length - i]); + } + + var item = document.createElement('li'); + item.appendChild(document.createTextNode(time)); + historyEl.appendChild(item); } function refresh() { diff --git a/wide.css b/wide.css index 68f877a..22cbf1a 100644 --- a/wide.css +++ b/wide.css @@ -17,4 +17,9 @@ form { padding: 5px 15px; width: 153px; height: 41px; +} + +#history { + top: 25px; + right: 50px; } \ No newline at end of file -- cgit v1.2.3