{% block title %}Quick Question{% endblock %}

{% block styles %}
<style>
.field-required {
    outline: 2px solid #e74c3c;
    border-radius: 6px;
    padding: 8px;
}
</style>
{% endblock %}

{% block content %}
<div class="exp-card">
    <p>You have just completed the <strong>{{ task_label }}</strong>.</p>
    <p style="margin-top:12px;">How much do you feel that the choices you made in this task reflected your genuine preferences? (0 = Not at all, 10 = Completely)</p>

    <div id="scale-wrap">
        {% if show_dictator %}
            {{ formfield 'cognitive_uncertainty_dictator' label='' }}
        {% else %}
            {{ formfield 'cognitive_uncertainty_risk' label='' }}
        {% endif %}
    </div>
</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    {{ next_button }}
</div>

<script>
// If oTree reloads the page with an error, highlight the scale in red
window.addEventListener('DOMContentLoaded', function () {
    var hasError = document.querySelector('.help-block') ||
                   document.querySelector('.alert-danger') ||
                   document.querySelector('.errorlist');
    if (hasError) {
        document.getElementById('scale-wrap').classList.add('field-required');
    }
});
</script>
{% endblock %}