{{ block title }}Comprehension Check — Allocation 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 questions about the Allocation Task instructions you just
    read. 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;">
            {{ dictator_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>

    <!-- Q1 -->
    <div id="dq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>If you send 3 MU to the other person and the multiplier is 2, how many MU
        will the other person receive?</strong></p>
        <div id="dq1-options"></div>
    </div>

    <!-- Q2 -->
    <div id="dq2-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>If there are initially 10 MU available and you send 5 MU to the other person
        with a multiplier of 2.5, which statement is correct?</strong></p>
        <div id="dq2-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 QUESTIONS = [
    {
        id: 'dict_q1',
        options: [
            ['a', '3 MU.'],
            ['b', '6 MU.'],
            ['c', '9 MU.'],
        ]
    },
    {
        id: 'dict_q2',
        options: [
            ['a', 'The other person receives 12.5 MU and you keep 5 MU.'],
            ['b', 'The other person receives 5 MU and you receive 5 MU.'],
            ['c', 'Both you and the other person receive 12.5 MU.'],
        ]
    },
];

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(q, n) {
    const optEl   = document.getElementById('dq' + n + '-options');
    const prevVal = PREV[q.id] || '';
    const shuffled = seededShuffle(q.options, SEED + q.id.charCodeAt(q.id.length-1));
    shuffled.forEach(([value, label]) => {
        const lab = document.createElement('label');
        lab.className = 'radio-option';
        lab.innerHTML = `<input type="radio" name="${q.id}" 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 = '▼';

    ['dict_q1','dict_q2'].forEach((f, i) => {
        if (!WRONG[f]) return;
        const n     = i + 1;
        const block = document.getElementById('dq' + n + '-block');
        block.style.border     = '2px solid #c0392b';
        block.style.background  = '#fdf2f2';
        if (!document.getElementById('dq' + n + '-err')) {
            const msg = document.createElement('p');
            msg.id = 'dq' + n + '-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('dq' + n + '-options'));
        }
    });
    const firstWrong = ['dict_q1','dict_q2'].find(f => WRONG[f]);
    if (firstWrong) {
        const n = parseInt(firstWrong.replace('dict_q',''));
        document.getElementById('dq' + n + '-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() {
    QUESTIONS.forEach((q, i) => renderQuestion(q, i + 1));
    highlightErrors();
});
</script>

{{ endblock }}