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

{% block title %}
    Teil 2: Verständnisfragen
{% endblock %}


{% block content %}
<style>
    .div1 {
        width: 1000px;
        padding: 20px;
        background-color: aliceblue;
        background-color: #eefbf4;
    }

    .otree-body {
        max-width:1100px
    }

    .div2 {
        width: 1000px;
        padding: 20px;
        height: 25px;
    }

    h1 {
        font-size: 150%;
        margin-bottom: 20px
    }

    h3 {
        font-size: 130%;
        margin-bottom: 20px
    }

    body {
    font: normal 1.25em Candara, sans-serif;
    }



    .tab { margin-left: 50px; }

    .otree-btn-next {

        display: none;
        float: right;
    }

    .inline {
   display:inline-block;
   width:100px;
   margin-left:10px;
   margin-right:10px;
   margin-bottom: 10px
}

</style>

<p> Bitte beantworten Sie noch die folgenden Verständisfragen zum zweiten Teil der Studie. </p>

 <div class="div1">
     <h3> Frage 1 </h3>
         <p> Welche der folgenden Aussagen über Ihre Entscheidungen in diesem Teil der Studie ist korrekt? </p>
         <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check1_1()"><span id="answer_1_1"></span></button></p>
         <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check1_2()"><span id="answer_1_2"></span></button></p>
         <input type="hidden" id="comprehension_tries_1" name="comprehension_tries_1">
         <p> <span id="status_1"></span></p>
</div>
{{ form.comprehension_tries_1.errors }}
<p></p>
<div class="div1">
    <h3> Frage 2 </h3>
        {% if player.treatment == "Absolute" %}
        <p> Angenommen, Ihre beiden Gruppenmitglieder werden für den Wettbewerb ausgewählt. Die gesamte Auszahlung der beiden setzt sich zusammen aus dem <b>Preisgeld</b> für den Wettbewerb sowie dem <b>zusätzlichen Einkommen</b>. Über die Höhe welcher Komponenten entscheiden Sie in diesem Studienteil? </p>
        {% endif %}
        {% if player.treatment == "Relative" %}
        <p> Angenommen, Ihre beiden Gruppenmitglieder werden für den Wettbewerb ausgewählt. Die gesamte Auszahlung der beiden setzt sich zusammen aus dem <b>Preisgeld</b> für den Wettbewerb sowie dem <b>zusätzlichen prozentualen Wachstum</b>. Über die Höhe welcher Komponenten entscheiden Sie in diesem Studienteil? </p>
        {% endif %}
        <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check2_1()"><span id="answer_2_1"></span></button></p>
        <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check2_2()"><span id="answer_2_2"></span></button></p>
        <input type="hidden" id="comprehension_tries_2" name="comprehension_tries_2">
        <p> <span id="status_2"></span></p>
</div>
{{ form.comprehension_tries_2.errors }}
<p></p>
<div class="div1">
    <h3> Frage 3 </h3>
        <p> Wussten Sie und Ihre Gruppenmitglieder bereits <b>vor der Bearbeitung der Matheaufgaben</b>, dass Sie neben dem Preisgeld noch ein zusätzliches Einkommen erhalten können, das von den Gruppenmitgliedern bestimmt wird? </p>
        <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check3_1()"><span id="answer_3_1"></span></button></p>
        <p><button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check3_2()"><span id="answer_3_2"></span></button></p>
        <input type="hidden" id="comprehension_tries_3" name="comprehension_tries_3">
        <p> <span id="status_3"></span></p>
