fix: skipping questions bug and overall UI and flow update

public/quiz-test.html

@@ -27,8 +27,8 @@
             <button id="beginButton" class="beginButton">LET'S BEGIN!</button>
             <button
               id="resumeButton"
-              class="resumeButton"
-              style="display: none; margin-top: 1em"
+              class="beginButton"
+              style="display: none; margin-left: 16px"
             >
               RESUME QUIZ
             </button>
@@ -74,29 +74,11 @@
               ><img src="/image/right-arrow.png"
             /></span>
           </div>
-          <button
-            id="resetQuizButton"
-            class="resetQuizButton"
-            style="margin-left: 1em"
-          >
+          <button id="resetQuizButton" class="resetQuizButton">
             Reset Quiz
           </button>
         </div>
-        <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 id="question-nav-bar"></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
-      id="terminationOverlay"
-      style="
-        display: none;
-        position: fixed;
-        top: 0;
-        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 id="termination-overlay" style="display: none">
+      <div class="termination-content">
+        <div class="termination-message"></div>
+        <div class="termination-title"></div>
+        <div class="termination-counter"></div>
+      </div>
     </div>
     <script src="/frontend_js/jquery.min.js"></script>
     <script src="/frontend_js/jquery-2.1.3.js"></script>