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

{% block title %}
    Teil 1 - Instruktionen (2/3)
{% endblock %}


{% block content %}

        <div class="card card-body bg-light instructions">
            <strong>Im Folgenden werden Ihnen die Eigenschaften von zwei Produktarten vorgestellt:</strong>
        </div>

        <br>

        <div class="card card-body bg-light instructions">
            <span class="card-text">
                <orange>Produkt ORANGE:</orange>
            </span>

            <ul>
                <li>
                    <strong>Das <orange>Produkt ORANGE</orange> verursacht einen Verlust von 60 Punkten für Teilnehmer C.</strong>
                </li>
            </ul>

            <span class="card-text">
                <blau>Produkt BLAU:</blau>
            </span>

            <ul>
                <li>
                    <strong>Das <blau>Produkt BLAU</blau> verursacht keinen Verlust für Teilnehmer C.</strong>
                </li>
                <li>
                    <strong>Das <blau>Produkt BLAU</blau> hat einen Mindestpreis von 20 Punkten.</strong>
                </li>
            </ul>

            <p align="justify" class="card-text">
                Sie können die Eigenschaften der beiden Produkte auf den Bildschirmen, die den Instruktionen zu Teil 1 folgen,
                jederzeit nachlesen, in dem Sie den Mauszeiger über das jeweilige Wort
                (<span class="tooltip1"><orange>Produkt ORANGE</orange> <span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>,
                 <span class="tooltip1"><blau>Produkt BLAU</blau> <span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></span>) bewegen.
            </p>
        </div>

    <br>

        <div class="card card-body bg-light instructions">
            <strong>Im Folgenden werden Ihnen die drei Rollen in der Studie vorgestellt:</strong>
        </div>

        <br>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Rolle: <u>VERKÄUFER</u></strong>
                <br><br>

                {{ if player.type == "seller" }}
                <b>In jeder der {{ Constants.num_rounds }} Runden wird nach dem Zufallsprinzip festgelegt, welches Produkt (d.h.
                <orange>Produkt ORANGE</orange>, <blau>Produkt BLAU</blau>) jeder Verkäufer anbietet.</b>
                Die Verkäufer erfahren zu Beginn jeder Runde, ob sie das
                <orange>Produkt ORANGE</orange> oder das <blau>Produkt BLAU</blau> anbieten
                und welches Produkt der andere Verkäufer in der Runde anbietet.
                Danach legen sie den Preis fest, den sie für ihr Produkt verlangen möchten

                {{else}}
                <b>In jeder der {{ Constants.num_rounds }} Runden bietet jeder Verkäufer entweder ein
                <orange>Produkt ORANGE</orange> oder ein <blau>Produkt BLAU</blau> an.</b>

                {{endif}}

                <b>Der Preis für das <orange>Produkt ORANGE</orange> kann zwischen 0 und 50 Punkten und
                   der Preis für das <blau>Produkt BLAU</blau> zwischen 20 und 50 Punkten festgelegt werden.</b>
                <br><br>
                <strong>Die Verkäufer erfahren in jeder Runde, welche Entscheidung der andere
                Verkäufer getroffen hat. Ferner erfahren die Verkäufer zum Ende jeder Runde, ob sie ihr Produkt verkauft
                haben oder nicht.</strong>
            </p>

            <span>Die Auszahlung des Verkäufers in jeder Runde wird wie folgt bestimmt:</span>

            <ul class="card-text">
                <li align="justify">
                    Wenn der Verkäufer sein Produkt nicht verkauft, behält er seine Anfangsausstattung von 80 Punkten.
                    <strong>Auszahlung: 80 Punkte</strong>.
                </li>
                <li align="justify">
                    Wenn der Verkäufer sein Produkt verkauft, erhöht sich seine Auszahlung um den Preis,
                    den er für sein Produkt verlangt hat. <strong>Auszahlung: 80 Punkte + Preis</strong>.
                </li>
            </ul>
        </div>

        <br>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Rolle: <u>KÄUFER</u></strong>
                <br><br>
                <b>Der Kauf des <orange>Produktes ORANGE</orange> oder des <blau>Produktes BLAU</blau> führt zu einer zusätzlichen
                    Auszahlung von 50 Punkten für den Käufer. Allerdings muss der Käufer noch den Preis für das Produkt an den Verkäufer
                    zahlen.</b>
                <br><br>
                <strong>Der Käufer kann sich in jeder der {{ Constants.num_rounds }} Runden die zwei Angebote ansehen und höchstens eins
                    davon annehmen, d.h. er kann ein Produkt kaufen oder keines.</strong>
            </p>

            <span>Die Auszahlung des Käufers in jeder Runde wird somit wie folgt bestimmt:</span>

            <ul class="card-text">
                <li align="justify">
                    Wenn der Käufer kein Produkt kauft, behält er seine Anfangsausstattung von 80 Punkten.
                    <strong>Auszahlung: 80 Punkte</strong>.
                </li>
                <li align="justify">
                    Wenn der Käufer ein Produkt <orange>Produkt ORANGE</orange> oder ein <blau>Produkt BLAU</blau> kauft,
                    erhöht sich seine Auszahlung um 50 Punkte abzüglich des
                    Produktpreises. <strong>Auszahlung: 80 Punkte + 50 Punkte - Preis</strong>.
                </li>
            </ul>

            <span align="justify" class="card-text">
                Zur Erinnerung, der Handel zwischen einem Verkäufer und einem Käufer hat in jeder Runde folgende
                <strong>Auswirkungen für den Teilnehmer C:</strong>
            </span>

            <ul class="card-text">
                <li>
                    <strong>Wenn der Käufer das <orange>Produkt ORANGE</orange> kauft, entsteht ein Verlust von 60 Punkten für
                    Teilnehmer C.</strong>
                </li>
                <li>
                    <strong>Wenn der Käufer das <blau>Produkt BLAU</blau> oder gar kein Produkt kauft,
                    entsteht kein Verlust für Teilnehmer C.</strong>
                </li>
            </ul>

            <p align="justify" class="card-text">
                Das bedeutet also, dass der Verlust für den Teilnehmer C in der Runde nur dann anfällt, wenn das
                <orange>Produkt ORANGE</orange> auch gekauft wird.
            </p>
        </div>

        <br>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Rolle: <u>TEILNEHMER C</u></strong>
                <br><br>
                <strong>In Teil 1 kann Teilnehmer C keine Entscheidung treffen. Jedoch erfährt der Teilnehmer C das
                Ergebnis und damit seine Punkte am Ende jeder Runde</strong>.
            </p>
        </div>

    <p></p>
    <p></p>

    <div align="right">{% next_button %} </div>
{% endblock %}

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

<style>
/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 300px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}

.tooltip1 .tooltiptext2 {
  visibility: hidden;
  width: 260px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext2 {
  visibility: visible;
}
</style>
{% endblock %}