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

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

{% block content %}
<p>We will complete the experiment by asking you a few more questions. For all questions, please enter only one answer.</p>
<form>
    <div class="form-group">
        {{ formfield player.question_age }}
        {% formfield player.question_gender %}
        {% formfield player.question_education %}
        {% formfield player.question_ethnicity %}
        {% formfield player.question_born %}
        {% formfield player.question_language %}
        {% formfield player.question_living %}
        {% formfield player.question_scale %}
    </div>

    {% next_button %}
</form>
</div>
<style>
    .survey {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
    }

    h2 {
        text-align: center;
    }

    form {
        margin-top: 30px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

    input[type="radio"] {
        margin-right: 10px;
    }

    button[type="submit"] {
        display: block;
        margin: 0 auto;
        margin-top: 30px;
        font-size: 1.2rem;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button[type="submit"]:hover {
        background-color: #0062cc;
    }
</style>


{% endblock %}