Application changes

app/static/script.js

@@ -29,15 +29,42 @@ function startQuiz() {
 function displayQuestion() {
     const question = questions[currentIndex];
     document.getElementById('question').innerText = question.question;
+
+    const isMultipleChoice = /Select TWO|Choose two/i.test(question.question);
     const optionsDiv = document.getElementById('options');
     optionsDiv.innerHTML = '';
+
+    const ul = document.createElement('ul');
+    ul.style.listStyleType = 'disc';
+
     question.options.forEach((option, i) => {
-        const btn = document.createElement('button');
-        btn.innerText = option;
-        btn.className = userAnswers[currentIndex].includes(i) ? 'selected' : '';
-        btn.addEventListener('click', () => selectAnswer(i));
-        optionsDiv.appendChild(btn);
+        const li = document.createElement('li');
+        li.style.cursor = 'pointer';
+        li.style.marginBottom = '10px';
+        li.className = userAnswers[currentIndex].includes(i) ? 'selected' : '';
+
+        li.innerText = option;
+
+        li.addEventListener('click', () => {
+            if (isMultipleChoice) {
+                // Allow multiple selections
+                const currentAnswers = userAnswers[currentIndex];
+                if (currentAnswers.includes(i)) {
+                    userAnswers[currentIndex] = currentAnswers.filter(j => j !== i);
+                } else {
+                    userAnswers[currentIndex].push(i);
+                }
+            } else {
+                // Allow only one selection
+                userAnswers[currentIndex] = [i];
+            }
+            displayQuestion();
+        });
+
+        ul.appendChild(li);
     });
+
+    optionsDiv.appendChild(ul);
 }
 
 function selectAnswer(optionIndex) {
@@ -74,5 +101,8 @@ document.getElementById('end-session').addEventListener('click', async () => {
 
 function updateTimer() {
     const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
-    document.getElementById('timer').innerText = `Time: ${elapsedTime}s`;
-}
+    const hours = String(Math.floor(elapsedTime / 3600)).padStart(2, '0');
+    const minutes = String(Math.floor((elapsedTime % 3600) / 60)).padStart(2, '0');
+    const seconds = String(elapsedTime % 60).padStart(2, '0');
+    document.getElementById('timer').innerText = `Time: ${hours}:${minutes}:${seconds}`;
+}

app/templates/index.html

@@ -22,7 +22,7 @@
         <div id="quiz-container" style="display: none;">
             <div id="question-container">
                 <p id="timer">Time: 0s</p>
-                <h2 id="question"></h2>
+                <h2 id="question" style="font-weight: normal;"></h2>
                 <div id="options"></div>
                 <div id="navigation">
                     <button id="prev">Previous</button>