feat: enhance error submission overlay with improved messaging and close button functionality

js/interact.js

@@ -140,7 +140,7 @@ export function submissionError(data, answer_json, exam_details) {
 
   if ($("#submit-error-overlay").length < 1) {
     $("body").append(
-      `<div id='submit-error-overlay'><span style='color: white'><p>An error has occurred when submitting your answers. A copy of your answers are displayed below, you may wish to <a id="save-failed-answers" href="#">save a copy</a>. Please try submitting again or refresh this page to continue (answers will be saved locally in the browser unless you clear local storage).</p><p>${html.get(0).innerHTML}</p><p>${JSON.stringify(
+      `<div id='submit-error-overlay'><span style='color: white'><p>An error has occurred when submitting your answers. A copy of your answers are displayed below, you may wish to <a id="save-failed-answers" href="#">save a copy</a> if subsequent submissions still fail. Please try submitting again or refresh this page to continue (answers will be saved locally in the browser unless you clear local storage).</p><p>${html.get(0).innerHTML}</p><p>${JSON.stringify(
         answer_json
       )}</p></span></div>`
     );

js/main.js

@@ -2949,14 +2949,22 @@ $("#btn-view-local-answers").click(async function(evt) {
 
   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>`
+      `<div id='view-answers-overlay'>
+          <button id='close-view-answers' class='navigation' style='position: absolute; top: 8px; right: 8px;'>Close</button>
+          <div style='padding: 16px; color: white; overflow:auto; max-height:90vh;'>
+            <pre style='white-space:pre-wrap; word-break:break-word;'>${JSON.stringify(answer_json, null, 2)}</pre>
+          </div>
+       </div>`
     );
 
     $("#view-answers-overlay").height(docHeight);
     $("#view-answers-overlay").append("<a id='save-failed-answers'>Save</a>")
 
+    // Close button handler
+    $("#close-view-answers").on("click", function() {
+      $("#view-answers-overlay").remove();
+    });
+
     let file = new Blob([JSON.stringify(answer_json)], {type: "application/json"})
 
     let link = document.getElementById("save-failed-answers");