From 0fea528dcd82274d742d1da6ba8ff70c72bb56e0 Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Fri, 4 Oct 2024 00:27:19 -0400
Subject: [PATCH 1/8] timestamps, convert matched reply to button

---
 admin/responses.html |  4 +++
 src/checker/admin.js | 58 +++++++++++++++++++++++++++++++++++++++++++-
 src/design.css       |  5 ++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/admin/responses.html b/admin/responses.html
index ba2b3a7..b36b3b3 100644
--- a/admin/responses.html
+++ b/admin/responses.html
@@ -98,6 +98,7 @@ <h1>Awaiting Scoring</h1>
         <label style="width: -webkit-fill-available" class="small">Question</label>
         <label style="width: -webkit-fill-available" class="small">Seat</label>
         <label style="width: -webkit-fill-available">Response</label>
+        <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
       </div>
       <div class="section">
@@ -108,6 +109,7 @@ <h1>Awaiting Scoring</h1>
           <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled />
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
+          <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
           <button square id="mark-incorrect-button"><i class="bi bi-x-circle"></i></button>
         </div>
@@ -142,6 +144,7 @@ <h1>Marked Responses</h1>
         <label style="width: -webkit-fill-available" class="small">Question</label>
         <label style="width: -webkit-fill-available" class="small">Seat</label>
         <label style="width: -webkit-fill-available">Response</label>
+        <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
       </div>
       <div class="section">
@@ -152,6 +155,7 @@ <h1>Marked Responses</h1>
           <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled />
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
+          <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
           <button square id="mark-incorrect-button"><i class="bi bi-x-circle"></i></button>
         </div>
diff --git a/src/checker/admin.js b/src/checker/admin.js
index 543b305..c56a3a7 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -776,10 +776,13 @@ function updateResponses() {
         });
         r.response = responseString;
       }
+      const date = new Date(r.timestamp);
+      let hours = date.getHours();
+      const minutes = date.getMinutes();
       var buttonGrid = document.createElement('div');
       buttonGrid.className = "button-grid inputs";
       buttonGrid.id = `response-${r.id}`;
-      buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled />${((r.status === 'Incorrect') && r.reason) ? `<input type="text" autocomplete="off" id="response-response-input" value="${r.reason}" disabled />` : ''}<button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+      buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reply><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
       document.querySelector('.responses .section').appendChild(buttonGrid);
       if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
       var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === r.response) && (t.status === r.status));
@@ -929,4 +932,57 @@ function markIncorrectConfirm(reason, e) {
       ui.view("api-fail");
       if (document.querySelector('[data-polling]')) pollingOff();
     });
+}
+
+function editReason() {
+  if (!active) return;
+  ui.modal({
+    title: 'Edit Reason',
+    body: '<p>Edit your reason that this response is incorrect.</p>',
+    input: {
+      type: 'text',
+      placeholder: responses.find(r => r.id == this.parentElement.querySelector('#response-id-input').value).,
+      defaultValue: '',
+    },
+    buttons: [
+      {
+        text: 'Cancel',
+        class: 'cancel-button',
+        close: true,
+      },
+      {
+        text: 'Continue',
+        class: 'submit-button',
+        onclick: (inputValue) => {
+          editReasonConfirm(inputValue, this);
+        },
+        close: true,
+      },
+    ],
+  });
+}
+
+function editReasonConfirm(reason, e) {
+  if (!active) return;
+  fetch(domain + '/edit_reason', {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      question_id: questions.find(q => q.number == e.parentElement.querySelector('#response-question-input').value).id,
+      answer: e.parentElement.querySelector('#response-response-input').value,
+      reason: reason
+    }),
+  })
+    .then(q => q.json())
+    .then(() => {
+      ui.toast("Successfully updated status.", 3000, "success", "bi bi-check-lg");
+      init();
+    })
+    .catch((e) => {
+      console.error(e);
+      ui.view("api-fail");
+      if (document.querySelector('[data-polling]')) pollingOff();
+    });
 }
\ No newline at end of file
diff --git a/src/design.css b/src/design.css
index d67fc77..8daa9c0 100644
--- a/src/design.css
+++ b/src/design.css
@@ -409,6 +409,7 @@ div.ML__keyboard {
   }
 
   .small,
+  .smedium,
   .medium,
   square {
     max-width: unset !important;
@@ -447,6 +448,10 @@ div.ML__keyboard {
   max-width: 75px;
 }
 
+.smedium {
+  max-width: 125px;
+}
+
 .medium {
   max-width: 175px;
 }

From 956e80bfe8611e89e0a8aedda727c5a8d748d124 Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Fri, 4 Oct 2024 00:28:17 -0400
Subject: [PATCH 2/8] edit reply

---
 src/checker/admin.js | 34 +++++-----------------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/src/checker/admin.js b/src/checker/admin.js
index c56a3a7..d6ff64b 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -782,7 +782,7 @@ function updateResponses() {
       var buttonGrid = document.createElement('div');
       buttonGrid.className = "button-grid inputs";
       buttonGrid.id = `response-${r.id}`;
-      buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reply><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+      buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
       document.querySelector('.responses .section').appendChild(buttonGrid);
       if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
       var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === r.response) && (t.status === r.status));
