{% 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-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: 5em;
  margin-left:7em;/* Adjust the value as needed */
}

      .label-box {
        background-color: #d3d3d3; /* Shaded background color */
        display: inline-block;
        padding: 4px; /* Adjust the padding as needed */
        border-radius: 4px; /* Adjust the border-radius for rounded corners */
    }

          .value-box {
        background-color: #4CAF50; /* Background color for the number */
        color: white; /* Text color for the number */
        padding: 4px; /* Adjust the padding as needed */
        border-radius: 4px; /* Adjust the border-radius for rounded corners */
    }

</style>
<style data="after_click" type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<br>
<div>

<p>
           In addition to selecting a school, you will also be asked to express your beliefs regarding acceptance to School A and School B.
    To convey your beliefs, you will distribute 100 tokens between two events for each school: your acceptance and rejection.

    </p>
 <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next1" onclick="next(1)">Next</button>
    </div>
</div>

<div id="part2" style="display: none">
    <p>
      Your potential payoff can either be E$110 or E$0.
    <ul>
    <li>
        <p> The probabilities of these outcomes are determined by how you allocate your 100 tokens between these events.
    The actual outcomes will depend on choices made by the six people in your group in the subsequent round.

   </p>
    </li>

</ul>
     <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next2" onclick="next(2)">Next</button>
    </div>
</div>

<div id="part3" style="display: none">
    <ul>
        <li>
            <p>The likelihood of each outcome will be displayed on the screen based on your token allocation, eliminating the need for manual calculations.
    </p>
    </li>
    </ul>
        </p>
    <p>Since anyone could be the actual one, you should treat every scenario question seriously.</p>


    <hr>

 <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next3" onclick="next(3)">Next</button>
    </div>
</div>

<div id="part4" style="display: none">


<h4>EXAMPLE</h4>
<hr>
<p>Here is an example of scenario question to help you get familiar with the interface. The information in the actual tasks may vary.</p>
 <p>By dragging the handle on the slider bar, the <em>closer</em> the handle to one box, the <em>more likely</em> you think the box is selected.</p>


  <div name="belief_example" style="border: 1px solid;">

    <div class="info">

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

    <div style="display: flex; align-items: center; width: 100%;">

        <div class="slider-container" style="margin-top: 5em;">
            <input type="range" id="slider_box_l" name="guess_a" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')">
            <p id="allocation_box_l"><b>Accepted in School A </b><br></p>
              <p id="output_text" style="visibility: hidden; text-align: center; margin-top: 0em; margin-left: 0em;">
               <span style="border: 1px solid #000; padding: 5px;" id="output_box_l"></span> tokens <br><br>
                <b>Lottery outcome :</b><br>If accepted, there is <span id="lotteryOutputl"></span> % to win $10.
            </p>
        </div>

        <div class="slider-container" style="margin-top: 5em;">
            <input type="range" id="slider_box_r" name="guess_b" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_r')">
            <p id="allocation_box_l"><b>Rejected in School A </b><br></p>
            <p id="output_text_1" style="visibility: hidden; text-align: center; margin-top: 0em; margin-left: 0em;">
                <span style="border: 1px solid #000; padding: 5px;" id="output_box_r"></span> tokens <br><br>
                <b>Lottery outcome :</b><br>If rejected, there is <span id="lotteryOutputr"></span> % to win $10.
            </p>
        </div>
    </div>




<div id="finish_button" style="visibility: hidden; text-align: right">
    <button type="button" class="otree-btn-next btn btn-outline-primary" id="finishExerciseButton" onclick="finishExercise()">Finish the Exercise</button>
</div>




</div>



</div>


<div id="part5" style="display: none;">
    <p style="color: red">To illustrate the process, suppose you are allocating 25 token to 'accepted in school A'</p>
    <p style="color: red">Please adjust slider to 25 token allocation to school A and 75 to be rejected. Once you adjust the slider, the next button will show up</p>
    <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" id="next-button">Next Page</button>
    </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");

    var output_text = document.getElementById("output_text");
    var output_text_1 = document.getElementById("output_text_1");
    var output_text_2 = document.getElementById("output_text_2");

     var nextButton = document.getElementById("next-button");



    document.getElementById("finishExerciseButton").addEventListener("click", function() {
        document.getElementById("part5").style.display = "block"; // Show the part5 div
    });

     slider_box_r.addEventListener("input", function() {
        var sliderValueR = parseInt(slider_box_r.value);
        if (sliderValueR == 75) {
            nextButton.style.visibility = "visible";
        } else {
            nextButton.style.visibility = "hidden";
        }
    });

     slider_box_l.addEventListener("input", function() {
        var sliderValueL = parseInt(slider_box_l.value);
        if (sliderValueL == 25) {
            nextButton.style.visibility = "visible";
        } else {
            nextButton.style.visibility = "hidden";
        }
    });




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

    output_text.style.visibility = "visible";
    output_text_1.style.visibility = "visible";
    var finishButton = document.getElementById("finishExerciseButton");
    finishButton.style.visibility = "visible";
// 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);


    }






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


    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 = "inline";
      document.getElementById("part"+(x+1)).scrollIntoView(false)
  }

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

      });
  }

    function finishExercise() {
        var finishButton = document.getElementById("finishExerciseButton");
        finishButton.style.display = "none"; // Hide the button
    }



</script>


{% endblock %}