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

{% block content %}

{% load otree_tags staticfiles %}

<div class="instructions well well-lg">

    <h3 class="panel-sub-heading">
        Please answer the following questions!
    </h3>

    <br>
    <p>
    1. What is your gender?<br style="display: block; content: ''; margin-top: 5px;">
        <input type = "radio" name = "gender" value = "male">
        <label for="male">Male</label><br>

        <input type = "radio" name = "gender" value = "female">
        <label for="female">Female</label><br>

        <input type = "radio" name = "gender" value = "others">
        <label for="others">Other (Please specify):</label>  <input type="text" name = "gender_others" value = ""><br>

        <input type = "radio" name = "gender" value = "notsay">
        <label for="notsay">Rather not say</label>
    </p>
    <p>
        2. What is your age? <br style="display: block; content: ''; margin-top: 5px;">
        <input type = "number" name = "age" value = "" style="width: 5em"> <br>
    </p>
    <p>
        3. What is your birth month?<br style="display: block; content: ''; margin-top: 5px;">
        <span style="font-size: 0.9em; color: #555;">(To ensure data quality, please select "July" from the list below.)</span><br>
        <input type="radio" name="birth_month" value="January" id="bm_jan">
        <label for="bm_jan">January</label><br>

        <input type="radio" name="birth_month" value="March" id="bm_mar">
        <label for="bm_mar">March</label><br>

        <input type="radio" name="birth_month" value="July" id="bm_jul">
        <label for="bm_jul">July</label><br>

        <input type="radio" name="birth_month" value="October" id="bm_oct">
        <label for="bm_oct">October</label><br>
    </p>

</div>
<button class="otree-btn-next btn btn-primary">Next</button>

<br><br><br>





{% endblock %}