{% 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 about the drawn balls you may receive.
    </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 {{num_rounds}} scenario questions.
    <ul>
    <li>
        <p> If the actual information implemented by the computer <b>MATCHES</b> with any of the {{num_rounds}} 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>
    <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>Test Results</h4>
    <hr>

    <ul>
        <li>
            <p>
                To help you interpret the information about drawn balls, the computer does the following test and shows you the results:
            </p>
        </li>




    </ul>


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

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

<ul>
        <ul>
            <li>
                <p>
                    Given the number of drawn balls, the computer repeats the following procedure in 100 million times:
                </p>
            </li>

            <ul>

            <li>
            <p>
               Each time, the computer first randomly draws a box;
            </p>
        </li>
                <li>
                    <p>
                        then, draws the same number of balls from the box;
                    </p>
                </li>
                <li>
                    <p>
                        next, records the number of <span style="color: orange;font-weight: bold">orange balls</span> in the drawn balls and which box these balls are drawn from.
                    </p>
                </li>

                </ul>
             <li>
                    <p>
                        The test results aggregate all the records, and present them in a histogram.
                    </p>
                </li>
        </ul>
</ul>



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


<div id="part6" style="display: none">
<div style="background-color: #eee;width: 100%">
  <p><u>EXAMPLE:</u> Suppose the information says:</p>


<div style="font-size:20px;text-align: center">

        {{ if example_report == 2}}

        <b>9 balls are drawn</b> out of the selected box of which:<br><br>

    <b>44%</b> are <div style="display: inline-block" id="circle-green"></div> and <b>56%</b> are <div style="display: inline-block" id="circle-orange"></div>.

        {{ elif example_report == 3}}

        <b>9 balls are drawn</b> out of the selected box, among which:<br><br>

        there is <b>1 more</b> <div style="display: inline-block" id="circle-orange"></div>
        than <div style="display: inline-block" id="circle-green"></div>

        {{ elif example_report == 4}}

        <b>4</b> balls are <div style="display: inline-block" id="circle-green"></div> and <b>5</b> balls are <div style="display: inline-block" id="circle-orange"></div>.

        {{ elif example_report == 5 }}

  <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-green"></div>
  <div style="display: inline-block" id="circle-orange"></div>
  <div style="display: inline-block" id="circle-orange"></div>

        {{ endif }}
    <br><br>
</div>

    </div>






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

</div>

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

    <div style="background-color: #eee;margin-top: -10px">
<p>Then, the computer will test this in the following way:</p>

        <ul>

        <li>
            Each time, the computer randomly selects one box, and
                then draws 9 balls from the selected box;</li><br>
            <li> and records how many <div style="display: inline-block" id="circle-orange"></div>
    are drawn, and which box these balls are drawn from.

        </li>



</ul>

<br>


</div>




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

</div>

<div id="part8" style="display: none">
 <div style="background-color: #eee;width: 100%;margin-top: -15px">
     <p>You will see the following histogram that aggregates all the records:</p>

     <div id="example">
         <img src="{{ static 'histogram/9.png' }}" width="80%" />
     </div>
     <div id="point" style="display: none">
         <img src="{{ static 'histogram/9_c.png' }}" width="80%" />
     </div>


</div>

    <br>


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

</div>

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

    <ul>
        <li>
            The histogram is read as follows: the horizontal axis shows each possible number of <span style="color: orange;font-weight: bold">orange balls</span> in the 9 drawn balls, from 0 to 9.

        </li>
       <br>
        <li>
            The height of the bar depicts the number of times that the computer drew that number of <span style="color: orange;font-weight: bold">orange balls</span>, among which:


        </li>
    </ul>


  <div style="text-align: right">

        <button class="otree-btn-next btn btn-primary" type = "button" id="next9" onclick="next(9)">Next</button>
    </div>

</div>

<div id="part10" style="display: none">
          <ul>
          <ul>
                <li>
                    the height of the <span style="color: green">green bar</span> depicts the number of times the computer drew that number of <span style="color: orange;font-weight: bold">orange balls</span> <b>from Box L</b>;
                </li>
                <li>
                    the height of the <span style="color: orange">orange bar</span> depicts the number of times the computer drew that number of <span style="color: orange;font-weight: bold">orange balls</span> <b>from Box R</b>;
                </li>
            </ul>
      </ul>

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

<div id="part11" style="display: none">
 <div style="background-color: #eee;width: 100%">
     <p><u>EXAMPLE (continued):</u> How to use this histogram?</p>

   <p>As the information indicates 5 <span style="color: orange;font-weight: bold">orange balls</span> are selected out of the 9 draws, you can check the test results in the graph:</p>
     <ul>
     <li>
         In about <b>13 million times</b>, the computer drew 5 <span style="color: orange;font-weight: bold">orange balls</span> in 9 draws, of which:
         <ul>
             <li>
                <p>about <b>4 million times</b>, these balls are <b>from Box L</b>;</p>
             </li>
             <li>
                 <p>and about <b>9 million times</b>, these balls are <b>from Box R</b>;</p>
             </li>
         </ul>
     </li>
 </ul>

<div style="text-align: center">
    <button class="otree-btn-next btn btn-primary" type="button" onclick="changeImage()">Check it on the graph!</button>
</div>

 </div>

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

</div>



<div id="part12" 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 and histograms 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;width: 140%;margin-left: -20%">
  <u>Example</u>


      <p>Suppose you see the following information about the balls drawn out of the selected box and test results:</p>

    <div class="info" style="width: 100%">


<div style="font-size:20px;display: inline-block;width: 50%;margin-left: -20%;text-align: center;vertical-align: top;">
        {{ if example_report == 2}}

        <b>9 balls are drawn</b> out of the selected box of which:<br><br>

    <b>44%</b> are <div style="display: inline-block" id="circle-green"></div> and <b>56%</b> are <div style="display: inline-block" id="circle-orange"></div>.

        {{ elif example_report == 3}}

        <b>9 balls are drawn</b> out of the selected box, among which:<br><br>

        there is <b>1 more</b> <div style="display: inline-block" id="circle-orange"></div>
        than <div style="display: inline-block" id="circle-green"></div>

        {{ elif example_report == 4}}

        <b>4</b> balls are <div style="display: inline-block" id="circle-green"></div> and <b>5</b> balls are <div style="display: inline-block" id="circle-orange"></div>.

        {{ elif example_report == 5 }}

  <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-green"></div>
  <div style="display: inline-block" id="circle-orange"></div>
  <div style="display: inline-block" id="circle-orange"></div>

        {{ endif }}



</div>
        <div style="font-size:20px;display: inline-block;width: 50%; margin-right: -20%;text-align: center;vertical-align: top;">

           <u>Test Results</u><br>
 Histogram of numbers of <div style="display: inline-block" id="circle-orange"></div> in 9 draws from Box L VS from Box R:

<img src="{{ static 'histogram/9.png' }}" width="100%" />
        </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="next12"  onclick="next(12)">Finish the Exercise</button>
        </div>
    </div>



</div>




</div>


<div id="part13" 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";
    }

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