{{ block title }}Comprehension Check — Lottery Task{{ 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 about the Lottery Task instructions you just read.
    If the 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;">
            {{ risk_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;">
        ⚠ That answer is incorrect. Please have another careful look at the question below.
    </div>

    <!-- Q1 -->
    <div id="rq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>If one of the situations from the Lottery Task is the payoff-relevant
        situation, how will your bonus payment be determined?</strong></p>
        <div id="rq1-options"></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; }
    #instructions-panel h3 { font-size:1rem; font-weight:bold; color:#1a4f5a; }
    #instructions-panel p, #instructions-panel li { line-height:1.65; margin-bottom:8px; }
    #instructions-panel ul, #instructions-panel ol { padding-left:20px; }
</style>

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

const OPTIONS = [
    ['a', 'The outcome with the higher MU will always be chosen.'],
    ['b', 'You will receive the average of the two outcomes.'],
    ['c', 'One of the outcomes from your chosen option will be resolved according to the probabilities shown.'],
];

const SEED = '{{ participant.code }}'.split('').reduce((a,c) => a + 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 renderQuestion() {
    const optEl   = document.getElementById('rq1-options');
    const prevVal = PREV['risk_q1'] || '';
    const shuffled = seededShuffle(OPTIONS, SEED + 42);
    shuffled.forEach(([value, label]) => {
        const lab = document.createElement('label');
        lab.className = 'radio-option';
        lab.innerHTML = `<input type="radio" name="risk_q1" value="${value}" ${prevVal===value?'checked':''}> ${label}`;
        optEl.appendChild(lab);
    });
}

function highlightErrors() {
    const hasError = document.querySelector('.alert-danger') !== null;
    if (!hasError) return;
    document.getElementById('error-banner').style.display = '';
    const banner = document.querySelector('.alert-danger');
    if (banner) banner.style.display = 'none';
    document.getElementById('instructions-panel').style.display = '';
    document.getElementById('toggle-arrow').textContent = '▼';

    if (WRONG['risk_q1']) {
        const block = document.getElementById('rq1-block');
        block.style.border     = '2px solid #c0392b';
        block.style.background  = '#fdf2f2';
        if (!document.getElementById('rq1-err')) {
            const msg = document.createElement('p');
            msg.id = 'rq1-err';
            msg.style.cssText = 'color:#c0392b;font-size:.9rem;margin-bottom:6px;';
            msg.textContent = '⚠ That answer is incorrect. Please review the instructions above.';
            block.insertBefore(msg, document.getElementById('rq1-options'));
        }
        block.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() {
    renderQuestion();
    highlightErrors();
});
</script>

{{ endblock }}