Application changes

app/static/script.js

@@ -34,37 +34,43 @@ function displayQuestion() {
     const optionsDiv = document.getElementById('options');
     optionsDiv.innerHTML = '';
 
-    const ul = document.createElement('ul');
-    ul.style.listStyleType = 'disc';
-
     question.options.forEach((option, i) => {
-        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 {
+        if (isMultipleChoice) {
+            // Checkbox for multiple choice
+            const label = document.createElement('label');
+            label.style.display = 'block';
+            label.style.marginBottom = '10px';
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = userAnswers[currentIndex].includes(i);
+            checkbox.addEventListener('change', () => {
+                if (checkbox.checked) {
                     userAnswers[currentIndex].push(i);
+                } else {
+                    userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
                 }
-            } else {
-                // Allow only one selection
+            });
+
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(` ${option}`));
+            optionsDiv.appendChild(label);
+        } else {
+            // Pushbutton for single choice
+            const button = document.createElement('button');
+            button.innerText = option;
+            button.style.display = 'block';
+            button.style.marginBottom = '10px';
+            button.className = userAnswers[currentIndex][0] === i ? 'selected' : '';
+
+            button.addEventListener('click', () => {
                 userAnswers[currentIndex] = [i];
-            }
-            displayQuestion();
-        });
+                displayQuestion();
+            });
 
-        ul.appendChild(li);
+            optionsDiv.appendChild(button);
+        }
     });
-
-    optionsDiv.appendChild(ul);
 }
 
 function selectAnswer(optionIndex) {

app/static/style.css

@@ -16,3 +16,8 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
+
+button.selected {
+    background-color: #4caf50;
+    color: white;
+}