{% block title %}
    <h3> Quiz about the instructions </h3>
{% endblock %}

{% block content %}
<br>
Before moving to the task, we would like to make sure everyone understands the instructions properly. Please select the correct answer to the following questions. You must answer each question correctly before proceeding with the study.
<br><br>
<b>1. Employees will perform a decision-making task for six periods. Each period consists of six rounds.</b>
<p id="feedback"></p>

<!-- Quiz options -->
<input type="radio" name="question1" value="1" onclick="checkAnswer(1)">
True<br>

<input type="radio" name="question1" value="2" onclick="checkAnswer(2)">
False<br>

<br><br>

<!-- Next button initially disabled -->
<button id="next-btn" class="btn btn-primary" disabled>
    Next
</button>

<!-- JavaScript for immediate feedback and enabling Next -->
<script>
    function checkAnswer(selectedValue) {
        const feedback = document.getElementById("feedback");
        const nextBtn = document.getElementById("next-btn");

        if (selectedValue === 1) {
            feedback.innerHTML =
                "✅ Correct! An employee will perform six periods, each consisting of six rounds.";
            feedback.style.color = "darkgreen";
            nextBtn.disabled = false;   // Enable Next
        } else {
            feedback.innerHTML =
                "❌ Incorrect. An employee will perform six periods, each consisting of six rounds.";
            feedback.style.color = "darkred";
            nextBtn.disabled = true;    // Keep Next disabled
        }
    }
</script>

{% endblock %}