{% 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;">

    </p>

{% if choice30 == 60 %}
    {% if choice31 == 60 %}
        <div class="table">
            <table style="width:100%; border:none; font-size: 18px;">
                <tr>
                    <p style="text-align: justify; font-size: 18px;">
                        Do you prefer to solve the games with a time limit of <span style="font-weight: bold; "> 60 seconds </span>  per game
                        with a starting budget of <span style="font-weight: bold; "> &pound;10</span> or to solve the games with a time limit of
                        <span style="font-weight: bold; "> 30 seconds </span>  per game with a starting budget of
                        <span style="font-weight: bold; "> &pound;19</span>?
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="choice32" id="100"  value="60"><label for="100"> 60 seconds per game with a starting budget of £10</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="choice32" id="101"  value="30"><label for="101"> 30 seconds per game with a starting budget of £19</label></span></td>
                </tr>

            </table>
        </div>
    {% endif  %}
{% endif  %}


{% if choice26 == 30 %}
    {% if choice25 == 30 %}
        <div class="table">
            <table style="width:100%; border:none; font-size: 18px;">
                <tr>
                    <p style="text-align: justify; font-size: 18px;">
                        Do you prefer to solve the games with a time limit of <span style="font-weight: bold; "> 60 seconds </span>  per game
                        with a starting budget of <span style="font-weight: bold; "> &pound;10</span> or to solve the games with a time limit of
                        <span style="font-weight: bold; "> 30 seconds </span>  per game with a starting budget of
                        <span style="font-weight: bold; "> &pound;11</span>?
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="choice24" id="20" value="60"><label for="20"> 60 seconds per game with a starting budget of £10</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="choice24" id="21" value="30"><label for="21"> 30 seconds per game with a starting budget of £11</label></span></td>
                </tr>

            </table>
        </div>
    {% endif  %}
{% endif  %}

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


    <input type="hidden"   name="choice24"        id="id_choice24"  />
    <input type="hidden"   name="choice32"       id="id_choice32" />


    {{ form.errors }}


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






{% endblock %}




{% block scripts %}
    <script type="text/javascript">
        var choice25 = js_vars.choice25;
        var choice26 = js_vars.choice26;
        var choice30 = js_vars.choice30;
        var choice31 = js_vars.choice31;

        function myFunction() {
            if (choice30==60 && choice31==60) {
                document.getElementById('id_choice24').value = 60;
                if (
                  !$("input[name='choice32']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please select one of the options!";
                   event.preventDefault();
                }
                if (document.getElementById('100').checked == true) {
                    document.getElementById('id_choice32').value = 60;
                }
                if (document.getElementById('101').checked == true) {
                    document.getElementById('id_choice32').value = 30;
                }
            }

            if (choice25==30 && choice26==30) {
                document.getElementById('id_choice32').value = 30;
                if (
                  !$("input[name='choice24']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please select one of the options!";
                   event.preventDefault();
                }

                if (document.getElementById('20').checked == true) {
                    document.getElementById('id_choice24').value = 60;
                }
                if (document.getElementById('21').checked == true) {
                    document.getElementById('id_choice24').value = 30;
                }
            }

        }

    </script>
{% endblock %}