{% 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>
  td{
    width:15%
  }

/* Sliders */
    .input-group {
        text-align: center;
    }

    .slidecontainer {
      width: 400px;
      text-align: center;
    }

    .collapsible {
        background-color: #eee;
        color: black;
        cursor: pointer;
        padding: 20px 0;
        border: none;
        text-align: center;
        outline: none;
        font-size: 15px;
        text-decoration: none;
    }
    .active, .collapsible:hover {
        background-color: white;
    }

    .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #f1f1f1;
    }

    .info {
        margin: 5px auto;
        width:90%;
        background-color: #eee;
        padding: 20px 0;
        text-align: center
    }
    .slidecontainer {
    width: 100%;
  }

    .slider {
      -webkit-appearance: none;
      width: 80%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 1;
    }
    
    .slider::-webkit-slider-thumb {
      width: 0px;
      height: 0px;
    }
    
    .slider::-moz-range-thumb {
      width: 0px;
      height: 0px;
    }

</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>
        Each round is a scenario question of the Assessment Task which shows the potential information you may receive about the drawn balls.
    </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>
        At the end of the experiment, we will check whether the actual information implemented by the computer matches with any of the 36 scenario questions.
    <ul>
    <li>
        <p> If the actual information implemented by the computer <b>MATCHES</b> with any of the 36 scenario questions, your answer in that scenario question will be <u>automatically</u> used as your guess in the Assessment Task to determines your bonus based on the Bonus Rule.
    </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>If it does <b>NOT MATCH</b>, you will have to submit your guess <u>manually</u> in the Assessment Task, which determines your bonus based on the Bonus Rule.
    </p>
    </li>
    </ul>

    <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.</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;">
  <u>Example</u>
    <div class="info">
  <p>Suppose the following is the information about the drawn balls out of the selected box:</p>

  <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>
    <div >
      <p style="text-align: center"><b>Given the info, 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%">
        <input type="range" id="slider_1" name="belief" min="0" max="100" step="1" class="slider" onclick="show()" value=NaN>
        <p id = "output_text" style="visibility: hidden;text-align : center">
          <b>There is <span id = "output_2"></span>% chance that Box L was selected. </b><br>
          <b>There is <span id = "output_1"></span>% chance that Box R was selected. </b>

        </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="next4"  onclick="next(4)">Finish the Exercise</button>
        </div>
    </div>



</div>



</div>


<div id="part5" style="display: none;">
    <p style="color: red">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_1 = document.getElementById("slider_1");
    var output_1 = document.getElementById("output_1");
    var output_2 = document.getElementById("output_2");
    var output_1a = document.getElementById("output_1a");
    var output_2a = document.getElementById("output_2a");
    var style = document.querySelector('[data="after_click"]');
    output_1.innerHTML = slider_1.value;
    output_1a.innerHTML = slider_1.value;
    output_2.innerHTML = 100-slider_1.value;
    output_2a.innerHTML = 100-slider_1.value;
    
    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");


    show = function(){
      style.innerHTML=" .slider::-webkit-slider-thumb {  width: 25px; height: 25px; }";
      style.innerHTML += ".slider::-moz-range-thumb {width: 25px; height: 25px; }";
      output_text.style.visibility = "visible";
      output_text_1.style.visibility = "visible";
      output_text_2.style.visibility = "visible";
      document.getElementById("finish_button").style.visibility="visible";
    }

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


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

      });
  }


</script>


{% endblock %}