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

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

{% block content %}

    <b> <br>11.	Below is a series of statements concerning men and women and their relationships in contemporary society.
        Please indicate the degree to which you agree or disagree with each of the statement using the scale below:  </b></br>
    <br>

     <table class="table table-striped">
        <colgroup>
            <col style="width:37%">
            <col style="width:9%">
            <col style="width:9%">
            <col style="width:9%">
            <col style="width:9%">
            <col style="width:9%">
            <col style="width:9%">
            <col style="width:9%">
        </colgroup>
        <style type="text/css">
        .txtVertical
        {
            position: relative;
            left: 13px;
        }
        </style>
        <thead>
            <tr>
                <th colspan="15"></th>
                <th>Disagree Strongly (0)</th>
                <th>Disagree Somewhat (1)</th>
                <th>Disagree Slightly (2)</th>
                <th>Agree Slightly (3)</th>
                <th>Agree Somewhat (4)</th>
                <th>Agree Strongly <br> (5)</th>
                <th>Not Relevant to Me (6)</th>
            </tr>
        </thead>
        <tbody>
        {% for field in form %}
            <tr>
                <th colspan="15" class="text-left">{{ field.label }}</th>
                {% for choice in field %}
                <td class="txtVertical"><center>{{ choice }}</center></td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>




    {% next_button %}

{% endblock %}
{% block app_styles %}
<style type="text/css">
    th {

        font-size: 10pt;
        text-align: center;
        font-weight: bold;
        }

    td {
        font-size: 10pt;
        text-align: center;
        }

    td.confirmation {
    }

    th.no-border {
        border: 0 solid black;
    }
            }
    table {
        table-layout: auto;
        }

    </style>
{% endblock %}