{% extends "Tutorial_Investment_Task/Page.html" %}
{% load otree static %}

{% block title %}
Investitions-Entscheidungen Einführung
{% endblock %}
{% block content %}


<div class="welcome_page content" id="content_welcome_page">
    <p>
        Willkommen zur Investitionsentscheidungs-Studie.
        Die Studie wird zwischen 1 - 2 Stunden dauern und Sie haben im Verlauf der Studie die
        Möglichkeit zusätzlich eine Bonuszahlung zu verdienen.
        Im Folgenden wird Ihnen erklärt, wie Sie Ihre Investitions-Entscheidungen treffen können,
        wie die Aktie funktioniert, in welche Sie investieren können,
        wie Sie über Ihre Erwartungen abgefragt werden,
        und wie sich Ihre Entscheidungen auf Ihre Bonuszahlung am Ende auswirken.
        Es werden dann einige Übungsrunden gespielt und zum Schluss dieser Einführung wird es ein
        kurzes Quiz geben, damit Sie sicher sein können, dass Sie alles verstanden haben.
        Wenn Sie während der Einfühung etwas unverständlich finden, zögern Sie nicht, die Hand zu heben
        damit wir Ihre Fragen direkt beantworten können.
    </p>
    <p>
        Wir bitten Sie darum, während der gesamten Studie möglichst konzentriert zu bleiben und dieses Browser-Fenster
        nicht zu verlassen.
    </p>
    <p>
        Klicken Sie bitte auf "Weiter", um mit den Instruktionen zu starten.
    </p>
    <button class="button btn continue_button navigation_button" id="welcome_continue_button" type="button"
            onclick="flip_tut_pages('continue')">Weiter</button>
</div>

