{{ block title }}Introduction{{ endblock }}
{{ block content }}

<div id="floating-button" onmouseover="showImage()" onmouseout="hideImage()">
    <p style="color: blue;">Hover to see experimental set-up.</p>
</div>
<div id="image-container" style="display: none;">
            {% if player.treatment == 'sym' %}
                <img src="{% static 'global/JMP/Symmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'asy' %}
                <img src="{% static 'global/JMP/Asymmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'amb' %}
                <img src="{% static 'global/JMP/Ambiguous.png' %}" style="width:600px; height:auto;" />
            {% endif %}
</div>

<script>
  function showImage() {
    document.getElementById('image-container').style.display = 'block';
  }
  function hideImage() {
    document.getElementById('image-container').style.display = 'none';
  }
</script>

    {% if player.choice1exp == 9999 %}
    <p>Your previous choice was to always choose Box A.</p>
    {% endif %}
    {% if player.choice1exp == 0 %}
    <p>Your previous choice was to always choose Box B.</p>
    {% endif %}
    {% if player.choice1exp > 0 and player.choice1exp < 100 %}
    <p>Your choice was Box B whenever at least {{ player.choice1exp }} out of 10 balls drawn from it are red.</p>
    {% endif %}


<p>
    You may wonder if there is a "correct" choice to the earlier task. Using statistical theory, we can calculate
    when Box A or B is more likely to be golden. You may not know what the correct choice is,
    therefore, we offer you after each decision a chance to learn the correct choice and change your choices. In particular, we offer you three options.

    {{form.levelexp}}
</p>
<p>
    In the actual experiment, you will choose one of these three options for each choice you make. <b>At the end of the experiment</b>, we will reveal to you
    the task that was selected for payment and also inform you of the correct choices. You will also be given a chance to change your choices after seeing the correct choices
    depending on the option selected.
    </p>
{{ next_button }}
{{ endblock }}