@@ -808,6 +808,7 @@ function updateResponses() {
   document.querySelectorAll('#mark-incorrect-button').forEach(a => a.addEventListener('click', markIncorrect));
   document.querySelectorAll('[data-flag-response]').forEach(a => a.addEventListener('click', flagResponse));
   document.querySelectorAll('[data-unflag-response]').forEach(a => a.addEventListener('click', unflagResponse));
+  document.querySelectorAll('[data-edit-reason]').forEach(a => a.addEventListener('click', editReason));
   active = true;
 }
 
@@ -941,8 +942,8 @@ function editReason() {
     body: '<p>Edit your reason that this response is incorrect.</p>',
     input: {
       type: 'text',
-      placeholder: responses.find(r => r.id == this.parentElement.querySelector('#response-id-input').value).,
-      defaultValue: '',
+      placeholder: responses.find(r => r.id == this.parentElement.querySelector('#response-id-input').value).reason || '',
+      defaultValue: responses.find(r => r.id == this.parentElement.querySelector('#response-id-input').value).reason || '',
     },
     buttons: [
       {
@@ -954,35 +955,10 @@ function editReason() {
         text: 'Continue',
         class: 'submit-button',
         onclick: (inputValue) => {
-          editReasonConfirm(inputValue, this);
+          markIncorrectConfirm(inputValue, this);
         },
         close: true,
       },
     ],
   });
-}
-
-function editReasonConfirm(reason, e) {
-  if (!active) return;
-  fetch(domain + '/edit_reason', {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      question_id: questions.find(q => q.number == e.parentElement.querySelector('#response-question-input').value).id,
-      answer: e.parentElement.querySelector('#response-response-input').value,
-      reason: reason
-    }),
-  })
-    .then(q => q.json())
-    .then(() => {
-      ui.toast("Successfully updated status.", 3000, "success", "bi bi-check-lg");
-      init();
-    })
-    .catch((e) => {
-      console.error(e);
-      ui.view("api-fail");
-      if (document.querySelector('[data-polling]')) pollingOff();
-    });
 }
\ No newline at end of file

From 913ecc62ea2818d7165ff160b29588c094f59fcf Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Fri, 4 Oct 2024 14:45:42 -0400
Subject: [PATCH 3/8] credits

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 0a64039..ff5b37b 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,10 @@ Next generation AI-powered homework checking, cloud hosted ☁️🚀✅
 
 Vite will start a development server at `localhost:5173`
 
