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

{% block scripts %}

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

{% endblock %}


{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-body {
        max-width:1100px;
    }
    .otree-title {
        display: none
    }
</style>
<style>
    .center {
      margin: 0% 10% 0% 10%;
      width: 100%;
    }
    .checkboxgroup {
    display: inline-block;
    text-align: left;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 20px;
        width: 20px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 16px;
      cursor: not-allowed;
      pointer-events: none;
    }
</style>
<style>
    .next {
        float: right;
    }
     .back{
        float: left;
        margin: 40px auto;
        }
    .nav {
        visibility: hidden;
    }
    p {
      font-size: 22px;
    }
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
</style>
<style>
    img.displayed {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
</style>
<style>
  .slidecontainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
    }
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    .slider:hover {
      opacity: 1;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    .vranger {
       margin-top: 50px;
       transform: rotate(270deg);
      -moz-transform: rotate(270deg); /*do same for other browsers if required*/
    }
</style>
<style>
/* The checkcontainer */
    .checkcontainer {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-top: 3px;
      margin-bottom: 0px;
      cursor: pointer;
      font-size: 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    /* Hide the browser's default checkbox */
    .checkcontainer input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 15px;
      width: 15px;
      background-color: #eee;
    }
    /* On mouse-over, add a grey background color */
    .checkcontainer:hover input ~ .checkmark {
      background-color: #ccc;
    }
    /* When the checkbox is checked, add a green background */
    .checkcontainer input:checked ~ .checkmark {
      background-color: #4CAF50;
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    /* Show the checkmark when checked */
    .checkcontainer input:checked ~ .checkmark:after {
      display: block;
    }
    /* Style the checkmark/indicator */
    .checkcontainer .checkmark:after {
      left: 5px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
</style>
<style>
    aside  {
      width: 600px;
      height: 550px;
      background: none;
      overflow:auto;
      min-height: 0;
      transition-property: width;
      transition-duration: 0.2s;
      transition-timing-function: linear;
    }
    * {
      box-sizing: border-box;
    }
    /* Create two unequal columns that floats next to each other */
    .column {
      float: left;
      padding: 10px;
    }
    .left {
      width: 40%;
    }
    .right {
      width: 60%;
    }
</style>
<style>
    .table {
        font-size: 15px
    }
    .table td{
        padding: 1px
    }
</style>
<style>
    li{
          margin: 10px 0;
        }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}

<div class="tab">
    <br>
    <br>
    <h2 style="text-align: center;">Part 3 - Instructions (Page 1 of 2)</h2>
    <hr>
    <br>
    {{ if player.participant.treatment == 1 }}
        <p>
            Part 3 is the <b>last part</b> of the experiment. After Part 3, you will be asked to complete a short survey.
        </p>
        <p>
            In Part 3, you will have the chance to see the performance of other participants who did the same task.
        </p>
    {{ else }}
        <p>
            In the next part of the experiment (Part 4), you will be asked to complete another task similar to the one in Part 1.
        </p>
        <p>
            However, before that, you will have the chance to see the performance of other participants who did the same task.
        </p>
    {{ endif }}

    <p>
        Specifically, 100 other participants have been ranked based on their performance into five intervals.
        You can pick one of the following five intervals, and you will be given information about the average performance of participants ranked in that interval.
    </p>
    <center>
        <div>
          <div class="checkboxgroup">
              <button type="button" class="btn btn-success">Rank 1-20 <br> (top performance)</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
               <button type="button" class="btn btn-success">Rank 21-40 <br> (above average)</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
               <button type="button" class="btn btn-success">Rank 41-60 <br> (average performance)</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
              <button type="button" class="btn btn-success">Rank 61-80  <br> (below average)</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="checkboxgroup">
              <button type="button" class="btn btn-success">Rank 81-100 <br> (bottom performance)</button>
          </div>    &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </center>
    <br>
    <p>
        You will be asked to state how much you are willing to pay for this information.
<!--        You will be provided with {{Constants.WTP_endowment}} ECU to pay for it.-->
    </p>
    <br><br>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1" style="float: right">Next</button>
    </p>
</div>

<div class="tab">
    <br>
    <br>
    <h2 style="text-align: center;">Part 3 - Instructions (Page 2 of 2)</h2>
    <hr>
    <br>
    <p>
        Specifically, for the interval you have chosen, <b>please tell us the highest amount (between 0 and 100 ECU) you would be willing
        to pay to receive the information</b>. This amount indicates the value of the information to you.
        For example, if the information is worth 50 ECU to you, then you should be prepared to pay up to 50 ECU but not more than that.
    </p>
    <p>
        After you make your decision, the computer will randomly draw a price between 0 ECU and {{Constants.WTP_endowment}} ECU.
    </p>
    <p>
        If you say that you are willing to pay up to 50 ECU and the computer draws a price of 60 ECU,
        then you will not receive the information because this price exceeds your value for the information.
        But if the computer draws a price of 40 ECU, then you will receive the information and pay 40 ECU for it.
    </p>
    <br><br>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1" style="float: left;">Previous</button>
        <button class="btn btn-primary" style="float: right;">Next</button>
    </p>
</div>

<script>
    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{% endblock %}