<div class="trading_tutorial content" id="content_trading_tutorial" style="display: none;">
    <h4>Handelsentscheidungen treffen</h4>
    <div class="instr_text tut_part_1" id="instr_text_1">
        <p>
            In dieser Studie werden Sie in {{ n_blocks }} "Blöcken" über jeweils {{ n_rounds_per_block }} Runden
            Investitionsentscheidungen treffen.
            Es wird dabei eine Aktie geben, in die Sie investieren können. Zu Beginn wird der Wert dieser Aktie
            {{start_price}} Punkte sein. Sie können in jeder Periode entscheiden wie Ihr Portfolio aussehen soll.
            Dabei haben Sie drei Möglichkeiten: Sie können eine Aktie halten, Sie können keine Aktie halten,
            oder Sie können einen Blankoverkauf tätigen. Letzteres wird später genauer erläutert.
        </p>
        <p>
            Unten sehen Sie den Bildschirm mit welchem Sie während der Aufgabe interagieren werden.
            Es werden hier die einzelnen Spalten kurz beschrieben. Schauen Sie sich diese am besten jeweils
            kurz in der Tabelle an, während dem Sie sich die Liste durchlesen:
            <ul>
                <li><b>Spalte I:</b> Zeigt die gehaltenen Anteile der Aktie. '+1' bedeutet also,
                    dass Sie in die Aktie investiert haben indem Sie Sie gekauft haben und nun besitzen.
                    Eine '0' bedeutet, dass Sie die Aktie momentan nicht halten.
                    Eine '-1' bedeutet, dass Sie einen Blankoverkauf getätigt haben. Dies wird Ihnen später erklärt.
                    Ob Sie die Aktie halten, nicht halten, oder einen Blankoverkauf tätigen können Sie
                    jeweils entscheiden.</li>
                <li><b>Spalte II:</b> Zeigt den Einstandskurs an. Dies ist der Preis zu welchem Sie die
                    Aktie gekauft haben, falls Sie diese halten.</li>
                <li><b>Spalte III:</b> Diese Spalte zeigt den aktuellen Kurs der Aktie an.
                    Dies ist der Preis, zu welchem Sie in dieser Runde die Aktie kaufen oder verkaufen können.
                    Wie sich dieser Preis entwickelt wird später genauer erklärt.</li>
                <li><b>Spalte IV:</b> Diese Spalte kann zu einem späteren Zeitpunkt weitere Informationen über die
                    zukünftige Preisentwicklung enthalten. Der Inhalt der Spalte wird Ihnen dann genauer erläutert.</li>
                <li><b>Spalte V:</b> Diese Spalte zeigt Ihnen an, wie viel Gewinn oder Verlust Sie mit der
                    aktuell gehaltenen Aktie bisher gemacht haben, seit Sie diese gekauft haben.
                    Die Zahl in der Klammer drückt das selbe Konzept in Prozenten aus. 100% Gewinn würde bedeuten,
                    dass sich der Preis seit dem Kauf verdoppelt hat. -50% würde wiederum bedeuten,
                    das sich der Preis halbiert hat, und Sie somit 50% Verlust gemacht haben.</li>
                <li><b>Spalte VI:</b> Zeigt den aktuellen Kurswert der einzelnen Positionen an. Wenn Sie also die
                    Aktie mit Wert 100 halten, würde hier 100 angezeigt. Ebenso sehen Sie hier Ihr aktuelles Bargeld,
                    sowie den gesamten Wert Ihres Bargeldes plus dem Ihres Portfolios in der "Gesamt" Zeile.</li>
            </ul>
        </p>
        <p>
            Unterhalb der Tabelle finden Sie die Schaltflächen, mit welchen Sie Ihre Handelsentscheidungen
            treffen können. Um sich mit dem Prozess vertraut zu machen, kaufen Sie bitte die Aktie, indem
            Sie auf "+1 Aktie Halten" klicken.<br>
            Der Instruktionstext wird dann hier weitergeführt und Sie können nach unten scrollen.
        </p>
    </div>

    <div class="instr_text tut_part_2" id="instr_text_2" style="display: none;">
        <hr>
        <p>
            Sehr gut. Sie haben nun in die Aktie investiert.
            Der Wert der gekauften Aktie wurde Ihrem "Bargeld" Feld abgezogen.
        </p>
        <p>
            Um Ihnen während der Aufgabe später eine Orientierung über Ihre Zeit zu geben,
            wird nach {{ max_time }} Sekunden eine blinkende Warnmeldung erscheinen, wie Sie sie unten sehen können.
            Wenn Sie Ihre Entscheidungen jeweils treffen, bevor die Meldung erscheint,
            werden Sie in der vorgegebenen Zeit fertig. Lassen Sie sich jedoch nicht unter Druck setzen.
            {{ max_time }} Sekunden reichen, um eine überlegte Entscheidung zu treffen.
            Wenn Sie möchten, können Sie die Zeit in den folgenden Übungsrunden einmal verstreichen lassen,
            um ein Gefühl dafür zu erhalten.
        </p>
        <div id="timer_warning_field">
        <p class="blink_text">
            So sieht diese Warnmeldung aus: "Bitte entscheiden Sie sich jetzt!"
        </p>
        </div>
        <p>
            Nachdem Sie sich für eine Aktion entschieden haben wird Ihnen in der Aufgabe für
            {{update_time}} Sekunden ein Update über den Preis der Aktie gegeben.
            Wie sich der Preis entwickelt, wird auf den nächsten Seiten genauer erklärt.
            Dieses Update sieht zum Beispiel so aus:
        </p>
        <div class="price_update_text example_box" id="price_update_text">
            <p class="price_update_paragraph">
                Der Preis der Aktie <b>steigt</b> um <b>5</b> und beträgt nun
                    <span id="new_value" style="font-weight: bold;"></span>
            </p>
        </div>
        <p>
            Nehmen Sie sich kurz Zeit um sich anzuschauen, wie sich die Tabelle nach Ihrem Kauf und
            dem Preis-Update verändert hat.
        </p>
        <p>
            Wenn Sie soweit alles verstanden haben, gehen Sie bitte davon aus, dass Sie die Aktie
            nun verkaufen möchten. Klicken Sie bitte die Entsprechende Schaltfläche.
        </p>
    </div>

    <div class="content trade_interface" id="id_trade_interface">
    <!--    trading information table-->
        <table class = "trade_info_table" id="trade_info_table" style="text-align:center; width: 100%">
            <tr>
                <th></th>
                <th>I</th>
                <th>II</th>
                <th>III</th>
                <th>IV</th>
                <th>V</th>
                <th>VI</th>
            </tr>
            <tr style="background: darkgrey">
                <th></th>
                <th>Anteil</th>
                <th>Einstandskurs</th>
                <th>Aktueller Kurs</th>
                <th>{% if main_condition == 'probs_shown' %}Wahrscheinlichkeit<br>für Anstieg
                    {% else %}Aktueller <br> Zustand
                    {% endif %}
                </th>
                <th>Gewinne/Verluste <br>Absolut (in %)</th>
                <th>Kurswert</th>
            </tr>
            <tr class="table_content">
                <td><b>Bargeld</b></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="id_cash">{{ start_cash }}</td>
            </tr>
            <tr class="table_content">
                <td><b>Aktie</b></td>
                <td id="id_hold">0</td>
                <td id="id_baseprice">0</td>
                <td id="id_price">{{start_price}}</td>
                <td>-</td>
                <td id="id_return">0 (0.0)</td>
                <td id="id_value">0</td>
            </tr>
            <tr style="background: skyblue;">
                <td><b>Gesamt</b></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="id_value_all" style="font-weight: bold">{{start_cash}}</td>
            </tr>
        </table>
        <br>
        <hr>
        <!--    order forms-->
        <div id="order_buttons">
             <div class="row">
                 <button class="btn trade_button" id="asset_short_button" type="button"
                         onclick="check_tutorial_moves('short', 'trade_page')">-1 Aktie Halten</button>
                 <button class="btn trade_button" id="asset_hold_none_button" type="button"
                         onclick="check_tutorial_moves('hold_none', 'trade_page')">Keine Aktie Halten</button>
                 <button class="btn trade_button" id="trading_continue_button" type="button"
                         onclick="check_tutorial_moves('hold_one', 'trade_page')">+1 Aktie Halten</button>
             </div>
         </div>
    </div>

    <button class="button btn continue_button navigation_button" id="trade_continue_button" type="button"
        style="display: none" onclick="flip_tut_pages('continue')">Weiter</button>
