fix: skipping questions bug and overall UI and flow update

public/frontend_css/style.css

@@ -276,6 +276,10 @@ input[type="number"] {
   background: #444242;
 }
 
+#resumeButton {
+  margin-left: 16px;
+}
+
 /*page 1 ends*/
 
 /*page 2 starts*/
@@ -848,8 +852,8 @@ input::-ms-input-placeholder {
   padding-bottom: 4px;
   border-bottom: 1px solid black;
   position: absolute;
-  bottom: 4px;
   left: 50%;
+  bottom: 4px;
 }
 #page4 .customImgRow img {
   width: 335px;
@@ -899,6 +903,14 @@ input::-ms-input-placeholder {
   line-height: 30px;
   margin: 0px;
 }
+#response-timer {
+  display: block;
+  text-align: center;
+  font-size: 2rem;
+  margin-top: 24px;
+  font-weight: bold;
+  color: #222;
+}
 /*page 5 ends here*/
 
 /*page6 starts*/
@@ -1447,63 +1459,124 @@ img.image-missing {
   border-left: none;
 }
 
-#resetQuizButton,
+#termination-overlay {
-#resumeButton {
+  display: none;
-  background: #737a73;
+  position: fixed;
-  color: #fff;
+  top: 0;
-  font: 12px "Necto Mono";
+  left: 0;
-  border: none;
+  width: 100vw;
-  border-radius: 4px;
+  height: 100vh;
-  padding: 10px 32px;
+  background: rgba(0, 0, 0, 0.95);
-  margin-left: 8px;
+  z-index: 9999;
-  cursor: pointer;
+  justify-content: center;
-  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  align-items: center;
-  outline: none;
 }
-#resetQuizButton:hover,
+#termination-overlay .termination-content {
-#resumeButton:hover,
+  width: 100vw;
-#resetQuizButton:focus,
+  height: 100vh;
-#resumeButton:focus {
+  display: flex;
-  background: #444242;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+#termination-overlay .termination-message {
   color: #fff;
+  font-family: "Necto Mono", monospace;
+  font-size: 1.6rem;
+  text-align: center;
+  margin-bottom: 32px;
+  letter-spacing: 1px;
+}
+#termination-overlay .termination-title {
+  color: #fff;
+  font-family: "Bradford LL", serif;
+  font-size: 2.5rem;
+  font-style: italic;
+  text-align: center;
+  margin-bottom: 32px;
+}
+#termination-overlay .termination-counter {
+  color: #fff;
+  font-family: "Bradford LL", serif;
+  font-size: 3.5rem;
+  font-style: italic;
+  text-align: center;
+  margin-top: 16px;
 }
 
-#questionNavBar .nav-btn {
+#resetQuizButton {
-  font: 12px "Necto Mono";
+  position: absolute;
-  border-radius: 4px !important;
+  top: 16px;
-  padding: 10px 16px !important;
+  right: 24px;
-  margin: 0 4px;
+  background: #fff;
-  min-width: 32px;
+  color: #222;
-  min-height: 32px;
+  border: 2px solid #222;
-  border: none;
+  border-radius: 6px;
+  padding: 8px 20px;
+  font-size: 1rem;
+  font-family: "Bradford LL", serif;
   font-weight: bold;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
-  text-align: center;
+  z-index: 10;
-  vertical-align: middle;
+}
-  display: inline-flex;
+#resetQuizButton:hover {
-  align-items: center;
+  background: #222;
+  color: #fff;
+}
+
+#question-nav-bar {
+  width: 100%;
+  background: #f7f7f7;
+  border-bottom: 1px solid #ddd;
+  padding: 12px 0 8px 0;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
   justify-content: center;
+  align-items: center;
+  min-height: 48px;
 }
-#questionNavBar .nav-btn.answered {
+.question-nav-inner {
-  background: #43a047;
+  display: flex;
-  color: #fff;
+  gap: 8px;
-  border: 2px solid #388e3c;
+  overflow-x: auto;
+  padding: 0 16px;
 }
-#questionNavBar .nav-btn.current {
+.question-nav-btn {
-  background: #1976d2;
+  min-width: 36px;
-  color: #fff;
+  height: 36px;
-  border: 3px solid #1565c0;
+  border-radius: 50%;
-  box-shadow: 0 0 8px 2px rgba(25, 118, 210, 0.15);
-  z-index: 2;
-}
-#questionNavBar .nav-btn.unanswered {
-  background: #ccc;
-  color: #888;
   border: 2px solid #bbb;
