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

{% block title %}
    Part 2: Instruction
{% 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"}}'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
    .info {
        margin: 5px auto;
        width:90%;
        background-color: #eee;
        padding: 20px 0;
        text-align: center
    }
    .slidecontainer {
    width: 100%;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    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>
    
    show_next = function(){
      document.getElementById("button_next").style.visibility = "hidden";
      document.getElementById("instruction2").style.visibility = "visible";

    }
    show_quiz = function(){
        document.getElementById("quiz").style.visibility = "visible";
        document.getElementById("button_quiz").style.visibility = "hidden";
    }

</script>
<p style="text-align: center;">
  <img src="{% static 'global/path2.png' %}" width="80%"/>
</p>
<p>
    This part includes {{ num_of_questions }} scenario questions. 
    In each scenario question, the computer will present one of the 5 types of Reports that you may receive in the Assessment Task. 
    Then, you will assess the chance that the picked box is Box G vs Box O given the presented Report. 
</p>
<p>
    Below is the sample interface you will see:
</p>

<div id="example_strategy" style="border:solid 1px">
<u>Example</u>
  <div class="info">
  <p>Suppose the following is the information you see from the report.</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-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>
  <div >
    <p style="text-align: center"><b>What is the percentage chance that the picked box is Box G vs Box O?</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%" >
    <div style="text-align : center;display:inline-block;margin: 0;">
      <table class="box-graph">
        <tr>
          <th>Box G</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_1"></span>% chance that Box O was picked. </b><br>
        <b>There is <span id = "output_2"></span>% chance that Box G was picked. </b>
      </p>
    </div>
    <div style="text-align : center;display:inline-block;margin: 0;">
      <table class="box-graph">
        <tr>
          <th>Box O</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>
</div>
<div>
<p id="button_next"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="show_next()" >Continue...</button></p>
</div>


<div id = "instruction2" style = "visibility:hidden">
<hr>
<h3>
If Part 2 is selected for payment...
</h3>

<p>
    At the end of the experiment, if Part 2 is selected for payment, we will let you play the Assessment Task. 
    There is an equal chance that the total number of balls drawn will be either 3, 5, 9, or 15.
    One of the five possible Reports about the drawn balls will be randomly picked and presented to you.
</p>
<ul>
    <li>
        <b>If the information you see in the final Assessment Task has already appeared in one of the {{ num_of_questions }} scenario questions in Part 2 </b><br>
        We will use your answer in that question as your assessment in the Assessment Task. Therefore, it’s in your best interest to answer each scenario question as accurately as possible. Please make sure to answer each scenario question carefully as if they will be realized, because they actually could.
    </li>
    <li>
        <b>If the information you see in the final Assessment Task does NOT match with any of the {{ num_of_questions }} scenario questions</b><br>
        you will have to manually submit your assessment of the chance that the picked box is Box G vs Box O in the Assessment Task. 
        The more accurate your assessment is, the more likely it is that you will receive $10.
    </li>
</ul>
<div>
  <p id="button_quiz"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="show_quiz()" >Continue...</button></p>
</div>
</div>

<div id="quiz" style="visibility:hidden">
<hr>
<h3>Comprehension Question</h3>
<p>You have to get the question correct to proceed.</p>
<p>
  <b>Question 1</b><br>
  Suppose Part 2 is selected for payment. 
  In the final Assessment Task, if the presented report has appeared in 1 of the {{ num_of_questions }} scenario questions,
  which of the following statements is true?
  <br>
<input type='radio' class='quiz' name='quiz1' value=1>You will still be asked to submit your assessment in the final Assessment Task.<br>
<input type='radio' class='quiz' name='quiz1' value=2>Your answer in that scenario question will be automatically used as your assessment in the final Assessment Task.<br>

</p>
<p id="button_check"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="check_quiz()" >Check Answer</button></p>

</div>

<div id="next_part" style="visibility:hidden">
{{next_button}}
</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("button_next").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;
    }
    function check_quiz(){
        var radio1 = document.querySelector('input[name="quiz1"]:checked');
        
        if (radio1==null){
          alert("Please finish question 1!")
        }else{
          var answer1 = radio1.value;
          if (answer1!=2){
              alert("Please check your answer!")
          }else{
              alert("Correct!")
              $('.quiz').attr('disabled', true);
              document.getElementById("button_check").style.visibility="hidden";
              document.getElementById("next_part").style.visibility="visible";
          }
          
        }
    }

</script>

{% endblock %}