{{ block title }}
Fragebogen
{{ endblock }}

{{ block content }}

<style>
    table {
        border-collapse: collapse;
        margin-bottom: 30px;
    }

    .fairness_table {
        margin: auto;
        width: 50%;
    }

    .justice_table tr:hover {
        background-color: #f1f1f1;
    }

    th,
    td {
        border: 1px solid #aaa;
        text-align: center;
    }

    #question_cell {
        width: 50%;
    }

    .question-section {
        margin-bottom: 40px;
    }

    .radio-group {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .radio-group .scale-label:first-child {
        text-align: right;
    }

    .radio-group .scale-label:last-child {
        text-align: left;
    }

    .scale {
        font-style: italic;
    }

    .mb-3._formfield:has(+ .scale) {
        margin-bottom: 0 !important;
    }
</style>

<p>
    Zum Abschluss bitten wir Sie noch einige Fragen zu beantworten. Ihre Antworten auf diese Fragen sind sehr wichtig
    für unsere Forschung.
    Wir bitten Sie daher, Ihre Antworten sorgfältig abzuwägen und alle Angaben wahrheitsgemäß zu machen.
</p>

<p><b>1. Fairness</b></p>

<p>Im Folgenden sind für zwei hypothetische Situationen jeweils vier Varianten (A, B, C und D) zur Verteilung von
    Geld an zwei Personen (Person 1 und Person 2) dargestellt. Wir bitten Sie, sich für eine der Varianten zu
    entscheiden. Es gibt keine richtigen oder falschen Antworten in dieser Aufgabe. Es geht ausschließlich um ihre
    persönlichen Präferenzen.</p>

<div class="question-section">
    <p><u>Situation 1</u></p>
    <p>
        Variante A: Person 1 soll 10 Euro erhalten, Person 2 soll 9 Euro erhalten. <br>
        Variante B: Person 1 soll 15 Euro erhalten, Person 2 soll 7 Euro erhalten. <br>
        Variante C: Person 1 soll 8 Euro erhalten, Person 2 soll 8 Euro erhalten. <br>
        Variante D: Person 1 soll 16 Euro erhalten, Person 2 soll 2 Euro erhalten. <br>
    </p>
    <p>
        Welche Variante bevorzugen Sie?
    </p>
    <table class="fairness_table">
        <tr>
            <th>Variante A</th>
            <th>Variante B</th>
            <th>Variante C</th>
            <th>Variante D</th>
        </tr>
        <tr>
            <td>Person 1: 10<br>Person 2: 9<br><strong>Summe: 19</strong></td>
            <td>Person 1: 15<br>Person 2: 7<br><strong>Summe: 22</strong></td>
            <td>Person 1: 8<br>Person 2: 8<br><strong>Summe: 16</strong></td>
            <td>Person 1: 16<br>Person 2: 2<br><strong>Summe: 18</strong></td>
        </tr>
        <tr>
            <td>{{ form.fairness_sit1.0 }}</td>
            <td>{{ form.fairness_sit1.1 }}</td>
            <td>{{ form.fairness_sit1.2 }}</td>
            <td>{{ form.fairness_sit1.3 }}</td>
        </tr>
    </table>
</div>

<div class="question-section">
    <p><u>Situation 2</u></p>
    <p>
        Variante A: Person 1 soll 13 Euro erhalten, Person 2 soll 3 Euro erhalten. <br>
        Variante B: Person 1 soll 8 Euro erhalten, Person 2 soll 8 Euro erhalten. <br>
        Variante C: Person 1 soll 12 Euro erhalten, Person 2 soll 6 Euro erhalten. <br>
        Variante D: Person 1 soll 9 Euro erhalten, Person 2 soll 8 Euro erhalten. <br>
    </p>
    <p>
        Welche Variante bevorzugen Sie?
    </p>
    <table class="fairness_table">
        <tr>
            <th>Variante A</th>
            <th>Variante B</th>
            <th>Variante C</th>
            <th>Variante D</th>
        </tr>
        <tr>
            <td>Person 1: 13<br>Person 2: 3<br><strong>Summe: 16</strong></td>
            <td>Person 1: 8<br>Person 2: 8<br><strong>Summe: 16</strong></td>
            <td>Person 1: 12<br>Person 2: 6<br><strong>Summe: 18</strong></td>
            <td>Person 1: 9<br>Person 2: 8<br><strong>Summe: 17</strong></td>
        </tr>
        <tr>
            <td>{{ form.fairness_sit2.0 }}</td>
            <td>{{ form.fairness_sit2.1 }}</td>
            <td>{{ form.fairness_sit2.2 }}</td>
            <td>{{ form.fairness_sit2.3 }}</td>
        </tr>
    </table>
</div>

<p><b>2. Soziale Normen</b></p>

<p>In den USA werden Personen, die wegen eines schweren Verbrechens verurteilt wurden, zumindest für eine Zeit von
    Wahlen ausgeschlossen. </p>

{{ formfield 'social_norm'}}

<p><b>3. Gerechtigkeitssensibilität</b></p>

<p>Menschen reagieren in unfairen Situationen sehr unterschiedlich. Im Folgenden möchten wir wissen, wie Sie selbst
    in unfairen Situationen reagieren. In den folgenden Aussagen werden verschiedene unfaire Situationen angesprochen.
    Bitte geben Sie an, wie sehr die jeweilige Aussage auf Sie zutrifft. Sollten Sie eine Situation noch nicht selbst
    erlebt haben, antworten Sie bitte so, wie Sie Ihrer Erwartung nach reagieren würden. </p>


<table class="justice_table">
    <tr>
        <td id="question_cell">Es ärgert mich, wenn es anderen unverdient besser geht als mir.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_victim_1 }}
                <label>{{ choice }}</label>
                {{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Es macht mir zu schaffen, wenn ich mich für Dinge abrackern muss, die anderen in den
            Schoß fallen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_victim_2 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Ich bin empört, wenn es jemandem unverdient schlechter geht als anderen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_observer_1 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Es macht mir zu schaffen, wenn sich jemand für Dinge abrackern muss, die anderen in den
            Schoß fallen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_observer_2 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Ich habe Schuldgefühle, wenn es mir unverdient besser geht als anderen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_benef_1 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Es macht mir zu schaffen, wenn mir Dinge in den Schoß fallen, für die andere sich
            abrackern müssen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_benef_2 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Ich habe Schuldgefühle, wenn ich mich auf Kosten anderer bereichere.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_perp_1 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
    <tr>
        <td id="question_cell">Es macht mir zu schaffen, wenn ich mir durch Tricks Dinge verschaffe, für die sich andere
            abrackern müssen.</td>
        <td>
            <div class="radio-group">
                <span class="scale-label">trifft überhaupt nicht zu</span>
                {{ for choice in form.js_perp_2 }}<label>{{ choice }}</label>{{ endfor }}
                <span class="scale-label">trifft voll und ganz zu</span>
            </div>
        </td>
    </tr>
</table>

<p><b>4. Selbsteinschätzung </b></p>

<p>Wie schätzen Sie sich persönlich ein: </p>

{{ formfield 'patience' }}

<p class="scale">
    Antworten Sie bitte anhand der folgenden Skala, wobei der Wert 0 bedeutet: sehr
    ungeduldig und der Wert 10: sehr geduldig. Mit den Werten dazwischen können Sie Ihre Einschätzung
    abstufen</p>

{{ formfield 'risk' }}

<p class="scale">
    Antworten Sie bitte anhand der folgenden Skala, wobei der Wert 0 bedeutet: gar nicht
    risikobereit und der Wert 10: sehr risikobereit. Mit den Werten dazwischen
    können Sie Ihre Einschätzung abstufen
</p>

{{ formfield 'impulsive' }}

<p class="scale">Antworten Sie bitte anhand der folgenden Skala, wobei der Wert 0 bedeutet: gar nicht impulsiv
    und der Wert 10: sehr impulsiv. Mit den Werten dazwischen
    können Sie Ihre Einschätzung abstufen</p>

<p><b>5. Demografische Angaben</b></p>

{{ formfield 'age' }}

{{ formfield 'gender' }}

{{ formfield 'study_semesters' }}

<div id="study_field_wrapper">
    {{ formfield 'study_field' }}
</div>

<div id="study_field_other_wrapper">
    {{ formfield 'study_field_other' }}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var semesterInput = document.getElementById('id_study_semesters');
        var fieldWrapper = document.getElementById('study_field_wrapper');
        var fieldSelect = document.getElementById('id_study_field');
        var otherWrapper = document.getElementById('study_field_other_wrapper');
        var otherInput = document.getElementById('id_study_field_other');

        function toggleAll() {
            var semVal = parseInt(semesterInput.value);

            // 1. Semester > 0? -> Show Field Wrapper
            if (semVal > 0) {
                fieldWrapper.style.display = 'block';
            } else {
                fieldWrapper.style.display = 'none';
                if (fieldSelect) fieldSelect.value = ''; // Reset
            }

            // 2. Field == 'Sonstiges'? -> Show Other Wrapper
            // (Only provided fieldWrapper is visible, but logic holds regardless)
            if (fieldSelect && fieldSelect.value === 'Sonstiges' && fieldWrapper.style.display !== 'none') {
                otherWrapper.style.display = 'block';
            } else {
                otherWrapper.style.display = 'none';
                if (otherInput) otherInput.value = ''; // Reset
            }
        }

        if (semesterInput) {
            semesterInput.addEventListener('input', toggleAll);
            semesterInput.addEventListener('change', toggleAll);
        }

        if (fieldSelect) {
            fieldSelect.addEventListener('change', toggleAll);
        }

        toggleAll(); // Initial state
    });
</script>



{{ next_button }}

{{ endblock }}