{% block title %}
    <p style="text-align: center;
        font-size: 30px;
        font-weight: bold;" > Anweisungen </p>
{% endblock %}

{% block content %}
<style>

    .tab {
        display: none;

    }
    .otree-body{
        background-color: lightgrey;
        border-radius: 10px;

    }
    .center-text {
        text-align: center;
    }
</style>
<div class="tab">
    <p style="text-align: justify; font-size: large;">
    Alle Teilnehmenden sind wie Sie in Zweierteams eingeteilt. Jedes Zweierteam übernimmt die Rolle eines Produzenten in einer Volkswirtschaft.

    In jeder Runde bestimmen Sie und Ihr Teammitglied gemeinsamen Preis des von Ihnen produzierten Guts. Die Produktionsmenge ergibt sich automatisch aus der Nachfrage <b>(y)</b> nach Ihrem Produkt, die von zwei Faktoren abhängt:<br>
    <br>
    1.  Ein exogener Faktor <b> ω </b>, welcher die maximale Nachfrage vorgibt. Je höher ω ist, desto <b>mehr</b> wird von Ihrem Gut nachgefragt.<br>
    2.  Der von Ihnen gesetzte Preis <b> p </b> für Ihr Gut. Je höher Sie p setzen, desto <b>weniger</b> wird von Ihrem Gut nachgefragt.<br>
    Die Nachfrage (und damit auch Ihre Produktion) bestimmt sich durch:<br>
        <b>y = ω - p</b><br>
    Der Wert von ω beläuft sich auf <b>40</b>. Ihre einzige Aufgabe besteht somit darin, einen Preis p für Ihr Produkt festzusetzen. Damit die nachgefragte Menge nicht negativ ist, können Sie keinen Preis setzen, der höher ist als ω.<br>
    <br>
    Ihr Ziel ist es, Ihren Gewinn zu maximieren. Dieser ergibt sich aus Ihrem Umsatz (y &times; p) abzüglich der Produktionskosten. Ihre Kosten hängen von den Preisen aller anderen Teams ab, woraus sich der Durchschnittspreis <b>P</b> ergibt.
    Die Stückkosten für jedes von Ihnen produzierte Gut beläuft sich auf P – {{ player.cost_deduction }}. Um Ihre Kosten zu decken, muss Ihr Preis folglich mindestens {{ player.cost_deduction }} betragen. Ihre gesamten Produktionskosten sind folglich y &times; (P − {{ player.cost_deduction }}). Zu dem Zeitpunkt, zu dem Sie Ihren Preis festlegen, kennen Sie die Produktionskosten noch nicht, da Sie den Durchschnittspreis der Runde noch nicht kennen.
    Ihr Gewinn berechnet sich somit durch:<br>
    <b>y &times; p - y &times; (P - {{ player.cost_deduction }})</b>.<br>
        {{ if group.optimization == False}}
            Der optimale Preis, der den Gewinn Ihres Teams maximiert, lässt sich in Abhängigkeit vom Durchschnittspreis P berechnen. Mit ω=40 ist der optimale Preis p der folgende: <b>p = 15 + P/2</b>Dieser Preis maximiert den Gewinn Ihres Teams in jeder Runde.<br>
        {{ endif }}

    </p>
    <div class = "center-text">
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Weiter</button>
    </div>
</div>
<div class="tab">
    <p style="text-align: justify; font-size: large;">
    In jeder Runde geben Sie zuerst einen Preisvorschlag für Ihr gemeinsames Produkt ab. Dieser Preisvorschlag wird anschließend an Ihr Teammitglied weitergeleitet. Zeitgleich erhalten Sie den Preisvorschlag Ihres Teammitglieds. Anschließend geben Sie und Ihr Teammitglied unabhängig voneinander einen finalen Preisvorschlag ab. Einer dieser beiden Preise wird per Zufall (mit gleicher Wahrscheinlichkeit) als endgültiger Team-Preis ausgewählt. <br>
    <br>
    Zusätzlich dazu werden Sie in einigen Runden gebeten, nicht nur einen Preisvorschlag abzugeben, sondern auch eine Begründung für Ihren Preisvorschlag zu schreiben. Mit dieser Begründung können Sie darlegen, warum Sie sich für Ihren Preisvorschlag entschieden haben, und damit versuchen, Ihr Teammitglied von Ihrem Preisvorschlag zu überzeugen. Diese Begründung wird dann, zusammen mit Ihrem Preisvorschlag, an Ihr Teammitglied gesendet. Gleichzeitig erhalten Sie den Preisvorschlag Ihres Teammitglieds und dessen Begründung. Anschließend geben Sie und Ihr Teammitglied unabhängig voneinander einen finalen Preisvorschlag ab. Einer dieser beiden Preise wird per Zufall (mit gleicher Wahrscheinlichkeit) als endgültiger Teampreis ausgewählt.<br>
    <br>
    <b> Hinweis: </b> Sie erzielen einen hohen Gewinn, wenn sich die Produktion und der Gewinn pro Stück nicht stark voneinander unterscheiden. <br>
    <br>
    Ihre Gewinne werden über alle Runden aufsummiert und abschließend im Verhältnis 50:1 in Euro umgerechnet. Am Ende erhalten Sie Ihre gesamten Einnahmen sowie etwaige Bonuszahlungen ausbezahlt.<br>
    <br>
    </p>
    <div class="center-text">
        <img src="{{ static 'Project_FK_files/Flowchart_Preissetzung.png' }}" style="max-width: 100%; height: auto;" />
    </div>
    <br>
    <br>
    <div class = "center-text">
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Zurück</button>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Weiter</button>
    </div>
