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

{% block title %}
  Instruction 2/3: Assessment Task
{% 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"}}'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h4>BASIC SETUP</h4>
<hr>

<p>In this experiment, you will make decision in the Assessment Task.
    In the task, there are 2 boxes, <b>Box L</b> and <b>Box R</b>.
    As shown below, each box contains 10 balls,
    either <span style="color:green">GREEN</span> or <span style="color:orange">ORANGE</span>. </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 id="part2" style="display: none">

<ul>
    <li>
        <p>
            <b>Box L</b> has <span style="color:green;font-weight: bold">7 green balls</span> and <span style="color:orange;font-weight: bold">3 orange balls</span>;

        </p>
    </li>
    <li>
        <p>
             <b>Box R</b> has <span style="color:orange;font-weight: bold">7 orange balls</span> and <span style="color:green;font-weight: bold">3 green balls</span>.

        </p>
    </li>
</ul>





<br>
<div style="margin-left: auto; margin-right: auto;width:100%; text-align: center">
<table class="box-graph">
  <tr>
    <th>Box L</th><th></th>  <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-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>

    <td style="width: 50px;border: none"></td>
<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>
</table>
    <br>
</div>

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

    <h5 style="text-decoration: underline">Sequence of Events</h5>

    <p>
                1. The computer will randomly and secretly pick one of the two boxes. Each box is equally likely to be picked. Thus, <b>Box L</b> has <b>50% of chance</b> be picked, and <b>Box R</b> has <b>50% of chance</b> be picked.

            </p>



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

    <p>
                2. The computer will repeat the following process to randomly select some balls out of the selected box:

            </p>
            <ul>
                <li>
                    <p>
                        <b>Each time</b>, the computer will <b>draw one ball</b> out of the selected box, record its color, and put it back into the box.

                    </p>
                </li>
            </ul>


            <p>
               3. The computer will provide you with the information about the drawn balls.
            </p>

    <hr>
            <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">

    <h4>YOUR TASK</h4>
    <hr>
    <p>Your task is to guess:
  <b>given the information, what is the percentage chance that the selected box is Box L vs Box R?</b>
  </p>
    <hr>

 <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">
<h4>BONUS RULE</h4>
    <hr>








<p>We have carefully chosen the Bonus Rule so that you can secure the <b>largest chance of winning the bonus</b> by reporting the <b>most accurate guess that you think is the true likelihood</b>.
</p>


<p>
  If you are interested, here is the detailed Bonus Rule.
</p>

 <button type="button" class="collapsible">Detailed Bonus Rule</button>
<div class="content">
    <p>
        We now explain, in details, how <u>your guess</u> is used to determine whether you win the $5 bonus:
    </p>
    <ul>
        <li>
           <p>The computer chooses two numbers between 1 and 100, where each number is equally likely, as if rolling two 100-sided dice. These numbers are called <i>Computer Number A</i> and <i>Computer Number B</i>.
        </p>
        </li>
        <li>
            <p>The computer determines whether you win the $5 bonus according to which box was selected. If:
            </p>
            <ul>
                <li>
                    <p><b>The selected box was Box L</b>: You win the $5 bonus if <u>your submitted guess</u> is <b>greater than or equal to either</b> of the two <i>Computer Numbers</i>.
                </p>
                </li>
                <li>
                    <p><b>The selected box was Box R</b>: You win the $5 bonus if <u>your submitted guess</u> is <b>less than either</b> of the two <i>Computer Numbers</i>.
                </p>
                </li>
            </ul>
        </li>
    </ul>

</div>
        <hr>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "submit">Next Page</button>

</div>


</div>

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




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



    <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-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-orange"></div>
      <div id="circle-green"></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>
      <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>
      <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>
      <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>
      <div id="circle-orange"></div><br>
      <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>
      <div id="circle-orange"></div><br>
      <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>
      <div id="circle-orange"></div><br>
      <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>
      <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>
      <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="next7"  onclick="next(7)">Finish the Exercise</button>
        </div>
    </div>



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




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