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

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

        <div style="display: inline-block;width: 60%;margin-right: -10%">
                    You are student {{ player.id_in_group }}
                    You and other students' score distribution is the following:

                    <img  src="{{ static 'histogram/student-1.png' }}" width="90%"/>
        </div>

<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 B if you apply to school B?</p>

 <p>By dragging the handle on the slider bar, the <em>more token</em> you allocate to school B, the <em>more likely</em>
     you think you would win the seat if you applied to School B.</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 B 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%;">

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

    <input type="range" id="slider_box_l" name="guess_b" 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_bm" 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 B, 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");

 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);
    }





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