{% 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">

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



    </div>
    <div class="task">
        <table>
            <tr>
                <td colspan="2" style="text-align: justify;">
                     <p>Given the clue, what do you think is the chance that <span style="color: red; font-weight:bold">Red Box</span> was selected? Which range is more likely?</p>

                </td>
            </tr>

        </table>
        {{include C.DBM100}}
    </div>
</div>
<input type="hidden" name="Task3_left_b" id="left_b" />
<input type="hidden" name="Task3_right_b" id="right_b"/>
<input type="hidden" name="Task3list" id="list"/>
{{ formfield_errors 'Task3_left_b' }}
{{ formfield_errors 'Task3_right_b' }}
{{ formfield_errors 'Task3list' }}

{%endblock%}

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