{% 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 {{participant.task_num}}/11</h1>
<div class="taskcontainer">

    <div class="intro">

        <p>
            <img src="{{static 'global/Task11.png'}}" style="width: 90%;"/>
        </p>

    </div>
    <div class="task">
        <table>
            <colgroup>
                <col span="1" style="width: 50%;">
                <col span="1" style="width: 50%;">
            </colgroup>
            <tr>
                <td colspan="2">
                    <p><b>Your task is to estimate the percentage of <span style="color: blue">blue</span> dots in percentage are there in the figure [from 0 to 100].</b>
                        Which range of numbers (inclusive) is more likely?
                    </p>
                    <br>
                </td>
            </tr>
        </table>
            {{include C.DBM100}}
    </div>
</div>

<input type="hidden" name="DBM_left" id="left_b" />
<input type="hidden" name="DBM_right" id="right_b"/>
<input type="hidden" name="DBM_list" id="list"/>
{{ formfield_errors 'DBM_left' }}
{{ formfield_errors 'DBM_right' }}
{{ formfield_errors 'DBM_list' }}
{%endblock%}

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