-}
+  background: #fff;
-#questionNavBar .nav-btn:hover,
+  color: #bbb;
-#questionNavBar .nav-btn:focus {
+  font-size: 1.1rem;
-  filter: brightness(0.95);
+  font-family: "Bradford LL", serif;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s;
   outline: none;
 }
+.question-nav-btn.answered {
+  background: #e0ffe0;
+  color: #1a7f1a;
+  border-color: #1a7f1a;
+}
+.question-nav-btn.current {
+  background: #222;
+  color: #fff;
+  border-color: #222;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222;
+}
+.question-nav-btn.unanswered {
+  background: #fff;
+  color: #bbb;
+  border-color: #bbb;
+  opacity: 0.6;
+}
+.question-nav-btn:hover {
+  background: #f0f0f0;
+  color: #222;
+  border-color: #222;
+}

public/frontend_js/quiz-test.js

@@ -64,7 +64,6 @@ let nextQuestionTimeoutCounter = 3000;
 let selectionQuestionTimeoutCounter = 6000;
 let closeResponseTimeoutCounter = 5000;
 let timeout;
-let responseCountdownInterval;
 
 const mainImage = $(".main-image-container img");
 fetch(url_preset + "/configurations")
@@ -76,7 +75,23 @@ fetch(url_preset + "/configurations")
     }
   });
 
