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


{% block title %}  Instruction 3/3: Scenarios {% 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 {
    -webkit-appearance: none;
    width: 100%;
    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);
  }
</style>
<style data="after_click" type="text/css"></style>


<br>

<h4>Please select your token allocation</h4>
<hr>
<p>Here is an example of scenario question.</p>

 <p>By dragging the handle on the slider bar, the <em>more token</em> you allocate to one school choice, 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>Example</u>
    <div class="info" style="width: 100%">
        <div style="text-align: center">
                    Suppose you are player 1, if you believe you would win the seat school A for 80% and school B for 20 %. Then you should allocate in the following way<br><br>

        </div>


</div>

    <div >
      <p style="text-align: center"><b>What is the percentage chance that the selected box is Box L vs Box R?</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_a" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')" onchange="adjustSliders('box_l')">
    <p>You allocated <span id="output_box_l"></span> token to school A.</p>
    <p>You allocated <span id="output_box_l1"></span> token to school A.</p>
</div>

<!-- Slider for Box R -->
<div style="margin-right: 20px;">
    <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>There is <span id="output_box_r"></span>% chance that you believeBox R was selected.</p>
</div>

<!-- Slider for Box M (set to 10% by default) -->
<div>
    <input type="range" id="slider_box_m" name="guess_n" min="0" max="100" step="1" class="slider" value="10" oninput="updateSliders('box_m')">
    <p>There is <span id="output_box_m">10</span>% chance that Box M was selected.</p>
</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");

 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 scale factor to maintain the sum at 100 - Box M value
    var scaleFactor = remainingPercentage / totalSumLR;

    // Calculate the new slider values based on the scale factor
    var new_value_box_l = Math.floor(scaleFactor * parseInt(slider_box_l.value));
    var new_value_box_r = Math.floor(scaleFactor * parseInt(slider_box_r.value));

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

    // Set the slider values within the defined range
    slider_box_l.value = Math.min(new_value_box_l, slider_range);
    slider_box_r.value = Math.min(new_value_box_r, slider_range);

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




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

    show_quiz = function(){
      style.innerHTML=" .slider::-webkit-slider-thumb {  width: 25px; height: 25px; }";
      style.innerHTML += ".slider::-moz-range-thumb {width: 25px; height: 25px; }";
      output_text_quiz.style.visibility = "visible";
    }

    function changeImage(){
        if (document.getElementById("example").style.display == "block"){
            document.getElementById("example").style.display = "none";
            document.getElementById("point").style.display = "block";
        } else {
            document.getElementById("example").style.display = "block";
            document.getElementById("point").style.display = "none";
        }



    }


    check_quiz = function(){
        var radio1 = document.querySelector('input[name="quiz1"]:checked');
        var radio2 = document.querySelector('input[name="quiz2"]:checked');
        var radio3 = document.querySelector('input[name="quiz3"]:checked');
        if(radio1==null){
          alert("Please answer question 1!");
        }else if(radio2==null){
          alert("Please answer question 2!");
        }else if(radio3==null){
          alert("Please answer question 3!");
        }
        else{
          var answer1 = radio1.value;
          var answer2 = radio2.value;
          var answer3 = radio3.value;
          if (answer1!=1|answer2!=5|answer3!=3){
              alert("Please check your answers!");
          }else{
              alert("Correct!")
              $('.quiz').attr('disabled', true);
              document.getElementById("button_check").style.visibility="hidden";
              document.getElementById("next_part").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";
          }

      });
  }


</script>




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

    {% include Constants.instructions_template %}

{% endblock %}