{{ block title }}Additional Questions{{ 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 two questions before continuing.</p>

    <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="fq1-block" style="margin-top:20px; margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>The choices shown in this part of the study represent...</strong></p>
        <div id="fq1-options"></div>
    </div>

    <!-- Q2 -->
    <div id="fq2-block" style="margin-bottom:24px; padding:14px 16px;
         border-radius:6px; border:2px solid transparent;">
        <p><strong>When making your decisions in this part, what should guide you?</strong></p>
        <div id="fq2-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: 'final_q1',
        options: [
            ['a', 'The actual decisions made by the earlier group of participants.'],
            ['b', 'Possible decisions by the earlier group that do not need to be their true behaviour.'],
            ['c', 'Random choices generated by the computer.'],
        ]
    },
    {
        id: 'final_q2',
        options: [
            ['a', 'I should try to be consistent with the decisions I made earlier.'],
            ['b', 'I should make each choice based on my preference given the split shown.'],
            ['c', 'I should try to match what the majority of people chose.'],
        ]
    },
];

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 renderQ(q, blockIdx) {
    const n       = blockIdx + 1;
    const optEl   = document.getElementById('fq' + 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';
    ['final_q1','final_q2'].forEach((f,i) => {
        if (!WRONG[f]) return;
        const block = document.getElementById('fq' + (i+1) + '-block');
        block.style.border     = '2px solid #c0392b';
        block.style.background  = '#fdf2f2';
        if (!document.getElementById('fq'+(i+1)+'-err')) {
            const msg = document.createElement('p');
            msg.id = 'fq'+(i+1)+'-err';
            msg.style.cssText = 'color:#c0392b;font-size:.9rem;margin-bottom:6px;';
            msg.textContent = '⚠ That answer is incorrect. Please re-read the instructions above.';
            block.insertBefore(msg, document.getElementById('fq'+(i+1)+'-options'));
        }
    });
    const firstWrong = ['final_q1','final_q2'].find(f => WRONG[f]);
    if (firstWrong) {
        const idx = parseInt(firstWrong.replace('final_q',''));
        document.getElementById('fq'+idx+'-block').scrollIntoView({behavior:'smooth',block:'center'});
    }
}

window.addEventListener('DOMContentLoaded', () => {
    QUESTIONS.forEach((q,i) => renderQ(q,i));
    highlightErrors();
});
</script>

{{ endblock }}