Johan Dahlin
68079d368d
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m8s
48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
{% 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 %} |