fix: code review fixes

public/frontend_css/style.css

@@ -906,10 +906,16 @@ input::-ms-input-placeholder {
 #response-timer {
   display: block;
   text-align: center;
-  font-size: 2rem;
-  margin-top: 24px;
-  font-weight: bold;
-  color: #222;
+  font-size: 3.5rem;
+  margin: 32px auto;
+  font-weight: 700;
+  color: #231f20;
+  font-family: "Necto Mono", monospace;
+  background: #f3f4ee;
+  padding: 16px 32px;
+  border-top: 1px solid #101010;
+  border-radius: 0;
+  width: 70%;
 }
 /*page 5 ends here*/
 

public/frontend_js/quiz-test.js

@@ -2171,34 +2171,77 @@ function handleImageMissing(self) {
 }
 
 // Implement checkAllergie for Quiz 4
-function checkAllergie(self) {
+async function checkAllergie(self) {
   const value = self.dataset.val || $(self).data("val");
   if (["Banana", "Olive", "Sunflowers"].includes(value)) {
-    // Simulate API fetch for message and counter
-    const terminationMessage =
-      "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 = "/";
+    try {
+      // Fetch termination configuration from API
+      const response = await fetch("/api/termination-config");
+      const data = await response.json();
+
+      if (data.success) {
+        const config = data.payload;
+        const terminationMessage = config.message;
+        const terminationTitle = config.title;
+        let counter = parseInt(config.counter);
+
+        $("#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;
+      } else {
+        // Fallback to default values if API fails
+        console.error("Failed to fetch termination config:", data.message);
+        showDefaultTermination();
       }
-    }, 1000);
-    // Block all interaction
-    $("body > *:not(#termination-overlay)").css("pointer-events", "none");
+    } catch (error) {
+      console.error("Error fetching termination config:", error);
+      // Fallback to default values if API fails
+      showDefaultTermination();
+    }
     return;
   }
   // If not terminating, proceed as normal (select/deselect logic)
   // (existing selection logic is handled by the .selectionBtn click handler)
 }
 
+function showDefaultTermination() {
+  const terminationMessage =
+    "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;
+
+  $("#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");
+}
+
 $(document).on("click", "#resetQuizButton", async function () {
   if (
     confirm(