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

{% block content %}

<div class="progress">
    <div class="progress-bar" style="width: {{ progress }}%"></div>
</div>
<br>
<div class="results" align="justify">
    <p align="justify">
        In a lottery, the chance of winning a $10 prize is 1%. What is your best guess about how many people would win a
        $10 prize if 1000 people each buy a single ticket to the lottery?
    </p>
    <div class="formfield">{% formfield player.lottery_answer label="Lottery Winners out of 1,000" %}</div>
</div>

<script>
    function alertFunction() {
        alert("In order for your answers to be most helpful to us, it is really important that you respond to all questions.")
        jQuery('.waiting').hide();
        jQuery('.next-button').show();
        return false
    }
    jQuery(".formfield").on("click", function () {
        jQuery(".next-button").show();
        jQuery(".waiting").hide();
    });
</script>

<div class="waiting" onclick="return alertFunction();">
    {% next_button %}
</div>

<div class="next-button">
    {% next_button %}
</div>

<script>jQuery(".next-button").hide();</script>

{% endblock %}