</div>

<div class="shorting_tutorial content" id="content_shorting_tutorial" style="display: none;">
    <h4>Blankoverkäufe</h4>
    <div class="instr_text tut_part_3" id="instr_text_3">
        <p>
            Bei Investitionsgeschäften erzielen Sie einen Gewinn, indem Sie ein Wertpapier möglichst günstig kaufen
            und möglichst teuer verkaufen. Die Reihenfolge in welcher Sie diese Aktionen tätigen spielt dafür aber
            keine Rolle. Das heisst, Sie können eine Aktie verkaufen, ohne diese zu besitzen.
            Dies wird gemacht, indem Sie sich die Aktie von einer Drittperson (in diesem Fall von uns als
            Experimentalleitung) ausleihen. Sie "schulden" uns dann also noch eine Aktie,
            weswegen der Zustand des Blankoverkaufs hier als "-1 Aktie Halten" dargestellt wird.
        </p>
        <p>
            Stellen Sie sich vor, Sie hätten einen Anteil einer Aktie für 100 Punkte verkauft.
            Diese 100 Punkte haben Sie zwar nun als Bargeld erhalten, es steht aber immer noch ein Rückkauf der
            Aktie bevor, damit Sie diese zurückgeben können (Sie haben die Aktie ja von uns ausgeliehen).
            Unter dem Strich machen Sie bei einem Blankoverkauf also einen Gewinn, wenn der Wert der Aktie <b>sinkt</b>.
            Wenn Sie die Aktie zu einem späteren Zeitpunkt für 80 Punkte kaufen können, um sie zurück zu geben,
            dann haben Sie insgesamt 20 Punkte Gewinn gemacht (100 Punkte erhalten beim Verkauf - 80 Punkte ausgegeben
            beim Rückkauf = 20 Punkte Gewinn). Umgekehrt ist es für Sie nun <b>nicht</b> wünschenswert, dass der Wert
            der Aktie steigt, da Sie dann mehr Geld für den Rückkauf ausgeben müssen.
        </p>
        <p>
            Wenn Sie das Gefühl haben das Prinzip so weit verstanden zu haben, dann schauen Sie sich bitte die Tabelle
            unten an (diese wurde wieder in den Start-Zustand zurückversetzt) und tätigen Sie einen Blankoverkauf.
            Der Text wird dann hier fortgesetzt.
        </p>
    </div>

    <div class="instr_text tut_part_4" id="instr_text_4" style="display: none;">
        <hr>
        <p>
            Stellen Sie sich nun vor Sie erhalten das folgende Preis-update:
        </p>
        <div class="price_update_text example_box" id="price_update_text2">
            <p class="price_update_paragraph">
                Der Preis der Aktie <b>sinkt</b> um <b>5</b> und beträgt nun
                    <span id="new_value2" style="font-weight: bold;"></span>
            </p>
        </div>
        <p>
            Wie Sie sehen können, wird in der Spalte "Anteile" nun -1 angezeigt, weil ein Rückkauf der Aktie aussteht.
            Der Einstandspreis wird als der Preis angezeigt, zu welchem Sie den Blankoverkauf getätigt haben.
            Wie Sie anhand des Preis-updates ablesen können, ist der Preis der Aktie <b>gesunken</b>.
            Dies gibt Ihnen die Möglichkeit die Aktie günstiger zurück zu kaufen als Sie diese Verkauft haben,
            und wird in der "Gewinn/Verlust" Spalte daher als <b>Gewinn</b> angezeigt. Die Abhängigkeit Ihres
            Gewinns/Verlustes von den Preisbewegungen ist also genau umgekehrt als wenn Sie die Aktie gekauft hätten.
        </p>
        <p>
            Zusammenfassend sollten Sie eine Aktie dann <b>kaufen</b>, wenn Sie der Meinung sind, dass deren Preis
            <b>steigen</b> wird, während Sie die Aktie <b>blankoverkaufen</b> sollten, wenn Sie eher denken,
            dass der Preis <b>sinken</b> wird. Es steht Ihnen auch jederzeit frei aus einer Blankoverkauf-position
            direkt eine Aktie zu halten. In diesem Fall kaufen Sie einfach zwei Anteile (was automatisch passiert,
            wenn Sie auf "+1 Aktie Halten" klicken). Einen Anteil, welchen Sie zurückgeben, und einen,
            welchen Sie halten. Dasselbe gilt, wenn Sie eine Aktie halten und direkt einen Blankoverkauf tätigen.
        </p>
        <p>
            Um fortzufahren halten Sie nun wieder eine Aktie (Sie kaufen also 2 Anteile).
        </p>
    </div>

    <div class="content trade_interface" id="id_trade_interface2">
    <!--    trading information table-->
        <table class = "trade_info_table" id="trade_info_table2" style="text-align:center; width: 100%">
            <tr style="background: darkgrey">
                <th></th>
                <th>Anteil</th>
                <th>Einstandskurs</th>
                <th>Aktueller Kurs</th>
                <th>{% if main_condition == 'probs_shown' %}Wahrscheinlichkeit<br>für Anstieg
                    {% else %}Aktueller <br> Zustand
                    {% endif %}
                </th>
                <th>Gewinne/Verluste <br>Absolut (in %)</th>
                <th>Kurswert</th>
            </tr>
            <tr class="table_content">
                <td><b>Bargeld</b></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="id_cash2">{{ start_cash }}</td>
            </tr>
            <tr class="table_content">
                <td><b>Aktie</b></td>
                <td id="id_hold2">0</td>
                <td id="id_baseprice2">0</td>
                <td id="id_price2">{{start_price}}</td>
                <td>-</td>
                <td id="id_return2">0 (0.0)</td>
                <td id="id_value2">0</td>
            </tr>
            <tr style="background: skyblue;">
                <td><b>Gesamt</b></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="id_value_all2" style="font-weight: bold">{{start_cash}}</td>
            </tr>
        </table>
        <br>
        <hr>
        <!--    order forms-->
        <div id="order_buttons2">
             <div class="row">
                 <button class="btn trade_button" id="asset_short_button2" type="button"
                         onclick="check_tutorial_moves('short', 'short_page')">-1 Aktie Halten</button>
                 <button class="btn trade_button" id="asset_hold_none_button2" type="button"
                         onclick="check_tutorial_moves('hold_none', 'short_page')">Keine Aktie Halten</button>
                 <button class="btn trade_button" id="trading_continue_button2" type="button"
                         onclick="check_tutorial_moves('hold_one', 'short_page')">+1 Aktie Halten</button>
             </div>
         </div>
    </div>

    <button class="button btn back_button navigation_button" id="shorting_back_button" type="button"
        onclick="flip_tut_pages('back')">Zurück</button>
    <button class="button btn continue_button navigation_button" id="shorting_continue_button" type="button"
            style="display: none" onclick="flip_tut_pages('continue');">Weiter</button>
