{% 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>Now we only have a few more questions about your demographic background.</p>
    <br>
    <p>What is your gender?</p>
    <div class="formfield">{% formfield player.gender label="" %}</div>
</div>
</div>

<div class="results" align="justify">
    <p>What is your age?</p>
    <div class="formfield-age">{% formfield player.age label="" %}</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-age").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 %}