View submitted answers locally

css/loading.css

@@ -0,0 +1,89 @@
+
+.sk-cube-grid {
+    width: 60px;
+    height: 60px;
+}
+
+.sk-cube-grid .sk-cube {
+    width: 33%;
+    height: 33%;
+    background-color: #4527A0;
+    float: left;
+    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+
+.sk-cube-grid .sk-cube1 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+
+.sk-cube-grid .sk-cube2 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+
+.sk-cube-grid .sk-cube3 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+
+.sk-cube-grid .sk-cube4 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+
+.sk-cube-grid .sk-cube5 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+
+.sk-cube-grid .sk-cube6 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+
+.sk-cube-grid .sk-cube7 {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+}
+
+.sk-cube-grid .sk-cube8 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+
+.sk-cube-grid .sk-cube9 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+
+    0%,
+    70%,
+    100% {
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
+    }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+
+    0%,
+    70%,
+    100% {
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
+    }
+}

css/main.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @import "./base.css";
+@import "./loading.css";
 @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700");
 /* Colourscheme from https://www.materialui.co/colors */
 
@@ -50,7 +51,7 @@ html {
 
 html,
 body,
-input:not([type=text]),
+input:not([type=text]):not([type=number]), /* TODO: check it works in safari */
 button,
 select,
 option {
@@ -72,8 +73,6 @@ textarea {
     margin: 0;
     padding: 0;
     color: black;
-    /*#1d3850;*/
-    /*font-family: 'Noto Sans', sans-serif;*/
     overflow: hidden;
 }
 
@@ -272,7 +271,7 @@ td {
     border-style: dashed;
 }
 
-/*@media screen and (orientation:landscape) {*/
+/* LANDSCAPE */
 @media screen and (min-aspect-ratio:12/9) {
     .exam-content-panel {
         display: flex;
@@ -339,7 +338,7 @@ td {
     }
 }
 
-/*@media screen and (orientation:portrait) {*/
+/* PORTRAIT*/
 @media screen and (max-aspect-ratio:12/9) {
     .exam-content-panel {
         display: block;
@@ -921,94 +920,6 @@ select option:disabled {
     content: "⏸"
 }
 
-.sk-cube-grid {
-    width: 60px;
-    height: 60px;
-}
-
-.sk-cube-grid .sk-cube {
-    width: 33%;
-    height: 33%;
-    background-color: #4527A0;
-    float: left;
-    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-}
-
-.sk-cube-grid .sk-cube1 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s;
-}
-
-.sk-cube-grid .sk-cube2 {
-    -webkit-animation-delay: 0.3s;
-    animation-delay: 0.3s;
-}
-
-.sk-cube-grid .sk-cube3 {
-    -webkit-animation-delay: 0.4s;
-    animation-delay: 0.4s;
-}
-
-.sk-cube-grid .sk-cube4 {
-    -webkit-animation-delay: 0.1s;
-    animation-delay: 0.1s;
-}
-
-.sk-cube-grid .sk-cube5 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s;
-}
-
-.sk-cube-grid .sk-cube6 {
-    -webkit-animation-delay: 0.3s;
-    animation-delay: 0.3s;
-}
-
-.sk-cube-grid .sk-cube7 {
-    -webkit-animation-delay: 0s;
-    animation-delay: 0s;
-}
-
-.sk-cube-grid .sk-cube8 {
-    -webkit-animation-delay: 0.1s;
-    animation-delay: 0.1s;
-}
-
-.sk-cube-grid .sk-cube9 {
-    -webkit-animation-delay: 0.2s;
-    animation-delay: 0.2s;
-}
-
-@-webkit-keyframes sk-cubeGridScaleDelay {
-
-    0%,
-    70%,
-    100% {
-        -webkit-transform: scale3D(1, 1, 1);
-        transform: scale3D(1, 1, 1);
-    }
-
-    35% {
-        -webkit-transform: scale3D(0, 0, 1);
-        transform: scale3D(0, 0, 1);
-    }
-}
-
-@keyframes sk-cubeGridScaleDelay {
-
-    0%,
-    70%,
-    100% {
-        -webkit-transform: scale3D(1, 1, 1);
-        transform: scale3D(1, 1, 1);
-    }
-
-    35% {
-        -webkit-transform: scale3D(0, 0, 1);
-        transform: scale3D(0, 0, 1);
-    }
-}
 
 
 .displayblock {
@@ -1145,7 +1056,7 @@ select option:disabled {
     }
 }
 
-#submit-error-overlay {
+#submit-error-overlay, #view-answers-overlay {
     opacity: 0.9;
     position: absolute;
     top: 0;
@@ -1188,11 +1099,11 @@ select option:disabled {
     color: red;
 }
 
-input[type="number"] {
+/* input[type="number"] {
     user-select: text;
     -moz-user-select: text;
     -webkit-user-select: text;
-}
+} */
 
 .feedback-image {
     max-width: 100%;

index.html

@@ -109,6 +109,7 @@
                             </fieldset>
                         </form>
                     </div>
+                    <p><button id='btn-view-local-answers'>View local saved answers</button></p>
                 </details>
             </div>
             <div id="review-overlay" class="fullscreen-overlay">

js/interact.js

@@ -91,7 +91,7 @@ export function postAnswers(ans, config, exam_details) {
   // $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
 }
 
-function submissionError(data, answer_json, exam_details) {
+export function submissionError(data, answer_json, exam_details) {
   // error will not be defined with server errors
   if (data.error != undefined) {
     alert(`Error submitting answers: ${data.error}`);

js/main.js

@@ -2492,6 +2492,9 @@ $("#login-button").click(function(evt) {
 
 $(".start-packet-button").click(function(evt) {
 
+  // TODO: send packet to server to indicated that we have started the exam
+  // if in exam mode
+
   exam_details.start_time = new Date().getTime() / 1000;
 
   if (timer != null) {
@@ -2627,6 +2630,31 @@ function delete_user_db() {
     });
 }
 
+$("#btn-view-local-answers").click(async function(evt) {
+
+
+  var docHeight = $(document).height();
+
+  let answer_json = await db.answers.toArray();
+
+  if ($("#view-answers-overlay").length < 1) {
+    $("body").append(
+      `<div id='view-answers-overlay'><span style='color: white'><p>${JSON.stringify(
+        answer_json
+      )}</p></span></div>`
+    );
+
+    $("#view-answers-overlay").height(docHeight);
+    $("#view-answers-overlay").append("<a id='save-failed-answers'>Save</a>")
+
+    let file = new Blob([JSON.stringify(answer_json)], {type: "application/json"})
+
+    let link = document.getElementById("save-failed-answers");
+    link.href = URL.createObjectURL(file);
+    link.download = "answers.json";
+  }
+});
+
 $("#btn-delete-answer-databases").click(function(evt) {
   var r = confirm(
     "This will delete ALL saved answers (including saved correct answers)!"