-$(document).on("click", ".beginButton", async function () {
+$(document).ready(function () {
+  // Show Resume button if there is saved progress
+  if (localStorage.getItem("answers")) {
+    $("#resumeButton").show();
+  } else {
+    $("#resumeButton").hide();
+  }
+});
+
+$(document).on("click", "#beginButton", async function () {
+  // Clear progress and start fresh
+  localStorage.removeItem("answers");
+  dataToReturn = [];
+  uniqueQuestionsShowed = [];
+  currentQuizIndex = 0;
+  currentQuestionCounter = 0;
+  isExecuted = false;
   $("#page1").css("display", "none");
   $("#page2").css("display", "none");
   $("#page3").css("display", "none");
@@ -89,6 +104,56 @@ $(document).on("click", ".beginButton", async function () {
   return nextQuestion();
 });
 
+$(document).on("click", "#resumeButton", async function () {
+  // Resume from last progress
+  dataToReturn = localStorage.getItem("answers")
+    ? JSON.parse(localStorage.getItem("answers"))
+    : [];
+  uniqueQuestionsShowed = [];
+  currentQuizIndex = 0;
+  currentQuestionCounter = 0;
+  isExecuted = false;
+  $("#page1").css("display", "none");
+  $("#page2").css("display", "none");
+  $("#page3").css("display", "none");
+  $("#page4").css("display", "none");
+  $("#page5").css("display", "none");
+  $("#page6").css("display", "none");
+  $("#page7").css("display", "none");
+  await getQuizzesApi();
+  showQuizTitle();
+  // Find last answered question
+  let lastQ = null;
+  let lastQuizIdx = 0;
+  let lastQCounter = 0;
+  if (dataToReturn.length > 0) {
+    for (let i = 0; i < allItems.length; i++) {
+      const quiz = allItems[i];
+      for (let j = 0; j < quiz.questions.length; j++) {
+        const q = quiz.questions[j];
+        if (dataToReturn.find((a) => a.question && a.question.id === q.id)) {
+          lastQuizIdx = i;
+          lastQCounter = j + 1;
+        }
+      }
+    }
+    currentQuizIndex = lastQuizIdx;
+    currentQuestionCounter = lastQCounter;
+  }
+  // Go to the next unanswered question
+  setTimeout(() => {
+    $("#page1").css("display", "none");
+    $("#page2").css("display", "none");
+    $("#page3").css("display", "block");
+    $("#page4").css("display", "none");
+    $("#page5").css("display", "none");
+    $("#page6").css("display", "none");
+    $("#page7").css("display", "none");
+    $("#progressBarSection").css("display", "block");
+    nextQuestion();
+  }, nextQuestionTimeoutCounter);
+});
+
 $(document).on("click", ".goBottom", function () {
   $("html, body").animate({ scrollTop: $(document).height() }, "slow");
 });
@@ -1023,22 +1088,26 @@ function showResponse(responseHead, responseBody, weatherQuestion) {
   if (weatherQuestion) {
     $("#page5 #weatherApi").css("display", "block");
   }
-  // Countdown timer logic for Quiz 2
+
-  clearInterval(responseCountdownInterval);
+  // Countdown timer logic
-  let countdown = Math.ceil(closeResponseTimeoutCounter / 1000);
+  if (window.responseCountdownInterval) {
-  $("#responseCountdown").show().text(`Closing in ${countdown} seconds...`);
+    clearInterval(window.responseCountdownInterval);
-  responseCountdownInterval = setInterval(function () {
+  }
-    countdown--;
+  const timerDiv = $("#response-timer");
-    if (countdown > 0) {
+  let secondsLeft = Math.ceil(closeResponseTimeoutCounter / 1000);
-      $("#responseCountdown").text(`Closing in ${countdown} seconds...`);
+  timerDiv.text(secondsLeft);
+  timerDiv.show();
+  window.responseCountdownInterval = setInterval(() => {
+    secondsLeft--;
+    if (secondsLeft > 0) {
+      timerDiv.text(secondsLeft);
     } else {
-      clearInterval(responseCountdownInterval);
+      timerDiv.text(0);
-      $("#responseCountdown").hide();
+      clearInterval(window.responseCountdownInterval);
     }
   }, 1000);
+
   closeResponseTimeout = setTimeout(() => {
-    clearInterval(responseCountdownInterval);
-    $("#responseCountdown").hide();
     closeResponse();
   }, closeResponseTimeoutCounter);
 }
@@ -1047,11 +1116,15 @@ function showResponse(responseHead, responseBody, weatherQuestion) {
 function closeResponse() {
   responseOnGoing = false;
   hasNoResponse = true;
-  clearInterval(responseCountdownInterval);
-  $("#responseCountdown").hide();
   $("#page5").css("display", "none");
   $("#page4").css("display", "none");
   $("#page3").css("display", "block");
+  // Clear the countdown timer
+  if (window.responseCountdownInterval) {
+    clearInterval(window.responseCountdownInterval);
+    window.responseCountdownInterval = null;
+  }
+  $("#response-timer").hide();
   if (currentQuestionCounter < totalQuizQuestions.length) {
     return askQuestion(totalQuizQuestions, currentQuestionCounter);
   } else {
@@ -1068,8 +1141,6 @@ function closeResponse() {
 } // function closeResponse ends here
 
 async function askQuestion(totalQuizQuestions, counter, fromBack) {
-  // Always hide all answer rows before showing the current one
-  $(".answerRow").hide();
   clearTimeout(timeout);
   clearTimeout(closeResponseTimeout);
 
@@ -1420,10 +1491,10 @@ async function askQuestion(totalQuizQuestions, counter, fromBack) {
         `);
       }
     });
-    // Add 'None of the above' button
+    // Add 'None of the above' option at the end
     $("#typeSelection .answerInner").append(`
       <div class="selectionOptions">
-        <button class="selectionBtns selectionBtn noneOfTheAboveBtn" onclick="handleNoneOfTheAbove()">None of the above</button>
+        <button class="selectionBtns selectionBtn none-of-the-above" onclick="handleNoneOfTheAbove()">None of the above</button>
       </div>
     `);
 
@@ -1483,8 +1554,6 @@ async function askQuestion(totalQuizQuestions, counter, fromBack) {
     $("#questionRow h1").html(ques.question);
   }
   currentQuestionCounter++;
-  // At the end of askQuestion, always update the nav bar
-  renderQuestionNavBar();
 }
 
 async function storeAnswer(currentQuestion, currentActiveAnswerType) {
@@ -1798,20 +1867,6 @@ async function storeAnswer(currentQuestion, currentActiveAnswerType) {
     }
   }
   localStorage.setItem("answers", JSON.stringify(dataToReturn));
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    localStorage.setItem(
-      "answers_" + customerEmail.innerText,
-      JSON.stringify(dataToReturn)
-    );
-  }
-  let userKey = getUserProgressKey();
-  localStorage.setItem(userKey, JSON.stringify(dataToReturn));
-  checkResumeButtonVisibility();
-  renderQuestionNavBar();
 }
 
 let currentSuggestIndex;
@@ -2115,508 +2170,125 @@ function handleImageMissing(self) {
   $(self).addClass("image-missing");
 }
 
-// 1. Add checkAllergie function near the top (after variable declarations)
+// Implement checkAllergie for Quiz 4
-function checkAllergie(btn) {
+function checkAllergie(self) {
-  clearTimeout(timeout);
+  const value = self.dataset.val || $(self).data("val");
-  var val = $(btn).attr("data-val");
+  if (["Banana", "Olive", "Sunflowers"].includes(value)) {
-  // Quiz 4: Terminate if Banana, Olive, or Sunflowers is selected
+    // Simulate API fetch for message and counter
-  if (["Banana", "Olive", "Sunflowers"].includes(val)) {
+    const terminationMessage =
-    showTerminationScreen();
+      "You have an allergy to one of the main ingredients in our system. Our current system will not suit you.";
+    const terminationTitle = "Quiz will now be terminated";
+    let counter = 10; // seconds (simulate API value)
+    $("#termination-overlay .termination-message").text(terminationMessage);
+    $("#termination-overlay .termination-title").text(terminationTitle);
+    $("#termination-overlay .termination-counter").text(counter);
+    $("#termination-overlay").css("display", "flex");
+    let interval = setInterval(() => {
+      counter--;
+      $("#termination-overlay .termination-counter").text(counter);
+      if (counter <= 0) {
+        clearInterval(interval);
+        window.location.href = "/";
+      }
+    }, 1000);
+    // Block all interaction
+    $("body > *:not(#termination-overlay)").css("pointer-events", "none");
     return;
   }
-  if ($(btn).hasClass("active")) {
+  // If not terminating, proceed as normal (select/deselect logic)
-    tempSelectionAns.splice(tempSelectionAns.indexOf(val), 1);
+  // (existing selection logic is handled by the .selectionBtn click handler)
-    $(btn).removeClass("active");
-    $(btn).removeClass("highlight");
-  } else {
-    tempSelectionAns.push(val);
-    if (!$(btn).hasClass("active")) $(btn).addClass("active");
-    if (!$(btn).hasClass("highlight")) $(btn).addClass("highlight");
-  }
-  timeout = setTimeout(function () {
-    nextQuestion();
-  }, selectionQuestionTimeoutCounter);
 }
 
-// Quiz 4: Show termination overlay and handle countdown/redirect
+$(document).on("click", "#resetQuizButton", async function () {
-function showTerminationScreen() {
-  // Get message and counter from mainConfigurations (from /configurations API)
-  var message =
-    mainConfigurations && mainConfigurations.termination_message
-      ? mainConfigurations.termination_message
-      : "You have selected an allergen. The quiz will now end.";
-  var counter =
-    mainConfigurations && mainConfigurations.termination_counter
-      ? parseInt(mainConfigurations.termination_counter)
-      : 5;
-  $("#terminationMessage").text(message);
-  $("#terminationCountdown").text(counter);
-  $("#terminationOverlay").css({ display: "flex" });
-  var countdown = counter;
-  var interval = setInterval(function () {
-    countdown--;
-    if (countdown > 0) {
-      $("#terminationCountdown").text(countdown);
-    } else {
-      clearInterval(interval);
-      window.location.href = "/";
-    }
-  }, 1000);
-}
-
-// Quiz 5: Show Resume Quiz button if progress exists, and handle resume logic
-$(document).ready(function () {
-  // Use email as key if available, otherwise fallback to local
-  let userKey = null;
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    userKey = "answers_" + customerEmail.innerText;
-  }
-  let savedAnswers = userKey
-    ? localStorage.getItem(userKey)
-    : localStorage.getItem("answers");
-  if (savedAnswers && JSON.parse(savedAnswers).length > 0) {
-    $("#resumeButton").show();
-  }
-
-  $("#resumeButton").on("click", async function () {
-    // Load saved progress
-    let answers = userKey
-      ? localStorage.getItem(userKey)
-      : localStorage.getItem("answers");
-    if (answers) {
-      dataToReturn = JSON.parse(answers);
-      // Find last answered question
-      let lastQ = dataToReturn[dataToReturn.length - 1];
-      // Set quiz and question index
-      let found = false;
-      for (let i = 0; i < allItems.length; i++) {
-        let idx = allItems[i].questions.findIndex(
-          (q) => q.id === lastQ.question.id
-        );
-        if (idx !== -1) {
-          currentQuizIndex = i;
-          currentQuestionCounter = idx + 1;
-          found = true;
-          break;
-        }
-      }
-      if (!found) {
-        currentQuizIndex = 0;
-        currentQuestionCounter = 0;
-      }
-      $("#page1").css("display", "none");
-      $("#page2").css("display", "none");
-      $("#page3").css("display", "none");
-      $("#page4").css("display", "none");
-      $("#page5").css("display", "none");
-      $("#page6").css("display", "none");
-      $("#page7").css("display", "none");
-      await getQuizzesApi();
-      showQuizTitle();
-      // Resume from next unanswered question
-      return askQuestion(
-        allItems[currentQuizIndex].questions,
-        currentQuestionCounter
-      );
-    }
-  });
-});
-
-// Utility for user-specific progress key
-function getUserProgressKey() {
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    return "answers_" + customerEmail.innerText;
-  }
-  return "answers";
-}
-function clearAllProgress() {
-  localStorage.removeItem("answers");
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    localStorage.removeItem("answers_" + customerEmail.innerText);
-  }
-}
-
-// Overwrite reset logic
-$(document).on("click", "#resetQuizButton", function () {
   if (
     confirm(
       "Are you sure you want to reset the quiz? All progress will be lost."
     )
   ) {
-    clearAllProgress();
+    localStorage.removeItem("answers");
-    // Reload the page for a true fresh start (clears all in-memory state/UI)
+    dataToReturn = [];
-    window.location.reload();
+    uniqueQuestionsShowed = [];
+    currentQuizIndex = 0;
+    currentQuestionCounter = 0;
+    isExecuted = false;
+    $("#page1").css("display", "none");
+    $("#page2").css("display", "none");
+    $("#page3").css("display", "none");
+    $("#page4").css("display", "none");
+    $("#page5").css("display", "none");
+    $("#page6").css("display", "none");
+    $("#page7").css("display", "none");
+    await getQuizzesApi();
+    showQuizTitle();
+    return nextQuestion();
   }
 });
 
-// Overwrite resume logic
-$(document).ready(function () {
-  let userKey = getUserProgressKey();
-  let savedAnswers = localStorage.getItem(userKey);
-  if (savedAnswers && JSON.parse(savedAnswers).length > 0) {
-    $("#resumeButton").show();
-  }
-  $("#resumeButton")
-    .off("click")
-    .on("click", async function () {
-      let userKey = getUserProgressKey();
-      let answers = localStorage.getItem(userKey);
-      let navState = localStorage.getItem("quiz_nav_state");
-      await getQuizzesApi(); // Always load quizzes first
-      let startFromBeginning = false;
-      let found = false;
-      if (answers) {
-        try {
-          dataToReturn = JSON.parse(answers);
-        } catch (e) {
-          dataToReturn = [];
-        }
-        if (Array.isArray(dataToReturn) && dataToReturn.length > 0) {
-          let lastQ = dataToReturn[dataToReturn.length - 1];
-          if (
-            lastQ &&
-            lastQ.question &&
-            typeof lastQ.question.id !== "undefined"
-          ) {
-            for (let i = 0; i < allItems.length; i++) {
-              let idx = allItems[i].questions.findIndex(
-                (q) => q.id === lastQ.question.id
-              );
-              if (idx !== -1) {
-                currentQuizIndex = i;
-                currentQuestionCounter = idx + 1;
-                found = true;
-                break;
-              }
-            }
-          }
-        }
-      }
-      // If not found by answers, try nav state
-      if (!found && navState) {
-        try {
-          const { quizIndex, questionCounter } = JSON.parse(navState);
-          if (
-            typeof quizIndex === "number" &&
-            typeof questionCounter === "number"
-          ) {
-            currentQuizIndex = quizIndex;
-            currentQuestionCounter = questionCounter;
-            found = true;
-          }
-        } catch (e) {}
-      }
-      // If still not found, start from beginning
-      if (!found) {
-        currentQuizIndex = 0;
-        currentQuestionCounter = 0;
-      }
-      $("#page1").css("display", "none");
-      $("#page2").css("display", "none");
-      $("#page3").css("display", "none");
-      $("#page4").css("display", "none");
-      $("#page5").css("display", "none");
-      $("#page6").css("display", "none");
-      $("#page7").css("display", "none");
-      showQuizTitle();
-      askQuestion(allItems[currentQuizIndex].questions, currentQuestionCounter);
-    });
-});
-
-// In storeAnswer, always save to the correct user key
-async function storeAnswer(currentQuestion, currentActiveAnswerType) {
-  // ... existing code ...
-  let userKey = getUserProgressKey();
-  localStorage.setItem(userKey, JSON.stringify(dataToReturn));
-  checkResumeButtonVisibility();
-  renderQuestionNavBar();
-}
-
 function renderQuestionNavBar() {
-  if (!allItems || allItems.length === 0 || !$("#page3").is(":visible")) {
+  // Hide on landing and final result pages
-    $("#questionNavBar").hide();
+  if ($("#page1").is(":visible") || $("#page7").is(":visible")) {
+    $("#question-nav-bar").hide();
     return;
   }
-  let questions = [];
+  $("#question-nav-bar").show();
-  allItems.forEach((quiz) => {
+  $("#question-nav-bar").html("");
-    quiz.questions.forEach((q) => {
-      questions.push({ id: q.id, text: q.question });
-    });
-  });
-  let answeredIds = (dataToReturn || [])
-    .map((a) => a.question && a.question.id)
-    .filter(Boolean);
-  // Determine the current question id
-  let currentId = null;
   if (
-    allItems[currentQuizIndex] &&
+    !allItems ||
-    allItems[currentQuizIndex].questions[currentQuestionCounter] // currentQuestionCounter points to the next question, so use currentQuestionCounter-1 if >0
+    !allItems[currentQuizIndex] ||
-  ) {
+    !allItems[currentQuizIndex].questions
-    currentId =
+  )
-      allItems[currentQuizIndex].questions[currentQuestionCounter]?.id;
+    return;
-    // If currentId is undefined (e.g., at end), fallback to previous
+  const questions = allItems[currentQuizIndex].questions;
-    if (!currentId && currentQuestionCounter > 0) {
+  let navHtml = '<div class="question-nav-inner">';
-      currentId =
+  for (let i = 0; i < questions.length; i++) {
-        allItems[currentQuizIndex].questions[currentQuestionCounter - 1]?.id;
+    const q = questions[i];
-    }
+    let answered = dataToReturn.find(
-  } else if (
+      (a) => a.question && a.question.id === q.id
-    allItems[currentQuizIndex] &&
+    );
-    allItems[currentQuizIndex].questions[currentQuestionCounter - 1]
+    let isCurrent = i === currentQuestionCounter - 1;
-  ) {
+    let btnClass = "question-nav-btn";
-    currentId =
-      allItems[currentQuizIndex].questions[currentQuestionCounter - 1].id;
-  }
-  let html = "";
-  questions.forEach((q, idx) => {
-    let btnClass = "nav-btn";
-    const isAnswered = answeredIds.includes(q.id);
-    const isCurrent = q.id === currentId;
-    if (isAnswered) btnClass += " answered";
     if (isCurrent) btnClass += " current";
-    if (!isAnswered) btnClass += " unanswered";
+    else if (answered) btnClass += " answered";
-    html += `<button class="${btnClass}" data-qid="${
+    else btnClass += " unanswered";
-      q.id
+    navHtml += `<button class="${btnClass}" data-qidx="${i}">${i + 1}</button>`;
-    }" style="margin:0 4px; min-width:32px; min-height:32px; border-radius:4px; border:none; font-weight:bold; cursor:pointer;">${
+  }
-      idx + 1
+  navHtml += "</div>";
-    }</button>`;
+  $("#question-nav-bar").html(navHtml);
-  });
-  $("#questionNavBar").html(html).show();
 }
 
-// Handle nav bar button click
+// Helper to jump to a specific question index in the current quiz
-$(document).on("click", "#questionNavBar .nav-btn", function () {
+function jumpToQuestion(index) {
-  let qid = parseInt($(this).attr("data-qid"));
+  // Hide all answer rows and question row
-  let found = false;
+  var divsToHide = document.getElementsByClassName("answerRow");
-  for (let i = 0; i < allItems.length; i++) {
+  for (let i = 0; i < divsToHide.length; i++) {
-    let idx = allItems[i].questions.findIndex((q) => q.id === qid);
+    divsToHide[i].style.display = "none";
-    if (idx !== -1) {
-      currentQuizIndex = i;
-      currentQuestionCounter = idx;
-      found = true;
-      break;
-    }
   }
-  if (found) {
+  $("#questionRow").css("display", "none");
-    askQuestion(allItems[currentQuizIndex].questions, currentQuestionCounter);
+  // Set the counter and show the question
+  currentQuestionCounter = index;
+  askQuestion(allItems[currentQuizIndex].questions, index);
+}
+
+// Handle nav bar click
+$(document).on("click", ".question-nav-btn", async function () {
+  const idx = parseInt($(this).attr("data-qidx"));
+  if (!isNaN(idx)) {
+    jumpToQuestion(idx);
   }
 });
 
 // Update nav bar on question change
-let origAskQuestion = askQuestion;
+const origAskQuestion = askQuestion;
 askQuestion = async function (...args) {
-  let result = await origAskQuestion.apply(this, args);
+  const result = await origAskQuestion.apply(this, args);
   renderQuestionNavBar();
   return result;
 };
 
-// Show/hide nav bar on page changes
+// Also update nav bar on nextQuestion
-function updateNavBarVisibility() {
+const origNextQuestion = nextQuestion;
-  if (
+nextQuestion = async function (...args) {
-    typeof renderQuestionNavBar === "function" &&
+  const result = await origNextQuestion.apply(this, args);
-    $("#page3").is(":visible")
+  renderQuestionNavBar();
-  ) {
+  return result;
-    renderQuestionNavBar();
+};
-    $("#questionNavBar").show();
-  } else {
-    $("#questionNavBar").hide();
-  }
-}
-// Ensure nav bar is shown after every askQuestion
-if (!window._quizNavWrapped) {
-  window._quizNavWrapped = true;
-  const origAskQuestion = askQuestion;
-  askQuestion = async function (...args) {
-    let result = await origAskQuestion.apply(this, args);
-    updateNavBarVisibility();
-    saveNavState();
-    return result;
-  };
-}
-// On page load or resume, restore nav state and show nav bar if on question page
-$(document).ready(function () {
-  loadNavState();
-  updateNavBarVisibility();
-});
-
-// Add minimal CSS for nav bar button states
-$(
-  "<style>\
-#questionNavBar { display: flex !important; overflow-x: auto; }\
-#questionNavBar .nav-btn { background: #eee; color: #333; transition: background 0.2s; }\
-#questionNavBar .nav-btn.answered { background: #4caf50; color: #fff; }\
-#questionNavBar .nav-btn.current { background: #2196f3; color: #fff; border: 2px solid #1976d2; }\
-#questionNavBar .nav-btn.unanswered { background: #ccc; color: #888; }\
-</style>"
-).appendTo("head");
-
-// Utility for nav state persistence
-function saveNavState() {
-  localStorage.setItem(
-    "quiz_nav_state",
-    JSON.stringify({
-      quizIndex: currentQuizIndex,
-      questionCounter: currentQuestionCounter,
-    })
-  );
-}
-function loadNavState() {
-  const state = localStorage.getItem("quiz_nav_state");
-  if (state) {
-    try {
-      const { quizIndex, questionCounter } = JSON.parse(state);
-      if (
-        typeof quizIndex === "number" &&
-        typeof questionCounter === "number"
-      ) {
-        currentQuizIndex = quizIndex;
-        currentQuestionCounter = questionCounter;
-      }
-    } catch (e) {}
-  }
-}
-
-// On reset, clear nav state
-function clearAllProgress() {
-  localStorage.removeItem("answers");
-  localStorage.removeItem("quiz_nav_state");
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    localStorage.removeItem("answers_" + customerEmail.innerText);
-  }
-  $("#resumeButton").hide();
-}
-
-// BEGIN button: always start fresh and clear progress
-$(document).on("click", "#beginButton", async function () {
-  clearAllProgress();
-  $("#resumeButton").hide();
-  $("#page1").css("display", "none");
-  $("#page2").css("display", "none");
-  $("#page3").css("display", "none");
-  $("#page4").css("display", "none");
-  $("#page5").css("display", "none");
-  $("#page6").css("display", "none");
-  $("#page7").css("display", "none");
-  dataToReturn = [];
-  uniqueQuestionsShowed = [];
-  lastQuizResponseShown = null;
-  lastShowedQuestionId = null;
-  currentQuizIndex = 0;
-  currentQuestionCounter = 0;
-  isExecuted = false;
-  await getQuizzesApi();
-  showQuizTitle();
-  askQuestion(allItems[currentQuizIndex].questions, 0);
-});
-
-// Resume button logic: only show if there is progress
-function checkResumeButtonVisibility() {
-  let userKey = getUserProgressKey();
-  let savedAnswers = localStorage.getItem(userKey);
-  let navState = localStorage.getItem("quiz_nav_state");
-  if ((savedAnswers && JSON.parse(savedAnswers).length > 0) || navState) {
-    $("#resumeButton").show();
-  } else {
-    $("#resumeButton").hide();
-  }
-}
-
-$(document).ready(function () {
-  loadNavState();
-  updateNavBarVisibility();
-  checkResumeButtonVisibility();
-  $("#resumeButton")
-    .off("click")
-    .on("click", async function () {
-      let userKey = getUserProgressKey();
-      let answers = localStorage.getItem(userKey);
-      let navState = localStorage.getItem("quiz_nav_state");
-      await getQuizzesApi(); // Always load quizzes first
-      let startFromBeginning = false;
-      let found = false;
-      if (answers) {
-        try {
-          dataToReturn = JSON.parse(answers);
-        } catch (e) {
-          dataToReturn = [];
-        }
-        if (Array.isArray(dataToReturn) && dataToReturn.length > 0) {
-          let lastQ = dataToReturn[dataToReturn.length - 1];
-          if (
-            lastQ &&
-            lastQ.question &&
-            typeof lastQ.question.id !== "undefined"
-          ) {
-            for (let i = 0; i < allItems.length; i++) {
-              let idx = allItems[i].questions.findIndex(
-                (q) => q.id === lastQ.question.id
-              );
-              if (idx !== -1) {
-                currentQuizIndex = i;
-                currentQuestionCounter = idx + 1;
-                found = true;
-                break;
-              }
-            }
-          }
-        }
-      }
-      // If not found by answers, try nav state
-      if (!found && navState) {
-        try {
-          const { quizIndex, questionCounter } = JSON.parse(navState);
-          if (
-            typeof quizIndex === "number" &&
-            typeof questionCounter === "number"
-          ) {
-            currentQuizIndex = quizIndex;
-            currentQuestionCounter = questionCounter;
-            found = true;
-          }
-        } catch (e) {}
-      }
-      // If still not found, start from beginning
-      if (!found) {
-        currentQuizIndex = 0;
-        currentQuestionCounter = 0;
-      }
-      $("#page1").css("display", "none");
-      $("#page2").css("display", "none");
-      $("#page3").css("display", "none");
-      $("#page4").css("display", "none");
-      $("#page5").css("display", "none");
-      $("#page6").css("display", "none");
-      $("#page7").css("display", "none");
-      showQuizTitle();
-      askQuestion(allItems[currentQuizIndex].questions, currentQuestionCounter);
-    });
-});
-
-// After reset, hide resume button until new progress is made
-function clearAllProgress() {
-  localStorage.removeItem("answers");
-  localStorage.removeItem("quiz_nav_state");
-  if (
-    typeof customerEmail !== "undefined" &&
-    customerEmail &&
-    customerEmail.innerText
-  ) {
-    localStorage.removeItem("answers_" + customerEmail.innerText);
-  }
-  $("#resumeButton").hide();
-}

public/quiz-test.html

@@ -27,8 +27,8 @@
             <button id="beginButton" class="beginButton">LET'S BEGIN!</button>
             <button
               id="resumeButton"
-              class="resumeButton"
+              class="beginButton"
-              style="display: none; margin-top: 1em"
+              style="display: none; margin-left: 16px"
             >
               RESUME QUIZ
             </button>
@@ -74,29 +74,11 @@
               ><img src="/image/right-arrow.png"
             /></span>
           </div>
-          <button
+          <button id="resetQuizButton" class="resetQuizButton">
-            id="resetQuizButton"
-            class="resetQuizButton"
-            style="margin-left: 1em"
-          >
             Reset Quiz
           </button>
         </div>
-        <div
+        <div id="question-nav-bar"></div>
-          id="questionNavBar"
-          class="question-nav-bar"
-          style="
-            position: static;
-            width: 100%;
-            background: #fff;
-            z-index: 1000;
-            display: none;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-            padding: 0.5em 0;
-            justify-content: center;
-            align-items: center;
-          "
-        ></div>
         <div class="row questionRow mtb" id="questionRow">
           <h1>
             <!-- dynamic data here -->
@@ -261,6 +243,7 @@
             /></span>
           </div>
         </div>
+        <div id="question-nav-bar"></div>
         <div class="row responseRow">
           <div class="responseInner">
             <div class="responseHead">
@@ -269,17 +252,9 @@
             <div class="responseBody">
               <!-- dynamic data here -->
             </div>
-            <div
-              id="responseCountdown"
-              style="
-                display: none;
-                text-align: center;
-                font-size: 1.5em;
-                margin-top: 1em;
-              "
-            ></div>
           </div>
         </div>
+        <div id="response-timer"></div>
         <div id="weatherApi" data-type="8">
           <div class="header">Environmental Profile</div>
           <div class="info">
@@ -397,35 +372,12 @@
       <div></div>
       <div></div>
     </div>
-    <div
+    <div id="termination-overlay" style="display: none">
-      id="terminationOverlay"
+      <div class="termination-content">
-      style="
+        <div class="termination-message"></div>
-        display: none;
+        <div class="termination-title"></div>
-        position: fixed;
+        <div class="termination-counter"></div>
-        top: 0;
+      </div>
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.85);
-        z-index: 9999;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-      "
-    >
-      <div
-        id="terminationMessage"
-        style="
-          color: white;
-          font-size: 2em;
-          text-align: center;
-          margin-bottom: 1em;
-        "
-      ></div>
-      <div
-        id="terminationCountdown"
-        style="color: white; font-size: 2em; text-align: center"
-      ></div>
     </div>
     <script src="/frontend_js/jquery.min.js"></script>
     <script src="/frontend_js/jquery-2.1.3.js"></script>