</div>

<div class="markov_tutorial content" id="content_markov_tutorial" style="display: none;">
    <h4>Preis der Aktie</h4>
    <div class="instr_text tut_part_5" id="instr_text_5">
        <p>
            Im folgenden wird erklärt, wie der Preis der Aktie sich im Verlauf der Aufgabe verändert.
            Die Aktie ist ein Anteil an einer Firma, welche Gewinne, aber auch Verluste erzielen kann.
            Die Firma ist immer entweder in einem guten oder schlechten Zustand.
            Wenn es der Firma gut geht, macht diese mit einer höheren Wahrscheinlichkeit ({{raise_prob_good}}%)
            Gewinne, weswegen der Aktienpreis eher steigen wird. Wenn es der Firma hingegen schlecht geht,
            wird der Aktienpreis eher sinken ({{raise_prob_good}}%).
            Zu Beginn der Aufgabe wird zufällig bestimmt in welchem Zustand die Firma
            startet (mit gleichen Wahrscheinlichkeiten).
        </p>
        <p>
            Die Art wie sich der Zustand der Firma im Verlauf der Aufgabe entwickelt sieht folgendermassen aus:
            Mit einer Wahrscheinlichkeit von {{non_switch_prob}}% wird der Zustand gleich bleiben wie er in der
            letzten Runde war. Das heisst, dass ein guter Zustand dann in einer weiteren Runde guten Zustands
            fortgeführt würde, und ein schlechter Zustand mit weiterhin schlechtem Zustand.
            Mit einer Wahrscheinlichkeit von {{switch_prob}}% verändert sich jedoch der Zustand vom guten zum
            schlechten oder umgekehrt. Die folgende Grafik und Tabelle zeigen auf zwei verschiedene Arten wie sich
            die Zustände entwickeln.
        </p>

        <img src="{% static 'Tutorial_Investment_Task/Chain_Diagram.PNG' %}" alt=""
        width="750px" style="margin-left: auto; margin-right: auto; display: block;">

        <table id="id_transition_matrix_table" class="table">
            <tr><td rowspan="2"></td><td rowspan="2">
            </td><td colspan="2">Nachher:</td></tr>
            <tr style="font-weight: bold;">
                <td>Guter <br> Zustand</td> <td>Schlechter <br> Zustand</td>
            </tr>
            <tr><td rowspan="2">Vorher:</td>
                <td><b>Guter <br> Zustand</b></td>
                <td>{{ non_switch_prob }}%</td> <td>{{ switch_prob }}%</td>
            </tr>
            <tr><td><b>Schlechter <br> Zustand</b></td>
                <td>{{ switch_prob }}%</td> <td>{{ non_switch_prob }}%</td>
            </tr>
        </table>
    </div>
    <div class="instr_text tut_part_6" id="instr_text_6" style="display: none;">
        <p>
            Der "gute" Zustand bedeutet dabei nichts Anderes, als dass der Preis der Aktie in
            dieser Runde mit einer Wahrscheinlichkeit von {{raise_prob_good}}% steigen und mit {{fall_prob_good}}%
            fallen wird. Dies bedeutet, dass wenn die Firma 100 Perioden im guten Zustand wäre, der Preis der
            Aktie durchschnittlich {{raise_prob_good}} mal steigen und {{fall_prob_good}} mal fallen wird.
            Befindet sich die Firma im schlechten Zustand, dann steigt der Preis mit {{fall_prob_good}}%
            Wahrscheinlichkeit an und fällt mit {{raise_prob_good}}% Wahrscheinlichkeit.
            Er würde also von 100 Perioden im schlechten Zustand
            durchschnittlich {{fall_prob_good}} mal ansteigen und {{raise_prob_good}} mal fallen.
        </p>
        <p>
            Die Grösse der Preisbewegungen können entweder {{ movements.0 }},
            {{ movements.1 }} oder {{ movements.2 }} sein.
            Dies gilt für ansteigende wie auch fallende Preise. Welchen der drei möglichen Schritte
            der Preis beim nächsten Update macht wird zufällig und mit gleicher Wahrscheinlichkeit gewählt.
            Lediglich ob der Preis ansteigt oder sinkt wird durch den oben beschriebenen Mechanismus beeinflusst.
            Als Beispiel: Angenommen der aktuelle Preis der Aktie ist 1000 und der Preis-mechanismus führt zu
            einem Anstieg des Preises. Es ist nun gleich wahrscheinlich, dass der nächste Preis der Aktie
            {{ example_move.0 }},  {{ example_move.1 }} oder {{ example_move.2 }} sein wird.
        </p>

    </div>

