{% block title %}{% endblock %}

{% block content %}

<script>

    setTimeout(function() {
            const nextButton = document.getElementById('next-button');
            nextButton.removeAttribute('disabled');
        }, 15000); // 15 seconds

</script>

    <p>
    {% if player.random_signal %}
    {% if player.random_signal == "yes" %}
        Your actual performance in the bargaining task was better than your previous guess.
    {% elif player.random_signal == "no" %}
        Your actual performance in the bargaining task was worse than your previous guess.
    {% endif %}
    {% else %}
    <!-- Handle case where random_signal is not set -->
    Information about your performance is not available.
    {% endif %}
    </p>

    <p>
        How would you rate the accuracy of this information on a scale from 0 (completely false) to 100 (completely true)?
    </p>

<input type="range" name="eva" min="0" max="100" oninput="updateDescription(this)">
<p id="description"></p>
<!-- by leaving the description blank initially, we prompt the user to move the slider,
reducing the anchoring/default effect. -->

<script>
    let description = document.getElementById('description');
    function updateDescription(input) {
        let eva = parseInt(input.value);
        description.innerText = `This information ${eva}% accurate.`
    }
</script>
    <!--{{ formfields }}-->

<button id="next-button" disabled="disabled">Next</button> <!-- Disable the Next button by default -->

{% endblock %}