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: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .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;
    }

    .question-navigator {
        background: white;
        border-radius: 1.5rem 1.5rem 0 0;
        padding: 1.5rem;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .navigator-content {
        display: flex;
        align-items: center;
        gap: 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .navigator-label {
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .question-pills {
        display: flex;
        gap: 0.5rem;
        flex: 1;
        overflow-x: auto;
        padding: 0.25rem 0.5rem;
        scroll-behavior: smooth;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        position: relative;
        max-width: calc(100vw - 400px); /* Leave space for label and buttons */
    }

    .question-pills::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Fade effect at edges */
    .question-pills::before,
    .question-pills::after {
        content: '⋯';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--text-muted);
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .question-pills::before {
        left: 0;
        background: linear-gradient(to right, white 20%, transparent);
        padding-right: 1rem;
    }

    .question-pills::after {
        right: 0;
        background: linear-gradient(to left, white 20%, transparent);
        padding-left: 1rem;
    }

    .question-pills.show-left-ellipsis::before {
        opacity: 1;
    }

    .question-pills.show-right-ellipsis::after {
        opacity: 1;
    }

    .question-pill {
        min-width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        border: 2px solid var(--border);
        background: white;
        color: var(--text-main);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.875rem;
        flex-shrink: 0; /* Prevent pills from shrinking */
        white-space: nowrap;
    }

    .question-pill:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .question-pill.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .question-pill.answered {
        background: #f0f4ff;
        border-color: var(--primary);
        color: var(--primary);
    }

    .question-pill.answered.active {
        background: var(--primary);
        color: white;
    }

    .navigator-buttons {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
    }
</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 class="question-navigator">
        <div class="navigator-content">
            <span class="navigator-label">Frågor:</span>
            <div class="question-pills" id="question-pills">
                <!-- Pills will be generated by JavaScript -->
            </div>
            <div class="navigator-buttons">
                <button class="nav-btn" id="prev-btn" data-direction="previous" data-session="{{ session.id }}">
                    ← Föreg
                </button>
                <button class="nav-btn" id="next-btn" data-direction="next" data-session="{{ session.id }}">
                    Nästa →
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    const SESSION_ID = parseInt("{{ session.id }}");
    const TOTAL_QUESTIONS = {{ total_questions|default:0 }};
    let questionIdToNumber = {}; // Maps question ID to its position number
    let questionNumberToId = {}; // Maps position number to question 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));
        updateQuestionPills();
    }

    function loadAnswer(questionId) {
        const key = 'quiz_' + SESSION_ID + '_answers';
        const answers = JSON.parse(localStorage.getItem(key) || '{}');
        return answers[questionId] || [];
    }

    function getAllAnswers() {
        const key = 'quiz_' + SESSION_ID + '_answers';
        return JSON.parse(localStorage.getItem(key) || '{}');
    }

    function updateQuestionMapping() {
        // Update mapping when current question loads
        const currentQuestionId = document.getElementById('current-question-id')?.value;
        if (!currentQuestionId) return;

        // If we don't have this question ID mapped yet, we need to map it
        // For now, we'll rely on the backend to give us all questions
        // This is a simplified approach - ideally backend would provide full question list
    }

    function generateQuestionPills() {
        const pillsContainer = document.getElementById('question-pills');
        if (!pillsContainer) return;

        pillsContainer.innerHTML = '';

        for (let i = 1; i <= TOTAL_QUESTIONS; i++) {
            const pill = document.createElement('div');
            pill.className = 'question-pill';
            pill.textContent = i;
            pill.dataset.questionNumber = i;

            pill.addEventListener('click', () => {
                // Navigate using the same previous/next system
                // Calculate direction and number of steps needed
                const currentNumber = getCurrentQuestionNumber();
                if (i > currentNumber) {
                    // Click next multiple times
                    navigateToQuestionNumber(i);
                } else if (i < currentNumber) {
                    navigateToQuestionNumber(i);
                }
            });

            pillsContainer.appendChild(pill);
        }

        // Add scroll listener to show/hide ellipses
        pillsContainer.addEventListener('scroll', updateEllipsesVisibility);

        updateQuestionPills();
        updateEllipsesVisibility();
    }

    function updateEllipsesVisibility() {
        const container = document.getElementById('question-pills');
        if (!container) return;

        const scrollLeft = container.scrollLeft;
        const maxScroll = container.scrollWidth - container.clientWidth;

        // Show left ellipsis if scrolled right
        if (scrollLeft > 10) {
            container.classList.add('show-left-ellipsis');
        } else {
            container.classList.remove('show-left-ellipsis');
        }

        // Show right ellipsis if not scrolled to end
        if (scrollLeft < maxScroll - 10) {
            container.classList.add('show-right-ellipsis');
        } else {
            container.classList.remove('show-right-ellipsis');
        }
    }

    function scrollToActivePill() {
        const activePill = document.querySelector('.question-pill.active');
        if (!activePill) return;

        const container = document.getElementById('question-pills');
        if (!container) return;

        // Calculate position to center the active pill
        const pillLeft = activePill.offsetLeft;
        const pillWidth = activePill.offsetWidth;
        const containerWidth = container.clientWidth;

        const scrollPosition = pillLeft - (containerWidth / 2) + (pillWidth / 2);

        container.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });

        // Update ellipses after scroll
        setTimeout(updateEllipsesVisibility, 300);
    }

    function navigateToQuestionNumber(targetNumber) {
        const currentNumber = getCurrentQuestionNumber();
        const diff = targetNumber - currentNumber;

        if (diff === 0) return;

        const direction = diff > 0 ? 'next' : 'previous';
        const steps = Math.abs(diff);

        // Navigate step by step
        let currentStep = 0;
        function doStep() {
            if (currentStep >= steps) {
                return;
            }
            navigateQuestion(direction, SESSION_ID);
            currentStep++;
            setTimeout(doStep, 100); // Small delay between navigations
        }
        doStep();
    }

    function updateQuestionPills() {
        const currentQuestionId = document.getElementById('current-question-id')?.value;
        const currentQuestionNumber = getCurrentQuestionNumber();
        const answers = getAllAnswers();

        const pills = document.querySelectorAll('.question-pill');
        pills.forEach((pill, index) => {
            const questionNum = index + 1;
            pill.classList.remove('active', 'answered');

            // Mark current question as active
            if (questionNum === currentQuestionNumber) {
                pill.classList.add('active');
            }

            // Mark answered questions (check if any question ID in answers)
            // Since we're tracking by question ID, check if this position has been answered
            if (currentQuestionId && answers[currentQuestionId] && answers[currentQuestionId].length > 0) {
                if (questionNum === currentQuestionNumber) {
                    pill.classList.add('answered');
                }
            }
        });

        updateNavigationButtons(currentQuestionNumber);
        scrollToActivePill();
    }

    function updateNavigationButtons(currentQuestionNumber) {
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');

        if (prevBtn) {
            prevBtn.disabled = currentQuestionNumber <= 1;
        }

        if (nextBtn) {
            nextBtn.disabled = currentQuestionNumber >= TOTAL_QUESTIONS;
        }
    }

    function getCurrentQuestionNumber() {
        const numberInput = document.getElementById('current-question-number');
        if (numberInput && numberInput.value) {
            return parseInt(numberInput.value);
        }
        return 1;
    }

    function navigateToQuestion(questionNumber) {
        const url = '/quiz/' + SESSION_ID + '/question/' + questionNumber + '/';
        htmx.ajax('GET', url, {
            target: '#quiz-content',
            swap: 'innerHTML'
        });
    }

    function toggleOption(letter) {
        const checkbox = document.getElementById('checkbox-' + letter);
        if (!checkbox) return;

        checkbox.checked = !checkbox.checked;
        updateSelection(letter);
    }

    function updateSelection(letter) {
        const checkbox = document.getElementById('checkbox-' + letter);
        const optionDiv = document.getElementById('option-' + letter);

        if (!checkbox || !optionDiv) return;


        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';
            }
        });
    }

    // Event delegation for option items and checkboxes
    function setupEventListeners() {
        const quizContent = document.getElementById('quiz-content');

        // Handle clicks on option divs
        quizContent.addEventListener('click', (e) => {
            const optionItem = e.target.closest('.option-item');
            if (!optionItem) return;

            // Don't toggle if the click was directly on the checkbox
            if (e.target.type === 'checkbox') return;

            const letter = optionItem.dataset.letter;
            if (letter) toggleOption(letter);
        });

        // Handle checkbox changes
        quizContent.addEventListener('change', (e) => {
            if (e.target.type === 'checkbox' && e.target.dataset.letter) {
                updateSelection(e.target.dataset.letter);
            }
        });

        // Handle navigation buttons
        quizContent.addEventListener('click', (e) => {
            const navBtn = e.target.closest('.nav-btn');
            if (!navBtn || navBtn.disabled) return;

            const direction = navBtn.dataset.direction;
            const sessionId = navBtn.dataset.session;
            if (direction && sessionId) {
                navigateQuestion(direction, sessionId);
            }
        });
    }

    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();
        updateQuestionPills();
    });
    observer.observe(document.getElementById('quiz-content'), {
        childList: true,
        subtree: true
    });

    document.addEventListener('DOMContentLoaded', () => {
        generateQuestionPills();
        setupEventListeners();

        // Add event listeners for the navigator buttons
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');

        if (prevBtn) {
            prevBtn.addEventListener('click', (e) => {
                if (!e.currentTarget.disabled) {
                    navigateQuestion('previous', SESSION_ID);
                }
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', (e) => {
                if (!e.currentTarget.disabled) {
                    navigateQuestion('next', SESSION_ID);
                }
            });
        }

        htmx.ajax('GET', '{% url 'quiz_question' session.id %}', { target: '#quiz-content' });
        setTimeout(() => {
            restoreAnswers();
            updateQuestionPills();
        }, 100);
    });
</script>
{% endblock %}