{% block app_styles %}
<link rel="stylesheet" href='{{static "global/rulers100.css"}}'>
<link rel="stylesheet" href='{{static "global/DBM_css.css"}}'>
<link rel="stylesheet" href='{{static "global/nouislider.min.css"}}'>
{% endblock %}

{%block content%}
<h1>Task {{player.round_number}}/5</h1>
<div class="taskcontainer">

    <div class="intro" align="justify">
        <ul>
            <li>
                The computer <b>randomly</b> picked a year X <b>from 1980 to 2022</b>.
            </li>
            <li>
                               <p>What do you think is the chance that the <b>unemployment rate in U.S.</b> of that year was <b>lower than 9.7%</b>? </p>

            </li>
            <li>
                <p>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>97</b> out of every 1000 individuals <b>in the labor force</b>?
      </p>
            </li>

        </ul>


    </div>
    <div class="task">
        <table>
            <colgroup>
                <col span="1" style="width: 20%;">
                <col span="1" style="width: 80%;">
            </colgroup>

            <tr>


                <td colspan="2">
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align: justify;">
                    What do you think is the chance that the unemployment rate in the randomly selected year X was lower than 9.7%? Which range is more likely?
                </td>

            </tr>
        </table>
        {{include C.DBM100}}
    </div>
</div>
<input type="hidden" name="Task5_left_b" id="left_b" />
<input type="hidden" name="Task5_right_b" id="right_b"/>
<input type="hidden" name="Task5list" id="list"/>
{{ formfield_errors 'Task5_left_b' }}
{{ formfield_errors 'Task5_right_b' }}
{{ formfield_errors 'Task5list' }}

{%endblock%}

{% block scripts %}
<script src="{{ static 'global/nouislider.min.js' }}"></script>
<script src="{{ static 'global/DBM100_script.js' }}"></script>
{% endblock %}