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

stroma/templates/partials/question.html

@@ -0,0 +1,24 @@
+<div class="quiz-content">
+    <h3 style="margin-bottom: 1.5rem;">{{ question.text }}</h3>
+    <form hx-post="{% url 'quiz:submit_answer' session.id %}" hx-target="#quiz-container-{{ session.id }}">
+        {% csrf_token %}
+        <input type="hidden" name="question_id" value="{{ question.id }}">
+        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            {% for option in question.options.all %}
+            <div class="option"
+                style="padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s;"
+                onmouseover="this.style.backgroundColor='#f1f5f9'" onmouseout="this.style.backgroundColor='transparent'"
+                onclick="this.querySelector('input').checked = true; this.closest('form').requestSubmit();">
+                <input type="radio" name="answer" value="{{ option.letter }}"
+                    id="opt_{{ session.id }}_{{ question.id }}_{{ option.letter }}" style="display:none;">
+                <label style="cursor: pointer; font-weight: 500; color: var(--text-main);"
+                    for="opt_{{ session.id }}_{{ question.id }}_{{ option.letter }}">
+                    <span style="display: inline-block; width: 1.5rem; color: var(--primary); font-weight: 700;">{{
+                        option.letter }}</span>
+                    {{ option.text }}
+                </label>
+            </div>
+            {% endfor %}
+        </div>
+    </form>
+</div>