</div>
{{ form.comprehension_tries_3.errors }}
<p></p>
<div class="div1">
    <h3> Frage 4 </h3>
    {% if player.treatment == "Absolute" %}
    <p> Wie hoch wäre das <b>zusätzliche Einkommen</b> für den Gewinner des Wettbewerbs Spieler 1 und den Verlierer des Wettbewerbs Spieler 2, falls der folgende Vorschlag umgesetzt werden würde? </p>
    <h1>Beispiel-Vorschlag</h1>
    <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_income"></span> €</span> von <span id="p1_prize"></span> € auf <span id="p1_wealth"></span> €.</p>
    <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_income"></span> €</span> von <span id="p2_prize"></span> € auf <span id="p2_wealth"></span> €.</p>
    <canvas id="chart_1" width="500" height="150"></canvas>
    <p> Das zusätzliche Einkommen (in Euro) für Spieler 1 beträgt: &nbsp  &nbsp<input type="text" id="income_1"></input></p>
    <p> Das zusätzliche Einkommen (in Euro) für Spieler 2 beträgt: &nbsp  &nbsp<input type="text" id="income_2"></input></p>
    <button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check4()">Antwort bestätigen</button>
    {% endif %}

    {% if player.treatment == "Relative" %}
    <p> Wie hoch wäre das <b>zusätzliche prozentuale Wachstum</b> für den Gewinner des Wettbewerbs Spieler 1 und den Verlierer des Wettbewerbs Spieler 2, falls der folgende Vorschlag umgesetzt werden würde? </p>
    <h1>Beispiel-Vorschlag</h1>
    <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_percentage"></span> %</span> von <span id="p1_prize"></span> € auf <span id="p1_wealth"></span> €.</p>
    <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_percentage"></span> %</span> von <span id="p2_prize"></span> € auf <span id="p2_wealth"></span> €.</p>
    <canvas id="chart_1" width="500" height="150"></canvas>
    <p> Das zusätzliche prozentuale Wachstum (in Prozent) für Spieler 1 beträgt: &nbsp  &nbsp<input type="text" id="percentage_1"></input></p>
    <p> Das zusätzliche prozentuale Wachstum (in Prozent) für Spieler 2 beträgt: &nbsp  &nbsp<input type="text" id="percentage_2"></input></p>
    <button type="button" style="width:950px; background-color: lightblue" class="block" onclick="check4()">Antwort bestätigen</button>
    {% endif %}
    <input type="hidden" id="comprehension_tries_4" name="comprehension_tries_4">
    <p> <span id="status_4"></span></p>
