{{ block title }}Comprehension Check{{ endblock }}

{{ block content }}
<div class="exp-card">
    <p>Please answer the following questions to confirm you have understood the instructions.
    If an answer is incorrect, please review the instructions.</p>

    <!-- Collapsible instructions review panel -->
    <div style="margin:16px 0;">
        <button type="button" id="toggle-instructions" onclick="toggleInstructions()"
                style="background:none; border:1px solid #2a6e7c; color:#2a6e7c;
                       padding:8px 16px; border-radius:6px; cursor:pointer;
                       font-size:.95rem; display:flex; align-items:center; gap:8px;">
            <span id="toggle-arrow">▶</span> Review the instructions
        </button>
        <div id="instructions-panel" style="display:none; margin-top:12px;
             border:1px solid #ddd; border-radius:8px; padding:24px 28px; background:#f9f9f7;">
            {{ general_instructions_html|safe }}
        </div>
    </div>

    <!-- Top error banner — hidden by default, shown via JS if oTree flags an error -->
    <div id="error-banner" style="display:none; background:#fdf2f2; border:1px solid #e8b4b4;
         color:#c0392b; padding:12px 16px; border-radius:6px; margin:16px 0; font-size:.95rem;">
        ⚠ Not all questions are correct. Please have another careful look at the questions marked below.
    </div>

    <!-- Question 1 -->
    <div id="q1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>Which of the below statements about the Allocation Task is true?</strong></p>
        {% if gen_q1_wrong %}
            <p style="color:#c0392b; font-size:.9rem; margin-bottom:6px;">
                ⚠ That answer is incorrect. Please re-read the instructions carefully.
            </p>
        {% endif %}
        <div id="q1-options"></div>
        <div style="display:none">{{ formfield_errors 'gen_q1' }}</div>
    </div>

    <!-- Question 2 -->
    <div id="q2-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>Which of the below statements about the Lottery Task is true?</strong></p>
        {% if gen_q2_wrong %}
            <p style="color:#c0392b; font-size:.9rem; margin-bottom:6px;">
                ⚠ That answer is incorrect. Please re-read the instructions carefully.
            </p>
        {% endif %}
        <div id="q2-options"></div>
        <div style="display:none">{{ formfield_errors 'gen_q2' }}</div>
    </div>

    <!-- Question 3 -->
    <div id="q3-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>Who is the earlier group of people?</strong></p>
        {% if gen_q3_wrong %}
            <p style="color:#c0392b; font-size:.9rem; margin-bottom:6px;">
                ⚠ That answer is incorrect. Please re-read the instructions carefully.
            </p>
        {% endif %}
        <div id="q3-options"></div>
        <div style="display:none">{{ formfield_errors 'gen_q3' }}</div>
    </div>

    <!-- Question 4 -->
    <div id="q4-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>Which of the below statements about your payment is correct?</strong></p>
        {% if gen_q4_wrong %}
            <p style="color:#c0392b; font-size:.9rem; margin-bottom:6px;">
                ⚠ That answer is incorrect. Please re-read the instructions carefully.
            </p>
        {% endif %}
        <div id="q4-options"></div>
        <div style="display:none">{{ formfield_errors 'gen_q4' }}</div>
    </div>

    <div style="display:flex; justify-content:flex-end;">
        {{ next_button }}
    </div>
</div>

<style>
    .radio-option {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1.5;
    }
    .radio-option input[type=radio] {
        width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
    }
</style>

<script>
const Q_OPTIONS = {
    gen_q1: [
        ['a', 'I only earn a fixed payment, therefore my decisions have no consequences for my payment.'],
        ['b', 'The decisions in the Allocation Task can affect my payment but have no consequences for the payment of another person.'],
        ['c', 'The decisions in the Allocation Task can affect both my own payment and the payment of another person.'],
    ],
    gen_q2: [
        ['a', 'I only earn a fixed payment, therefore my decisions have no consequences for my payment.'],
        ['b', 'The decisions in the Lottery Task can affect both my own payment and the payment of another person.'],
        ['c', 'The decisions in the Lottery Task can affect my payment but have no consequences for the payment of another person.'],
    ],
    gen_q3: [
        ['a', 'A group of people who completed a similar study earlier and who were selected to be similar to me.'],
        ['b', 'The other participants on Prolific who are completing the study right now.'],
        ['c', 'A group of people who will complete a similar study in the future.'],
    ],
    gen_q4: [
        ['a', 'I only earn a fixed payment regardless of my decisions.'],
        ['b', 'All decisions in this study are paid out at the end.'],
        ['c', 'From all the situations of the Allocation and Lottery Task, one is randomly selected and paid out as a bonus payment.'],
    ],
};

