{% 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 two 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 36 scenario questions, which of the following statements is true?
 </p>

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










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