{% 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>educational attainment</b> for the population 18 years old and older across all the states (including Washington D.C.) in U.S..
    </li>
    <li>
        Educational attainment refers to the highest level of education that an individual has completed.
    </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, in Year X, how many states have <b>less than y% </b> of their state-level population with a <b>Bachelor's degree or higher</b>.</u>
        </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">
    <ul>
        <li>
            In other words, <b>in how many states</b>, is the average number of individuals <b>with a Bachelor's degree or higher less than y out of every 100 individuals</b> in the state-level population, in Year X?
        </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>
</div>



<div id="part4" 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>
              Suppose <u>your submitted guess</u> to this task is p and the correct answer is q. Then your chance of getting the $3 bonus is (1-(p-q)<sup>2</sup>).
            Therefore, to maximize your chance of receiving the bonus, you should make your best guess.
            </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}}