</div>
<div class="tab">
    <h3>Verständnisfragen</h3>

    <p style="text-align: justify; font-size: large;">
    Bitte beantworten Sie die folgenden Verständnisfragen. Sie können erst zum Experiment fortfahren, wenn sie alle Verständnisfragen richtig beantwortet haben. Sind Sie sich bei der Beantwortung einer Frage unsicher, können Sie mithilfe der „Weiter“- und „Zurück“-Tasten am Seitenende können Sie beliebig oft zwischen den Instruktionen und den Verständnisfragen hin und her navigieren. Beantworten Sie alle Fragen mit dem ersten Versuch richtig, erhalten Sie am Ende des Experiments einen <b>Bonus von 100 Talern</b>.</p>

    {{formfield 'Question_1'}}
    {{formfield 'Question_2'}}
    {{formfield 'Question_3'}}
    {{formfield 'Question_4'}}
    <div class = "center-text">
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Zurück</button>
        <button type="button" class="btn btn-primary" onclick="checkSubmit()">Weiter</button>
    </div>
    <input type="hidden" name="attempts" id="attempts" value="1">
    <input type="hidden" id="Q1_first_attempt" name="Q1_first_attempt" value="0">
    <input type="hidden" id="Q2_first_attempt" name="Q2_first_attempt" value="0">
    <input type="hidden" id="Q3_first_attempt" name="Q3_first_attempt" value="0">
    <input type="hidden" id="Q4_first_attempt" name="Q4_first_attempt" value="0">
</div>

<script>
    function checkSubmit() {
            let form = document.getElementById('form');
            let isValid = form.reportValidity();
            if (!isValid) return;

            let warnings = [];

            let Question_1 = document.querySelector('input[name=Question_1]:checked').value;
            let Question_2 = document.querySelector('input[name=Question_2]:checked').value;
            let Question_3 = document.querySelector('input[name=Question_3]:checked').value;
            let Question_4 = document.querySelector('input[name=Question_4]:checked').value;

            let attempts = document.getElementById('attempts').value
            if (attempts == 1) {
                 document.getElementById('Q1_first_attempt').value = Question_1;
                 document.getElementById('Q2_first_attempt').value = Question_2;
                 document.getElementById('Q3_first_attempt').value = Question_3;
                 document.getElementById('Q4_first_attempt').value = Question_4;

             } else {
    }


                 if (Question_1 != 1 || Question_2 != 2 || Question_3 != 3 || Question_4 != 3 ){
                    warnings.push("Leider waren nicht alle Ihre Antworten vollständig korrekt.")
                }

                if (Question_1 != 1) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 1.");
                }

                if (Question_2 != 2) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 2.")
                }

                if (Question_3 != 3) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 3.")
                }

                if (Question_4 != 3) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 4.")
                }

                 if (warnings.length > 0) {
             warnings.push("Drücken Sie OK.")
             window.alert(warnings.join('\r\n'));
             document.getElementById('attempts').value = +attempts +1
         }

            if (warnings.length ==0) {
                if (document.getElementById('attempts').value == 1) {
                    window.alert("Sie haben alle Fragen im ersten Versuch richtig beantwortet und erhalten den Bonus.");
                    form.submit()
                }
                if (document.getElementById('attempts').value > 1) {
                    window.alert("Sie haben alle Fragen richtig beantwortet. Da Sie jedoch mehr als einen Versuch gebraucht haben, erhalten Sie den Bonus nicht.");
                    form.submit()
                }
            }
        }
</script>

<script>



    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
            window.scrollTo(0,0);
        }
    }
</script>


{% endblock %}