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

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

{% block styles %}

    <style type="text/css">
        h1 {text-align: center; font-size: 35px;}
        td {
          border: none !important;
        }
        .radiobutton input[type="radio"]{
            margin-right:8px;
        }
    </style>

{% endblock %}


{% block content %}

    <h1>Round 5 of 5</h1>


    <p style="text-align: justify; font-size: 18px; width:100%;">
        <br> This is the last decision. In this decision, you are asked to choose between two <span style="font-weight: bold; "> competition </span> schemes. If this decision is implemented,
             the total number of games you solve within the time limit will be compared to the performance of another participant who encountered the
             same set of games under the same time limit. If you solve more games within the time limit than the other participant did, you will receive
             a payoff of &pound;10 for this round. If you solve fewer games, you will not receive anything for this round. In case of a tie, you will receive &pound;5. <br>

        <br> You are asked to <span style="font-weight: bold; "> choose the time limit </span> for your competition. If you choose a time limit of
             <span style="font-weight: bold; ">60 seconds </span> per game, you will compete against another participant who also performed under
             a time limit of 60 seconds per game. If you choose a time limit of <span style="font-weight: bold; ">15 seconds</span> per game,
             you will compete against another participant who also performed under a time limit of 15 seconds per game. <br>
    </p>






<div class="table">

        <table style="width:100%; border:none; font-size: 18px;">
            <tr>
                <td><span class="radiobutton"><input type="radio" name="choice34" id="10" value="60"><label for="10"> Compete with a time limit of 60 seconds per game</label></span></td>
                <td><span class="radiobutton"><input type="radio" name="choice34" id="11" value="15"><label for="11"> Compete with a time limit of 15 seconds per game</label></span></td>
            </tr>

        </table>
    </div>



    <p id="abc" style="color: black; text-align: center;"></p>




    <center><button class="otree-btn-next btn btn-primary" onclick="myFunction()">Next</button></center>



{% endblock %}




{% block scripts %}
    <script type="text/javascript">
        function myFunction() {
              if (!$("input[name='choice34']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please select one of the options!";
                   event.preventDefault();
              }
        }


    </script>
{% endblock %}