Real-Time-Quiz-Application

Sleeping

App Files Files Community

Fausto Busuito commited on Nov 29, 2024

Commit

d795bcc

1 Parent(s): d0264d6

Application changes

Browse files

Files changed (1) hide show

templates/quiz.html +38 -14

templates/quiz.html CHANGED Viewed

@@ -2,23 +2,47 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Quiz</title>
 </head>
-<body>
-    <h1>Quiz</h1>
-    <form method="post">
-        <p>{{ question.question }}</p>
-        {% for i, option in enumerate(question.options) %}
-            <label>
-                <input type="checkbox" name="answer" value="{{ i }}" {% if i in previous_answers %}checked{% endif %}>
-                {{ option }}
-            </label><br>
-        {% endfor %}
-        <button type="submit" name="action" value="previous" {% if not show_previous %}disabled{% endif %}>Previous</button>
         <button type="submit" name="action" value="next">Next</button>
-        <button type="submit" name="action" value="end">End Quiz</button>
     </form>
-    <p>Question {{ question_number }} of {{ total_questions }}</p>
-    <p>Elapsed Time: {{ elapsed_time }}</p>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quiz</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <script>
+        function updateTimer() {
+            const startTime = {{ session['start_time'] }} * 1000;
+            const now = new Date().getTime();
+            const elapsedTime = new Date(now - startTime);
+            const hours = elapsedTime.getUTCHours().toString().padStart(2, '0');
+            const minutes = elapsedTime.getUTCMinutes().toString().padStart(2, '0');
+            const seconds = elapsedTime.getUTCSeconds().toString().padStart(2, '0');
+            document.getElementById('timer').innerText = `${hours}:${minutes}:${seconds}`;
+        }
+        setInterval(updateTimer, 1000);
+    </script>
 </head>
+<body onload="updateTimer()">
+    <h1>Question {{ question_number }} of {{ total_questions }} - {{ selected_file }} <span id="timer"></span></h1>
+    <p>{{ question.question }}</p>
+    <form action="{{ url_for('quiz') }}" method="post">
+        {% if multiple_selection %}
+            {% for option in question.options %}
+                <label style="display: flex; align-items: center;">
+                    <input type="checkbox" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}>
+                    <span>{{ option }}</span>
+                </label><br>
+            {% endfor %}
+        {% else %}
+            {% for option in question.options %}
+                <label style="display: flex; align-items: center;">
+                    <input type="radio" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}>
+                    <span>{{ option }}</span>
+                </label><br>
+            {% endfor %}
+        {% endif %}
+        <br>
+        {% if show_previous %}
+            <button type="submit" name="action" value="previous">Previous</button>
+        {% endif %}
         <button type="submit" name="action" value="next">Next</button>
+        <button type="submit" name="action" value="end">End Session</button>
     </form>
 </body>
 </html>