{% block title %}PrePayment{% 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;">
  <img src="{{ static 'global/JMP/Asymmetric.png' }}" alt="Hover Image">
</div>

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

  function hideImage() {
    document.getElementById('image-container').style.display = 'none';
  }
</script>
<p>
    The task that was selected for payment was the following. We repeat the instructions below:
</p>
<p>
    You are offered a choice between two boxes, A and B. Each of these boxes are randomly picked from the 200 boxes.
    You will be paid the $10 if the box you chose is golden and if this choice is selected for payment.
    Box A and B are different in the following way:
        <ol>
            <li> We drew 4 balls from Box A, <b>3 out of 4 (75%)</b> are red. </li>
            <li> We will draw 25 balls from Box B and your choice can be based on the outcome of the draws. </li>
        </ol>
</p>
<div>
    {% if player.switchingpoint != 9999 %}
        {% if player.choicelevel == 1 %}
        <p>In this task, you chose box B if it drew at least <b>{{player.switchingpoint}} out of 25</b> red balls. And when given the chance to learn
        the optimal choice, you chose to always use your current choice. Below you can see the correct optimal choices.
        </p>
        {% endif %}
        {% if player.choicelevel == 2 %}
        In this task, you chose box B if it drew at least <b>{{player.switchingpoint}} out of 25</b>  red balls. And when given the chance to learn
        the optimal choice, you chose to have a 20% chance to learn the correct choices, 75% to use current choices, 5% you earn nothing.
            {% if player.correctiondraw < 5 %}
                 <b>Unfortunately, you got the last option, which is nothing extra is earned from the boxes.</b>
            {% elif player.correctiondraw >= 5 and player.correctiondraw <= 75 %}
                 <b>The option you got was to use your original choices.</b>
            {% elif player.correctiondraw > 75 %}
            <b>You got the option to learn the correct choice and can reselect.</b>
                  <br>
                    <br>
                  <p> Please enter the smallest number of red balls Box B needs to draw for you to choose it: {{ form.newchoice }}</p>
            {% endif %}
        {% endif %}
        {% if player.choicelevel == 3 %}
        In this task, you chose box B if it drew at least <b>{{player.switchingpoint}} out of 25</b>  red balls. And when given the chance to learn
        the optimal choice, you chose to have a 50% chance to learn the correct choices, 30% to use current choices, 20% you earn nothing.
            {% if player.correctiondraw < 20 %}
                 <b>Unfortunately, you got the last option, which is nothing extra is earned from the boxes.</b>
            {% elif player.correctiondraw >= 20 and player.correctiondraw <= 50 %}
            <b>The option you got was to use your original choices.</b>
            {% elif player.correctiondraw > 50 %}
                 <b>You got the option to learn the correct choice and can reselect.</b>
                <br>
                    <br>
                <p> Please enter the smallest number of red balls Box B needs to draw for you to choose it: {{ form.newchoice }}</p>
            {% endif %}
        {% endif %}
    {% endif %}
    {% if player.switchingpoint == 9999 %}
        {% if player.choicelevel == 1 %}
        <p>In this task, you always chose box A. And when given the chance to learn
        the optimal choice, you chose to always use your current choice. Below you can see the correct optimal choices.
        </p>
        {% endif %}
        {% if player.choicelevel == 2 %}
        In this task, you always chose box A. And when given the chance to learn
        the optimal choice, you chose to have a 20% chance to learn the correct choices, 75% to use current choices, 5% you earn nothing.
            {% if player.correctiondraw < 5 %}
                 <b>Unfortunately, you got the last option, which is nothing extra is earned from the boxes.</b>
            {% elif player.correctiondraw >= 5 and player.correctiondraw <= 75 %}
                 <b>The option you got was to use your original choices.</b>
            {% elif player.correctiondraw > 75 %}
            <b>You got the option to learn the correct choice and can reselect.</b>
                  <br>
                    <br>
                  <p> Please enter the smallest number of red balls Box B needs to draw for you to choose it: {{ form.newchoice }}</p>
            {% endif %}
        {% endif %}
        {% if player.choicelevel == 3 %}
        In this task, you always chose box A. And when given the chance to learn
        the optimal choice, you chose to have a 50% chance to learn the correct choices, 30% to use current choices, 20% you earn nothing.
            {% if player.correctiondraw < 20 %}
                 <b>Unfortunately, you got the last option, which is nothing extra is earned from the boxes.</b>
            {% elif player.correctiondraw >= 20 and player.correctiondraw <= 50 %}
            <b>The option you got was to use your original choices.</b>
            {% elif player.correctiondraw > 50 %}
                 <b>You got the option to learn the correct choice and can reselect.</b>
                <br>
                    <br>
                <p> Please enter the smallest number of red balls Box B needs to draw for you to choose it: {{ form.newchoice }}</p>
            {% endif %}
        {% endif %}
    {% endif %}
</div>
<br>
<p>Below are the optimal choices for the different outcomes of Box A.</p>

<table class="table table-striped">
    <colgroup>
        <col width="30%">
        <col width="10%">
        <col width="30%">
    </colgroup>
    <tr>
        <td align="right"><b>The draw from Box A </b></td>
        <td></td>
        <td align="left"><b>When to choose Box B</b></td>
    </tr>
   {% for item in switchingfromB %}
    <tr>
    <td align="right">
    {{ item.amount }} out 4 are red balls (the rest are blue).
     <td align="middle">
    </td>
    <td align="left">
         If it draws at least {{item.percentage }} out of 25 red balls.
    </td>
</tr>
{% endfor %}
</table>


</div>

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

{{ endblock }}

{{ block scripts }}
<script>

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

{{ endblock }}