summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--base.css29
-rw-r--r--index.html9
-rw-r--r--mult.js57
-rw-r--r--wide.css5
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 @@
</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>
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