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

{% block title %}
    Question 2
{% endblock%}

{% block content %}
<p>
    <img src= "{% static "intro_part/Round0_unknown.jpg" %}" height="400"> <br>
    In the experiment you will see “High Q” urns and “Low Q” urns.
    The difference between them is as follows:
    When a ball is drawn from a “High Q” urn it is more likely to have the same color as the urn than if it is drawn from a “Low Q” urn.

</p>

<div id="q2">
    {% formfield player.Q2 %}
</div>
<input type="hidden" name="correct_q2" id="id_correct_q2" 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('q2').addEventListener('change', function (e) {
    if ($("#id_correct_q2").val() == 0){
            $("#id_correct_q2").val(e.target.value);
        }
        if (e.target.value === "A") {
            $("#explanation").show();
            $("#error").hide();
            $("#next_btn").removeAttr('disabled');
        }
        if (e.target.value === "B") {
            $("#error").show();
            $("#explanation").hide();
            $("#next_btn").attr("disabled", "disabled");
        }
    });
</script>
{% endblock %}