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

{% block title %}
    Comprehension Check
{% 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>
<hr>
<p>
  To verify your understanding of the instructions, please answer the comprehension questions below. If you get more than three wrong, you will not be allowed to participate in the study. In each question, exactly one response option is correct.
</p>
<p>
  <b>Question 1</b>
</p>
<p>
  What are the compositions of Box L and Box R?
</p>


<p>
  {{ formfield 'CQ1' }}
</p>

<br>

<p>
  <b>Question 2</b>
</p>

<p>Suppose the computer draws 6 balls out of the selected box. Which statement is correct?</p>

<p>
  {{ formfield 'CQ2' }}
</p>
<br>


<p>
  <b>Question 3</b>
</p>

<p>What should you do to maximize your chance of receiving the $5 bonus from the Assessment Task?</p>

<p>
  {{ formfield 'CQ3' }}
</p>
<br>
<p>
  <b>Question 4</b>
</p>

<p>If the actual information implemented by the computer matches with one of the {{ num_of_questions }} scenario questions, which of the following statements is true?
 </p>

<p>
  {{ formfield 'CQ4' }}
</p>
<br>
<p>Questions 5 and 6 are based on the example figure shown below. Suppose 25 balls are drawn out of the selected box. This figure shows, in the test, the number of times that the computer selected each box and drew possible number of <span style="color: orange">orange balls</span> in the 25 draws from that box.</p>
<img src="{{ static 'histogram/25.png' }}" width="80%"/>
<p>
  <b>Question 5</b>
</p>


<p>
  How many times did the computer draw 7 <span style="color: orange">orange balls</span> in the 25 draws? Among them, how many times were these balls drawn from <b>Box L</b> and from <b>Box R</b>, respectively?
</p>
<p>
  {{ formfield 'CQ5' }}
</p>

<br>

<p>
  <b>Question 6</b>
</p>


<p>
  How many times did the computer draw 19 <span style="color: orange">orange balls</span> in the 25 draws? Among them, how many times were these balls drawn from <b>Box L</b> and from <b>Box R</b>, respectively?
</p>
<p>
  {{ formfield 'CQ6' }}
</p>









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