Application changes

app/static/script.js

@@ -28,6 +28,7 @@ function startQuiz() {
 
 function displayQuestion() {
     const question = questions[currentIndex];
+    document.getElementById('question-number').innerText = `Question ${currentIndex + 1} of ${questions.length}`;
     document.getElementById('question').innerText = question.question;
 
     const isMultipleChoice = /Select TWO|Choose two/i.test(question.question);
@@ -46,14 +47,12 @@ function displayQuestion() {
 
         input.addEventListener('change', () => {
             if (isMultipleChoice) {
-                // Add or remove the answer for multiple choice
                 if (input.checked) {
                     userAnswers[currentIndex].push(i);
                 } else {
                     userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
                 }
             } else {
-                // Set only one answer for single choice
                 userAnswers[currentIndex] = [i];
             }
         });
@@ -71,6 +70,7 @@ function displayQuestion() {
 }
 
 
+
 function selectAnswer(optionIndex) {
     const currentAnswers = userAnswers[currentIndex];
     if (currentAnswers.includes(optionIndex)) {

app/static/style.css

@@ -26,3 +26,15 @@ label {
     font-size: 16px;
     cursor: pointer;
 }
+
+#navigation {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+#navigation button {
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+}

app/templates/index.html

@@ -27,13 +27,15 @@
                 <div id="navigation">
                     <button id="prev">Previous</button>
                     <button id="next">Next</button>
+                    <button id="end-session">End Session</button>
                 </div>
-                <button id="end-session">End Session</button>
             </div>
         </div>
+        <h2 id="question-number"></h2>
         <div id="results-container" style="display: none;">
             <h2>Quiz Results</h2>
             <p id="score"></p>
+            <button id="restart">Return to Start</button>
         </div>
     </div>
     <script src="/static/script.js"></script>