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

{% block title %}
    Question 3
{% endblock%}

{% block content %}
<p>
    Look at the two urns in the picture. The top urn has High Q (Q=9) and the bottom urn has Low Q (Q=5).
</p>
<img src= "{% static "intro_part/comp3.jpg" %}" height="400">
<br>

<div id="q3">
    {% formfield player.Q3 %}
</div>
<input type="hidden" name="correct_q3" id="id_correct_q3" value="0"/>
<div id="explanation" style="display:none;">
    This is correct.
</div>
<div id="error" style="display:none;">
    Please reconsider your choice.
</div>


<button id="next_btn" class="otree-btn-next btn btn-primary next-button otree-next-button" disabled>Confirm</button>
<script>
    document.getElementById('q3').addEventListener('change', function (e) {
        if ($("#id_correct_q3").val() == 0){
            $("#id_correct_q3").val(e.target.value);
        }
        if (e.target.value === "B") {
            $("#error").hide();
            $("#explanation").show();
            $("#next_btn").removeAttr('disabled');
        }
        if (e.target.value === "A") {
            $("#error").show();
            $("#explanation").hide();
            $("#next_btn").attr("disabled", "disabled");
        }
    });
</script>
{% endblock %}