{% 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;
        }
    </style>

{% endblock %}


{% block content %}

    <h1>Round 5 of 5</h1>

    <p style="text-align: justify; font-size: 18px; width:110%;">
        <br> In this decision, you are asked to choose between two competition schemes. In the competition, 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 choose whether you want to compete with a time limit of 60 seconds against another participant
             who also performed under a time limit of 60 seconds or compete with a time limit of 15 seconds against another
             participant who also performed under a time limit of 15 seconds. <br>



    </p>





<div class="table">

        <table style="width:110%; border:none; font-size: 18px;">
            <tr>
                <td><input type="radio" name="choice34" id="10" value="60"><label> Compete with a time limit of 60 seconds per game</label></td>
                <td><input type="radio" name="choice34" id="11" value="15"><label> Compete with a time limit of 15 seconds per game</label></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 %}