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

{% block title %}

{% endblock %}

{% block content %}

    <h4>Test</h4>
    <p>
        How much do you agree or disagree with the following statements about yourself? Please answer these questions as spontaneously and honest as possible.
    </p>

<style>

.gap-20 {
  width:100%;
  height:20px;
  }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 0px solid #dddddd;
  text-align: center;
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr5 th:nth-child(6) { text-align:left }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6) { text-align:center }
</style>

<table class="tr1 tc2">
    <col width="150">
    <col width="50">
    <col width="50">
    <col width="50">
    <col width="50">
    <col width="50">
   <tr>
    <th> </th>
    <th><center>strongly disagree</center></th>
    <th>disagree </th>
    <th>not agree, not disagree&nbsp;</th>
    <th>agree</th>
    <th><center>strongly agree</center></th>
  </tr>
  {% for field in form %}
        <tr>
            <th>{{ field.label }}</th>
            {% for choice in field %}
                <td>{{ choice }}</td>
            {% endfor %}
        </tr>
  {% endfor %}
</table>

<div class="gap-20"></div>
{% next_button %}

{% endblock %}