{{ 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>

<p>
    To sum up the process of the experiment:
      <ol>
            <li> You are tasked to choose between boxes, there are 25 tasks. </li>
            <li> For each task, you can choose 1 of 3 options regarding the possibility of learning the correct choice.</li>
            <li> After all the tasks, you will be informed of the chosen task for bonus payment.</li>
            <li> You will possibly be given the correct choice and allowed to remake a decision according to your earlier selection.</li>
            <li> The experiment is then over, you will be informed of your bonus payment and given the completion code.</li>
        </ol>
    <br>
    If you are ready to start the experiment, press the Next button.
</p>

<button type="button" class="btn btn-primary" onclick="submitForm();">Next</button>

{{ endblock }}

{{ block scripts }}
<script>

    function submitForm() {
                   form.submit();
            }
</script>


{{ endblock }}