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

{{ block content }}
<p style="color:#6b7280; font-size:.95rem; margin-bottom:20px;">
    You will now answer a few final questions about yourself and the study.
</p>

<div class="exp-card">
    <p><strong>A contrarian is a person who habitually takes a view opposite to that held by
    the majority. Would you consider yourself a contrarian?</strong></p>
    <div style="margin-top:12px;">
        {{ formfield 'contrarian' label='' }}
    </div>
</div>

<div id="submit-error" style="display:none; color:#c0392b; background:#fdf0ee;
     border:1px solid #e8b4ae; border-radius:6px; padding:10px 16px;
     margin-top:16px; font-size:.9rem;">
    &#9888; Please respond to all questions before continuing.
</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>
document.getElementById('btn-next').addEventListener('click', function () {
    var answered = document.querySelector('input[name="contrarian"]:checked');
    if (!answered) {
        document.getElementById('submit-error').style.display = 'block';
        return;
    }
    document.querySelector('form').submit();
});

document.querySelectorAll('input[name="contrarian"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('submit-error').style.display = 'none';
    });
});
</script>
{{ endblock }}