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


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


{% block content %}
    <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">
                <b>Rolle: TEILNEHMER 1</b>

                <br><br>

                <b>Im Gegensatz zu Teil 1 erhält Teilnehmer 1 jetzt drei vorgegebene Auszahlungen und muss sich für eine
                    davon entscheiden.</b>
        </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 <b>kann Teilnehmer 2 keine Entscheidung treffen. Jedoch erfährt der Teilnehmer 2 das Ergebnis
                und damit seine Punkte am Ende jeder Runde</b>.
            </p>
        </div>

        <div class="card card-body bg-light instructions">
            <p align="justify" class="card-text">
                <b>Wichtiger Hinweis</b>: 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>

    <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 %}