{% block title %}
    <p style="text-align: center " > Anweisungen </p>
{% endblock %}

{% block content %}
<style>
    .col-form-label{
        font-size: large;
    }
    .form-check{
        font-size: large;
    }
    .tab {
        display: none;
    }
</style>
<div class="tab">
    <p style="text-align: justify; font-size: large;">
    Alle Teilnehmenden sind wie Sie in Zweierteams eingeteilt und übernehmen die Rolle eines Produzenten in einer Volkswirtschaft. <br>

    Jede Runde produzieren Sie und Ihr Teammitglied gemeinsam ein Gut. Die Nachfrage nach Ihrem Gut <b>(y)</b> bestimmt automatisch die Produktionsmenge. Die Nachfrage y hängt von zwei Faktoren ab:<br>
    <br>
    1.  Der Faktor <b> ω </b> ist exogen vorgegeben. Je höher ω ist, desto <b>mehr</b> wird von Ihrem Gut nachgefragt.<br>
    2.  Sie legen den Preis <b> p </b> fest. 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, ist der maximale Preis 40.<br>
    <br>
    Um ihr Gut zu produzieren, benötigt jedes Team in Ihrer Gruppe Vorprodukte. Diese Vorprodukte werden jeweils von den anderen Teams produziert. Ihre Kosten hängen also von den Preisen, die die anderen Teams für ihr Gut verlangen, ab.
    Aus den Preisen aller Güter von allen Produzenten wird ein Durchschnittspreis <b>P</b> berechnet. Die Stückkosten für jedes Gut, dass von Ihnen produziert wird, beläuft sich auf P – {{ player.cost_deduction }}. Um Ihre Kosten zu decken, muss Ihr Preis folglich mindestens {{ player.cost_deduction }} betragen. Die Kosten für Ihre gesamte Produktion sind folglich y &times; (P − {{ player.cost_deduction }}). Der Durchschnittspreis P ist zu Beginn jeder Runde unbekannt. Zu dem Zeitpunkt, zu dem Sie Ihren Preis festlegen, kennen Sie folglich die Kosten für Ihre Produktion noch nicht, da diese von den Preisen der anderen Teams abhängen.
    Ihr Gewinn berechnet sich durch Umsatz abzüglich Kosten, also<br>
    <b>y &times; p - y &times; (P - 10)</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.
        {{ endif }}
    </p>
     <button type="button" class="btn btn-primary btn-tab" data-offset="1">Weiter</button>
</div>
<div class="tab">
    <p style="text-align: justify; font-size: large;">
    Für die Preissetzung Ihres Teams haben Sie die Möglichkeit zunächst Ihrem Teammitglied einen Preis vorzuschlagen. Gleichzeitig wird Ihr Teammitglied Ihnen einen Preis vorschlagen. Im Anschluss werden diese Preisvorschläge ausgetauscht. Danach geben Sie und Ihr Teammitglied unabhängig voneinander jeweils einen finalen Preisvorschlag ab. Aus diesen beiden finalen Vorschlägen wird dann zufällig (mit gleicher Wahrscheinlichkeit) einer der beiden Preise ausgewählt. Dieser Preis ist der finale Preis für das Produkt Ihres Teams in dieser Runde. Dieser Vorgang findet jede Runde statt.<br>
    Zusätzlich dazu werden Sie in einigen Runden gebeten, nicht nur einen Preisvorschlag zu machen, 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. Zeitgleich erhalten Sie den Preisvorschlag Ihres Teammitglieds zusammen mit dessen Begründung. Dann machen Sie beide unabhängig von einander Ihren finalen Preisvorschlag, wovon einer zufällig als endgültiger Preis für die Runde festgelegt wird.

    Der Gewinn wird in der untenstehenden Grafik durch das grüne Rechteck dargestellt. <br>
    <br>
    <b> Hinweis: </b> Sie erzielen einen hohen Gewinn, wenn die Produktion und der Gewinn pro Stück nicht stark voneinander unterscheiden.
    <br>
    Das Experiment besteht aus {{ C.NUM_ROUNDS }} Runden. Ihre Gewinne werden über alle Runden aufsummiert. Am Ende erhalten Sie Ihre gesamten Einnahmen sowie etwaige Bonuszahlungen.<br>
    <br>
    </p>
    <div class="center-text">
        <img src="{{ static 'Project_FK_files/Instruction_pic_de.png' }}" />
    </div>

    <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 class="tab">
    <h3>Verständnisfragen</h3>

    <p style="text-align: justify; font-size: large;">
    Bitte beantworten Sie die folgenden Verständnisfragen. Sind Sie bei Beantwortung einer Frage unsicher, können Sie zur Spielanleitung zurücknavigieren. Beantworten Sie alle Fragen mit dem ersten Versuch richtig, erhalten Sie am Ende des Experiments einen <b>Bonus von 5 Bäumen</b>.</p>

    {{formfield 'Question_1'}}
    {{formfield 'Question_2'}}
    {{formfield 'Question_3'}}
    {{formfield 'Question_4'}}
    <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>
    <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 != 3 || Question_2 != 3 || Question_3 != 2 || Question_4 != 1 ){
                    warnings.push("Leider waren nicht alle Ihre Antworten vollständig korrekt.")
                }

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

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

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

                if (Question_4 != 1) {
                    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 %}