vault backup: 2025-12-26 02:09:22

stroma/templates/partials/quiz_question.html

@@ -0,0 +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 %}
+    <div class="option-item" id="option-{{ option.letter }}" data-letter="{{ option.letter }}" style="cursor: pointer;">
+        <input type="checkbox" id="checkbox-{{ option.letter }}" value="{{ option.letter }}"
+            data-letter="{{ option.letter }}"
+            style="margin-right: 0.5rem; width: 1.2rem; height: 1.2rem; cursor: pointer; pointer-events: auto;">
+        <span class="option-letter" style="pointer-events: none;">{{ option.letter }}</span>
+        <span style="pointer-events: none;">{{ option.text }}</span>
+    </div>
+    {% endfor %}
+</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;
+                if (letter) updateSelection(letter);
+            }
+        });
+    })();
+</script>
+{% endif %}