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

{{ block content }}
<span id="server-data"
      data-wrong='{{ wrong_json }}'
      data-prev='{{ prev_json }}'
      style="display:none"></span>
<div class="exp-card">
    <p>Please answer the following question 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>

    <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 your payment is correct?</strong></p>
        <div id="q1-options"></div>
        <div style="display:none">{{ formfield_errors 'gen_q1' }}</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 regardless of my decisions.'],
        ['b', 'All decisions in this study are paid out at the end.'],
        ['c', 'From all the decisions in this study, one is randomly selected and paid out as a bonus payment.'],
    ],
};

const WRONG = JSON.parse(document.getElementById('server-data').dataset.wrong);
const PREV = JSON.parse(document.getElementById('server-data').dataset.prev);

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 = PREV[fieldName] || null;
    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;
    document.getElementById('error-banner').style.display = '';
    const genericBanner = document.querySelector('.alert-danger');
    if (genericBanner) genericBanner.style.display = 'none';
    const panel = document.getElementById('instructions-panel');
    const arrow = document.getElementById('toggle-arrow');
    if (panel) { panel.style.display = ''; arrow.textContent = '▼'; }
    if (WRONG['gen_q1']) {
        const block = document.getElementById('q1-block');
        block.style.border = '2px solid #c0392b';
        block.style.background = '#fdf2f2';
    }
}

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');
    highlightWrongQuestions();
});
</script>
{{ endblock }}