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

{% block title %}
    Example
{% endblock%}

{% block content %}
<style>
    #quiz{
        display: none;
    }
    #no_part{
        display: none;
    }
</style>
<p>
    Now information in the following table applies.
    <br>
    <img src= "{% static "intro_part/Round0_unknown.jpg" %}" height="400">
</p>
<br>
    The following might be the balls drawn by the computer:

    <br>
    <img src= "{% static "intro_part/Urn_balls1.png" %}" height="100">
<p>
    <br>
    4 red balls and 2 black balls are drawn.
</p>
<p>
    You will receive 100 ECUs if you guess correctly the color of the urn from which the balls are drawn.
</p>
<div id="ex_free_Q">
    <p>{% formfield player.free_Q %}</p>
</div>
<div id="quiz">
    <p>
        To learn Q, I would be willing to pay up to a price of:
        For each price, please indicate whether you would know the value of Q at that price.
        <br>
        <img src="{% static "intro_part/Urn_QQuiz_Ans1.png" %}" width="600">
    </p>
    <p>
        Suppose you made choices like above, this means you are willing to pay up to 4 ECUs to know Q.
        <li>Suppose the computer draws 3, then you will pay 3 ECUs, and keep 10-3=7 ECUs for that round. We will then tell you the value of Q.</li>
        <li>Suppose the computer draws 6. Then you will keep your 10 ECUs, and we won’t tell you the value of Q.</li>
    </p>

</div>
<div id="no_part">
<p>
    If you select No, then even if information about Q is free, you will not see it.
    Please try 'Yes' to enable the next button.
</p>
</div>


<p>
    Next we will ask you to guess the color of the urn.
</p>
<p>
    {% formfield player.color %}
</p>
<script>
    document.getElementById('ex_free_Q').addEventListener('change', function (e) {
        if (e.target.value === "Yes") {
            $("#quiz").show();
            $("#no_part").hide();
            $("#next_btn").removeAttr('disabled');
        }
        if (e.target.value === "No") {
            $("#quiz").hide();
            $("#no_part").show();
            $("#next_btn").attr("disabled", "disabled");
        }
    });


</script>


<button id="next_btn" class="otree-btn-next btn btn-primary next-button otree-next-button" disabled>Confirm</button>

{% endblock %}