{% extends "global/Page.html" %}

{% block title %}Introduction{% endblock %}
{% block content %}
     <link rel="stylesheet" href="{% static 'style/boxgraph.css' %}">
    <link rel="stylesheet" href="{% static 'style/global_style.css' %}">
    <link rel="stylesheet" href="{% static 'style/slider.css' %}">

<style>
  /* Add some basic styles for the sliders */
  .slider-container {
    display: inline-block;
    vertical-align: top;
    width: 145%; /* Adjust the width as needed */
    text-align: center;
  }
  .slider {
    -webkit-appearance: none;
    width: 50%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  /* Customize the appearance of the slider thumb */
  .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;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  #allocation_box_l {
  margin-top: 10em;
  margin-left:7em;/* Adjust the value as needed */
}
</style>

<style data="after_click" type="text/css"></style>

    <h3>
        Instructions
    </h3>
    <p>
      What decisions do you make in rounds 2 and 8?

    </p>
    <p>
You will be asked to state your beliefs on being accepted at School A and at School B. To state your beliefs, for each school, you allocate 100 tokens between two events, you being accepted there, or rejected.
For example, if you believe that the chance of you being accepted in School A is 60%, then you put 60 tokens in the event “Accepted at School A” and the remaining 40 tokens in the event “Rejected by School A”. Similarly for School B.

Your payoff is either E$110 or E$0. The probabilities of each are determined by your allocations of 100 tokens and the event that happens. Whether the event happens will be determined by choices made in the following round by the six people in your group. The probability of each lottery will be displayed on the screen based on your allocation, so you do not need to calculate it on your own when allocating tokens.

If the realized event is “Accepted by School A”, then your payment is E$110 with probability 1-(1-p)2, where p is the fraction of tokens you put in the event “Accepted by School A”.
If the realized event is “Rejected by School A”, then your payment is E$110 with probability 1-(1-p)2, where p is the fraction of tokens you put in the event “Rejected by School A”.
    </p>
    <p>
If one of these rounds is selected for payment, then you will be paid randomly for one of the two decisions you made in the round.
    </p>
    <p>
Here is an example of what the computer display will look like.
    </p>

<br>

<h4>Please select your token allocation</h4>
<hr>
<p>Do you think you would get a seat in school A if you applied to it?</p>

 <p>By dragging the handle on the slider bar, the <em>more token</em> you allocate to school A, the <em>more likely</em> you think you would get a seat in School A.</p>

     <div name="belief_example" style="border: 1px solid;width: 120%;margin-left: -10%">
<u>Allocation</u>
    <div class="info" style="width: 100%">



</div>

    <div >
      <p style="text-align: center"><b>Do you think you would get a seat in school A if you applied to it?</b></p>
      <p style="text-align: center">Click on the slider bar then drag to assess.</p>
    </div>

     <div style="text-align : center;width:100%;vertical-align: text-top" >
      <div style="text-align : center;display:inline-block;margin: 0;">
        <table class="box-graph">


          <tr>
            <th>
              <p id = "output_text_2" style="visibility: hidden;text-align : center; font-size: 24pt;">
                <b><span id = "output_2a"></span>% </b>
              </p>
            </th>
          </tr>
        </table>
      </div>
 <div style="display: flex; align-items: center; width: 100%;">

<div class="slider-container"  style="margin-top: 5em;">
   <!-- Slider for Box L -->

    <input type="range" id="slider_box_l" name="guess_a" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')" onchange="adjustSliders('box_l')">
   <p id="allocation_box_l">You allocated <span id="output_box_l"></span> token to school A.</p>
    <p style="margin-left: 0em; text-align: center;">If you win the seat in school A, there is <span id="lotteryOutputl"></span> % to win $10.</p>
</div>

<div class="slider-container" style="margin-top: 5em;">
<!-- Slider for Box R -->

    <input type="range" id="slider_box_r" name="guess_b" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_r')" onchange="adjustSliders('box_r')">
    <p id="allocation_box_l">You allocated <span id="output_box_r"></span> token to rejected.</p>
    <p style="margin-left: 0em; text-align: center;">If you get rejected by school A, there is <span id="lotteryOutputr"></span> % to win $10.</p>
