Update templates/tempor.html

templates/tempor.html

@@ -6,6 +6,11 @@
     <title>Interactive Python Chatbot</title>
     <link rel="stylesheet" type="text/css" href="/static/tempor.css">
     <script>
+        let timer; // Timer variable
+        let timeRemaining = 30; // Default time for each question
+        let isTimeUp = false; // Flag to track if the timer expired
+        const timerElement = document.createElement("div"); // Timer element
+
         async function sendMessage(event) {
             event.preventDefault();
             const userInput = document.getElementById("user_input").value.trim();
@@ -35,6 +40,10 @@
         async function startQuiz() {
             const difficulty = document.getElementById("difficulty").value;
 
+            // Reset score to 0 when starting a new quiz
+            document.getElementById("score-box").innerHTML = `Score: 0`;
+            isTimeUp = false; // Reset timeUp flag
+
             try {
                 const response = await fetch("/start_quiz", {
                     method: "POST",
@@ -45,11 +54,9 @@
                 const data = await response.json();
                 const quizBox = document.getElementById("quiz-box");
 
-
-                quizBox.innerHTML = `<p class="quiz-feedback">${data.reply}</p>`;
-
-
                 if (data.question && data.options) {
+                    timeRemaining = 30; // Reset timer for the first question
+
                     quizBox.innerHTML = `
                         <p class="quiz-question"><strong>Question:</strong> ${data.question}</p>
                         <form id="quiz-form">
@@ -59,13 +66,13 @@
                                     <label for="option${index}">${option}</label>
                                 </div>
                             `).join('')}
-
                         </form>
-
                         <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
                     `;
+                    startTimer(); // Start the timer after rendering the first question
                 } else {
                     quizBox.innerHTML = `<p class="quiz-end">Quiz finished! Great job!</p>`;
+                    clearTimer();
                 }
             } catch (error) {
                 alert("Error: Unable to start the quiz.");
@@ -73,6 +80,7 @@
         }
 
         async function submitAnswer() {
+            clearTimer(); // Clear the timer when submitting an answer
             const form = document.getElementById("quiz-form");
             const answer = form.querySelector('input[name="answer"]:checked')?.value;
 
@@ -85,19 +93,19 @@
                 const response = await fetch("/submit_answer", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ answer, user_id: "default" }),
+                    body: JSON.stringify({ answer, user_id: "default", timeUp: isTimeUp }),
                 });
 
                 const data = await response.json();
                 const quizBox = document.getElementById("quiz-box");
                 const scoreBox = document.getElementById("score-box");
 
-                // Display feedback for the answer
                 quizBox.innerHTML = `<p class="quiz-feedback">${data.reply}</p>`;
                 scoreBox.innerHTML = `Score: ${data.score}`;
 
-                // Check if there's a next question
                 if (data.next_question && data.options) {
+                    timeRemaining = 30; // Reset the timer for the next question
+                    isTimeUp = false; // Reset the flag for the next question
                     quizBox.innerHTML += `
                         <p class="quiz-question"><strong>Next Question:</strong> ${data.next_question}</p>
                         <form id="quiz-form">
@@ -110,6 +118,7 @@
                             <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
                         </form>
                     `;
+                    startTimer(); // Start the timer for the next question
                 } else {
                     quizBox.innerHTML += `<p class="quiz-end">Quiz Completed! Great job!</p>`;
                 }
@@ -118,6 +127,33 @@
             }
         }
 
+        function startTimer() {
+            clearTimer(); // Clear any existing timer
+            const quizBox = document.getElementById("quiz-box");
+            timerElement.textContent = `Time remaining: ${timeRemaining}s`;
+            timerElement.className = "timer-display";
+            quizBox.appendChild(timerElement);
+
+            timer = setInterval(() => {
+                timeRemaining--;
+                timerElement.textContent = `Time remaining: ${timeRemaining}s`;
+
+                if (timeRemaining <= 0) {
+                    clearTimer();
+                    isTimeUp = true; // Mark the timer as expired
+                    alert("Time's up! Moving to the next question.");
+                    submitAnswer(); // Automatically submit an empty answer
+                }
+            }, 1000);
+        }
+
+        function clearTimer() {
+            clearInterval(timer);
+            if (timerElement.parentNode) {
+                timerElement.parentNode.removeChild(timerElement);
+            }
+        }
+
         async function clearHistory() {
             try {
                 const response = await fetch("/clear_history", { method: "POST" });
@@ -146,7 +182,6 @@
                     <button type="submit">Send</button>
                 </form>
                 <button class="clear-history-btn" onclick="clearHistory()">Clear History</button>
-
             </div>
 
             <!-- Quiz Section -->