{% block title %}
    Demographic Survey
{% endblock %}

{% block content %}

    <div>

        <p style="text-align: center">
            You will be paid an additional $5 for completing this survey.
        </p>

        <p style="text-align: center">
            Remember that all responses in today's experiment are anonymous and none of your answers are linked to you.
        </p>
        <div class="row" style="text-align: left;">
            <div class="column" style="background-color:white;">
                {% for field in form %}
                    {% if field.name != 'complete' %}
                        {% formfield field %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        <p style="text-align: center;">
            <button class="btn btn-primary btn-large" id="NextButton" onclick="submitSurvey()">
                Next
            </button>
        </p>

        <input type="hidden" id="complete" name="complete" />

    </div>

{% endblock %}

{{ block scripts }}

    <script type="text/javascript">

        function submitSurvey () {
            document.getElementById('complete').value = 1;
            console.log("Here");
            document.getElementById('form').submit();
        };

    </script>

{{ endblock }}