{% 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 2.</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 2.</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 2: -60 Punkte</span></span>,
                 <span class="tooltip1"><blau>Produkt BLAU</blau> <span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></span>) bewegen.
            </p>
        </div>

    <br>

        <div class="card card-body bg-light instructions">
            <strong>Im Folgenden werden Ihnen die zwei 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>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
                    zahlen.</b>
                <br><br>
                <strong>Der Käufer erhält in jeder der {{ Constants.num_rounds }} Runden zwei Angebote ansehen und kann 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, die Kaufentscheidung des Käufers hat in jeder Runde folgende
                <strong>Auswirkungen für den Teilnehmer 2:</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 2.</strong>
                </li>
                <li>
                    <strong>Wenn der Käufer das <blau>Produkt BLAU</blau> oder gar kein Produkt kauft,
                    entsteht kein Verlust für Teilnehmer 2.</strong>
                </li>
            </ul>

            <p align="justify" class="card-text">
                Das bedeutet also, dass der Verlust für den Teilnehmer 2 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 2</u></strong>
                <br><br>
                <strong>In Teil 1 kann Teilnehmer 2 keine Entscheidung treffen. Jedoch erfährt der Teilnehmer 2 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 %}