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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% endif %}
{% endblock %}


{% block content %}
<style>
    :root {
        --primary-dark: #153268;
        --primary-medium: #005f9b;
        --primary-light: #0091c8;
        --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a;
        --neutral-lightest: #ececed;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--neutral-lightest);
        color: var(--neutral-dark);
        line-height: 1.6;
    }

    .header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white;
        padding: 20px 25px;
        border-radius: 8px;
        margin-bottom: 24px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .header h1 {
        margin: 0 0 4px 0;
        font-size: 22px;
        font-weight: 600;
    }

    .card {
        background: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        border-left: 4px solid var(--primary-light);
    }

    h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 14px;
        font-size: 17px;
    }

    .info-box {
        background-color: var(--neutral-lightest);
        border-left: 4px solid var(--primary-lighter);
        padding: 14px 18px;
        border-radius: 4px;
        margin-top: 20px;
        font-size: 14px;
    }

    .button-section {
        text-align: center;
        margin-top: 32px;
    }

    .otree-btn-next {
        background-color: var(--primary-medium) !important;
        border: none !important;
        color: white !important;
        padding: 12px 30px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    .otree-btn-next:hover {
        background-color: var(--primary-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }
</style>

<div class="header">
    <h1>
        {% if participant.language == 'en' %}Task 2{% else %}Aufgabe 2{% endif %}
    </h1>
</div>

<div class="card">
    <!-- Main Introduction -->
    <h2>{% if participant.language == 'en' %}Instructions{% else %}Anleitung{% endif %}</h2>
    {% if participant.language == 'en' %}
        <p>
            This section presents 10 pairs of lotteries. For each pair, you must decide whether you would prefer to
            participate in <b>Option A</b> or <b>Option B</b>.
        </p>
    {% else %}
        <p>
            In diesem Abschnitt werden Ihnen 10 Paare von Lotterien präsentiert. Für jedes Paar müssen Sie entscheiden,
            ob Sie lieber an <b>Option A</b> oder <b>Option B</b> teilnehmen möchten.
        </p>
    {% endif %}

    <div class="info-box">
        {% if participant.language == 'en' %}
            <h6><strong>Important note regarding the procedure:</strong></h6>
            <p>
                Please note that the monetary amounts mentioned in this exercise are purely hypothetical. You will not
                receive any actual payment based on your decisions in this exercise. Nevertheless, we ask that you make
                each decision as if real money were at stake. Imagine that your choice would have real
                financial consequences for you.
            </p>
        {% else %}
            <h6><strong>Wichtiger Hinweis zur Durchführung:</strong></h6>
            <p>
                Bitte beachten Sie, dass die in dieser Aufgabe genannten Geldbeträge rein hypothetisch sind. Sie erhalten für
                diese Aufgabe keine tatsächliche Geldzahlung basierend auf Ihren Entscheidungen. Dennoch bitten wir Sie: Treffen
                Sie jede Ihrer Entscheidungen so, als ob es um echtes Geld ginge. Stellen Sie sich vor, Ihre Wahl hätte reale
                finanzielle Konsequenzen für Sie.
            </p>
        {% endif %}
    </div>
    <p></p>
    <p></p>
    <!-- The Options -->
    {% if participant.language == 'en' %}
    <h6><strong>The Options</strong></h6>
        <p>
            In the table on the next page, you will see 10 rows. In each row, you have a choice between two
            options:
            <ul>
                <li><b>Option A</b>: Gives you the chance to win 2.00€ or 1.60€.</li>
                <li><b>Option B</b>: Gives you the chance to win 3.85€ or 0.10€.</li>
            </ul>
        </p>
    {% else %}
    <h6><strong>Die Optionen</strong></h6>
        <p>
            In der Tabelle auf der nächsten Seite sehen Sie 10 Zeilen. In jeder Zeile haben Sie die Wahl zwischen zwei
            Optionen:
            <ul>
                <li><b>Option A</b>: Bietet Ihnen die Chance auf einen Betrag von 2,00 € oder 1,60 €.</li>
                <li><b>Option B</b>: Bietet Ihnen die Chance auf einen Betrag von 3,85 € oder 0,10 €.</li>
            </ul>
        </p>
    {% endif %}

    <!-- Probabilities -->
    <h6>{% if participant.language == 'en' %}<strong>The Probabilities</strong>
        {% else %}<strong>Die Wahrscheinlichkeiten</strong>{% endif %}</h6>

    {% if participant.language == 'en' %}
        <p>
            In Row 1, the chance of winning the higher amount (€2.00 or €3.85 respectively) is very low — 1 in 10 (10 %).
            With each subsequent row this probability increases by 10 percentage points. In Row 10 you would receive the
            high amount with 100 % certainty.
        </p>
    {% else %}
        <p>
            In der ersten Zeile ist die Chance, den jeweils höheren Betrag (2,00 € bzw. 3,85 €) zu gewinnen, sehr gering
            — 1 von 10 (10 %). Mit jeder weiteren Zeile steigt diese Wahrscheinlichkeit um 10 Prozentpunkte. In der
            letzten Zeile (Zeile 10) würden Sie den hohen Betrag mit 100-prozentiger Sicherheit erhalten.
        </p>
    {% endif %}

    <!-- Task -->
    <h2>{% if participant.language == 'en' %}Your Task{% else %}Ihre Aufgabe{% endif %}</h2>

    {% if participant.language == 'en' %}
        <p>
            Please work through the list <strong>from top to bottom</strong> and indicate
            in each row whether you would prefer <strong>Option A</strong> or
            <strong>Option B</strong>. There are no "right" or "wrong" answers —
            it is purely about your personal preference.
        </p>
    {% else %}
        <p>
            Bitte gehen Sie die Liste <strong>von oben nach unten</strong> durch und
            markieren Sie in jeder Zeile, ob Sie <strong>Option A</strong> oder
            <strong>Option B</strong> bevorzugen würden. Es gibt keine „richtigen" oder
            „falschen" Antworten — es geht rein um Ihre persönliche Präferenz.
        </p>
    {% endif %}

</div>

<div class="button-section">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>
{% endblock %}