diff options
| author | Brian Cully <bjc@kublai.com> | 2015-12-13 23:10:27 -0500 |
|---|---|---|
| committer | Brian Cully <bjc@kublai.com> | 2015-12-13 23:10:27 -0500 |
| commit | 9cf0b6292d349a9f2f6e070a30a2130119f55c58 (patch) | |
| tree | 05b8b2b5f86869aa4f49c08ee7d24561bd9d87ee | |
| parent | 3f4b92e611939ce6f652318856213164f772beda (diff) | |
| download | mult-9cf0b6292d349a9f2f6e070a30a2130119f55c58.tar.gz mult-9cf0b6292d349a9f2f6e070a30a2130119f55c58.zip | |
Add history and averages for question timers.
| -rw-r--r-- | base.css | 29 | ||||
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | mult.js | 57 | ||||
| -rw-r--r-- | wide.css | 5 |
4 files changed, 77 insertions, 23 deletions
@@ -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 @@ -13,6 +13,15 @@ </head> <body> + <details id="history"> + <ol id="history-list"> + <li>1.20</li> + <li>75.52</li> + <li>8.00</li> + </ol> + <summary id="history-average">2.2</summary> + </details> + <form id="test-form"> <span class="test"> <span id="op1"></span> @@ -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() { @@ -17,4 +17,9 @@ form { padding: 5px 15px; width: 153px; height: 41px; +} + +#history { + top: 25px; + right: 50px; }
\ No newline at end of file |