+### Credits
+
+- [khui0](https://github.com/khui0) - Base Virtual Clicker
+
 ## Build
 
 `npm run build`

From e3893f497b1bc5ee65eb80613758817f2a9acdda Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Fri, 4 Oct 2024 17:54:05 -0400
Subject: [PATCH 4/8] time between checks, bug fixes

---
 admin/responses.html |  42 ++++++++-------
 src/checker/admin.js | 118 ++++++++++++++++++++++++++++++-------------
 src/design.css       |  15 +++++-
 3 files changed, 121 insertions(+), 54 deletions(-)

diff --git a/admin/responses.html b/admin/responses.html
index b36b3b3..c90a2dc 100644
--- a/admin/responses.html
+++ b/admin/responses.html
@@ -94,9 +94,10 @@ <h1>Awaiting Scoring</h1>
       <div class="button-grid inputs">
         <!-- <label style="width: -webkit-fill-available" class="small">ID</label> -->
         <label style="width: -webkit-fill-available" square></label>
-        <label style="width: -webkit-fill-available" class="small">Segment</label>
-        <label style="width: -webkit-fill-available" class="small">Question</label>
-        <label style="width: -webkit-fill-available" class="small">Seat</label>
+        <label style="width: -webkit-fill-available" class="small" data-segment>Segment</label>
+        <label style="width: -webkit-fill-available" class="small" data-question>Question</label>
+        <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -105,9 +106,10 @@ <h1>Awaiting Scoring</h1>
         <div class="button-grid inputs">
           <!-- <input type="text" autocomplete="off" class="small" id="response-id-input" value="" disabled /> -->
           <button square id="flag-response-button"><i class="bi bi-flag"></i></button>
-          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled />
-          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled />
-          <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled />
+          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled data-segment />
+          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled data-question />
+          <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
@@ -115,19 +117,19 @@ <h1>Awaiting Scoring</h1>
         </div>
       </div>
     </div>
-    <div class="section trendingResponses">
+    <div class="section trendingResponses" data-trends>
       <h1>Trends</h1>
       <div class="button-grid inputs">
-        <label style="width: -webkit-fill-available" class="small">Segment</label>
-        <label style="width: -webkit-fill-available" class="small">Question</label>
+        <label style="width: -webkit-fill-available" class="small" data-segment>Segment</label>
+        <label style="width: -webkit-fill-available" class="small" data-question>Question</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="small">#</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
       </div>
       <div class="section">
         <div class="button-grid inputs">
-          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled />
-          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled />
+          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled data-segment />
+          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled data-question />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="small" id="response-count-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
@@ -140,9 +142,10 @@ <h1>Marked Responses</h1>
       <div class="button-grid inputs">
         <!-- <label style="width: -webkit-fill-available" class="small">ID</label> -->
         <label style="width: -webkit-fill-available" square></label>
-        <label style="width: -webkit-fill-available" class="small">Segment</label>
-        <label style="width: -webkit-fill-available" class="small">Question</label>
-        <label style="width: -webkit-fill-available" class="small">Seat</label>
+        <label style="width: -webkit-fill-available" class="small" data-segment>Segment</label>
+        <label style="width: -webkit-fill-available" class="small" data-question>Question</label>
+        <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -151,9 +154,10 @@ <h1>Marked Responses</h1>
         <div class="button-grid inputs">
           <!-- <input type="text" autocomplete="off" class="small" id="response-id-input" value="" disabled /> -->
           <button square id="flag-response-button"><i class="bi bi-flag"></i></button>
-          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled />
-          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled />
-          <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled />
+          <input type="text" autocomplete="off" class="small" id="response-segment-input" value="" disabled data-segment />
+          <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled data-question />
+          <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
@@ -171,6 +175,10 @@ <h1>Marked Responses</h1>
       <i class="bi bi-skip-forward-circle-fill"></i>
       <i class="bi bi-stop-circle-fill" style="display: none;"></i>
     </button>
+    <button class="icon" data-timestamps>
+      <i class="bi bi-clock"></i>
+      <i class="bi bi-clock-fill" style="display: none;"></i>
+    </button>
     <!-- <button class="pill" data-modal-view="settings/code">
         <span class="code">000</span>
       </button>
diff --git a/src/checker/admin.js b/src/checker/admin.js
index d6ff64b..f7de448 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -15,6 +15,7 @@ let draggedItem = null;
 var formData = new FormData();
 var polling = false;
 var active = false;
+var timestamps = false;
 
 async function init() {
   formData = new FormData();
@@ -158,6 +159,7 @@ if (document.getElementById("course-period-input")) document.getElementById("cou
 if (document.querySelector('[data-select]')) document.querySelector('[data-select-multiple]').addEventListener("click", toggleSelecting);
 if (document.querySelector('[data-select]')) document.querySelector('[data-delete-multiple]').addEventListener("click", deleteMultiple);
 if (document.querySelector('[data-polling]')) document.querySelector('[data-polling]').addEventListener("click", togglePolling);
+if (document.querySelector('[data-timestamps]')) document.querySelector('[data-timestamps]').addEventListener("click", toggleTimestamps);
 
 function toggleSelecting() {
   if (!active) return;
@@ -213,6 +215,21 @@ function pollingOff() {
   document.querySelector('[data-polling] .bi-stop-circle-fill').style.display = "none";
 }
 
+function toggleTimestamps() {
+  if (!active) return;
+  if (timestamps) {
+    timestamps = false;
+    document.querySelector('[data-timestamps] .bi-clock').style.display = "block";
+    document.querySelector('[data-timestamps] .bi-clock-fill').style.display = "none";
+    document.querySelector('#checker').classList.remove('timestamps');
+  } else {
+    timestamps = true;
+    document.querySelector('[data-timestamps] .bi-clock').style.display = "none";
+    document.querySelector('[data-timestamps] .bi-clock-fill').style.display = "block";
+    document.querySelector('#checker').classList.add('timestamps');
+  }
+}
+
 function updateSegments() {
   if (!active) return;
   const course = courses.find(c => c.id == document.getElementById("course-period-input").value);
@@ -755,7 +772,7 @@ function updateResponses() {
   document.querySelector('.trendingResponses .section').innerHTML = '';
   document.querySelector('.responses .section').innerHTML = '';
   var trendingResponses = [];
-  responses
+  var responses1 = responses
     .filter(r => String(r.seatCode)[0] == document.getElementById("sort-course-input").value)
     .filter(r => String(r.segment).startsWith(document.getElementById("sort-segment-input").value))
     .filter(r => questions.find(q => q.id == r.question_id).number.startsWith(document.getElementById("sort-question-input").value))
@@ -764,44 +781,73 @@ function updateResponses() {
       if (a.flagged && !b.flagged) return -1;
       if (!a.flagged && b.flagged) return 1;
       return b.id - a.id;
-    })
-    .forEach(r => {
-      if (r.response.includes('[')) {
-        var responseString = '';
-        var i = 0;
-        JSON.parse(r.response).forEach(a => {
-          responseString += a;
-          i++;
-          if (i < JSON.parse(r.response).length) responseString += ', ';
-        });
-        r.response = responseString;
-      }
-      const date = new Date(r.timestamp);
-      let hours = date.getHours();
-      const minutes = date.getMinutes();
-      var buttonGrid = document.createElement('div');
-      buttonGrid.className = "button-grid inputs";
-      buttonGrid.id = `response-${r.id}`;
-      buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
-      document.querySelector('.responses .section').appendChild(buttonGrid);
-      if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
-      var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === r.response) && (t.status === r.status));
-      if (trend) {
-        trend.count++;
+    });
+  responses1.forEach(r => {
+    var responseString = r.response;
+    if (responseString.includes('[')) {
+      var i = 0;
+      var parsedResponse = JSON.parse(r.response);
+      var responseString1 = '';
+      parsedResponse.forEach(a => {
+        responseString1 += a;
+        i++;
+        if (i < parsedResponse.length) responseString1 += ', ';
+      });
+      responseString = responseString1;
+    }
+    const date = new Date(r.timestamp);
+    let hours = date.getHours();
+    const minutes = date.getMinutes();
+
+    const currentDate = new Date(r.timestamp);
+    var timeTaken = "N/A";
+    const sameDayResponses = responses1.filter(a => {
+      const aDate = new Date(a.timestamp);
+      return a.seatCode === r.seatCode && 
+            aDate.getDate() === currentDate.getDate() &&
+            aDate.getMonth() === currentDate.getMonth() &&
+            aDate.getFullYear() === currentDate.getFullYear();
+    }).sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+    const lastResponseIndex = sameDayResponses.findIndex(a => new Date(a.timestamp) >= currentDate) - 1;
+    const lastResponse = lastResponseIndex >= 0 ? sameDayResponses[lastResponseIndex] : null;
+    if (lastResponse) {
+      const lastResponseDate = new Date(lastResponse.timestamp);
+      const timeDifference = (currentDate - lastResponseDate) / 60000;
+      if (timeDifference >= 60) {
+        const hours = Math.floor(timeDifference / 60);
+        const minutes = Math.floor(timeDifference % 60);
+        if (minutes > 0) {
+          timeTaken = `${hours}h ${minutes}m`;
+        } else {
+          timeTaken = `${hours} hour${hours > 1 ? 's' : ''}`;
+        }
       } else {
-        trendingResponses.push({
-          segment: r.segment,
-          question_id: r.question_id,
-          response: r.response,
-          status: r.status,
-          count: 1
-        });
+        timeTaken = `${Math.floor(timeDifference)} min${timeDifference > 1 ? 's' : ''}`;
       }
-    });
+    }
+    var buttonGrid = document.createElement('div');
+    buttonGrid.className = "button-grid inputs";
+    buttonGrid.id = `response-${r.id}`;
+    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+    document.querySelector('.responses .section').appendChild(buttonGrid);
+    if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
+    var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === responseString) && (t.status === r.status));
+    if (trend) {
+      trend.count++;
+    } else {
+      trendingResponses.push({
+        segment: r.segment,
+        question_id: r.question_id,
+        response: r.response,
+        status: r.status,
+        count: 1
+      });
+    }
+  });
   trendingResponses.filter(t => t.count > 1).forEach(r => {
     var buttonGrid = document.createElement('div');
     buttonGrid.className = "button-grid inputs";
-    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled /><input type="text" autocomplete="off" class="small" id="response-count-input" value="${r.count}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" id="response-response-input" value="${r.response}" disabled /><input type="text" autocomplete="off" class="small" id="response-count-input" value="${r.count}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
     document.querySelector('.trendingResponses .section').appendChild(buttonGrid);
   });
   document.querySelectorAll('#mark-correct-button').forEach(a => a.addEventListener('click', markCorrect));
