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

        .radiobutton input[type="radio"]{
            margin-right:8px;
        }

    </style>

{% endblock %}


{% block content %}

    <h1>Questionnaire Page 4/4</h1>

    <p style="text-align: justify; font-size: 18px;">
        <br> How well do the following statements describe your personality?
    </p>

    <div class="table">
            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 20 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who is talkative.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="11" value="Strongly Disagree"><label for="11">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="21" value="Disagree"><label for="21">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="31" value="Slightly Disagree"><label for="31">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="41" value="Neutral"><label for="41">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="51" value="Slightly Agree"><label for="51">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="61" value="Agree"><label for="61">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h4" id="71" value="Strongly Agree"><label for="71">Strongly Agree</label></span></td>

                </tr>

            </table>


            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 21 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who values artistic, aesthetic experiences.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="12" value="Strongly Disagree"><label for="12">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="22" value="Disagree"><label for="22">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="32" value="Slightly Disagree"><label for="32">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="42" value="Neutral"><label for="42">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="52" value="Slightly Agree"><label for="52">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="62" value="Agree"><label for="62">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h8" id="72" value="Strongly Agree"><label for="72">Strongly Agree</label></span></td>

                </tr>

            </table>
            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 22 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who has a forgiving nature.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="13" value="Strongly Disagree"><label for="13">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="23" value="Disagree"><label for="23">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="33" value="Slightly Disagree"><label for="33">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="43" value="Neutral"><label for="43">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="53" value="Slightly Agree"><label for="53">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="63" value="Agree"><label for="63">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h11" id="73" value="Strongly Agree"><label for="73">Strongly Agree</label></span></td>

                </tr>

            </table>
            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 23 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I constantly check my phone while studying.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="17" value="Strongly Disagree"><label for="17">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="27" value="Disagree"><label for="27">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="37" value="Slightly Disagree"><label for="37">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="47" value="Neutral"><label for="47">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="57" value="Slightly Agree"><label for="57">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="67" value="Agree"><label for="67">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h26" id="77" value="Strongly Agree"><label for="77">Strongly Agree</label></span></td>

                </tr>

            </table>

            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 24 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who tends to be lazy.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="14" value="Strongly Disagree"><label for="14">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="24" value="Disagree"><label for="24">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="34" value="Slightly Disagree"><label for="34">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="44" value="Neutral"><label for="44">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="54" value="Slightly Agree"><label for="54">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="64" value="Agree"><label for="64">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h14" id="74" value="Strongly Agree"><label for="74">Strongly Agree</label></span></td>

                </tr>

            </table>
            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 25 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who does things efficiently.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="15" value="Strongly Disagree"><label for="15">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="25" value="Disagree"><label for="25">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="35" value="Slightly Disagree"><label for="35">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="45" value="Neutral"><label for="45">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="55" value="Slightly Agree"><label for="55">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="65" value="Agree"><label for="65">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h15" id="75" value="Strongly Agree"><label for="75">Strongly Agree</label></span></td>

                </tr>

            </table>
            <br>

            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 26 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I see myself as someone who is willing to take risks.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="16" value="Strongly Disagree"><label for="16">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="26" value="Disagree"><label for="26">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="36" value="Slightly Disagree"><label for="36">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="46" value="Neutral"><label for="46">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="56" value="Slightly Agree"><label for="56">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="66" value="Agree"><label for="66">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h19" id="76" value="Strongly Agree"><label for="76">Strongly Agree</label></span></td>

                </tr>

            </table>

            <br>
            <table style="width:108%; border:none; font-size: 18px;">
                <tr>
                    <p style="font-weight: bold; font-size:18px; ">Question 27 </p>
                    <p style="text-align: justify; font-size: 18px;">
                        I am easily distracted.
                    </p>
                </tr>
                <tr>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="18" value="Strongly Disagree"><label for="18">Strongly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="28" value="Disagree"><label for="28">Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="38" value="Slightly Disagree"><label for="38">Slightly Disagree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="48" value="Neutral"><label for="48">Neutral</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="58" value="Slightly Agree"><label for="58">Slightly Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="68" value="Agree"><label for="68">Agree</label></span></td>
                    <td><span class="radiobutton"><input type="radio" name="h27" id="78" value="Strongly Agree"><label for="78">Strongly Agree</label></span></td>

                </tr>

            </table>


        <br>
    </div>

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



    <br>
    <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='h4']:checked").val()| !$("input[name='h8']:checked").val()|
                  !$("input[name='h11']:checked").val()| !$("input[name='h14']:checked").val()|
                  !$("input[name='h15']:checked").val()| !$("input[name='h19']:checked").val()|
                  !$("input[name='h26']:checked").val()| !$("input[name='h27']:checked").val()){
                   document.getElementById('abc').innerHTML = "Please make sure that you answer all the questions!";
                   event.preventDefault();
              }
        }



    </script>
{% endblock %}