// Which fields were wrong on last submit (passed from pages.py)
const WRONG = {
    gen_q1: ("{{ gen_q1_wrong }}" === "True"),
    gen_q2: ("{{ gen_q2_wrong }}" === "True"),
    gen_q3: ("{{ gen_q3_wrong }}" === "True"),
    gen_q4: ("{{ gen_q4_wrong }}" === "True"),
};

// Previously selected values — preserved across reload via oTree's form resubmission
// oTree re-populates the form on error, so we read from a hidden input if present
// Previously submitted values passed from pages.py
const PREV_VALUES = {
    gen_q1: "{{ gen_q1_prev }}",
    gen_q2: "{{ gen_q2_prev }}",
    gen_q3: "{{ gen_q3_prev }}",
    gen_q4: "{{ gen_q4_prev }}",
};

function getPreviousValue(fieldName) {
    return PREV_VALUES[fieldName] || null;
}

// Seed shuffle with participant code for consistent order per participant
const SEED = '{{ participant.code }}'.split('').reduce(
    (acc, c) => acc + c.charCodeAt(0), 0
);

function seededShuffle(arr, seed) {
    const a = [...arr];
    let s = seed;
    for (let i = a.length - 1; i > 0; i--) {
        s = (s * 1664525 + 1013904223) & 0xffffffff;
        const j = Math.abs(s) % (i + 1);
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

function renderOptions(fieldName, containerId) {
    const container = document.getElementById(containerId);
    const qSeed = SEED + fieldName.charCodeAt(fieldName.length - 1);
    const shuffled = seededShuffle(Q_OPTIONS[fieldName], qSeed);
    const prevValue = getPreviousValue(fieldName);

    shuffled.forEach(([value, label]) => {
        const lab = document.createElement('label');
        lab.className = 'radio-option';
        const checked = prevValue === value ? 'checked' : '';
        lab.innerHTML = `<input type="radio" name="${fieldName}" value="${value}" ${checked}> ${label}`;
        container.appendChild(lab);
    });
}

function highlightWrongQuestions() {
    const hasAnyError = document.querySelector('.alert-danger') !== null;
    if (!hasAnyError) return;

    // Show our custom banner and hide oTree's generic one
    document.getElementById('error-banner').style.display = '';
    const genericBanner = document.querySelector('.alert-danger');
    if (genericBanner) genericBanner.style.display = 'none';
    // Auto-open the instructions panel
    const panel = document.getElementById('instructions-panel');
    const arrow = document.getElementById('toggle-arrow');
    if (panel) { panel.style.display = ''; arrow.textContent = '▼'; }

    // Highlight each wrong question block
    ['gen_q1', 'gen_q2', 'gen_q3', 'gen_q4'].forEach((field, i) => {
        if (!WRONG[field]) return;
        const n     = i + 1;
        const block = document.getElementById('q' + n + '-block');
        if (!block) return;
        block.style.border     = '2px solid #c0392b';
        block.style.background = '#fdf2f2';
    });

    // Scroll to first wrong question
    const firstWrong = ['gen_q1', 'gen_q2', 'gen_q3', 'gen_q4'].find(f => WRONG[f]);
    if (firstWrong) {
        const n  = ['gen_q1', 'gen_q2', 'gen_q3', 'gen_q4'].indexOf(firstWrong) + 1;
        const el = document.getElementById('q' + n + '-block');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

function toggleInstructions() {
    const panel = document.getElementById('instructions-panel');
    const arrow = document.getElementById('toggle-arrow');
    const isOpen = panel.style.display !== 'none';
    panel.style.display = isOpen ? 'none' : '';
    arrow.textContent   = isOpen ? '▶' : '▼';
}

window.addEventListener('DOMContentLoaded', function() {
    renderOptions('gen_q1', 'q1-options');
    renderOptions('gen_q2', 'q2-options');
    renderOptions('gen_q3', 'q3-options');
    renderOptions('gen_q4', 'q4-options');
    highlightWrongQuestions();
});
</script>

{{ endblock }}