{% block title %}Questionnaire{% endblock %}

{{ block styles }}
<style>
.sc-table { border-collapse:collapse; width:100%; margin-top:12px; table-layout:fixed; }
.sc-table td.sc-cell {
    text-align:center; vertical-align:top; padding:4px 2px;
    cursor:pointer; user-select:none; width:1%;
}
.sc-table td.sc-cell:hover .sc-btn { border-color:#2a6e7c; background:#e8f4f7; }
.sc-btn {
    width:18px; height:18px; border-radius:50%;
    border:2px solid #aaa; background:#fff;
    margin:0 auto 5px auto;
    transition:background .1s, border-color .1s;
}
.sc-cell.selected .sc-btn { background:#2a6e7c; border-color:#2a6e7c; }
.sc-lbl { display:block; font-size:.78rem; color:#444; line-height:1.3; word-break:break-word; }
.q-block { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #f0ede8; }
.q-block:last-child { border-bottom:none; }
.q-block > p { margin-bottom:6px; line-height:1.55; }
.q-err-msg { color:#c0392b; font-size:.9rem; margin-top:6px; margin-bottom:0; }
</style>
{{ endblock }}

{% block content %}

<div id="error-banner" style="display:none; background:#fdf2f2; border:1px solid #e8b4b4;
     color:#c0392b; padding:12px 16px; border-radius:6px; margin-bottom:20px; font-size:.95rem;">
    &#9888; Not all questions have been answered. Please have a look at the questions highlighted below.
</div>

<div class="exp-card">
    <p style="color:#6b7280; font-size:.95rem; margin-bottom:16px;">You will now fill in another short questionnaire.</p>
    <p><strong>Please indicate how much you agree or disagree with each of the following statements.</strong></p>
    <div id="snes-container">
    <div class="q-block" data-field-block="snes_q1">
        <p>I go out of my way to follow social norms.</p>
        <input type="hidden" name="snes_q1" id="hid_snes_q1" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q1" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q1" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q1' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q2">
        <p>We should not always have to follow a set of social rules.</p>
        <input type="hidden" name="snes_q2" id="hid_snes_q2" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q2" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q2" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q2' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q3">
        <p>People should always be able to behave as they wish rather than trying to fit the norm.</p>
        <input type="hidden" name="snes_q3" id="hid_snes_q3" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q3" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q3" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q3' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q4">
        <p>There is a correct way to behave in every situation.</p>
        <input type="hidden" name="snes_q4" id="hid_snes_q4" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q4" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q4" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q4' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q5">
        <p>If more people followed society&#39;s rules, the world would be a better place.</p>
        <input type="hidden" name="snes_q5" id="hid_snes_q5" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q5" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q5" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q5' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q6">
        <p>People need to follow life&#39;s unwritten rules every bit as strictly as they follow the written rules.</p>
        <input type="hidden" name="snes_q6" id="hid_snes_q6" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q6" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q6" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q6' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q7">
        <p>There are lots of vital customs that people should follow as members of society.</p>
        <input type="hidden" name="snes_q7" id="hid_snes_q7" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q7" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q7" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q7' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q8">
        <p>The standards that society expects us to meet are far too restrictive.</p>
        <input type="hidden" name="snes_q8" id="hid_snes_q8" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q8" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q8" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q8' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q9">
        <p>People who do what society expects of them lead happier lives.</p>
        <input type="hidden" name="snes_q9" id="hid_snes_q9" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q9" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q9" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q9' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q10">
        <p>Our society is built on unwritten rules that members need to follow.</p>
        <input type="hidden" name="snes_q10" id="hid_snes_q10" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q10" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q10" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q10' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q11">
        <p>I am at ease only when everyone around me is adhering to society&#39;s norms.</p>
        <input type="hidden" name="snes_q11" id="hid_snes_q11" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q11" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q11" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q11' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q12">
        <p>We would be happier if we did not try to follow society&#39;s norms.</p>
        <input type="hidden" name="snes_q12" id="hid_snes_q12" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q12" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q12" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q12' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q13">
        <p>My idea of a perfect world would be one with few social expectations.</p>
        <input type="hidden" name="snes_q13" id="hid_snes_q13" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q13" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q13" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q13' }}</div>
    </div>
    <div class="q-block" data-field-block="snes_q14">
        <p>I always do my best to follow society&#39;s rules.</p>
        <input type="hidden" name="snes_q14" id="hid_snes_q14" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="snes_q14" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="snes_q14" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'snes_q14' }}</div>
    </div>
    <div class="q-block" data-field-block="attention_check_snes">
        <p>To show that you are paying attention, please select number 6.</p>
        <input type="hidden" name="attention_check_snes" id="hid_attention_check_snes" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="attention_check_snes" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="attention_check_snes" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'attention_check_snes' }}</div>
    </div>
    </div><!-- end snes-container -->
</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    <button type="button" id="btn-next"
            style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                   border-radius:8px; cursor:pointer; font-size:1rem;">
        Next &rarr;
    </button>
</div>

<script>
var SNES_REQUIRED = ['snes_q1','snes_q2','snes_q3','snes_q4','snes_q5','snes_q6','snes_q7','snes_q8','snes_q9','snes_q10','snes_q11','snes_q12','snes_q13','snes_q14'];

function scSelect(cell) {
    var field = cell.dataset.field;
    var val   = cell.dataset.value;
    cell.closest('tr').querySelectorAll('.sc-cell').forEach(function(c) {
        c.classList.remove('selected');
    });
    cell.classList.add('selected');
    var hid = document.getElementById('hid_' + field);
    if (hid) hid.value = val;
    // Clear error state on this block when answered
    var block = cell.closest('[data-field-block]');
    if (block) {
        block.style.border = '';
        block.style.background = '';
        var msg = block.querySelector('.q-err-msg');
        if (msg) msg.remove();
    }
}

function showErrors(missing) {
    // Clear previous errors
    document.querySelectorAll('[data-field-block]').forEach(function(b) {
        b.style.border = '';
        b.style.background = '';
        var old = b.querySelector('.q-err-msg');
        if (old) old.remove();
    });
    if (!missing.length) return;

    document.getElementById('error-banner').style.display = '';

    missing.forEach(function(f) {
        var block = document.querySelector('[data-field-block="' + f + '"]');
        if (!block) return;
        block.style.border     = '2px solid #c0392b';
        block.style.background = '#fdf2f2';
        block.style.borderRadius = '6px';
        if (!block.querySelector('.q-err-msg')) {
            var msg = document.createElement('p');
            msg.className = 'q-err-msg';
            msg.textContent = '\u26a0 Please answer this question before continuing.';
            block.appendChild(msg);
        }
    });

    var first = document.querySelector('[data-field-block="' + missing[0] + '"]');
    if (first) first.scrollIntoView({behavior:'smooth', block:'center'});
    else document.getElementById('error-banner').scrollIntoView({behavior:'smooth'});
}

document.getElementById('btn-next').addEventListener('click', function () {
    var missing = SNES_REQUIRED.filter(function(f) {
        var hid = document.getElementById('hid_' + f);
        return !hid || hid.value === '';
    });
    if (missing.length > 0) {
        showErrors(missing);
        return;
    }
    document.querySelector('form').submit();
});

window.addEventListener('DOMContentLoaded', function() {
    function reorder(containerId, order) {
        var container = document.getElementById(containerId);
        if (!container || !order || !order.length) return;
        order.forEach(function(field) {
            var block = container.querySelector('[data-field-block="' + field + '"]');
            if (block) container.appendChild(block);
        });
    }
    reorder('snes-container', {{snes_order_json}});
});
</script>
{% endblock %}