vault backup: 2025-12-22 13:19:11

quiz/templates/quiz_mode.html

@@ -52,6 +52,8 @@
         cursor: pointer;
         transition: all 0.2s;
         background: white;
+        display: flex;
+        align-items: center;
     }
 
     .option-item:hover {
@@ -70,78 +72,7 @@
         text-align: center;
         line-height: 2rem;
         font-weight: 700;
-        margin-right: 1rem;
-    }
-
-    .difficulty-section {
-        margin-top: 2rem;
-        padding-top: 2rem;
-        border-top: 2px solid var(--border);
-    }
-
-    .difficulty-label {
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: var(--text-muted);
-        margin-bottom: 1rem;
-        text-align: center;
-    }
-
-    .difficulty-buttons {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 0.75rem;
-    }
-
-    .difficulty-btn {
-        padding: 0.75rem;
-        border-radius: 0.5rem;
-        border: 2px solid var(--border);
-        background: white;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s;
-        text-align: center;
-    }
-
-    .difficulty-btn.again {
-        border-color: #ef4444;
-        color: #ef4444;
-    }
-
-    .difficulty-btn.again:hover {
-        background: #ef4444;
-        color: white;
-    }
-
-    .difficulty-btn.hard {
-        border-color: #f59e0b;
-        color: #f59e0b;
-    }
-
-    .difficulty-btn.hard:hover {
-        background: #f59e0b;
-        color: white;
-    }
-
-    .difficulty-btn.good {
-        border-color: #10b981;
-        color: #10b981;
-    }
-
-    .difficulty-btn.good:hover {
-        background: #10b981;
-        color: white;
-    }
-
-    .difficulty-btn.easy {
-        border-color: #6366f1;
-        color: #6366f1;
-    }
-
-    .difficulty-btn.easy:hover {
-        background: #6366f1;
-        color: white;
+        margin-left: 0.5rem;
     }
 
     .nav-buttons {
@@ -169,25 +100,6 @@
         background: #cbd5e1;
         cursor: not-allowed;
     }
-
-    .answer-feedback {
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 1rem;
-        font-weight: 600;
-    }
-
-    .answer-feedback.correct {
-        background: #d1fae5;
-        color: #065f46;
-        border: 2px solid #10b981;
-    }
-
-    .answer-feedback.incorrect {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 2px solid #ef4444;
-    }
 </style>
 
 <div class="quiz-mode-container">
@@ -202,9 +114,82 @@
 </div>
 
 <script>
-    // Load first question on page load
+    const SESSION_ID = parseInt("{{ session.id }}");
+
+    function saveAnswer(questionId, selectedLetters) {
+        const key = 'quiz_' + SESSION_ID + '_answers';
+        const answers = JSON.parse(localStorage.getItem(key) || '{}');
+        answers[questionId] = selectedLetters;
+        localStorage.setItem(key, JSON.stringify(answers));
+    }
+
+    function loadAnswer(questionId) {
+        const key = 'quiz_' + SESSION_ID + '_answers';
+        const answers = JSON.parse(localStorage.getItem(key) || '{}');
+        return answers[questionId] || [];
+    }
+
+    function toggleOption(letter) {
+        const checkbox = document.getElementById('checkbox-' + letter);
+        const optionDiv = document.getElementById('option-' + letter);
+
+        if (!checkbox || !optionDiv) return;
+
+        checkbox.checked = !checkbox.checked;
+
+        if (checkbox.checked) {
+            optionDiv.style.borderColor = 'var(--primary)';
+            optionDiv.style.background = '#f0f4ff';
+        } else {
+            optionDiv.style.borderColor = 'var(--border)';
+            optionDiv.style.background = 'white';
+        }
+
+        const questionId = document.getElementById('current-question-id').value;
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+        const selectedLetters = Array.from(checkboxes).map(cb => cb.value).sort();
+        saveAnswer(questionId, selectedLetters);
+    }
+
+    function restoreAnswers() {
+        const questionId = document.getElementById('current-question-id')?.value;
+        if (!questionId) return;
+
+        const saved = loadAnswer(questionId);
+        saved.forEach(letter => {
+            const checkbox = document.getElementById('checkbox-' + letter);
+            const optionDiv = document.getElementById('option-' + letter);
+            if (checkbox && optionDiv) {
+                checkbox.checked = true;
+                optionDiv.style.borderColor = 'var(--primary)';
+                optionDiv.style.background = '#f0f4ff';
+            }
+        });
+    }
+
+    function navigateQuestion(direction, sessionId) {
+        const currentQInput = document.getElementById('current-question-id');
+        const currentQ = currentQInput ? currentQInput.value : null;
+        const url = currentQ
+            ? '/quiz/' + sessionId + '/' + direction + '/?q=' + currentQ
+            : '/quiz/' + sessionId + '/' + direction + '/';
+
+        htmx.ajax('GET', url, {
+            target: '#quiz-content'
+        });
+    }
+
+    const observer = new MutationObserver(() => {
+        restoreAnswers();
+    });
+    observer.observe(document.getElementById('quiz-content'), {
+        childList: true,
+        subtree: true
+    });
+
     document.addEventListener('DOMContentLoaded', function () {
         htmx.ajax('GET', '{% url 'quiz_question' session.id %}', { target: '#quiz-content' });
+        setTimeout(restoreAnswers, 100);
     });
 </script>
 {% endblock %}