<button class="button btn back_button navigation_button" id="markov_back_button" type="button"
    onclick="flip_tut_pages('back')">Zurück</button>
<button class="button btn continue_button navigation_button" id="markov_continue_button" type="button"
        onclick="check_tutorial_moves('continue', 'markov')">Weiter</button>
</div>

<div class="belief_tutorial content" id="content_belief_tutorial" style="display: none">
    <h4>Wette und Lotterie</h4>
    <div class="instr_text tut_part_7" id="insr_text_7">
        <p>
            Zwischen den Handelsentscheidungen wird Ihnen jeweils eine weitere Frage gestellt,
            welche nun hier genauer erklärt wird.
        </p>
        <p>
            In jeder Runde gibt es eine <b>Lotterie</b>, in welcher Sie entweder {{ lottery_bonus }} Bonuspunkte
            oder gar nichts erhalten können. Die Wahrscheinlichkeit, mit welcher Sie die Bonuspunkte erhalten
            (Gewinnwahrscheinlichkeit) wird Ihnen aber nicht gezeigt. Sie wird zufällig festgelegt, wobei alle
            Gewinnwahrscheinlichkeiten zwischen 0 und 100% gleich häufig auftreten.
        </p>
        <p>
            Als Alternative zu dieser Lotterie können Sie auf den Preisanstieg in der nächsten Runde <b>Wetten</b>.
            Diese Wette würde dann so aussehen:
        </p>
        <div class="lottery_text example_box" id="lottery_explanation_text">
            <p>
                Wenn der Preis beim nächsten Preis-Update ansteigen sollte (egal um wie viel), erhalten
                Sie {{ lottery_bonus }} Bonuspunkte gutgeschrieben, welche am Ende in Ihre Auszahlung einfliessen.
            </p>
        </div>
        <p>
            In der Lotterie zu gewinnen oder in der Wette zu gewinnen erbringt Ihnen also gleich viele Punkte.
            Folgendes ist nun die Frage, welche Sie beantworten sollen:
        </p>
        <div class="lottery_text example_box" id="belief_question">
            <p>
                Welche Gewinnwahrscheinlichkeit muss die Lotterie <b>mindestens</b> haben, damit Sie nicht lieber auf
                den Preisanstieg wetten.
            </p>
        </div>
        <p>
            Sollte Ihnen die tatsächliche Gewinnwahrscheinlichkeit der Lotterie nicht ausreichen (die
            Gewinnwahrscheinlichkeit der Lotterie also <i>kleiner</i> sein als die von Ihnen angegebene
            mindest-Gewinnwahrscheinlichkeit), dann wetten Sie automatisch auf den Preisanstieg und erhalten
            Bonuspunkte falls dieser eintritt. Sollte die Gewinnwahrscheinlichkeit der Lotterie aber <i>gleich gross</i>
            oder sogar <i>grösser</i> sein als die von Ihnen angegebene mindest-Gewinnwahrscheinlichkeit,
            dann wird die Lotterie ausgespielt, und Sie erhalten mit der tatsächlichen Wahrscheinlichkeit der Lotterie
            die Bonuspunkte.
        </p>
        <p>
            Im Folgenden sehen Sie den Slider mit welchem Sie Ihre Antwort abgeben können. Bevor Sie darauf
            klicken ist nur die Linie sichtbar. Setzen Sie den Slider nun bitte auf <b>60%</b> und klicken Sie auf
            "Weiter".
        </p>
        <div id="slider_container" class = "example_box">
            <label for="belief_slider"></label>
            <span>
                <i>0%</i>
                <input type="range" class="slider slider_hidden belief_slider" id="belief_slider"
                                                          style="width: 500px"
                                                          oninput="change_slider_value()">
                <i>100%</i>
            </span>
            <p>
                <br>
                Ich würde lieber die Lotterie spielen, wenn diese eine Gewinnwahrscheinlichkeit von
                <span id="belief_feedback" style="font-weight: bold">XX</span><b>%</b>
                oder höher hat.
            </p>
        </div>
    </div>
    <div class="instr_text tut_part_8" id="insr_text_8" style="display: none;">
        <hr>
        <p>Zwei Punkte sind speziell wichtig:</p>
        <p>
            <b>Punkt 1:</b> Ihre Antwort hängt nur von der Wahrscheinlichkeit des nächsten Preisanstieges ab.
            Stellen Sie sich vor, dass Sie mit Sicherheit wüssten, dass der Preis ansteigen wird:
            Die Lotterie müsste ebenfalls eine garantierte Auszahlung bieten (also 100% Gewinnchance),
            damit Sie nicht eindeutig die Wette bevorzugen.
            Falls Sie mit Sicherheit wüssten, dass der Preis sinkt, dann wäre Ihnen jede Lotterie lieber,
            die Ihnen wenigstens irgend eine Gewinnwahrscheinlichkeit bietet (oder gleichgültig gegenüber einer
            Lotterie, die keine Gewinnchance bietet). Sie würden in dieser Situation also 0% angeben.
        </p>
        <p>
            Während der Aufgabe werden Sie vermutlich nicht 100% von einem Preisanstieg oder einer Preisreduktion
            überzeugt sein. Mit dem Slider können Sie daher den Grad Ihrer Überzeugung oder Ihrer Vermutung ausdrücken.
            Je weiter Sie den Slider nach links oder rechts bewegen, desto sicherer sind Sie sich, dass der Preis
            ansteigen oder sinken wird.
        </p>
        <p>
            <b>Punkt 2:</b> Es ist für Sie immer vorteilhaft, wahrheitsgetreu anzugeben, was Sie von der Preisbewegung
            erwarten. Falls Sie eine <i>zu tiefe</i> Wahrscheinlichkeit angeben, kann es sein, dass Sie eine Lotterie
            spielen, die eine schlechtere Gewinnchance hatte, als auf den Preisanstieg zu wetten.
            Falls Sie einen <i>zu hohen</i> Wert angeben, kann es sein, dass Sie auf den Preisanstieg wetten,
            obwohl die Lotterie eine bessere Gewinnchance gehabt hätte.
        </p>
        <p>
            Am Ende des Experiments wird Ihnen neben den Punkten, welche Sie in der Investitionsaufgabe
            erhalten haben auch der Ertrag aus den Wetten und Lotterien mitgeteilt.
            {{ lottery_discount }}% dieses Ertrages werden zu Ihrer Gesamtpunktezahl gezählt,
            aus welcher sich Ihre Bonuszahlung am Ende der Studie berechnet.
        </p>
    </div>

    <button class="button btn back_button navigation_button" id="belief_back_button" type="button"
        onclick="flip_tut_pages('back')">Zurück</button>
    <button class="button btn continue_button navigation_button" id="belief_continue_button" type="button"
            onclick="check_tutorial_moves('continue', 'belief')">Weiter</button>
