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

        td.column {
          float: none;
          width: 50%;
          text-align: left;
        }

        .radiobutton input[type="radio"]:disabled{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            border: 1px solid #cccccc;
            margin-right: 8px;
            position: relative;
            top: 4px;
        }

        .radiobutton input[type="radio"]:checked {
          border: 4px solid #8c8c8c;
        }

    </style>

{% endblock %}


{% block content %}

    <h1>Round 4 of 4</h1>


        <div class="card bg-light m-3">
            <div class="card-body">
                <div class="justify">

                    <p id="def" style="color: black; text-align: justify; font-size: 18px; font-weight: bold;"></p>

                </div>
            </div>
        </div>


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

        {% if choice6_1 == 0 %}

        <br> On the previous page, you chose between Interruptions
             and Sequential with 5 points deducted. We will now ask you to make the
             same choice for different point deductions. <br>

        <br> You will note that some of the choices have already been filled out for you.
             This is because on the previous page you chose Interruptions
             over Sequential with 5 points deducted.
             We therefore assume that you would still prefer Interruptions
             over Sequential with a deduction if more than 5 points will be deducted. <br>

        <br> Please make your choice for the remaining point deductions below. <br>
        {% endif  %}


        {% if choice6_1 == 1 %}

        <br> On the previous page, you chose between Interruptions
             and Sequential with 5 points deducted. We will now ask you to make the
             same choice for different point deductions. <br>

        <br> You will note that some of the choices have already been filled out for you.
             This is because on the previous page you chose Sequential with 5 points deducted over Interruptions.
             We therefore assume that you would still prefer Sequential with a deduction if fewer than 5 points will be deducted. <br>

        <br> Please make your choice for the remaining starting budgets below. <br>

        {% endif  %}

    </p>


<div class="table">

        <table style="width:108%; border:none; font-size: 18px;">
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice1_1" id="10" value="0" onclick="myfunction1()"><label for="10"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice1_1" id="11" value="1" onclick="myfunction2()"><label for="11"> Sequential with 0 point deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice2_1" id="20" value="0" onclick="myfunction3()"><label for="20"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice2_1" id="21" value="1" onclick="myfunction4()"><label for="21"> Sequential with 1 point deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice3_1" id="30" value="0" onclick="myfunction5()"><label for="30"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice3_1" id="31" value="1" onclick="myfunction6()"><label for="31"> Sequential with 2 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice4_1" id="40" value="0" onclick="myfunction7()"><label for="40"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice4_1" id="41" value="1" onclick="myfunction8()"><label for="41"> Sequential with 3 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice5_1" id="50" value="0" onclick="myfunction9()"><label for="50"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice5_1" id="51" value="1" onclick="myfunction10()"><label for="51"> Sequential with 4 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice6_1" id="60" value="0" onclick="myfunction11()"><label for="60"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice6_1" id="61" value="1" onclick="myfunction12()"><label for="61"> Sequential with 5 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice7_1" id="70" value="0" onclick="myfunction13()"><label for="70"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice7_1" id="71" value="1" onclick="myfunction14()"><label for="71"> Sequential with 6 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice8_1" id="80" value="0" onclick="myfunction15()"><label for="80"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice8_1" id="81" value="1" onclick="myfunction16()"><label for="81"> Sequential with 7 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice9_1" id="90" value="0" onclick="myfunction17()"><label for="90"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice9_1" id="91" value="1" onclick="myfunction18()"><label for="91"> Sequential with 8 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice10_1" id="100" value="0" onclick="myfunction19()"><label for="100"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice10_1" id="101" value="1" onclick="myfunction20()"><label for="101"> Sequential with 9 points deducted</label></span></td>
            </tr>
            <tr>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice11_1" id="110" value="0" onclick="myfunction21()"><label for="110"> Interruptions</label></span></td>
                <td class="column"><span class="radiobutton"><input type="radio" name="choice11_1" id="111" value="1" onclick="myfunction22()"><label for="111"> Sequential with 10 points deducted</label></span></td>
            </tr>
        </table>
    </div>







    <input type="hidden"   name="choice1_1"                id="id_choice1_1"              />
    <input type="hidden"   name="choice2_1"                id="id_choice2_1"              />
    <input type="hidden"   name="choice3_1"                id="id_choice3_1"              />
    <input type="hidden"   name="choice4_1"                id="id_choice4_1"              />
    <input type="hidden"   name="choice5_1"                id="id_choice5_1"              />
    <input type="hidden"   name="choice7_1"                id="id_choice7_1"              />
    <input type="hidden"   name="choice6_1"                id="id_choice6_1"              />
    <input type="hidden"   name="choice8_1"                id="id_choice8_1"              />
    <input type="hidden"   name="choice9_1"                id="id_choice9_1"              />
    <input type="hidden"   name="choice10_1"                id="id_choice10_1"              />
    <input type="hidden"   name="choice11_1"                id="id_choice11_1"              />
    <input type="hidden"   name="multiple_switching1_1"     id="id_multiple_switching1_1"   />


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


