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


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


{% block content %}
    <div class="d-block d-sm-none alert alert-warning">Ihr Bildschirm ist zu schmal. Bitte verwenden Sie Ihr Endgerät
        quer.
    </div>

    <div class="d-none d-sm-block">
        <div class="card card-body bg-light instructions">
            <strong>Nehmen Sie nun Bezug auf die Studie:</strong>
        </div>

        <br><br>

        <table>
            <th style="background-color:#e1f5fa">
                6) Bitte geben Sie an, wie stark Sie der jeweiligen Aussage zustimmen:
            </th>
        </table>

        <br>

        <table class=' text-center'   cellspacing=1>
            <thead>
            <th width="30%"></th>
                <th width="9%" style="vertical-align:top">Stimme voll zu</th>
                <th width="12%" style="vertical-align:top">Stimme eher zu</th>
                <th width="18%" style="vertical-align:top">Stimme weder zu noch dagegen</th>
                <th width="12%" style="vertical-align:top">Stimme eher dagegen </th>
                <th width="12%" style="vertical-align:top">Stimme voll dagegen</th>
                <th width="7%" style="vertical-align:top">weiß nicht</th>
            </thead>

            <tbody>
            <tr style="background-color:#e1f5fa">
                <td align="justify"> Ich habe die Studie zu jedem Zeitpunkt voll und ganz verstanden.</td>
                <td><label><input type="radio" name="verstanden" value="1"></label></td>
                <td><label><input type="radio" name="verstanden" value="2"></label></td>
                <td><label><input type="radio" name="verstanden" value="3"></label></td>
                <td><label><input type="radio" name="verstanden" value="4"></label></td>
                <td><label><input type="radio" name="verstanden" value="5"></label></td>
                <td><label><input type="radio" name="verstanden" value="6"></label></td>
            </tr>

            <tr>
                <td align="justify"> Bitte markieren Sie hier ganz rechts „weiß nicht“ als Nachweis, dass Sie den Text gelesen haben.</td>
                <td><label><input type="radio" onclick="screen_quali(1)" name="quality_check" value="1"></label></td>
                <td><label><input type="radio" onclick="screen_quali(2)" name="quality_check" value="2"></label></td>
                <td><label><input type="radio" onclick="screen_quali(3)" name="quality_check" value="3"></label></td>
                <td><label><input type="radio" onclick="screen_quali(4)" name="quality_check" value="4"></label></td>
                <td><label><input type="radio" onclick="screen_quali(5)" name="quality_check" value="5"></label></td>
                <td><label><input type="radio" onclick="screen_quali(6)" name="quality_check" value="6"></label></td>
            </tr>

            <tr style="background-color:#e1f5fa">
                <td align="justify">Ich fühlte mich für Teilnehmer 2 verantwortlich und habe daher das
                    <span class="tooltip1"><blau>Produkt BLAU</blau> <span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></span>
                    gewählt.</td>
                <td><label><input type="radio" name="not_harming" value="1"></label></td>
                <td><label><input type="radio" name="not_harming" value="2"></label></td>
                <td><label><input type="radio" name="not_harming" value="3"></label></td>
                <td><label><input type="radio" name="not_harming" value="4"></label></td>
                <td><label><input type="radio" name="not_harming" value="5"></label></td>
                <td><label><input type="radio" name="not_harming" value="6"></label></td>
            </tr>

            <tr>
                <td align="justify"> Für meine Entscheidung war lediglich meine eigene Auszahlung relevant.  </td>
                <td><label><input type="radio" name="ownpayoff" value="1"></label></td>
                <td><label><input type="radio" name="ownpayoff" value="2"></label></td>
                <td><label><input type="radio" name="ownpayoff" value="3"></label></td>
                <td><label><input type="radio" name="ownpayoff" value="4"></label></td>
                <td><label><input type="radio" name="ownpayoff" value="5"></label></td>
                <td><label><input type="radio" name="ownpayoff" value="6"></label></td>
            </tr>

            <tr style="background-color:#e1f5fa">
                <td align="justify"> Für meine Entscheidung war sowohl meine eigene Auszahlung sowie die Auszahlung von Teilnehmer 2 relevant.</td>
                <td><label><input type="radio" name="utilitarian" value="1"></label></td>
                <td><label><input type="radio" name="utilitarian" value="2"></label></td>
                <td><label><input type="radio" name="utilitarian" value="3"></label></td>
                <td><label><input type="radio" name="utilitarian" value="4"></label></td>
                <td><label><input type="radio" name="utilitarian" value="5"></label></td>
                <td><label><input type="radio" name="utilitarian" value="6"></label></td>
            </tr>
            </tbody>
        </table>

        <br><br>

                <table align="justify">
            <th style="background-color:#e1f5fa; text-align:justify">
                    7) In der heutigen Studie konnten Sie zwischen verschiedenen Produkten wählen. Die
                    Preise dieser Produkte stimmten mit denjenigen überein, die Teilnehmer in der Rolle der
                    Verkäufer in früheren Studien festgelegt haben. Stellen Sie sich vor, die Entscheidungen über
                    Preise wären stattdessen von aktiven Teilnehmern, die die Rolle der Verkäufer gespielt hätten,
                    festgelegt worden. Bitte nehmen Sie Stellung zur folgenden Aussage:
            </th>
        </table>

        <br>

        <table class=' text-center'   cellspacing=1>
            <thead>
            <tr>
                <th width="30%"></th>
                <th width="9%" style="vertical-align:top">Stimme voll zu</th>
                <th width="12%" style="vertical-align:top">Stimme eher zu</th>
                <th width="18%" style="vertical-align:top">Stimme weder zu noch dagegen</th>
                <th width="12%" style="vertical-align:top">Stimme eher dagegen </th>
                <th width="12%" style="vertical-align:top">Stimme voll dagegen</th>
                <th width="7%" style="vertical-align:top">weiß nicht</th>
            </tr>
            </thead>

            <tbody>
            <tr style="background-color:#e1f5fa">
                <td align="justify">Ich hätte mit höherer Wahrscheinlichkeit das
                    <span class="tooltip1"><orange>Produkt ORANGE</orange> <span class="tooltiptext1">Verlust für Teilnehmer 2: -60 Punkte</span></span>
                    gekauft.</td>
                <td><label><input type="radio" name="x_tendency_buyer" value="1"></label></td>
                <td><label><input type="radio" name="x_tendency_buyer" value="2"></label></td>
                <td><label><input type="radio" name="x_tendency_buyer" value="3"></label></td>
                <td><label><input type="radio" name="x_tendency_buyer" value="4"></label></td>
                <td><label><input type="radio" name="x_tendency_buyer" value="5"></label></td>
                <td><label><input type="radio" name="x_tendency_buyer" value="6"></label></td>
            </tr>
            </tbody>
        </table>

        <p></p>
        <p></p>
        <div align="right">{% next_button %} </div>
     </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 %}