@@ -867,7 +913,7 @@ function markCorrect() {
     },
     body: JSON.stringify({
       question_id: questions.find(q => q.number == this.parentElement.querySelector('#response-question-input').value).id,
-      answer: this.parentElement.querySelector('#response-response-input').value
+      answer: responses.find(q => q.id == this.parentElement.querySelector('#response-id-input').value).response
     }),
   })
     .then(q => q.json())
@@ -919,7 +965,7 @@ function markIncorrectConfirm(reason, e) {
     },
     body: JSON.stringify({
       question_id: questions.find(q => q.number == e.parentElement.querySelector('#response-question-input').value).id,
-      answer: e.parentElement.querySelector('#response-response-input').value,
+      answer: responses.find(q => q.id == e.parentElement.querySelector('#response-id-input').value).response,
       reason: reason
     }),
   })
diff --git a/src/design.css b/src/design.css
index 8daa9c0..3919fc6 100644
--- a/src/design.css
+++ b/src/design.css
@@ -649,7 +649,8 @@ body:has(.selecting) #controls-container [data-delete-multiple] {
   display: none;
 }
 
-hidden {
+hidden,
+[hidden] {
   display: none;
 }
 
@@ -734,3 +735,15 @@ hidden {
 #history-feed button button i {
   font-size: 12px;
 }
+
+#checker:not(.timestamps) [data-time-taken] {
+  display: none;
+}
+
+#checker.timestamps [data-unflag-response],
+#checker.timestamps [data-flag-response],
+#checker.timestamps [data-segment],
+#checker.timestamps [data-question],
+#checker.timestamps .inputs > label[square] {
+  display: none;
+}
\ No newline at end of file

