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

{% block title %}
    Question 4
{% endblock%}

{% block content %}
<p>
    Look at the two urns in the picture.
</p>
<img src= "{% static "intro_part/comp3.jpg" %}" height="400">
<p>
    One urn has “High Precision”, one urn has “Low precision”.
<br>
    The following six balls are drawn from one of the urns.

</p>
<img src= "{% static "intro_part/comp4_balls.jpg" %}" height="150">
<br>
<div id="q4">
    {% formfield player.Q4 %}
</div>
<input type="hidden" name="correct_q4" id="id_correct_q4" value="0"/>
<div id="error" style="display:none;">
    Please reconsider your choice.
</div>
<div id="explanation" style="display:none;">
    This is correct.
</div>

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