{% endblock %}


{% block scripts %}
    <script type="text/javascript">
        var choice1_1 = js_vars.choice1_1;
        var choice2_1 = js_vars.choice2_1;
        var choice3_1 = js_vars.choice3_1;
        var choice4_1 = js_vars.choice4_1;
        var choice5_1 = js_vars.choice5_1;
        var choice6_1 = js_vars.choice6_1;
        var choice7_1 = js_vars.choice7_1;
        var choice8_1 = js_vars.choice8_1;
        var choice9_1 = js_vars.choice9_1;
        var choice10_1 = js_vars.choice10_1;
        var choice11_1 = js_vars.choice11_1;

        var multi = 0;



        if (choice6_1==0){
            document.getElementById('60').checked = true;
                document.getElementById('70').checked = true;
                document.getElementById('80').checked = true;
                document.getElementById('90').checked = true;
                document.getElementById('100').checked = true;
                document.getElementById('110').checked = true;
                document.getElementById('60').disabled = true;
                document.getElementById('70').disabled = true;
                document.getElementById('80').disabled = true;
                document.getElementById('90').disabled = true;
                document.getElementById('100').disabled = true;
                document.getElementById('110').disabled = true;
                document.getElementById('61').disabled = true;
                document.getElementById('71').disabled = true;
                document.getElementById('81').disabled = true;
                document.getElementById('91').disabled = true;
                document.getElementById('101').disabled = true;
                document.getElementById('111').disabled = true;
                document.getElementById('id_choice7_1').value = 0;
                document.getElementById('id_choice8_1').value = 0;
                document.getElementById('id_choice9_1').value = 0;
                document.getElementById('id_choice10_1').value = 0;
                document.getElementById('id_choice11_1').value = 0;

            if (choice1_1==0){
                    document.getElementById('10').checked = true;
                    document.getElementById('id_choice1_1').value = 0;
            }

            if (choice1_1==1){
                    document.getElementById('11').checked = true;
                    document.getElementById('id_choice1_1').value = 1;
            }

            if (choice2_1==0){
                    document.getElementById('20').checked = true;
                    document.getElementById('id_choice2_1').value = 0;
            }

            if (choice2_1==1){
                    document.getElementById('21').checked = true;
                    document.getElementById('id_choice2_1').value = 1;
            }

            if (choice3_1==0){
                    document.getElementById('30').checked = true;
                    document.getElementById('id_choice3_1').value = 0;
            }

            if (choice3_1==1){
                    document.getElementById('31').checked = true;
                    document.getElementById('id_choice3_1').value = 1;
            }

            if (choice4_1==0){
                    document.getElementById('40').checked = true;
                    document.getElementById('id_choice4_1').value = 0;
            }

            if (choice4_1==1){
                    document.getElementById('41').checked = true;
                    document.getElementById('id_choice4_1').value = 1;
            }

            if (choice5_1==0){
                    document.getElementById('50').checked = true;
                    document.getElementById('id_choice5_1').value = 0;
            }

            if (choice5_1==1){
                    document.getElementById('51').checked = true;
                    document.getElementById('id_choice5_1').value = 1;
            }

            if (document.getElementById('51').checked == true) {
                if (document.getElementById('40').checked == true | document.getElementById('30').checked == true | document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                    document.getElementById('def').innerHTML = "You chose Sequential with 4 points deducted but did not choose this option with a fewer point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                }
            }

            if (document.getElementById('50').checked == true) {
                if (document.getElementById('41').checked == true) {
                    if (document.getElementById('30').checked == true | document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                        document.getElementById('def').innerHTML = "You chose Sequential with 3 points deducted but did not choose this option with a fewer point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                    }
                }
            }

            if (document.getElementById('50').checked == true) {
                if (document.getElementById('40').checked == true) {
                    if (document.getElementById('31').checked == true) {
                        if (document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                            document.getElementById('def').innerHTML = "You chose Sequential with 2 points deducted but did not choose this option with a fewer point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                        }
                    }
                }
            }

            if (document.getElementById('50').checked == true) {
                if (document.getElementById('40').checked == true) {
                    if (document.getElementById('30').checked == true) {
                        if (document.getElementById('21').checked == true) {
                            if (document.getElementById('10').checked == true) {
                                document.getElementById('def').innerHTML = "You chose Sequential with 1 point deducted but did not choose this option with a fewer point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                            }
                        }
                    }
                }
            }

        }


        if (choice6_1==1){
                document.getElementById('11').checked = true;
                document.getElementById('21').checked = true;
                document.getElementById('31').checked = true;
                document.getElementById('41').checked = true;
                document.getElementById('51').checked = true;
                document.getElementById('61').checked = true;
                document.getElementById('11').disabled = true;
                document.getElementById('21').disabled = true;
                document.getElementById('31').disabled = true;
                document.getElementById('41').disabled = true;
                document.getElementById('51').disabled = true;
                document.getElementById('61').disabled = true;
                document.getElementById('10').disabled = true;
                document.getElementById('20').disabled = true;
                document.getElementById('30').disabled = true;
                document.getElementById('40').disabled = true;
                document.getElementById('50').disabled = true;
                document.getElementById('60').disabled = true;
                document.getElementById('id_choice1_1').value = 1;
                document.getElementById('id_choice2_1').value = 1;
                document.getElementById('id_choice3_1').value = 1;
                document.getElementById('id_choice4_1').value = 1;
                document.getElementById('id_choice5_1').value = 1;

                if (choice7_1==0){
                    document.getElementById('70').checked = true;
                    document.getElementById('id_choice7_1').value = 0;
                }

                if (choice7_1==1){
                        document.getElementById('71').checked = true;
                        document.getElementById('id_choice7_1').value = 1;
                }

                if (choice8_1==0){
                        document.getElementById('80').checked = true;
                        document.getElementById('id_choice8_1').value = 0;
                }

                if (choice8_1==1){
                        document.getElementById('81').checked = true;
                        document.getElementById('id_choice8_1').value = 1;
                }

                if (choice9_1==0){
                        document.getElementById('90').checked = true;
                        document.getElementById('id_choice9_1').value = 0;
                }

                if (choice9_1==1){
                        document.getElementById('91').checked = true;
                        document.getElementById('id_choice9_1').value = 1;
                }

                if (choice10_1==0){
                        document.getElementById('100').checked = true;
                        document.getElementById('id_choice10_1').value = 0;
                }

                if (choice10_1==1){
                        document.getElementById('101').checked = true;
                        document.getElementById('id_choice10_1').value = 1;
                }

                if (choice11_1==0){
                        document.getElementById('110').checked = true;
                        document.getElementById('id_choice11_1').value = 0;
                }

                if (choice11_1==1){
                        document.getElementById('111').checked = true;
                        document.getElementById('id_choice11_1').value = 1;
                }

                if (document.getElementById('70').checked == true) {
                      if (document.getElementById('81').checked == true | document.getElementById('91').checked == true | document.getElementById('101').checked == true | document.getElementById('111').checked == true) {
                          document.getElementById('def').innerHTML = "You did not select Sequential with 6 points deducted but did select this option with a higher point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                      }
                }

                if (document.getElementById('71').checked == true) {
                      if (document.getElementById('80').checked == true) {
                          if (document.getElementById('91').checked == true | document.getElementById('101').checked == true | document.getElementById('111').checked == true) {
                              document.getElementById('def').innerHTML = "You did not select Sequential with 7 points deducted but did select this option with a higher point deduction. Please make sure this is really how you would like to decide before pressing Next.";

                          }
                      }
                }

                if (document.getElementById('71').checked == true) {
                      if (document.getElementById('81').checked == true) {
                          if (document.getElementById('90').checked == true) {
                              if (document.getElementById('101').checked == true | document.getElementById('111').checked == true) {
                                  document.getElementById('def').innerHTML = "You did not select Sequential with 8 points deducted but did select this option with a higher point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                              }
                          }
                      }
                }

                if (document.getElementById('71').checked == true) {
                      if (document.getElementById('81').checked == true) {
                          if (document.getElementById('91').checked == true) {
                              if (document.getElementById('100').checked == true) {
                                  if (document.getElementById('111').checked == true) {
                                      document.getElementById('def').innerHTML = "You did not select Sequential with 9 points deducted but did select this option with a higher point deduction. Please make sure this is really how you would like to decide before pressing Next.";
                                  }
                              }
                          }
                      }
                }
        }



        function myFunction() {
              if (choice6_1==0) {

                  if (document.getElementById('51').checked == true) {
                      if (document.getElementById('40').checked == true |document.getElementById('30').checked == true |
                          document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                          multi = 1;
                      }
                  }



                  if (document.getElementById('50').checked == true) {
                      if (document.getElementById('41').checked == true) {
                          if (document.getElementById('30').checked == true |
                              document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                              multi = 1;
                          }
                      }
                  }

                  if (document.getElementById('50').checked == true) {
                      if (document.getElementById('40').checked == true) {
                          if (document.getElementById('31').checked == true) {
                              if (document.getElementById('20').checked == true | document.getElementById('10').checked == true) {
                                  multi = 1;
                              }
                          }
                      }
                  }

                  if (document.getElementById('50').checked == true) {
                      if (document.getElementById('40').checked == true) {
                          if (document.getElementById('30').checked == true) {
                              if (document.getElementById('21').checked == true) {
                                  if (document.getElementById('10').checked == true) {
                                      multi = 1;
                                  }
                              }
                          }
                      }
                  }

                  if (document.getElementById('10').checked == true) {
                    document.getElementById('id_choice1_1').value = 0;
                  }
                  if (document.getElementById('11').checked == true) {
                    document.getElementById('id_choice1_1').value = 1;
                  }

                  if (document.getElementById('20').checked == true) {
                    document.getElementById('id_choice2_1').value = 0;
                  }
                  if (document.getElementById('21').checked == true) {
                    document.getElementById('id_choice2_1').value = 1;
                  }

                  if (document.getElementById('30').checked == true) {
                    document.getElementById('id_choice3_1').value = 0;
                  }
                  if (document.getElementById('31').checked == true) {
                    document.getElementById('id_choice3_1').value = 1;
                  }

                  if (document.getElementById('40').checked == true) {
                    document.getElementById('id_choice4_1').value = 0;
                  }
                  if (document.getElementById('41').checked == true) {
                    document.getElementById('id_choice4_1').value = 1;
                  }

                  if (document.getElementById('50').checked == true) {
                    document.getElementById('id_choice5_1').value = 0;
                  }
                  if (document.getElementById('51').checked == true) {
                    document.getElementById('id_choice5_1').value = 1;
                  }

              }

              if (choice6_1==1) {
                  if (document.getElementById('70').checked == true) {
                        if (document.getElementById('81').checked == true  | document.getElementById('91').checked == true |
                            document.getElementById('101').checked == true | document.getElementById('111').checked == true ) {
                            multi = 1;
                        }
                  }

                  if (document.getElementById('71').checked == true) {
                        if (document.getElementById('80').checked == true) {
                            if (document.getElementById('91').checked == true | document.getElementById('101').checked == true |
                                document.getElementById('111').checked == true) {
                                multi = 1;
                            }
                        }
                  }

                  if (document.getElementById('71').checked == true) {
                        if (document.getElementById('81').checked == true) {
                            if (document.getElementById('90').checked == true) {
                                if (document.getElementById('101').checked == true | document.getElementById('111').checked == true) {
                                    multi = 1;
                                }
                            }
                        }
                  }

                  if (document.getElementById('71').checked == true) {
                        if (document.getElementById('81').checked == true) {
                            if (document.getElementById('91').checked == true) {
                                if (document.getElementById('100').checked == true) {
                                    if (document.getElementById('111').checked == true) {
                                        multi = 1;
                                    }
                                }
                            }
                        }
                  }

                  if (document.getElementById('70').checked == true) {
                    document.getElementById('id_choice7_1').value = 0;
                  }
                  if (document.getElementById('71').checked == true) {
                    document.getElementById('id_choice7_1').value = 1;
                  }

                  if (document.getElementById('80').checked == true) {
                    document.getElementById('id_choice8_1').value = 0;
                  }
                  if (document.getElementById('81').checked == true) {
                    document.getElementById('id_choice8_1').value = 1;
                  }

                  if (document.getElementById('90').checked == true) {
                    document.getElementById('id_choice9_1').value = 0;
                  }
                  if (document.getElementById('91').checked == true) {
                    document.getElementById('id_choice9_1').value = 1;
                  }

                  if (document.getElementById('100').checked == true) {
                    document.getElementById('id_choice10_1').value = 0;
                  }
                  if (document.getElementById('101').checked == true) {
                    document.getElementById('id_choice10_1').value = 1;
                  }

                  if (document.getElementById('110').checked == true) {
                    document.getElementById('id_choice11_1').value = 0;
                  }
                  if (document.getElementById('111').checked == true) {
                    document.getElementById('id_choice11_1').value = 1;
                  }

              }

        document.getElementById('id_multiple_switching1_1').value = multi;
        document.getElementById('id_choice6_1').value = choice6_1;
        }

        document.getElementById('id_multiple_switching1_1').value = multi;
        document.getElementById('id_choice6_1').value = choice6_1;

    </script>
{% endblock %}