{% 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-style: hidden!important;
          text-align: center;
        }
        .radiobutton input[type="radio"]{
            margin-right:8px;
        }
    </style>

{% endblock %}


{% block content %}

    <h1>Round 4 of 4</h1>

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

    </p>




<div class="table">
        <table style="width:108%; none !important; font-size: 18px;">
            <tr>
                <p style="text-align: justify; font-size: 18px; width:100%">
                    Do you prefer <span style="text-decoration: underline;">Interruptions</span> or <span style="text-decoration: underline;">Sequential</span>
                    but <span style="font-weight: bold; "> with 5 points </span>  deducted? <br>

                </p>
            </tr>
            <tr>
                <td><span class="radiobutton"><input type="radio" name="choice6" id="60" value="0"><label for="60">Interruptions</label></span></td>
                <td><span class="radiobutton"><input type="radio" name="choice6" id="61" value="1"><label for="61">Sequential with 5 points deducted</label></span></td>
            </tr>

        </table>

<br>


    <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='choice6']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please select one of the options!";
                   event.preventDefault();
              }
        }

    </script>
{% endblock %}