{% 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>unemployment rate in the U.S.</b>.
    </li>
    <li>
        The computer <b>randomly</b> picked <b>a year X between 1980 and 2022</b>.
    </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 id="part2" style="display: none">
    <ul>
        <li>
            <p>The unemployment rate represents the number of unemployed as a percentage of the labor force.</p>
            <p>
                Labor force is restricted to people 16 years of age and older, who currently reside in 1 of the 50 states or the District of Columbia, who do not reside in institutions (e.g., penal and mental facilities, homes for the aged), and who are not on active duty in the Armed Forces.

            </p>
        </li>


    </ul>
  <br>
<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">
    <h3>Your Guess</h3>
    <hr>
    <ul>
        <li>
            <u>You need to guess the chance that the <b>unemployment rate in year X</b> was <b>lower than y%</b> [from 0 to 100].</u>
        </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>
            In other words, in <b>year X</b>, what do you think is the chance that, the number of unemployed individuals is less than <b>y*10</b> out of every 1000 individuals <b>in the labor force</b>?
        </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 help you understand what y and X are, we take 1960 as an example. In 1960, the average unemployment rate in the U.S. is <b>5.5% (y = 5.5)</b>, which means that, in <b>Year 1960</b>, <b>55 individuals</b> out of every 1000 individuals <b>in the labor force</b> were <b>unemployed</b>.
        </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>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 unemployment rate in <b>year X</b> was <b>lower than y%</b>. If:
            <ul>
                <li>
                    <b>The unemployment rate in year X was lower than y%</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 unemployment rate in year X was higher than or equal to 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}}