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

{% block title %}Guess your chance of winning a seat in school A {% 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>


<br>

<h4>Please select your token allocation</h4>
<hr>
<p>In the next round, how likely do you think you would win a seat in school A if you apply to school A?</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 win the seat if you applied to 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>What is the percentage chance that you would win a school A or get rejected?</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%;">


   <!-- Slider for Box L -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_l" name="guess_ba" 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 indeed win the seat in school A, there are <span id="lotteryOutputl"></span> % to win $10.</p>
</div>


<!-- Slider for Box R -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_r" name="guess_bb" 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 indeed get rejected by school A, there are <span id="lotteryOutputr"></span> % to win $10.</p>
</div>

<!-- Slider for Box M (set to 10% by default) -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_m" name="guess_bm" min="0" max="100" step="1" class="slider" value="10" oninput="updateSliders('box_m')">
    <p id="allocation_box_l">You allocated <span id="output_box_m"></span> token to rejected.</p>
    <p style="margin-left: 0em; text-align: center;">If you indeed get rejected by school A, there are <span id="lotteryOutputm"></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 slider_box_m = document.getElementById("slider_box_m");
var output_box_l = document.getElementById("output_box_l");
var output_box_r = document.getElementById("output_box_r");
var output_box_m = document.getElementById("output_box_m");
var lotteryOutputl = document.getElementById("lotteryOutputl");
var lotteryOutputr = document.getElementById("lotteryOutputr");
var lotteryOutputm = document.getElementById("lotteryOutputm");

function updateSliders(changedSlider) {
     var value_box_m = parseInt(slider_box_m.value);
    var remainingPercentage = 100 - value_box_m;

    // Calculate the total sum of Box L and Box R sliders
    var totalSumLR = parseInt(slider_box_l.value) + parseInt(slider_box_r.value);

    // Calculate the new slider values based on the scale factor
    var new_value_box_l = Math.floor(remainingPercentage -  slider_box_r.value);
        slider_box_l.value = new_value_box_l;
    var new_value_box_r = Math.ceil(remainingPercentage - slider_box_l.value);

    // Define a range for the slider thumb position (e.g., 0 to 99)


    // Set the slider values within the defined range

    slider_box_r.value = new_value_box_r;

    // Update the chance values displayed on the page for all three boxes
    output_box_l.textContent = slider_box_l.value;
    output_box_r.textContent = slider_box_r.value;
    output_box_m.textContent = value_box_m;
    output_box_l1.textContent = slider_box_l.value+100;

        var lotteryValuel = Math.pow(parseInt(slider_box_l.value) /100, 2) * 100;
        lotteryOutputl.textContent = lotteryValuel;
        var lotteryValuer = Math.pow(parseInt(slider_box_r.value) /100, 2) * 100;
        lotteryOutputr.textContent = lotteryValuer;
        var lotteryValuem = Math.pow(parseInt(slider_box_m.value) /100, 2) * 100;
        lotteryOutputm.textContent = lotteryValuem;
    }

// Initialize the sliders and values
updateSliders();

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>


    <p>{% next_button %}</p>



{% endblock %}