{% extends "global/Page.html" %}
{% load otree %}

{% block content %}

<h3>Comprehension Check</h3>
<p>Please answer the questions below. Incorrect answers will be highlighted.</p>

<style>
    .cq-card {
        border: 1px solid #e0e0e0;
        padding: 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        background: #fafafa;
    }
    .cq-card.incorrect {
        border-color: #d9534f;
        background: #ffe5e5;
    }
    .cq-question {
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>

<div id="cq1" class="cq-card">
    <div class="cq-question">1. Which of the following describes the setup of the experiment?</div>
    {{ form.cq1 }}
</div>

<div id="cq2" class="cq-card">
    <div class="cq-question">2. In a given task, for the same light configuration (e.g. blue on and red on), will the sound always be the same?</div>
    {{ form.cq2 }}
</div>

<div id="cq3" class="cq-card">
    <div class="cq-question">3. Do the lights in one row affect the sound in another observation?</div>
    {{ form.cq3 }}
</div>

<div id="cq4" class="cq-card">
    <div class="cq-question">4. What is your objective?</div>
    {{ form.cq4 }}
</div>

<div id="cq5" class="cq-card">
    <div class="cq-question">5. How will your additional payment for the prediction stage be determined?</div>
    {{ form.cq5 }}
</div>

<button class="btn btn-primary">Continue</button>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Restore previous selections after an error
        var prev = {{ cq_previous }};
        for (var field in prev) {
            var val = String(prev[field]);
            var radio = document.querySelector('input[name="' + field + '"][value="' + val + '"]');
            if (radio) radio.checked = true;
        }

        {% if incorrect_fields %}
            let incorrect = {{ incorrect_fields }};
            let firstElem = null;

            incorrect.forEach(field => {
                let card = document.getElementById(field);
                if (card) {
                    card.classList.add("incorrect");
                    if (!firstElem) firstElem = card;
                }
            });

            if (firstElem) {
                firstElem.scrollIntoView({ behavior: "smooth", block: "center" });
            }
        {% endif %}
    });
</script>


{% endblock %}