{% block app_styles %}
<link rel="stylesheet" href='{{static "global/CM_css.css"}}'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 15px 32px;
  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;
}
</style>
{% endblock %}
{%block content%}
<h2>Task <span class="task_num"></span></h2>
<br>
<ul>
    <li>
        This task is about guessing the box.
    </li>
    <li>
        There are <b>two boxes</b> with some balls, either red or blue. We call the box with <span style="color: red">more red balls</span> the <span style="color: red; font-weight: bold">Red Box</span>, and the one with <span style="color: blue">more blue balls</span> the <span style="color: blue; font-weight: bold">Blue Box</span>.
    </li>
</ul>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next0" onclick="next(0)">Next</button>
</div>
<div id="part1" style="display: none">
<ul>
    <li>
        <b>Chance of Selection</b>: The computer selected the <span style="color: red; font-weight: bold">Red Box</span> or the <span style="color: blue; font-weight: bold">Blue Box</span> by rolling a <b>fair 10-sided die</b> and comparing it to a number <b>X</b> between 1 and 10. The selected box was determined as follows:

    </li>
</ul>
<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">
    <ul>
        <li>
            <ul>
        <li>
            If the die roll was <b>less than or equal to X</b>, then the <span style="color: red; font-weight: bold">Red Box</span> was selected.
        </li>
        <li>
            If the die roll was <b>greater than X</b>, then the <span style="color: blue; font-weight: bold">Blue Box</span> was selected.
        </li>
    </ul>
        </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>
            For example, suppose <b>X=6</b>, then there is a <b>6-in-10 chance (60 percent)</b> that the computer selected the <span style="color: red; font-weight: bold">Red Box</span>, and a <b>4-in-10 chance (40 percent)</b> that the computer selected the <span style="color: blue; font-weight: bold">Blue Box</span>.
        </li>

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

<div id="part4" style="display: none">
    <ul>
        <li>
            <b>You do not observe which box was selected.</b> You will learn how many red and blue balls there are in each box, and chance that the computer used to select a box.
        </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>
    <br>
</div>

<div id="part5" style="display: none">
    <ul>
        <li>
            To give you a clue, the computer <b>randomly drew a ball</b> out of the selected box. <u>You will learn the color of this randomly-drawn ball</u>.
        </li>
    </ul>
    <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next5" onclick="next(5)">Next</button>
    </div>
    <br>
</div>

<div id="part6" style="display: none">
    <h3>Your Guess</h3>
    <hr>
    <ul>
        <li>
            <u>You need to guess the chance that the <span style="color: red; font-weight: bold">Red Box</span> was selected [from 0 to 100].</u>

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

<div id="part7" style="display: none">
    <h3>This Task's Bonus Rule</h3>
    <hr>
    <p>
        If the computer selects this task to count for bonus, then <u>your submitted guess</u> to the selected task will determine your chance of earning the $3 bonus.
    </p>
    <p>
        Remember, we design the bonus rule to make sure that <b>you can secure the largest chance of winning the prize by reporting your best guess</b>.
    </p>
    <button type="button" class="collapsible">Detailed Bonus Rule</button>
<div class="content">
    <p>
        We now explain, in details, how <u>your submitted guess</u> is used to determine whether you win the $3 bonus:
    </p>
    <ul>
        <li>
            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>.
        </li>
        <li>
            The computer determines whether you win the $3 bonus according to which box was selected. If:
            <ul>
                <li>
                    <b>The selected box was the Red Box</b>: You win the $3 bonus if <u>your submitted guess</u> is <b>greater than or equal to either</b> of the two <i>Computer Numbers</i>.
                </li>
                <li>
                    <b>The selected box was the Blue Box</b>: You win the $3 bonus if <u>your submitted guess</u> is <b>less than either</b> of the two <i>Computer Numbers</i>.
                </li>
            </ul>
        </li>
    </ul>
    </div>
<div id="next_part" style=" text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "submit" >Start</button>
</div>
    <br>
</div>






{% endblock %}

{{block script}}
<script>
    //It can also be used by a JavaScript to access and manipulate elements with the specific class name.
    var task_num = {{player.round_number}};
    var list1 = document.getElementsByClassName("task_num");
    var list2 = document.getElementsByClassName("task_num+1");
    for (i=0; i<list1.length;i++){
        list1[i].innerHTML = task_num;
    }
    for (i=0; i<list2.length; i++){
        list2[i].innerHTML = task_num+1;
    }

    function next(x){
        document.getElementById("next"+x).style.display = "none";
        document.getElementById("part"+(x+1)).style.display = "inline";
    }
    //document.getElementsByClassName("task_num").value = '"'+task_num+'"';
    //document.getElementsByClassName("task_num+1").value ='"'+ (task_num+1)+'"';
    show1=function(){
        document.getElementById("Part 2").style.visibility="visible";
    }

    show=function(){
        document.getElementById("CQ").style.visibility="visible";
    }

    check_quiz = function(){
        var radio1 = document.querySelector('input[name="CQ1"]:checked');
        var radio2 = document.querySelector('input[name="CQ2"]:checked');
        if(radio1==null){
            alert("Please answer question 1!");
        }else if(radio2==null){
            alert("Please answer question 2!");
        }
        else{
            var answer1 = radio1.value;
            var answer2 = radio2.value;
            if (answer1!=1){
                alert("Please check your answer for Question 1!");
            }else if(answer2!=1){
                alert("Please check your answer for Question 2!");
            } else{
                alert("You are correct!");
                document.getElementById("next_part").style.visibility="visible";
            }
        }
    }
    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 %}