{{ block title }}Comprehension Check — Threshold 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;">
            {{ threshold_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="tq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>Suppose that you want to indicate that you would always choose the left option, no matter what others in the earlier group chose. Where do you put the slider?</strong></p>
        <div id="tq1-options"></div>
    </div>
    <!-- Q2 -->
    <div id="tq2-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>Suppose that you set your slider to 6.What does this indicate?</strong></p>
        <div id="tq2-options"></div>
    </div>
    <!-- Q3 -->
    <div id="tq3-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>Suppose that you set your slider to 10, meaning you would choose the left option only if all 10 people from the earlier group chose it. If in the earlier group actually 9 out of 10 people chose the left option, which option would be selected for you and thus determine your payoff?</strong></p>
        <div id="tq3-options"></div>
    </div>
    <!-- Q4 -->
    <div id="tq4-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px; border-radius:6px; border:2px solid transparent;">
        <p><strong>When setting your slider, what should guide your decision?</strong></p>
        <div id="tq4-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:'threshold_q1', options:[
        ['a','At position 5, in the middle.'],
        ['b','At position 1.'],
        ['c','All the way to the left.'],
    ]},
    { id:'threshold_q2', options:[
        ['a','I want to choose the left option, regardless of what the people in the earlier group chose.'],
        ['b','I want to choose a random option. '],
        ['c','I would choose the left option if at least 6 out of 10 people in the earlier group chose it.'],
    ]},
    { id:'threshold_q3', options:[
        ['a','The left option, because the majority chose it.'],
        ['b','The left option, because 9 out of 10 is close enough to my threshold.'],
        ['c','The right option, because 9 does not meet my threshold of 10.'],
    ]},
    { id:'threshold_q4', options:[
        ['a','I should try to match what the majority of people in the earlier group chose.'],
        ['b','I should set the slider consistently the same way across all situations.'],
        ['c','I should set the slider to reflect my own preferences.'],
    ]},
];

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('tq'+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='▼';
    ['threshold_q1', 'threshold_q2', 'threshold_q3', 'threshold_q4'].forEach((f,i)=>{
        if(!WRONG[f])return;
        const block=document.getElementById('tq'+(i+1)+'-block');
        block.style.border='2px solid #c0392b';block.style.background='#fdf2f2';
        if(!document.getElementById('tq'+(i+1)+'-err')){
            const msg=document.createElement('p');msg.id='tq'+(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('tq'+(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 }}