{% extends "global/Page.html" %}
{% load otree static %}

{% block scripts %}

<script src="{% static 'js/Instruction1.js' %}"></script>

{% endblock %}
<style>
    p{
        font-size: 22px;
    }
    .otree-body {
        max-width:1100px
    }
    .center {
        margin: 0px 40% 0px 40%;
    }
    .otree-title {
        display: none
    }
</style>
<style>
    .checkboxgroup {
    display: inline-block;
    text-align: center;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 17px;
        width: 17px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 14px
    }
    .div1 {
      float: left;
      text-align: left;
    }

    .div2 {
      float:right;
      text-align: right;
    }
    .main {
      width:90%
    }
</style>
<style>
    .next {
        float: right;
        margin: 40px auto;
    }
     .back{
        float: left;
        margin: 40px auto;
        }
    .nav {
        visibility: hidden;
    }
    p {
      font-size: 22px;
    }
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
</style>
<style>
    /* Create two equal columns that floats next to each other */
    .column-left {
      float: left;
      width: 28%;
      padding: 10px;
      border: 1px solid;
      border-radius: 10px;
      border-color:  #f8e0b1;
    }
    .column-right {
      float: right;
      width: 60%;
      margin: 0% 0% 0% 5%;
      padding: 5px;
      border: 1px solid;
      border-radius: 10px;
      border-color: #add38d;
    }
    .column-right1 {
      float: left;
      width: 25%;
      line-height: 1.4;
      border: none;
      padding: 15px;
    }
    .column-right2 {
      float: left;
      width: 35%;
      border: none;
      line-height: 1.33;
      padding: 15px;
    }
