{% 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 {{player.round_number}}</h2>
<br>
<ul>
    <li>
        This task is about the <b>income in the U.S.</b>.
    </li>
    <li>
        The computer <b>randomly</b> selected a person among those who were <b>30 years old and had a full-time work in the U.S.</b> in Year X.
    </li>
</ul>
<br>
<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">
    <h3>Your Guess</h3>
    <hr>
    <ul>
        <li>
            <u>You need to guess the chance that, this person <b>earned at least $y</b> in Year X, before taxes and deductions? [from 0 to 100].</u>
        </li>

<!--        <li>-->
<!--            In other words, imagine that, at the <b>beginning</b> of <b>Year X</b>, <b>the set of products</b> that is used to compute the inflation rate <b>cost $100</b>.  What do you think is the chance that, at the <b>end</b> of that <b>same year</b>, the same set of products <b>cost less than $z</b> ?-->
<!--        </li>-->
<!--        <li>-->
<!--            To help you understand what y and z are, we take 2021 as an example. In 2021, the annual inflation rate in the U.S. is <b>3.6% (y = 3.6)</b>, which means that, if the set of products that is used to compute the inflation rate <b>cost $100</b> at the <b>beginning of 2021</b>, at the <b>end of 2021</b>, the same set of products <b>cost $103.6 (z = 103.6)</b>.-->
<!--        </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>
    <br>
</div>

<div id="part3" style="display: none">
    <h3>This Task's Bonus Rule</h3>
    <hr>
    <br>

        <p>
            If the computer selects this task to count for bonus, then <u>your submitted guess</u> to this 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 whether the selected person in <b>Year X</b> earned <b>at least $y</b>. If:
            <ul>
                <li>
                    <b>The person earned $y or above</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 person earned less than $y</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 style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "submit" >Start</button>
    </div>
</div>


{% endblock %}

{{block script}}
<script>
    function next(x){
        document.getElementById("next"+x).style.display = "none";
        document.getElementById("part"+(x+1)).style.display = "inline";
    }
    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}}