</div>
</div>



</div>
      <div style="text-align : center;display:inline-block;margin: 0;">
        <table class="box-graph" >


          <tr>
            <th>
              <p id = "output_text_1" style="visibility: hidden;text-align : center;font-size: 24pt;">
                <b><span id = "output_1a"></span>% </b>
              </p>
            </th>
          </tr>

        </table>

      </div>


    </div>
</div>

    <p>
        You can adjust sliders to determine how many tokens to allocate between “Accepted” and “Rejected”. The probability of each lottery will be displayed based on your slider adjustment.

The outcome of the lotteries will be determined by the draw of a random number between 1 and 100. Each number between, and including, 1 and 100 is equally likely to occur.

In the above example, when you are accepted in school A, we will play the left “accepted” lottery. It pays E$110 if the number drawn is between 1 and <span id="lotteryOutputr1"></span> , and E$0 if the number drawn is between 85 and 100.

When you are rejected in School A, we will play the right “rejected” lottery. It pays E$110 if the number drawn is between 1 and 64, and E$0 if the number drawn is between 65 and 100.

    </p>
    <p>
        How do you get paid? At the end of the experiment session, you will be randomly paid for one of 12 rounds.
    </p>

    <script>
    var slider_box_l = document.getElementById("slider_box_l");
    var slider_box_r = document.getElementById("slider_box_r");
    var output_box_l = document.getElementById("output_box_l");
    var output_box_r = document.getElementById("output_box_r");
    var lotteryOutputl = document.getElementById("lotteryOutputl");
    var lotteryOutputr = document.getElementById("lotteryOutputr");
    var lotteryOutputl1 = document.getElementById("lotteryOutputl1");
    var lotteryOutputr1 = document.getElementById("lotteryOutputr1");

 function updateSliders(changedSlider) {
    var value_box_l = parseInt(slider_box_l.value);
    var value_box_r = parseInt(slider_box_r.value);


// Calculate the difference between the total and the changed slider's value
    var diff = 100 - value_box_l - value_box_r;
// If the Box L slider is changed, update the Box R slider accordingly
    if (changedSlider === 'box_l') {
        slider_box_r.value = value_box_r + diff;
        }

// If the Box R slider is changed, update the Box L slider accordingly
    else if (changedSlider === 'box_r') {
        slider_box_l.value = value_box_l + diff;
        }
// Update the chance values displayed on the page
        output_box_l.textContent = slider_box_l.value;
        output_box_r.textContent = slider_box_r.value;

        var lotteryValuel = Math.pow(parseInt(slider_box_l.value) /100, 2) * 100;
        lotteryOutputl.textContent = Math.round(lotteryValuel,1);
        var lotteryValuer = Math.pow(parseInt(slider_box_r.value) /100, 2) * 100;
        lotteryOutputr.textContent = Math.round(lotteryValuer,1);
        lotteryOutputl1.textContent = Math.round(lotteryValuel,1);
        lotteryOutputr1.textContent = Math.round(lotteryValuer,1);
    }


    show = function(){
      style.innerHTML=" .slider::-webkit-slider-thumb {  width: 25px; height: 25px; }";
      style.innerHTML += ".slider::-moz-range-thumb {width: 25px; height: 25px; }";
      output_text.style.visibility = "visible";
      output_text_1.style.visibility = "visible";
      output_text_2.style.visibility = "visible";
      document.getElementById("finish_button").style.visibility="visible";
    }




  function next(x){
      document.getElementById("next"+x).style.display = "none";
      document.getElementById("part"+(x+1)).style.display = "block";
  }

  var coll = document.getElementsByClassName("collapsible")
  var i;

  for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function () {
          this.classList.toggle("active");
          var content = this.nextElementSibling;
          if (content.style.display == "block") {
              content.style.display = "none";
          } else {
              content.style.display = "block";
          }

      });
  }


    show2=function (){
        document.getElementById("next8").style.visibility="visible";
    }



    slider_1.oninput = function() {
      output_1.innerHTML = this.value;
      output_2.innerHTML = 100-this.value;
      output_1a.innerHTML = this.value;
      output_2a.innerHTML = 100-this.value;
    }





</script>

    {% next_button %}
{% endblock %}