From 50bbd54b127d03dad34e66d787abf192f6a72d99 Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Sat, 5 Oct 2024 10:53:30 -0400
Subject: [PATCH 5/8] default theme

---
 src/themes/themes.js   | 4 +++-
 src/themes/themes.json | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/themes/themes.js b/src/themes/themes.js
index 6d8c0a3..f781ce2 100644
--- a/src/themes/themes.js
+++ b/src/themes/themes.js
@@ -20,7 +20,9 @@ if (document.getElementById("theme-selector")) {
       selectedTheme = value;
       document.getElementById("theme-preview").setAttribute("data-theme", value);
     });
-    document.getElementById("theme-selector").append(button);
+    const themeSelector = document.getElementById("theme-selector");
+    const lastElement = themeSelector.lastElementChild;
+    if (lastElement) themeSelector.insertBefore(button, lastElement);
   });
 }
 
diff --git a/src/themes/themes.json b/src/themes/themes.json
index 609630e..5b384ac 100644
--- a/src/themes/themes.json
+++ b/src/themes/themes.json
@@ -1,4 +1,5 @@
 [
+  ["default", "Default"],
   ["classic", "Classic"],
   ["abyss", "Abyss"],
   ["graphite", "Graphite"],

From 94435c6372c223bcb7e93b7ee5cbd80267796a9c Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Sat, 5 Oct 2024 11:21:53 -0400
Subject: [PATCH 6/8] question revisions

---
 admin/responses.html |  4 ++++
 src/checker/admin.js | 48 +++++++++++++++++++++++++++-----------------
 src/design.css       |  2 +-
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/admin/responses.html b/admin/responses.html
index c90a2dc..920b4ef 100644
--- a/admin/responses.html
+++ b/admin/responses.html
@@ -98,6 +98,7 @@ <h1>Awaiting Scoring</h1>
         <label style="width: -webkit-fill-available" class="small" data-question>Question</label>
         <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Revised</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -110,6 +111,7 @@ <h1>Awaiting Scoring</h1>
           <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled data-question />
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
@@ -146,6 +148,7 @@ <h1>Marked Responses</h1>
         <label style="width: -webkit-fill-available" class="small" data-question>Question</label>
         <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Revised</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -158,6 +161,7 @@ <h1>Marked Responses</h1>
           <input type="text" autocomplete="off" class="small" id="response-question-input" value="" disabled data-question />
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
diff --git a/src/checker/admin.js b/src/checker/admin.js
index f7de448..abf401b 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -798,37 +798,49 @@ function updateResponses() {
     const date = new Date(r.timestamp);
     let hours = date.getHours();
     const minutes = date.getMinutes();
-
     const currentDate = new Date(r.timestamp);
     var timeTaken = "N/A";
-    const sameDayResponses = responses1.filter(a => {
-      const aDate = new Date(a.timestamp);
-      return a.seatCode === r.seatCode && 
-            aDate.getDate() === currentDate.getDate() &&
-            aDate.getMonth() === currentDate.getMonth() &&
-            aDate.getFullYear() === currentDate.getFullYear();
-    }).sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
-    const lastResponseIndex = sameDayResponses.findIndex(a => new Date(a.timestamp) >= currentDate) - 1;
-    const lastResponse = lastResponseIndex >= 0 ? sameDayResponses[lastResponseIndex] : null;
+    var timeTakenToRevise = "N/A";
+    const sameSeatCodeResponses = responses1.filter(a => a.seatCode === r.seatCode).sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+    const sameQuestionResponses = sameSeatCodeResponses.filter(a => a.question_id === r.question_id);
+    const lastResponseIndex = sameSeatCodeResponses.findIndex(a => new Date(a.timestamp) >= currentDate) - 1;
+    const lastResponse = lastResponseIndex >= 0 ? sameSeatCodeResponses[lastResponseIndex] : null;
+    const lastSameQuestionResponseIndex = sameQuestionResponses.findIndex(a => new Date(a.timestamp) >= currentDate) - 1;
+    const lastSameQuestionResponse = lastSameQuestionResponseIndex >= 0 ? sameQuestionResponses[lastSameQuestionResponseIndex] : null;
     if (lastResponse) {
       const lastResponseDate = new Date(lastResponse.timestamp);
       const timeDifference = (currentDate - lastResponseDate) / 60000;
-      if (timeDifference >= 60) {
+      if (timeDifference >= 1440) {
+        const days = Math.floor(timeDifference / 1440);
+        const hours = Math.floor((timeDifference % 1440) / 60);
+        timeTaken = `${days}d ${hours > 0 ? `${hours}h` : ''}`.trim();
+      } else if (timeDifference >= 60) {
         const hours = Math.floor(timeDifference / 60);
         const minutes = Math.floor(timeDifference % 60);
-        if (minutes > 0) {
-          timeTaken = `${hours}h ${minutes}m`;
-        } else {
-          timeTaken = `${hours} hour${hours > 1 ? 's' : ''}`;
-        }
+        timeTaken = `${hours}h ${minutes > 0 ? `${minutes}m` : ''}`.trim();
+      } else {
+        timeTaken = `${Math.floor(timeDifference)} min${Math.floor(timeDifference) === 1 ? '' : 's'}`;
+      }
+    }
+    if (lastSameQuestionResponse) {
+      const lastResponseDate = new Date(lastSameQuestionResponse.timestamp);
+      const timeDifference = (currentDate - lastResponseDate) / 60000;
+      if (timeDifference >= 1440) {
+        const days = Math.floor(timeDifference / 1440);
+        const hours = Math.floor((timeDifference % 1440) / 60);
+        timeTakenToRevise = `${days}d ${hours > 0 ? `${hours}h` : ''}`.trim();
+      } else if (timeDifference >= 60) {
+        const hours = Math.floor(timeDifference / 60);
+        const minutes = Math.floor(timeDifference % 60);
+        timeTakenToRevise = `${hours}h ${minutes > 0 ? `${minutes}m` : ''}`.trim();
       } else {
-        timeTaken = `${Math.floor(timeDifference)} min${timeDifference > 1 ? 's' : ''}`;
+        timeTakenToRevise = `${Math.floor(timeDifference)} min${Math.floor(timeDifference) === 1 ? '' : 's'}`;
       }
     }
     var buttonGrid = document.createElement('div');
     buttonGrid.className = "button-grid inputs";
     buttonGrid.id = `response-${r.id}`;
-    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTakenToRevise}" disabled data-time-taken /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
     document.querySelector('.responses .section').appendChild(buttonGrid);
     if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
     var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === responseString) && (t.status === r.status));