</div>

<div class="structure_tutorial content" id="content_structure_tutorial" style="display: none;">
    <h4>Ablauf und Auszahlung</h4>
    <p>
        Die Aufgabe wird Ihnen in  {{ n_blocks }} "Blöcken" präsentiert.
        Jeder Block besteht aus {{ n_rounds_per_block }} Runden und ist unabhängig.
        Das heisst, dass Ihre Entscheidungen und die Entwicklung der Preise im vorherigen Block keinerlei
        Einfluss auf den aktuellen Block haben. Zwischen den Blöcken können sich Einzelheiten der
        Aufgabe ändern, worauf Sie vor dem Start jedes Blocks jedoch hingewiesen und instruiert werden.
    </p>
    <p>
        Nach der letzten Runde jedes Blocks wird es noch ein letztes Preis-Update geben.
        Falls Sie die Aktie in der letzten Runde noch hielten oder noch schuldeten,
        wird diese nach dem Preis-Update automatisch verkauft oder zurückgekauft,
        so dass Sie am Ende des Blocks nur noch Bargeld halten. Die Auszahlung geschieht dann nach folgendem Schema:
    </p>
    <p>
        Wichtig für die Auszahlung ist die Differenz zwischen dem Wert Ihres Portfolios (Bargeld plus Aktie) zu Beginn
        des Blocks und dem Wert zum Schluss (also Ihr Gewinn oder Verlust). Hinzu kommen {{ lottery_discount }}% der
        Punkte welche Sie für die Einschätzung der Wahrscheinlichkeiten erhalten.
        Von diese Summe an Punkten wird dann mit einem Wechselkurs von {{ conversion_percent }}% zu einer
        Basis-Auszahlung von CHF {{ base_bonus }} hinzugezählt, respektive abgezogen.
        </p>
        <p>
        Ein Beispiel: Wenn die Wertsteigerung Ihres Portfolios plus der Bonus aus den Wahrscheinlichkeitsschätzungen
        im Verlauf der Aufgabe 100 Punkte beträgt, dann wird Ihre Auszahlung {{ example_payoff }} sein
        (CHF {{ base_bonus }} Basis-Auszahlung plus {{ conversion_percent }}% von 100).
    </p>
    <p>
        Wenn Sie die Instruktionen soweit verstanden haben, können Sie auf "Weiter" klicken um {{ n_rounds }}
        Übungsrunden zu starten. Diese dienen nur zu Übungszwecken, und haben keinerlei Einfluss auf Ihre
        Auszahlung am Ende der Studie.
    </p>
    <button class="button btn back_button navigation_button" id="structure_back_button" type="button"
        onclick="flip_tut_pages('back')">Zurück</button>
    <button class="button btn continue_button navigation_button" id="structure_continue_button" type="button"
            onclick="check_tutorial_moves('continue', 'structure')">Weiter</button>
</div>

<style>
    .example_box{
        margin-left: 5%;
        margin-bottom: 10px;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 1px;
        background: #eeeeee;"
    }

    .btn{
        margin-right: 10px;
    }

    .form-group{
        margin-right: 10px;
    }

    .row {
        margin-bottom: 20px;
    }

    .table_content{
        background: aliceblue;
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider_hidden::-webkit-slider-thumb {
        visibility: hidden;
    }

    .slider_hidden::-moz-range-thumb {
        visibility: hidden;
    }

    #id_transition_matrix_table td{
        border-color: dimgrey;
    }

    /* Timer style */
    .blink_text {
    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
    color: red;
    font-weight: bold;
    }

    @-moz-keyframes blinker {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @-webkit-keyframes blinker {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @keyframes blinker {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
</style>

{% endblock %}