Real-Time-Quiz-Application

Sleeping

Fausto Busuito commited on 27 days ago

Commit

97bf624

•

1 Parent(s): de7c6d8

Application changes

Files changed (1) hide show

templates/quiz.html CHANGED Viewed

@@ -5,17 +5,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quiz</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
-<body>
-    <div style="text-align: right;">
-        <span>Time Elapsed: {{ elapsed_time }}</span>
-    </div>
-    <h1>Question {{ question_number }} of {{ total_questions }} - {{ selected_file }}</h1>
     <p>{{ question.question }}</p>
     <form action="{{ url_for('quiz') }}" method="post">
         {% for option in question.options %}
-            <input type="checkbox" id="{{ loop.index }}" name="answer" value="{{ loop.index }}" {% if not multiple_selection %}required{% endif %}>
-            <label for="{{ loop.index }}">{{ option }}</label><br>
         {% endfor %}
         <br>
         {% if show_previous %}

     <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">
         {% for option in question.options %}
+            <label style="display: flex; align-items: center;">
+                <input type="checkbox" name="answer" value="{{ loop.index }}" {% if not multiple_selection %}required{% endif %}>
+                <span>{{ option }}</span>
+            </label><br>
         {% endfor %}
         <br>
         {% if show_previous %}