medical-notes/quiz/templates/quiz_mode.html

{% extends "base.html" %}

{% block content %}
<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .quiz-mode-container {
        max-width: 900px;
        margin: 2rem auto;
        padding: 0 1rem;
    }

    .quiz-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        color: white;
    }

    .quiz-card {
        background: white;
        border-radius: 1.5rem;
        padding: 3rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        min-height: 400px;
        display: flex;
        flex-direction: column;
    }

    .question-text {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 2rem;
        line-height: 1.6;
        color: var(--text-main);
    }

    .options-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex-grow: 1;
    }

    .option-item {
        padding: 1.25rem;
        border: 2px solid var(--border);
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
        background: white;
        display: flex;
        align-items: center;
    }

    .option-item:hover {
        border-color: var(--primary);
        background: #f8f9fb;
        transform: translateX(4px);
    }

    .option-letter {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 2rem;
        font-weight: 700;
        margin-left: 0.5rem;
    }

    .nav-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
    }

    .nav-btn {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        border: none;
        background: var(--primary);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .nav-btn:hover {
        background: var(--primary-hover);
    }

    .nav-btn:disabled {
        background: #cbd5e1;
        cursor: not-allowed;
    }
</style>

<div class="quiz-mode-container">
    <div class="quiz-header">
        <h1 style="margin: 0;">{{ session.course.name|default:"Quiz" }}</h1>
        <a href="{% url 'index' %}" class="btn btn-secondary">← Tillbaka till Dashboard</a>
    </div>

    <div class="quiz-card" id="quiz-content">
        <!-- Content loaded via HTMX -->
    </div>
</div>

<script>
    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 %}