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

{% block head_title %}
    Study
{% endblock %}



{% block styles %}

    <style type="text/css">

        .column {
          float: none;
          width: 50%;
          padding: 20px;
        }

        .row::after {
          content: "";
          clear: both;
          display: table;
        }

        h1 {text-align: center; font-size: 35px;}

        .justify {
          text-align: justify;
          text-justify: inter-word;
        }

        h1 {text-align: center; font-size: 35px;}
    </style>

{% endblock %}



{% block content %}
    <h1>Round 5 of 5</h1>



    <div class="card bg-light m-3">
    <div class="card-body">
    <div class="justify">

        <p style="font-size:18px;">

           <!-- <span style="font-weight: bold; font-size: 30px; text-align: center;">  NEW RULES:   </span> <br> -->



            You have now arrived at the final round (Round 5). In this round, you will still play the game 10 times.
            The difference compared to previous rounds is that this time you will be able to choose
            the time limit that will be applied to the 10 games.  <br>

            <br> In particular, you will be asked to make several decisions between two payment options. The first option
            in each decision is always to start the round with a budget of &euro;10 and solve each game with no time limit. The second option varies
            across the various decisions and will always have an equal or larger starting budget, but you will also have to
            solve each game under a tighter time limit.<br>

            <br> After you have made all decisions, one decision will be randomly selected. As before,
            &euro;1 will still be deducted for each game for which you give an incorrect answer, or fail to provide an answer within the time limit.
            Your payment in round 5 will then be determined according to the payment option you chose in this decision. <br>

            <br> Please press the "Next" button to proceed to making the decisions.
        </p>
    </div>
    </div>
    </div>



    <input type="hidden"   name="baseline"           id="id_baseline"   />
    <input type="hidden"   name="baper15"           id="id_baper15"   />
    <input type="hidden"   name="baper25"           id="id_baper25"   />
    <input type="hidden"   name="baper60"           id="id_baper60"   />
    <input type="hidden"   name="baper300"           id="id_baper300"   />

{{ form.errors }}


<center>
    {% next_button %}
</center>


{% endblock %}




{% block scripts %}
    <script type="text/javascript">
        var baseline = js_vars.baseline;
        var baper15 = js_vars.baper15;
        var baper25 = js_vars.baper25;
        var baper60 = js_vars.baper60;
        var baper300 = js_vars.baper300;

        document.getElementById('id_baseline').value = baseline;
        document.getElementById('id_baper25').value = baper25;
        document.getElementById('id_baper60').value = baper60;
        document.getElementById('id_baper15').value = baper15;
        document.getElementById('id_baper300').value = baper300;

    </script>
{% endblock %}