</div>
<p id="test"></p
{{ form.comprehension_tries_4.errors }}
<p></p>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    var treatment = {{ treatment }};


    var correct_answer_1 = "Ihre Entscheidungen können die Auszahlungen anderer beeinflussen."
    var wrong_answer_1 = "Ihre Entscheidungen sind rein hypothetischer Natur."

    if (treatment == "Absolute") {
        var correct_answer_2 = "Nur zusätzliches Einkommen.";
        var wrong_answer_2 = "Preisgeld und zusätzliches Einkommen.";

        document.getElementById("p1_prize").innerHTML = (3.50).toFixed(2);
        document.getElementById("p2_prize").innerHTML = (1.50).toFixed(2);
        var rnd = Math.random();
        p1_income = (rnd*5.0);
        p2_income = (1-rnd)*5.0;
        document.getElementById("p1_income").innerHTML = p1_income.toFixed(2);
        document.getElementById("p2_income").innerHTML = p2_income.toFixed(2);
        document.getElementById("p1_wealth").innerHTML = (3.5 + p1_income).toFixed(2);
        document.getElementById("p2_wealth").innerHTML = (1.5 + p2_income).toFixed(2);


        Chart.defaults.font.size = 16;

        var chart_1 = new Chart(document.getElementById("chart_1"), {
           type: 'bar',
           data: {
             labels: ["Spieler 1", "Spieler 2"],
             datasets: [
               {
                 label: "Zusätzliches Einkommen",
                 backgroundColor: ["#FFC20A", "#0C7BDC"],
                 data: [p1_income, p2_income]
               }
             ]
           },
           options: {

               indexAxis: 'y',

             scales : {
                       x : {
                           min: 0,
                           max: 5,
                       },

                   },
             animation: {
                 duration: 0
             },
             legend: { display: false },
             events: [],
             title: {
               display: true,
             }
           }
       });
    }

    if (treatment == "Relative") {
        var correct_answer_2 = "Nur zusätzliches prozentuales Wachstum.";
        var wrong_answer_2 = "Preisgeld und zusätzliches prozentuales Wachstum.";

        document.getElementById("p1_prize").innerHTML = (3.50).toFixed(2);
        document.getElementById("p2_prize").innerHTML = (1.50).toFixed(2);
        var rnd = Math.random();
        p1_percentage = (rnd*200.0);
        p2_percentage = (1-rnd)*200.0;
        document.getElementById("p1_percentage").innerHTML = p1_percentage.toFixed(0);
        document.getElementById("p2_percentage").innerHTML = p2_percentage.toFixed(0);
        document.getElementById("p1_wealth").innerHTML = (3.5*(1+p1_percentage/100)).toFixed(2);
        document.getElementById("p2_wealth").innerHTML = (1.5*(1+p2_percentage/100)).toFixed(2);


        Chart.defaults.font.size = 16;

        var chart_1 = new Chart(document.getElementById("chart_1"), {
           type: 'bar',
           data: {
             labels: ["Spieler 1", "Spieler 2"],
             datasets: [
               {
                 label: "Zusätzliches prozentuales Wachstum",
                 backgroundColor: ["#FFC20A", "#0C7BDC"],
                 data: [p1_percentage, p2_percentage]
               }
             ]
           },
           options: {

               indexAxis: 'y',

             scales : {
                       x : {
                           min: 0,
                           max: Math.ceil(Math.max(p1_percentage, p2_percentage)/50)*50,
                       },

                   },
             animation: {
                 duration: 0
             },
             legend: { display: false },
             events: [],
             title: {
               display: true,
             }
           }
       });
    }

    var correct_answer_3 = "Nein, das wurde erst nach dem Wettbewerb aufgedeckt."
    var wrong_answer_3 = "Ja, das war bereits bekannt."

    var correct_answer_4 = "Erst nach dem Wettbewerb."
    var wrong_answer_4 = "Bereits vor dem Wettbewerb."

    var comprehension_tries_1 = 0;
    var comprehension_tries_2 = 0;
    var comprehension_tries_3 = 0;
    var comprehension_tries_4 = 0;

    var correct_answer_first_1 = Math.random() < 0.5;
    var correct_answer_first_2 = Math.random() < 0.5;
    var correct_answer_first_3 = Math.random() < 0.5;
    var correct_answer_first_4 = Math.random() < 0.5;


    var status_1 = 0;
    var status_2 = 0;
    var status_3 = 0;
    var status_4 = 0;


    if (correct_answer_first_1 == true) {

        document.getElementById("answer_1_1").innerHTML = correct_answer_1;
        document.getElementById("answer_1_2").innerHTML = wrong_answer_1;
    } else {

        document.getElementById("answer_1_2").innerHTML = correct_answer_1;
        document.getElementById("answer_1_1").innerHTML = wrong_answer_1;

    }

    if (correct_answer_first_2 == true) {

        document.getElementById("answer_2_1").innerHTML = correct_answer_2;
        document.getElementById("answer_2_2").innerHTML = wrong_answer_2;
    } else {

        document.getElementById("answer_2_2").innerHTML = correct_answer_2;
        document.getElementById("answer_2_1").innerHTML = wrong_answer_2;

    }

    if (correct_answer_first_3 == true) {

        document.getElementById("answer_3_1").innerHTML = correct_answer_3;
        document.getElementById("answer_3_2").innerHTML = wrong_answer_3;
    } else {

        document.getElementById("answer_3_2").innerHTML = correct_answer_3;
        document.getElementById("answer_3_1").innerHTML = wrong_answer_3;

    }

    if (correct_answer_first_4 == true) {

        document.getElementById("answer_4_1").innerHTML = correct_answer_4;
        document.getElementById("answer_4_2").innerHTML = wrong_answer_4;
    } else {

        document.getElementById("answer_4_2").innerHTML = correct_answer_4;
        document.getElementById("answer_4_1").innerHTML = wrong_answer_4;

    }

    function check1_1(){

        if (correct_answer_first_1 == true) {


            document.getElementById("status_1").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_1 = 1;
            document.getElementById("comprehension_tries_1").value = comprehension_tries_1;

        } else {

            document.getElementById("status_1").innerHTML = '<span style="color: red">Falsch!</span>';
            status_1 = 0;
            comprehension_tries_1 = comprehension_tries_1 + 1;
            document.getElementById("comprehension_tries_1").value = comprehension_tries_1;

        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check1_2(){

        if (correct_answer_first_1 == true) {


            document.getElementById("status_1").innerHTML = '<span style="color: red">Falsch!</span>';
            status_1 = 0;
            comprehension_tries_1 = comprehension_tries_1 + 1;
            document.getElementById("comprehension_tries_1").value = comprehension_tries_1;

        } else {

            document.getElementById("status_1").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_1 = 1;
            document.getElementById("comprehension_tries_1").value = comprehension_tries_1;

        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check2_1(){

        if (correct_answer_first_2 == true) {


            document.getElementById("status_2").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_2 = 1;
            document.getElementById("comprehension_tries_2").value = comprehension_tries_2;

        } else {

            document.getElementById("status_2").innerHTML = '<span style="color: red">Falsch!</span>';
            status_2 = 0;
            comprehension_tries_2 = comprehension_tries_2 + 1;
            document.getElementById("comprehension_tries_2").value = comprehension_tries_2;

        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check2_2(){

        if (correct_answer_first_2 == true) {

            document.getElementById("status_2").innerHTML = '<span style="color: red">Falsch!</span>';
            status_2 = 0;
            comprehension_tries_2 = comprehension_tries_2 + 1;
            document.getElementById("comprehension_tries_2").value = comprehension_tries_2;

        } else {

            document.getElementById("status_2").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_2 = 1;
            document.getElementById("comprehension_tries_2").value = comprehension_tries_2;



        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check3_1(){

        if (correct_answer_first_3 == true) {


            document.getElementById("status_3").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_3 = 1;
            document.getElementById("comprehension_tries_3").value = comprehension_tries_3;

        } else {

            document.getElementById("status_3").innerHTML = '<span style="color: red">Falsch!</span>';
            status_3 = 0;
            comprehension_tries_3 = comprehension_tries_3 + 1;
            document.getElementById("comprehension_tries_3").value = comprehension_tries_3;

        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check3_2(){

        if (correct_answer_first_3 == true) {

            document.getElementById("status_3").innerHTML = '<span style="color: red">Falsch!</span>';
            status_3 = 0;
            comprehension_tries_3 = comprehension_tries_3 + 1;
            document.getElementById("comprehension_tries_3").value = comprehension_tries_3;

        } else {

            document.getElementById("status_3").innerHTML = '<span style="color: green"> Korrekt!</span>';
            status_3 = 1;
            document.getElementById("comprehension_tries_3").value = comprehension_tries_3;



        }

        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


    function check4(){

        if (treatment == "Absolute") {

            var answer_1 = String(document.getElementById("income_1").value).replace(/,/g, '.');
            var answer_2 = String(document.getElementById("income_2").value).replace(/,/g, '.');

            if (answer_1 == p1_income.toFixed(2) && answer_2 == p2_income.toFixed(2) )  {
                document.getElementById("status_4").innerHTML = '<span style="color: green"> Korrekt!</span>';
                status_4 = 1;
                document.getElementById("comprehension_tries_4").value = comprehension_tries_4;

            } else {

                document.getElementById("status_4").innerHTML = '<span style="color: red">Falsch!</span>';
                status_4 = 0;
                comprehension_tries_4 = comprehension_tries_4 + 1;
                document.getElementById("comprehension_tries_4").value = comprehension_tries_4;

            }
        }

        if (treatment == "Relative") {

            if (document.getElementById("percentage_1").value == p1_percentage.toFixed(0) && document.getElementById("percentage_2").value == p2_percentage.toFixed(0) )  {
                document.getElementById("status_4").innerHTML = '<span style="color: green"> Korrekt!</span>';
                status_4 = 1;
                document.getElementById("comprehension_tries_4").value = comprehension_tries_4;

            } else {

                document.getElementById("status_4").innerHTML = '<span style="color: red">Falsch!</span>';
                status_4 = 0;
                comprehension_tries_4 = comprehension_tries_4 + 1;
                document.getElementById("comprehension_tries_4").value = comprehension_tries_4;

            }
        }


        if (status_1 == 1 && status_2 == 1 && status_3 == 1 && status_4 == 1) {

            $('.otree-btn-next').show(0)
        } else {
            $('.otree-btn-next').hide(0)
        }

    }


</script>
    {% next_button %}

    <p style="text-align: left; font-size: 16px"> Studienfortschritt: {{progress}}%. </p>


{% endblock %}