{% 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> You are asked to <span style="font-weight: bold; "> choose the time limit </span> for your competition. The first decision
             is to choose between a time limit of 15 seconds and a time limit of 25 seconds. If you choose a time limit of
             <span style="font-weight: bold; ">15 seconds </span> per game, you will compete against the performance of a randomly selected other participant
             who also performed with a time limit of 15 seconds per game. If you choose a time limit of <span style="font-weight: bold; ">25 seconds</span> per game,
             you will compete against the performance of a randomly selected other participant who also performed with a time limit of 25 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="15"><label for="10"> Compete with a time limit of 15 seconds per game</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="choice34" id="11" value="25"><label for="11"> Compete with a time limit of 25 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 %}