vault backup: 2025-12-22 16:06:48

quiz/templates/partials/quiz_question.html

@@ -1,27 +1,48 @@
+{% if question.question_type == 'matching' %}
+{% include 'partials/matching_question.html' %}
+{% else %}
+{# Regular MCQ/SCQ template #}
 {% csrf_token %}
 <input type="hidden" id="current-question-id" value="{{ question.id }}">
+<input type="hidden" id="current-question-number" value="{{ current_number }}">
 
 <div class="question-text">{{ question.text }}</div>
 
 <div class="options-container">
     {% for option in question.options.all %}
-    <label class="option-item" for="checkbox-{{ option.letter }}" id="option-{{ option.letter }}">
+    <div class="option-item" id="option-{{ option.letter }}" data-letter="{{ option.letter }}">
         <input type="checkbox" id="checkbox-{{ option.letter }}" value="{{ option.letter }}"
-            onchange="toggleOption('{{ option.letter }}')"
+            data-letter="{{ option.letter }}"
             style="margin-right: 0.5rem; width: 1.2rem; height: 1.2rem; cursor: pointer;">
         <span class="option-letter">{{ option.letter }}</span>
         <span>{{ option.text }}</span>
-    </label>
+    </div>
     {% endfor %}
 </div>
 
-<div class="nav-buttons">
-    <button class="nav-btn" {% if not has_previous %}disabled{% endif %}
-        onclick="navigateQuestion('previous', {{ session.id }})">
-        ← Föregående
-    </button>
-    <button class="nav-btn" {% if not has_next %}disabled{% endif %}
-        onclick="navigateQuestion('next', {{ session.id }})">
-        Nästa →
-    </button>
-</div>
+<script>
+    (function () {
+        const container = document.querySelector('.options-container');
+
+        // Handle option item clicks (clicking anywhere on the div except checkbox)
+        container?.addEventListener('click', (e) => {
+            // If click was directly on checkbox, let it handle itself
+            if (e.target.type === 'checkbox') return;
+
+            const optionItem = e.target.closest('.option-item');
+            if (!optionItem) return;
+
+            const letter = optionItem.dataset.letter;
+            if (letter) toggleOption(letter);
+        });
+
+        // Handle checkbox changes (direct checkbox clicks or programmatic changes)
+        container?.addEventListener('change', (e) => {
+            if (e.target.type === 'checkbox') {
+                const letter = e.target.dataset.letter;
+                if (letter) updateSelection(letter);
+            }
+        });
+    })();
+</script>
+{% endif %}