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


{% block title %}
    Teil 1 - Verständnisfragen
{% endblock %}

{% block content %}

    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
           Bevor Sie Ihre Rolle als Käufer oder Teilnehmer 2 erfahren, bitten wir Sie,
           <strong>die folgenden Verständnisfragen zu beantworten, um sicherzugehen, dass Sie die Instruktionen
           zu Teil 1 verstanden haben.</strong> Bitte beachten Sie zudem, dass <strong>Sie Ihre Rolle als
           Käufer oder Teilnehmer 2 für die gesamte Dauer der Studie behalten</strong>.
           <br><br>
           Sie können die Instruktionen zu Teil 1 am unteren Rand des Bildschirms jederzeit nachlesen.
        </p>
    </div>

    <br>

    <table class='text-justify' cellspacing=1>
        <tr>
            <th width="1000" style="background-color:#e1f5fa">
                <strong><u>FRAGE 1</u>: Welche der folgenden Aussagen ist richtig?</strong>
            </th>
        </tr>
    </table>
    {% formfield player.control1 %}

    <br>


    <table class='text-justify' cellspacing=1>
        <tr>
            <th width="1000" style="background-color:#e1f5fa">
                <strong><u>FRAGE 2</u>: Wenn der Käufer ein <orange>Produkt ORANGE</orange> oder
                ein <blue>Produkt BLAU</blue> kauft,...</strong>
            </th>
        </tr>
    </table>
    {% formfield player.control3 %}

    <br>

    <table class=' text-justify'   cellspacing=1>
        <tr>
            <th width=1000 style="background-color:#e1f5fa">
                <strong><u>FRAGE 3:</u> Wie hoch ist die Auszahlung des Teilnehmers 2, wenn der Käufer kein Produkt
                    kauft?</strong>
            </th>
        </tr>
    </table>
    {% formfield player.control4 %}

    <br>

    <table class=' text-justify'   cellspacing=1>
        <tr>
            <th width=1000 style="background-color:#e1f5fa">
                <strong><u>FRAGE 4:</u> Wie hoch ist die Auszahlung des Teilnehmers 2, wenn der Käufer ein
                <orange>Produkt ORANGE</orange> kauft?</strong>
            </th>
        </tr>
    </table>
    {% formfield player.control5 %}

    <br>

    <table class=' text-justify'   cellspacing=1>
        <tr>
            <th width=1000 style="background-color:#e1f5fa">
                <strong><u>FRAGE 5:</u> Wie hoch ist die Auszahlung des Teilnehmers 2, wenn der Käufer ein
                <blue>Produkt BLAU</blue> kauft?</strong>
            </th>
        </tr>
    </table>
    {% formfield player.control6 %}

    <p></p>
    <p></p>
    <div align="right">
        <button id="button" class="btn btn-primary" onclick> Weiter </button>
    </div>

    <hr>

    <details>
        <summary>
            <b>Klicken Sie bitte <u>hier</u>, um die Instruktionen zu Teil 1 noch einmal zu lesen.</b>
        </summary>
        <p> {{ include 'nosellers/P00_Ausrolloptionen.html' }} </p>
    </details>
{% endblock %}

{% block styles %}
<style>
orange {font-weight: bold; color:orange;}
blue {font-weight: bold; color: blue;}
</style>
{% endblock %}