{% 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" align="justify">

    <div class="intro">
        <ul>

            <li>
                <p><b>In 2019</b>, how many states have <b>less than 24% of their state-level population</b> with a <b>Bachelor's degree or higher</b>?</p>

                <p>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 24 out of every 100 individuals</b> in their state-level population, <b>in 2019</b>?</p>
        </li>
        </ul>


    </div>
    <div class="task">
        <table>
            <tr>
                <td colspan="2" style="text-align: justify;">
                    <p>In 2019, how many states, do you think, have less than 24% of their state-level population with a Bachelor's degree or higher? Which range is more likely?</p>
                </td>
            </tr>
        </table>
        {{include C.DBM100}}
    </div>
</div>
<input type="hidden" name="Task4_left_b" id="left_b" />
<input type="hidden" name="Task4_right_b" id="right_b"/>
<input type="hidden" name="Task4list" id="list"/>
{{ formfield_errors 'Task4_left_b' }}
{{ formfield_errors 'Task4_right_b' }}
{{ formfield_errors 'Task4list' }}

{%endblock%}

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