Application changes

app/static/script.js

@@ -34,45 +34,43 @@ function displayQuestion() {
     const optionsDiv = document.getElementById('options');
     optionsDiv.innerHTML = '';
 
+    const form = document.createElement('form');
+    form.id = 'question-options';
+
     question.options.forEach((option, i) => {
-        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) {
+        const input = document.createElement('input');
+        input.type = isMultipleChoice ? 'checkbox' : 'radio';
+        input.name = 'answer';
+        input.value = i;
+        input.checked = userAnswers[currentIndex].includes(i);
+
+        input.addEventListener('change', () => {
+            if (isMultipleChoice) {
+                // Add or remove the answer for multiple choice
+                if (input.checked) {
                     userAnswers[currentIndex].push(i);
                 } else {
                     userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
                 }
-            });
-
-            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', () => {
+            } else {
+                // Set only one answer for single choice
                 userAnswers[currentIndex] = [i];
-                displayQuestion();
-            });
+            }
+        });
+
+        const label = document.createElement('label');
+        label.appendChild(input);
+        label.appendChild(document.createTextNode(option));
+        label.style.display = 'block';
+        label.style.marginBottom = '10px';
 
-            optionsDiv.appendChild(button);
-        }
+        form.appendChild(label);
     });
+
+    optionsDiv.appendChild(form);
 }
 
+
 function selectAnswer(optionIndex) {
     const currentAnswers = userAnswers[currentIndex];
     if (currentAnswers.includes(optionIndex)) {

app/static/style.css

@@ -17,7 +17,12 @@ body {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-button.selected {
-    background-color: #4caf50;
-    color: white;
+input[type="radio"], input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+label {
+    font-size: 16px;
+    cursor: pointer;
 }