diff --git a/src/design.css b/src/design.css
index 3919fc6..45c9a27 100644
--- a/src/design.css
+++ b/src/design.css
@@ -719,7 +719,7 @@ hidden,
 #history-feed button button {
   width: -webkit-fill-available;
   background-color: var(--background-color);
-  color: var(--accent-text-color);
+  color: var(--text-color);
   margin: 5px 0;
 }
 

From 446834bc3720a70909cfaee346d041069e345e5a Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Sat, 5 Oct 2024 15:59:45 -0400
Subject: [PATCH 7/8] standard deviation

---
 src/checker/admin.js | 78 ++++++++++++++++++++++++--------------------
 src/design.css       |  5 +++
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/checker/admin.js b/src/checker/admin.js
index abf401b..5243eb9 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -772,6 +772,7 @@ function updateResponses() {
   document.querySelector('.trendingResponses .section').innerHTML = '';
   document.querySelector('.responses .section').innerHTML = '';
   var trendingResponses = [];
+  var timedResponses = [];
   var responses1 = responses
     .filter(r => String(r.seatCode)[0] == document.getElementById("sort-course-input").value)
     .filter(r => String(r.segment).startsWith(document.getElementById("sort-segment-input").value))
@@ -785,15 +786,8 @@ function updateResponses() {
   responses1.forEach(r => {
     var responseString = r.response;
     if (responseString.includes('[')) {
-      var i = 0;
       var parsedResponse = JSON.parse(r.response);
-      var responseString1 = '';
-      parsedResponse.forEach(a => {
-        responseString1 += a;
-        i++;
-        if (i < parsedResponse.length) responseString1 += ', ';
-      });
-      responseString = responseString1;
+      responseString = parsedResponse.join(', ');
     }
     const date = new Date(r.timestamp);
     let hours = date.getHours();
@@ -807,40 +801,20 @@ function updateResponses() {
     const lastResponse = lastResponseIndex >= 0 ? sameSeatCodeResponses[lastResponseIndex] : null;
     const lastSameQuestionResponseIndex = sameQuestionResponses.findIndex(a => new Date(a.timestamp) >= currentDate) - 1;
     const lastSameQuestionResponse = lastSameQuestionResponseIndex >= 0 ? sameQuestionResponses[lastSameQuestionResponseIndex] : null;
+    let timeDifference;
     if (lastResponse) {
-      const lastResponseDate = new Date(lastResponse.timestamp);
-      const timeDifference = (currentDate - lastResponseDate) / 60000;
-      if (timeDifference >= 1440) {
-        const days = Math.floor(timeDifference / 1440);
-        const hours = Math.floor((timeDifference % 1440) / 60);
-        timeTaken = `${days}d ${hours > 0 ? `${hours}h` : ''}`.trim();
-      } else if (timeDifference >= 60) {
-        const hours = Math.floor(timeDifference / 60);
-        const minutes = Math.floor(timeDifference % 60);
-        timeTaken = `${hours}h ${minutes > 0 ? `${minutes}m` : ''}`.trim();
-      } else {
-        timeTaken = `${Math.floor(timeDifference)} min${Math.floor(timeDifference) === 1 ? '' : 's'}`;
-      }
+      timeDifference = calculateTimeDifference(currentDate, lastResponse.timestamp);
+      timeTaken = formatTimeDifference(timeDifference);
+      timedResponses.push(timeDifference);
     }
     if (lastSameQuestionResponse) {
-      const lastResponseDate = new Date(lastSameQuestionResponse.timestamp);
-      const timeDifference = (currentDate - lastResponseDate) / 60000;
-      if (timeDifference >= 1440) {
-        const days = Math.floor(timeDifference / 1440);
-        const hours = Math.floor((timeDifference % 1440) / 60);
-        timeTakenToRevise = `${days}d ${hours > 0 ? `${hours}h` : ''}`.trim();
-      } else if (timeDifference >= 60) {
-        const hours = Math.floor(timeDifference / 60);
-        const minutes = Math.floor(timeDifference % 60);
-        timeTakenToRevise = `${hours}h ${minutes > 0 ? `${minutes}m` : ''}`.trim();
-      } else {
-        timeTakenToRevise = `${Math.floor(timeDifference)} min${Math.floor(timeDifference) === 1 ? '' : 's'}`;
-      }
+      timeDifference = calculateTimeDifference(currentDate, lastSameQuestionResponse.timestamp);
+      timeTakenToRevise = formatTimeDifference(timeDifference);
     }
     var buttonGrid = document.createElement('div');
     buttonGrid.className = "button-grid inputs";
     buttonGrid.id = `response-${r.id}`;
-    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTakenToRevise}" disabled data-time-taken /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTakenToRevise}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
     document.querySelector('.responses .section').appendChild(buttonGrid);
     if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
     var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === responseString) && (t.status === r.status));
@@ -856,6 +830,11 @@ function updateResponses() {
       });
     }
   });
