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

{% block title %} Questionnaire {% endblock %}

{% block content %}

    <div class="card bg-light instructions">
        <div class="card-body">
            <b>What is your year of birth?</b><br>
            <i>Please enter your year of birth into the text entry box</i>.
            <br><br>
            {% formfield player.q1_year %}
            <hr>
            <b>What is your sex?</b><br>
            <i>Please choose one of the following answers</i>.
            <br><br>
            {% formfield player.q2_sex %}
            <hr>
            <b>In which country do you currently reside?</b><br>
            <i>Please choose a country using the drop-down menu</i>.
            <br><br>
            {% formfield player.q3_countries label="" %}
            <hr>
            <b>Which statement best describes your current employment status?</b><br>
            <i>Please choose one of the following answers</i>.
            <br><br>
            {% formfield player.q4_employment %}
            <hr>
            <b>For each of the following statements, please indicate how true it is for you.</b><br>
            <i>The scale ranges from 1-7, where 1 is ‘not at all true’, 4 is ‘somewhat true’ and 7 is ‘very true.’</i>
            <br><br>
            <table class="table">
                <tr>

                    <td style="padding-right:0px" align="right">not at all true</td>
                    <td></td>
                    <td></td>
                    <td colspan="2" align="center">somewhat true</td>
                    <td></td>
                    <td></td>
                    <td align="left" style="padding-left:0px">very true</td>
                <tr>
                    <td>{{ form.q5_statement1.label }}</td>
                        {% for choice in form.q5_statement1 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>
                                <tr>
                    <td>{{ form.q5_statement2.label }}</td>
                        {% for choice in form.q5_statement2 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q5_statement3.label }}</td>
                        {% for choice in form.q5_statement3 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q5_statement4.label }}</td>
                        {% for choice in form.q5_statement4 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q5_statement5.label }}</td>
                        {% for choice in form.q5_statement5 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q5_statement6.label }}</td>
                        {% for choice in form.q5_statement6 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q5_statement7.label }}</td>
                        {% for choice in form.q5_statement7 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>
            </table>
            {% if player.treatment == "2" %}
                <hr>
            <b>The following statements refer to the badges you can earn in the slider task. For each of the following statements, please indicate how strongly you agree or disagree.</b><br>
            <i>The scale ranges from 1-5, where 1 is ‘strongly disagree’ and 5 is ‘strongly agree.’</i>
            <br><br>
            <table class="table">
                <tr>

                    <td style="padding-right:0px" align="right">strongly disagree</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td align="left" style="padding-left:0px">strongly agree</td>
                <tr>
                    <td>{{ form.q8_statement1.label }}</td>
                        {% for choice in form.q8_statement1 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>
                                <tr>
                    <td>{{ form.q8_statement2.label }}</td>
                        {% for choice in form.q8_statement2 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q8_statement3.label }}</td>
                        {% for choice in form.q8_statement3 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q8_statement4.label }}</td>
                        {% for choice in form.q8_statement4 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>

                <tr>
                    <td>{{ form.q8_statement5.label }}</td>
                        {% for choice in form.q8_statement5 %}
                            <td class="label">{{ choice }}</td>
                        {% endfor %}
                </tr>
            </table>
            {% endif %}
            <hr>
            <b>Why do you use MTurk?</b><br>
            <i>Please choose the answer that best fits your motivation</i>.
            <br><br>
            {% formfield player.q6_mturk label="" %}
            <hr>
            <b>The money on MTurk is…</b><br>
            <i>Please complete the sentence using one of the following endings</i>.
            <br><br>
            {% formfield player.q7_moneymturk label=""%}
        </div>
    </div>

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

{% endblock %}

{% block styles %}

    <style type="text/css">

    #proceed {
        float: right;
        position: relative;
    }


    .label {
        width: 10%;
    }

    #span {
        position: relative;
        left: 400px;
        width: 500px;
    }

    table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  border-bottom: none;
  border-top: none !important;
}

tr:hover {background-color:#f5f5f5;}

    </style>

{% endblock %}

{% block scripts %}
{% endblock %}