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

{% block title %}
    Fragen
{% endblock %}

{% block content %}
<p>Die folgende Tabelle zeigt drei verschiedene Verteilungsmöglichkeiten eines Geldbetrags (Verteilung A, Verteilung B und Verteilung C). In Verteilung A erhält Person 1 den Betrag von 9€, Person 2 erhält den Betrag von 8€ und Person 3 erhält den Betrag von 4€. (Das gleiche Prinzip gilt für die Verteilung B und die Verteilung C. In Verteilung B erhält somit Person 1 den Betrag von 8€, Person 2 erhält den Betrag von 8€, usw.).</p>
    <ol>
        {% for field in form %}
        <li class="questionnaire">{{ field.label }}<div class="questionnaire">{{ field }}</div></li>
        {% endfor %}
    </ol>

<center>
        <table width=30%>
            <tr>
                <th>Verteilung</th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
            <tr>
                <th>Person 1</th>
                <td>9</td>
                <td>8</td>
                <td>11</td>
            </tr>
            <tr>
                <th>Person 2</th>
                <td>8</td>
                <td>8</td>
                <td>10</td>
            </tr>
            <tr>
                <th>Person 3</th>
                <td>4</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <th>Total</th>
                <td>21</td>
                <td>24</td>
                <td>30</td>
            </tr>
        </table><br><br>
    </center>
{% next_button %}

{% endblock %}

{% block styles %}
    <style>
        tr, td, th {
            border: 1px solid #FFFFFF;
        }
        td, th {
            padding: 15px;
        }
    </style>
{% endblock %}