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