{{ block title }}Comprehension Check — Urns Task Instructions{{ 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 instructions you just read. If the answer is incorrect, please review the instructions.</p>

    <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;">
            {{ rule_following_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="rfq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>There are 20 balls. If you were to assign all balls to the blue urn, what would your payoff be?</strong></p>
        <div id="rfq1-options"></div>
    </div>
    <!-- Q2 -->
    <div id="rfq2-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>There are 20 balls. If you were to assign all balls to the yellow urn, what would your payoff be?</strong></p>
        <div id="rfq2-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; }
</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:'rule_following_q1', options:[
        ['a','10 MU.'],
        ['b','7.5 MU'],
        ['c','5 MU'],
    ]},
    { id:'rule_following_q2', options:[
        ['a','5 MU.'],
        ['b','7.5 MU'],
        ['c','10 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('rfq'+n+'-options');
    const prevVal=PREV[q.id]||'';
    seededShuffle(q.options,SEED+q.id.charCodeAt(q.id.length-1)).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(){
    if(!document.querySelector('.alert-danger'))return;
    document.getElementById('error-banner').style.display='';
    const b=document.querySelector('.alert-danger');if(b)b.style.display='none';
    document.getElementById('instructions-panel').style.display='';
    document.getElementById('toggle-arrow').textContent='▼';
    ['rule_following_q1', 'rule_following_q2'].forEach((f,i)=>{
        if(!WRONG[f])return;
        const block=document.getElementById('rfq'+(i+1)+'-block');
        block.style.border='2px solid #c0392b';block.style.background='#fdf2f2';
        if(!document.getElementById('rfq'+(i+1)+'-err')){
            const msg=document.createElement('p');msg.id='rfq'+(i+1)+'-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('rfq'+(i+1)+'-options'));
        }
    });
}

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

window.addEventListener('DOMContentLoaded',function(){
    QUESTIONS.forEach((q,i)=>renderQuestion(q,i+1));
    highlightErrors();
});
</script>
{{ endblock }}