vault backup: 2025-12-22 12:22:20

quiz/templates/partials/quiz_question.html

@@ -0,0 +1,106 @@
+{% if show_answer %}
+<div class="answer-feedback {{ 'correct' if is_correct else 'incorrect' }}">
+    {% if is_correct %}
+    ✓ Rätt svar!
+    {% else %}
+    ✗ Fel svar. Rätt svar är: {{ question.correct_answer }}
+    {% endif %}
+</div>
+{% endif %}
+
+<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 }}"
+        onclick="selectOption('{{ option.letter }}', {{ question.id }}, {{ session.id }})">
+        <span class="option-letter">{{ option.letter }}</span>
+        <span>{{ option.text }}</span>
+    </div>
+    {% endfor %}
+</div>
+
+{% if show_answer %}
+<div class="difficulty-section">
+    <div class="difficulty-label">Hur svårt var detta?</div>
+    <div class="difficulty-buttons">
+        <button class="difficulty-btn again" onclick="submitDifficulty('again', {{ question.id }}, {{ session.id }})">
+            <div>Igen</div>
+            <small style="font-size: 0.75rem; font-weight: 400;">&lt;1m</small>
+        </button>
+        <button class="difficulty-btn hard" onclick="submitDifficulty('hard', {{ question.id }}, {{ session.id }})">
+            <div>Svårt</div>
+            <small style="font-size: 0.75rem; font-weight: 400;">&lt;6m</small>
+        </button>
+        <button class="difficulty-btn good" onclick="submitDifficulty('good', {{ question.id }}, {{ session.id }})">
+            <div>Bra</div>
+            <small style="font-size: 0.75rem; font-weight: 400;">&lt;10m</small>
+        </button>
+        <button class="difficulty-btn easy" onclick="submitDifficulty('easy', {{ question.id }}, {{ session.id }})">
+            <div>Lätt</div>
+            <small style="font-size: 0.75rem; font-weight: 400;">4d</small>
+        </button>
+    </div>
+</div>
+{% endif %}
+
+<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>
+    let selectedAnswer = null;
+
+    function selectOption(letter, questionId, sessionId) {
+        if ({{ 'true' if show_answer else 'false' }
+    }) return; // Don't allow changing answer after submission
+
+    selectedAnswer = letter;
+
+    // Visual feedback
+    document.querySelectorAll('.option-item').forEach(opt => {
+        opt.style.borderColor = 'var(--border)';
+        opt.style.background = 'white';
+    });
+
+    const selected = document.getElementById('option-' + letter);
+    selected.style.borderColor = 'var(--primary)';
+    selected.style.background = '#f0f4ff';
+
+    // Submit answer
+    htmx.ajax('POST', `/submit/${sessionId}/`, {
+        target: '#quiz-content',
+        values: {
+            question_id: questionId,
+            answer: letter
+        }
+    });
+}
+
+    function submitDifficulty(difficulty, questionId, sessionId) {
+        htmx.ajax('POST', `/difficulty/${sessionId}/`, {
+            values: {
+                question_id: questionId,
+                difficulty: difficulty
+            }
+        });
+
+        // Move to next question after a brief delay
+        setTimeout(() => {
+            navigateQuestion('next', sessionId);
+        }, 300);
+    }
+
+    function navigateQuestion(direction, sessionId) {
+        htmx.ajax('GET', `/quiz/${sessionId}/${direction}/`, {
+            target: '#quiz-content'
+        });
+    }
+</script>