add a red border on exam page like when taking an exam like a square where the exam is inside and the exam should be one question then move tio other not alow of numbers in one page every answer next page

app.js

@@ -207,13 +207,13 @@ function renderExamList() {
         });
     });
 }
-
 // Start an exam
 function startExam(examId) {
     const exam = state.exams.find(e => e.id === examId);
     if (!exam) return;
     
     state.currentExam = exam;
+    state.currentQuestionIndex = 0;
     state.examStartTime = new Date();
     state.suspiciousActivities = 0;
     
@@ -221,9 +221,9 @@ function startExam(examId) {
     examTitle.textContent = exam.subject;
     examQuestions.innerHTML = '';
     
-    // Render questions
-    exam.questions.forEach((q, index) => {
-        const questionCard = document.createElement('div');
+    // Render first question
+    renderQuestion(0);
+const questionCard = document.createElement('div');
         questionCard.className = 'question-card bg-white rounded-xl shadow-sm p-4';
         
         if (q.type === 'multiple') {
@@ -245,12 +245,62 @@ function startExam(examId) {
                     class="w-full px-4 py-2 border border-gray-300 rounded-lg">
             `;
         }
-        
-        examQuestions.appendChild(questionCard);
+    // Add event listeners for navigation
+    document.getElementById('prev-question').addEventListener('click', () => {
+        if (state.currentQuestionIndex > 0) {
+            state.currentQuestionIndex--;
+            renderQuestion(state.currentQuestionIndex);
+        }
+    });
+    
+    document.getElementById('next-question').addEventListener('click', () => {
+        if (state.currentQuestionIndex < state.currentExam.questions.length - 1) {
+            state.currentQuestionIndex++;
+            renderQuestion(state.currentQuestionIndex);
+        } else {
+            submitExam();
+        }
     });
+// Render a single question
+function renderQuestion(index) {
+    const question = state.currentExam.questions[index];
+    examQuestions.innerHTML = '';
     
+    const questionCard = document.createElement('div');
+    questionCard.className = 'question-card';
+    
+    if (question.type === 'multiple') {
+        questionCard.innerHTML = `
+            <h4 class="font-medium mb-3">${index + 1}. ${question.text}</h4>
+            <div class="space-y-2">
+                ${question.options.map((opt, i) => `
+                    <label class="flex items-center space-x-3 cursor-pointer">
+                        <input type="radio" name="q${question.id}" value="${i}" class="w-4 h-4 text-indigo-600">
+                        <span>${opt}</span>
+                    </label>
+                `).join('')}
+            </div>
+        `;
+    } else {
+        questionCard.innerHTML = `
+            <h4 class="font-medium mb-3">${index + 1}. ${question.text}</h4>
+            <input type="text" name="q${question.id}" 
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg">
+        `;
+    }
+    
+    examQuestions.appendChild(questionCard);
+    
+    // Update navigation buttons
+    const prevBtn = document.getElementById('prev-question');
+    const nextBtn = document.getElementById('next-question');
+    
+    prevBtn.classList.toggle('hidden', index === 0);
+    nextBtn.textContent = index === state.currentExam.questions.length - 1 ? 'Submit Exam' : 'Next Question';
+}
+
     // Start timer
-    const durationInSeconds = exam.duration * 60;
+const durationInSeconds = exam.duration * 60;
     let remainingTime = durationInSeconds;
     
     updateTimerDisplay(remainingTime);

index.html

@@ -121,11 +121,16 @@
                             <div id="exam-progress" class="absolute top-0 left-0 h-full bg-indigo-600 rounded-full" style="width: 100%"></div>
                         </div>
                     </div>
+                    <div id="exam-questions" class="border-4 border-red-600 rounded-lg p-4 relative min-h-[300px]"></div>
 
-                    <div id="exam-questions" class="space-y-6"></div>
-
-                    <div class="fixed bottom-4 left-0 right-0 px-4">
-                        <button id="submit-exam" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg shadow-md hover:bg-indigo-700">
+                    <div class="fixed bottom-4 left-0 right-0 px-4 flex justify-between">
+                        <button id="prev-question" class="bg-gray-200 text-gray-800 py-3 px-6 rounded-lg shadow-md hover:bg-gray-300 hidden">
+                            Previous
+                        </button>
+                        <button id="next-question" class="bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md hover:bg-indigo-700">
+                            Next Question
+                        </button>
+<button id="submit-exam" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg shadow-md hover:bg-indigo-700">
                             Submit Exam
                         </button>
                     </div>