{% 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>
In addition to school choice task, 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.
     </p>
    <p>
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.
    </p>

    <p>
Here is an example of what the computer display will look like. This is interactive example, so you can actually play with the slider.
    </p>

<br>

<h4>Please select your token allocation</h4>
<hr>
     <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>



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