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


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


{% block content %}
    <div class="card bg-light">
        <div class="card-header">
            <strong>In Teil 2 gibt es ebenso zwei Produktarten mit folgenden Eigenschaften:</strong>
        </div>
        <div class="card card-body bg-light instructions">
            <p class="card-text">
                <strong>Produkt <i>X</i>:</strong>
            </p>
            <ul>
                <li>
                    <strong>Das Produkt <i>X</i> verursacht einen Verlust von 60 Punkten für Teilnehmer 2.</strong>
                </li>
            </ul>
            <p class="card-text">
                <strong>Produkt <i>Y</i>:</strong>
            </p>
            <ul>
                <li>
                    <strong>Das Produkt <i>Y</i> verursacht keinen Verlust für Teilnehmer 2.</strong>
                </li>
                <li>
                    <strong><u>Im Unterschied zu Teil 1</u> gilt für das Produkt <i>Y</i> ein Mindestpreis von 20 Punkten.</strong>
                </li>
            </ul>
            <p align="justify">
                Sie können die Eigenschaften der beiden Produkte auf den Seiten, die den Instruktionen zu Teil 2 folgen,
                jederzeit nachlesen, in dem Sie den Mauszeiger über das jeweilige Wort („Produkt <i>X</i>“,
                „Produkt <i>Y</i>“) bewegen.
            </p>
        </div>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Wichtiger Hinweis:</strong> Auf den Seiten, die den Instruktionen zu Teil 2 folgen, besteht die
                Möglichkeit, die Instruktionen zu Teil 2 am unteren Rand jederzeit nachzulesen.
            </p>
        </div>
    </div>

    <br>

    <div class="card bg-light">
        <div class="card-header">
            <strong>Im Folgenden werden die Neuheiten von Teil 2 beschrieben:</strong>
        </div>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Rolle: KÄUFER</strong>
                <br><br>
                <b>Der Käufer erhält in jeder der 24 Runden zwei Angebote und kann höchstens eines davon annehmen</b>,
                d.h. er kann ein Produkt oder keines kaufen.
                <br><br>
                <b>Der Preis für das Produkt <i>X</i> kann zwischen 0 und 50 Punkten liegen und der Preis für das
                    Produkt <i>Y</i> zwischen 20 und 50 Punkten.</b>
                <br><br>
                So wie in Teil 1 wird die Auszahlung des Käufers in jeder Runde wie folgt bestimmt:
            </p>
            <ul>
                <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 <i>X</i> oder ein Produkt <i>Y</i> kauft, erhöht er seine Auszahlung um 50 Punkte abzüglich des
                    Produktpreises. <strong>Auszahlung: 80 Punkte + 50 Punkte - Preis</strong>.
                </li>
            </ul>
            <p align="justify">
                Zur Erinnerung, die Kaufentscheidung des Käufers hat in jeder Runde die gleichen
                <strong>Auswirkungen für den Teilnehmer 2</strong> wie in Teil 1:
            </p>
            <ul>
                <li>
                    <strong>Wenn der Käufer das Produkt <i>X</i> kauft, entsteht ein Verlust von 60 Punkten für
                        Teilnehmer 2.</strong>
                </li>
                <li>
                    <strong>Wenn der Käufer das Produkt <i>Y</i> oder gar kein Produkt kauft, entsteht kein Verlust für
                        Teilnehmer 2.</strong>
                </li>
            </ul>
            <p align="justify">
                Das bedeutet also, dass der Verlust für den Teilnehmer 2 in der Runde nur dann anfällt, wenn das Produkt
                <i>X</i> auch gekauft wird.
            </p>
        </div>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <strong>Rolle: TEILNEHMER 2</strong>
                <br><br>
                In Teil 2 <strong>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>
    </div>

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

{% block styles %}
<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 %}