</style>
<style>
    ul.source, ul.target {
      min-height: 50px;
      margin: 0px 25px 10px 0px;
      padding: 1px;
      border-width: 0px;
      border-style: solid;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      list-style-type: none;
      list-style-position: inside;
    }
    ul.source {
      border-color: #f8e0b1;
    }
    ul.target {
      border-color: #add38d;
      border-width: 1px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 10px;
      margin: 0px 0px 0px -25px;
    }
    .source li, .target li {
      margin: 5px;
      padding: 5px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .source li {
      background-color: #fcf8e3;
      border: none;
      color: #c09853;
    }
    .target li {
      background-color: #ebf5e6;
      border: none;
      color: #468847;
    }
    .sortable-dragging {
      border-color: #ccc !important;
      background-color: #fafafa !important;
      color: #bbb !important;
    }
    .sortable-placeholder {
      height: 40px;
    }
    .source .sortable-placeholder {
      border: 2px dashed #f8e0b1 !important;
      background-color: #fefcf5 !important;
    }
    .target .sortable-placeholder {
      border: 2px dashed #add38d !important;
      background-color: #f6fbf4 !important;
    }
</style>
<style>
  ul {
    list-style-type: none;
  }
</style>
<style>
    .table {
        text-align: right;
        border: none;
        border-collapse: collapse;
    }
    td {
        border: none;
    }
</style>
{% block content %}

<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">
  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>
</ul>

<!-- Tab content -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
        <br>
        <br>
        <h2>Part 3 - Instructions (Page 1 of 2)</h2>
        <br>
        <p>
        <b>You now have the opportunity to learn the performance of another participant.</b>
        </p>
        <p>
          Specifically, you will have the option to receive information about the performance of another
          participant from one of the 10 intervals below.
        </p>
        <p>
            The green button reflects your selection in Part 2. This is where you think your performance is ranked among
            other participants (university students) who participated in this task.
        </p>
        <div class="main">
            <div class="div1"><i>Bottom performers</i></div>
            <div class="div2"><i>Top performers</i></div>
        </div>
        <br>
        <div id="checkboxes">
                <script>
        let prep = js_vars.rel_belief;
        if (prep == 1) {
            $(document).ready(function(){
            $("#label1").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 2) {
            $(document).ready(function(){
            $("#label2").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 3) {
            $(document).ready(function(){
            $("#label3").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 4) {
            $(document).ready(function(){
            $("#label4").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 5) {
            $(document).ready(function(){
            $("#label5").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 6) {
            $(document).ready(function(){
            $("#label6").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 7) {
            $(document).ready(function(){
            $("#label7").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 8) {
            $(document).ready(function(){
            $("#label8").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 9) {
            $(document).ready(function(){
            $("#label9").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
        else if (prep == 10) {
            $(document).ready(function(){
            $("#label10").removeClass("btn-outline-dark").addClass("btn-success");
        });
        }
    </script>

          <div class="checkboxgroup">
            <button id="label1" class="btn btn-outline-dark"  disabled>0-10%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label2" class="btn btn-outline-dark" disabled>10-20%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label3" class="btn btn-outline-dark" disabled>20-30%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label4" class="btn btn-outline-dark" disabled>30-40%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label5" class="btn btn-outline-dark" disabled>40-50%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label6" class="btn btn-outline-dark" disabled>50-60%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label7" class="btn btn-outline-dark" disabled>60-70%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label8" class="btn btn-outline-dark" disabled>70-80%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label9" class="btn btn-outline-dark" disabled>80-90%</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
            <button id="label10" class="btn btn-outline-dark" disabled>90-100%</button>
          </div>
        </div>
        <br>
        <p>
          You will be given a chance to rank your preferences over the 10 intervals.
        </p>
        <p>
            There will also be a "No information" option. Choosing "No information" means
                you prefer not to receive any information about the performance of others.
        </p>
        <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>

  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">
        <br>
        <br>
        <h2>Part 3 - Instructions (Page 2 of 2)</h2>
        <br>
        <p>
          You will be asked to indicate your preferences in a table similar to the one shown below.
        </p>
        <p>
            The list on the left includes the 10 intervals and the "No information" option.
        </p>
        <p>
            You will need to drag and drop each option to the table on the right ("Your preference list").
             Please make sure your preference list states your <b>most preferred option first</b> and your <b>least preferred option last</b>.
        </p>
        <p>
            Note that the 90-100% interval represents the top-performing participants,
            while the 0-10% interval represents the bottom-performing participants.
        </p>
        <br>
        <div class="row">
  <div  class="column-left">
    <h5 style="margin: 0px 50px 0px 15px;">List of options</h5>
        <ul id=source class="source connected">
          <li id="1">90-100% (Top performers)</li>
            <input type="hidden" name="Pref1" id="Pref1" />
          <li id="2">80-90%</li>
            <input type="hidden" name="Pref2" id="Pref2" />
          <li id="3">70-80%</li>
            <input type="hidden" name="Pref3" id="Pref3" />
          <li id="4">60-70%</li>
            <input type="hidden" name="Pref4" id="Pref4" />
          <li id="5">50-60%</li>
            <input type="hidden" name="Pref5" id="Pref5" />
          <li id="6">40-50%</li>
            <input type="hidden" name="Pref6" id="Pref6" />
          <li id="7">30-40%</li>
            <input type="hidden" name="Pref7" id="Pref7" />
          <li id="8">20-30%</li>
            <input type="hidden" name="Pref8" id="Pref8" />
          <li id="9">10-20%</li>
            <input type="hidden" name="Pref9" id="Pref9" />
          <li id="10">0-10% (Bottom performers)</li>
            <input type="hidden" name="Pref10" id="Pref10" />
           <li id="0">No information</li>
            <input type="hidden" name="Pref11" id="Pref11" />
        </ul>
  </div>

  <div class="column-right">
      <h5 style="margin: 0px 50px 0px 160px;">Your preference list</h5>
        <div class="column-right1">
             <table class="table">
                <tr>
                    <td>1st Preference:</td>
                </tr>
                <tr>
                    <td>2nd Preference:</td>
                </tr>
                <tr>
                    <td>3rd Preference:</td>
                </tr>
                <tr>
                    <td>4th Preference:</td>
                </tr>
                <tr>
                    <td>5th Preference:</td>
                </tr>
                <tr>
                    <td>6th Preference:</td>
                </tr>
                <tr>
                    <td>7th Preference:</td>
                </tr>
                <tr>
                    <td>8th Preference:</td>
                </tr>
                <tr>
                    <td>9th Preference:</td>
                </tr>
                <tr>
                    <td>10th Preference:</td>
                </tr>
                <tr>
                    <td>11th Preference:</td>
                </tr>
            </table>
        </div>

        <div id="preferencerank" class="column-right2">
            <ul class="target connected">
            </ul>
        </div>
  </div>
</div>
        <br>
        {{formfields}}
        <p>
            Please click the "Next" button when you are ready to state your preferences.
        </p>
        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
        <button class="nexttab btn-primary btn next">Next</button>
  </div>
</div>


{% endblock %}