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

  /* 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;
  }
</style>
<style data="after_click" type="text/css"></style>


<br>

<h4>EXAMPLE</h4>
<hr>
<p>Here is an example of scenario question.</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;width: 120%;margin-left: -10%">
<u>Example</u>
    <div class="info" style="width: 100%">
        <div style="display: inline-block;width: 40%;text-align: center;vertical-align: top;margin-left: -10%">
                    Suppose you see the following information about the set of balls drawn out of the selected box.
                    <br><br>
            <div style="display: inline-block" id="circle-green"></div>
            <div style="display: inline-block" id="circle-orange"></div>
            <div style="display: inline-block" id="circle-orange"></div>
            <div style="display: inline-block" id="circle-green"></div>
            <div style="display: inline-block" id="circle-orange"></div>
            <div style="display: inline-block" id="circle-green"></div>
            <div style="display: inline-block" id="circle-orange"></div>
            <div style="display: inline-block" id="circle-orange"></div>
            <div style="display: inline-block" id="circle-orange"></div>
        </div>

        <div style="display: inline-block;width: 60%;margin-right: -10%">
                    Possible fraction of <div style="display: inline-block" id="circle-orange"></div> among the number of draws out of Box L VS Box R

                    <img  src="{{ static 'histogram/9.png' }}" width="90%"/>
        </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>Box L</th>
          </tr>
          <tr>
                <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div><br>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
    </td>
          </tr>
          <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:inline-block;width:60%">
<!-- Slider for Box L -->
<input type="range" id="slider_box_l" name="belief_box_l" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')" onchange="adjustSliders('box_l')">
<p>There is <span id="output_box_l"></span>% chance that Box L was selected.</p>

<!-- Slider for Box R -->
<input type="range" id="slider_box_r" name="belief_box_r" 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 Box R was selected.</p>

<!-- Slider for Box M (set to 10% by default) -->
<input type="range" id="slider_box_m" name="belief_box_m" 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 style="text-align : center;display:inline-block;margin: 0;">
        <table class="box-graph" >
          <tr>
            <th>Box R</th>
          </tr>
          <tr>
    <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div><br>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>


    </td>
          </tr>
          <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 id="finish_button" style="visibility: hidden;text-align: right">
            <button type="button" class="otree-btn-next btn btn-outline-primary" id="next9"  onclick="next(9)">Finish the Exercise</button>
        </div>
    </div>
</div>


    <div id="part10" style="display: none;">
    <p style="color: #ff0000">Once you click the next button, the comprehension check questions will start.
    </p>

<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "submit">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 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;

        // Update the values of Box L and Box R sliders based on the scale factor
        slider_box_l.value = Math.floor(scaleFactor * parseInt(slider_box_l.value));
        slider_box_r.value = Math.floor(scaleFactor * parseInt(slider_box_r.value));

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

    function adjustSliders(changedSlider) {
        var totalSumLR = parseInt(slider_box_l.value) + parseInt(slider_box_r.value);
        var value_box_m = parseInt(slider_box_m.value);
        var remainingPercentage = 100 - value_box_m;

        if (changedSlider === 'box_l' && totalSumLR > remainingPercentage) {
            slider_box_r.value = remainingPercentage - parseInt(slider_box_l.value);
        } else if (changedSlider === 'box_r' && totalSumLR > remainingPercentage) {
            slider_box_l.value = remainingPercentage - parseInt(slider_box_r.value);
        }

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

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