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

{% block title %}
  Instruction Task 2 (Page 1/2)
{% 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>

<div style="border: 1px solid #ccc; padding: 20px; background-color: #f0f0f0;">
    <p style="font-size: 20px; text-align: left; line-height: 1.5;">
        In addition to selecting a school, you'll allocate 100 points between two possible outcomes for each school
        in the upcoming round: being accepted or being rejected.
    </p>
</div>
 <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 chances of these results are determined by how you distribute your 100 tokens between the two possible outcomes.
   </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 receiving $110 will be displayed on the screen, and this calculation will be automated,
                based on how you allocate your tokens.</p>
    </li>
    </ul>
    <br><br>
        </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><em>Example</em> </h4>
<hr>
 <p>The following is the interface that you will see in this task.<br>
     By adjusting the slider bar, you can allocate tokens and change
     the probability of receiving $110 on each outcome.
 </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 E$110.
            </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 E$110.
            </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;">
<br><br>
    <p><b>Quick Excercise:</b> To illustrate the process, suppose you are allocating 25 token to 'accepted in school A'<br>
    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">Set token allocation</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 %}