+  const stdDev = calculateStandardDeviation(timedResponses);
+  // console.log("Standard Deviation:", stdDev);
+  document.querySelectorAll('[data-time-taken]').forEach(d => {
+    if (d.hasAttribute('time') && (Number(d.getAttribute('time')) > stdDev)) d.classList.add('disabled');
+  });
   trendingResponses.filter(t => t.count > 1).forEach(r => {
     var buttonGrid = document.createElement('div');
     buttonGrid.className = "button-grid inputs";
@@ -870,6 +849,35 @@ function updateResponses() {
   active = true;
 }
 
+function calculateTimeDifference(currentDate, previousTimestamp) {
+  const lastResponseDate = new Date(previousTimestamp);
+  return (currentDate - lastResponseDate) / 60000;
+}
+
+function formatTimeDifference(timeDifference) {
+  if (timeDifference >= 1440) {
+    const days = Math.floor(timeDifference / 1440);
+    const hours = Math.floor((timeDifference % 1440) / 60);
+    return `${days}d ${hours > 0 ? `${hours}h` : ''}`.trim();
+  } else if (timeDifference >= 60) {
+    const hours = Math.floor(timeDifference / 60);
+    const minutes = Math.floor(timeDifference % 60);
+    return `${hours}h ${minutes > 0 ? `${minutes}m` : ''}`.trim();
+  } else {
+    return `${Math.floor(timeDifference)} min${Math.floor(timeDifference) === 1 ? '' : 's'}`;
+  }
+}
+
+function calculateStandardDeviation(arr) {
+  if (arr.length === 0) return 0;
+  const mean = arr.reduce((sum, value) => sum + value, 0) / arr.length;
+  const variance = arr.reduce((sum, value) => {
+      const diff = value - mean;
+      return sum + diff * diff;
+  }, 0) / arr.length;
+  return Math.sqrt(variance);
+}
+
 function flagResponse() {
   if (!active) return;
   fetch(domain + '/flag', {
diff --git a/src/design.css b/src/design.css
index 45c9a27..0d8db99 100644
--- a/src/design.css
+++ b/src/design.css
@@ -131,6 +131,11 @@ select:disabled {
   pointer-events: auto;
 }
 
+input.disabled:disabled,
+select.disabled:disabled {
+  opacity: 0.25;
+}
+
 .drag {
   height: 2.25em;
   width: 2.25em;

From e8b8f1376f45e018d6db816c39386ec48bba9770 Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Sat, 5 Oct 2024 22:44:58 -0400
Subject: [PATCH 8/8] time to finish question

---
 admin/responses.html |  4 ++++
 src/checker/admin.js | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/admin/responses.html b/admin/responses.html
index 920b4ef..13ce6ee 100644
--- a/admin/responses.html
+++ b/admin/responses.html
@@ -99,6 +99,7 @@ <h1>Awaiting Scoring</h1>
         <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Revised</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Total</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -112,6 +113,7 @@ <h1>Awaiting Scoring</h1>
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
@@ -149,6 +151,7 @@ <h1>Marked Responses</h1>
         <label style="width: -webkit-fill-available" class="small" data-seat-code>Seat</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Spent</label>
         <label style="width: -webkit-fill-available" class="small" data-time-taken>Revised</label>
+        <label style="width: -webkit-fill-available" class="small" data-time-taken>Total</label>
         <label style="width: -webkit-fill-available">Response</label>
         <label style="width: -webkit-fill-available" class="smedium">Time</label>
         <label style="width: -webkit-fill-available" class="small">Status</label>
@@ -162,6 +165,7 @@ <h1>Marked Responses</h1>
           <input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="" disabled data-seat-code />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
+          <input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="" disabled data-time-taken />
           <input type="text" autocomplete="off" id="response-response-input" value="" disabled />
           <input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="" disabled />
           <button square id="mark-correct-button"><i class="bi bi-check-circle"></i></button>
diff --git a/src/checker/admin.js b/src/checker/admin.js
index 5243eb9..6a39649 100644
--- a/src/checker/admin.js
+++ b/src/checker/admin.js
@@ -811,10 +811,22 @@ function updateResponses() {
       timeDifference = calculateTimeDifference(currentDate, lastSameQuestionResponse.timestamp);
       timeTakenToRevise = formatTimeDifference(timeDifference);
     }
+    var [daysPart, z, timePart] = r.timeTaken.split(' ');
+    const days = parseInt(daysPart, 10);
+    const [hours1, minutes1] = timePart.split(':').map(part => parseInt(part, 10));
+    const totalHours = days * 24 + hours1;
+    let result;
+    if (totalHours >= 24) {
+      result = `${days}d ${hours1}h`;
+    } else if (totalHours >= 1) {
+      result = `${hours1}h ${minutes1}m`;
+    } else {
+      result = `${minutes1}m`;
+    }
     var buttonGrid = document.createElement('div');
     buttonGrid.className = "button-grid inputs";
     buttonGrid.id = `response-${r.id}`;
-    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTakenToRevise}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
+    buttonGrid.innerHTML = `<input type="text" autocomplete="off" class="small" id="response-id-input" value="${r.id}" disabled hidden />${(r.flagged == '1') ? `<button square data-unflag-response><i class="bi bi-flag-fill"></i></button>` : `<button square data-flag-response><i class="bi bi-flag"></i></button>`}<input type="text" autocomplete="off" class="small" id="response-segment-input" value="${r.segment}" disabled data-segment /><input type="text" autocomplete="off" class="small" id="response-question-input" value="${questions.find(q => q.id == r.question_id).number}" disabled data-question /><input type="text" autocomplete="off" class="small" id="response-seat-code-input" value="${r.seatCode}" disabled data-seat-code /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTaken}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${timeTakenToRevise}" disabled data-time-taken${(typeof timeDifference != 'undefined') ? ` time="${timeDifference}"` : ''} /><input type="text" autocomplete="off" class="small" id="response-time-taken-input" value="${result}" disabled data-time-taken /><input type="text" autocomplete="off" id="response-response-input" value="${responseString}" disabled />${(r.status === 'Incorrect') ? `<button square data-edit-reason><i class="bi bi-reply${(r.reason) ? '-fill' : ''}"></i></button>` : ''}<input type="text" autocomplete="off" class="smedium" id="response-timestamp-input" value="${date.getMonth() + 1}/${date.getDate()} ${hours % 12 || 12}:${minutes < 10 ? '0' + minutes : minutes} ${hours >= 12 ? 'PM' : 'AM'}" disabled /><button square id="mark-correct-button"${(r.status === 'Correct') ? ' disabled' : ''}><i class="bi bi-check-circle${(r.status === 'Correct') ? '-fill' : ''}"></i></button><button square id="mark-incorrect-button"${(r.status === 'Incorrect') ? ' disabled' : ''}><i class="bi bi-x-circle${(r.status === 'Incorrect') ? '-fill' : ''}"></i></button>`;
     document.querySelector('.responses .section').appendChild(buttonGrid);
     if ((r.status === 'Invalid Format') || (r.status === 'Unknown, Recorded')) document.querySelector('.awaitingResponses .section').appendChild(buttonGrid);
     var trend = trendingResponses.find(t => (t.segment === r.segment) && (t.question_id === r.question_id) && (t.response === responseString) && (t.status === r.status));