{% extends "global/Page.html" %}
{% load otree %}


{% block title %}
    Your estimate <hr>
{% endblock %}
{% block content %}

{% if round == 1 and dot_block ==  1 %}
<p>On various screens throughout this study, we will show you dot plots such as the one below. Your task will be to estimate how much some fraction of these dots are.</p>

<p>In the end, one of your decisions will be randomly selected for payment, and you will earn {{incentive}} if your guess is within 5 of the correct answer.</p>
<!--<p><b>Note</b>: The number of displayed dots can vary across tasks.</p>-->
<p>Below is your first task.<br><br></p>
{% endif %}

Your estimate of <b>{{player.task_identifier_percent}}% of the total number of dots</b> below: &nbsp;&nbsp;&nbsp;
<input style="border-radius: 4px; width: 80px; text-align: center; border-width: 1px" type="number" min="0" max="1000" step="1" id="guess" name="guess"/>
<br><br>
<img src="{% static static_path %}" style="max-width: 600px; text-align: center">

   <div style="text-align: right;">
 <button type="submit" class="btn btn-primary" id="confirm" disabled>Next</button>
</div>

{% endblock %}


{% block scripts %}



<script>

    $(document).ready(function () {
        $('input[name=guess]').on('keyup', function () {
            $('#confirm').prop('disabled', false);
        });

    });
</script>


{% endblock %}