{{ block title }}Comprehension Check — Task Instructions{{ endblock }}

{{ block content }}

<!-- State passed from server as JSON -->
<span id="server-data"
      data-condition="{{ condition }}"
      data-wrong='{{ wrong_json }}'
      data-prev='{{ prev_json }}'
      style="display:none"></span>

<div class="exp-card">
    <p>Please answer the following questions about the 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;">
            {{ condition_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>

    <div id="cq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p id="cq1-text"><strong></strong></p>
        <div id="cq1-options"></div>
    </div>

    <div id="cq2-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p id="cq2-text"><strong></strong></p>
        <div id="cq2-options"></div>
    </div>

    <div id="cq3-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p id="cq3-text"><strong></strong></p>
        <div id="cq3-options"></div>
    </div>

    <div id="cq4-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent; display:none;">
        <p id="cq4-text"><strong></strong></p>
        <div id="cq4-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; }
    .highlight-box {
        background:#e8f4f7; border-left:4px solid #2a6e7c;
        padding:12px 16px; border-radius:0 6px 6px 0;
    }
    #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 { padding-left:20px; }
</style>

<script>
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 ? '▶' : '▼';
}

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

const QUESTIONS = {
    threshold: [
        {
            id: 'cond_q1',
            text: 'Suppose that you want to indicate that you would always pick the right option, no matter what others in the earlier group picked. Where do you put the slider?',
            options: [
                ['a', 'At position 5, in the middle.'],
                ['b', 'At position 10.'],
                ['c', 'All the way to the right.'],
            ]
        },
        {
            id: 'cond_q2',
            text: 'Suppose that you set your slider to 6, meaning you would pick the left option if at least 6 out of 10 people in the earlier group picked it. If in the earlier group actually 4 out of 10 people picked the left option, which option would be selected for you and thus determine your payoff?',
            options: [
                ['a', 'The left option, because my slider is set above 4.'],
                ['b', 'The right option, because 4 is below my threshold of 6.'],
                ['c', 'The right option, because the majority picked the right option.'],
            ]
        },
        {
            id: 'cond_q3',
            text: 'Suppose that you set your slider to 10, meaning you would pick the left option only if all 10 people from the earlier group picked it. If in the earlier group actually 9 out of 10 people picked the left option, which option would be selected for you and thus determine your payoff?',
            options: [
                ['a', 'The left option, because the majority picked it.'],
                ['b', 'The right option, because 9 does not meet my threshold of 10.'],
                ['c', 'The left option, because 9 out of 10 is close enough to my threshold.'],
            ]
        },
        {
            id: 'cond_q4',
            text: 'When setting your slider, what should guide your decision?',
            options: [
                ['a', 'I should try to match what the majority of people in the earlier group picked.'],
                ['b', 'I should set the slider to reflect my own preferences.'],
                ['c', 'I should set the slider consistently the same way across all situations.'],
            ]
        },
    ],
    staircase: [
        {
            id: 'cond_q1',
            text: 'Suppose that the experiment identifies that your personal threshold is 6, meaning you would pick the left option if at least 6 out of 10 people in the earlier group picked it. If in the earlier group actually 4 out of 10 people picked the left option, which option would be selected for you and thus determine your payoff?',
            options: [
                ['a', 'The left option, because my threshold is above 4.'],
                ['b', 'The right option, because 4 is below my threshold of 6.'],
                ['c', 'The right option, because the majority in the earlier group picked the right option.'],
            ]
        },
        {
            id: 'cond_q2',
            text: 'Suppose that the experiment identifies that your personal threshold is 10, meaning you would pick the left option only if all 10 people from the earlier group picked it. If in the earlier group actually 9 out of 10 people picked the left option, which option would be selected for you and thus determine your payoff?',
            options: [
                ['a', 'The left option, because the majority in the earlier group picked it.'],
                ['b', 'The right option, because 9 does not meet my threshold of 10.'],
                ['c', 'The left option, because 9 out of 10 is close enough to my threshold.'],
            ]
        },
        {
            id: 'cond_q3',
            text: 'When making your choices, what should guide your decisions?',
            options: [
                ['a', 'I should try to match what the majority of people in the earlier group picked.'],
                ['b', 'I should make each choice based on what I would prefer to do given the split shown.'],
                ['c', 'I should always pick the same option to show a consistent preference.'],
            ]
        },
    ],
    full_MPL: [
        {
            id: 'cond_q1',
            text: 'When making your choices, what should guide your decisions?',
            options: [
                ['a', 'I should try to match what the majority of people in the earlier group picked.'],
                ['b', 'I should make each choice based on what I would genuinely do given the split shown.'],
                ['c', 'I should always pick the same option to show a consistent preference.'],
            ]
        },
        {
            id: 'cond_q2',
            text: 'Suppose that you picked the right option when 7 out of 10 people from the earlier group picked the left option. If the actual split in the earlier group was 7 out of 10 people picking the left option, which option would be selected for you?',
            options: [
                ['a', 'The left option, because the majority picked it.'],
                ['b', 'The right option, because that is what you picked for the split of 7 out of 10.'],
                ['c', 'It depends on what you picked for the other possible splits.'],
            ]
        },
    ],
};

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(qIndex, q) {
    const n      = qIndex + 1;
    const block  = document.getElementById('cq' + n + '-block');
    const textEl = document.getElementById('cq' + n + '-text');
    const optEl  = document.getElementById('cq' + n + '-options');
    block.style.display = '';
    textEl.innerHTML = '<strong>' + q.text + '</strong>';
    const shuffled = seededShuffle(q.options, SEED + q.id.charCodeAt(q.id.length-1));
    const prevVal  = PREV[q.id] || '';
    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';
    // Auto-open the instructions panel on error
    const panel = document.getElementById('instructions-panel');
    const arrow = document.getElementById('toggle-arrow');
    panel.style.display = '';
    arrow.textContent   = '▼';

    ['cond_q1','cond_q2','cond_q3','cond_q4'].forEach(f => {
        if (!WRONG[f]) return;
        const idx   = parseInt(f.replace('cond_q',''));
        const block = document.getElementById('cq' + idx + '-block');
        if (!block || block.style.display === 'none') return;
        block.style.border     = '2px solid #c0392b';
        block.style.background  = '#fdf2f2';
        if (!document.getElementById('cq' + idx + '-err')) {
            const msg = document.createElement('p');
            msg.id = 'cq' + idx + '-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('cq' + idx + '-options'));
        }
    });
    const firstWrong = ['cond_q1','cond_q2','cond_q3','cond_q4'].find(f => WRONG[f]);
    if (firstWrong) {
        const idx = parseInt(firstWrong.replace('cond_q',''));
        const el  = document.getElementById('cq' + idx + '-block');
        if (el) el.scrollIntoView({ behavior:'smooth', block:'center' });
    }
}

window.addEventListener('DOMContentLoaded', function() {
    const qs = QUESTIONS[CONDITION] || [];
    qs.forEach((q, i) => renderQuestion(i, q));
    highlightErrors();
});
</script>

{{ endblock }}