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

{% block title %}
Teil 1: Aufmerksamkeitstest
{% endblock %}

{% block content %}

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

    }

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

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

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

    .tab { margin-left: 50px; }

    .inline {
   display:inline-block;
   width:500px;
   margin-right:200px;
   margin-bottom: 20px
}

    .otree-btn-next {

        display: none;
        float: right;
    }

</style>


 <p> <b>Diese Seite dient lediglich dazu, zu überprüfen, ob Sie die Anweisungen der Studie aufmerksam lesen. </b> Bitte bewegen Sie dazu den Slider unten auf die Positions <b>ganz links</b>, sodass darüber <b>"Es werden 100% des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt."</b> steht. Danach geht es mit den normalen Entscheidungen weiter.  </p>

{% if player.treatment == "Absolute" %}
 <div class="div1">
     <h1>Vorschlag</h1>
     <p> Die Auszahlung von Affe 1 würde laut Vorschlag <span style="color:blue;">um <span id="p1_initial_income"></span> Bananen</span> von <span id="p1_initial_wealth"></span> Bananen auf <span id="p1_final_wealth_no_redist"></span> Bananen steigen.</p>
     <p> Die Auszahlung von Affe 2 würde laut Vorschlag <span style="color:blue;">um <span id="p2_initial_income"></span> Bananen</span> von <span id="p2_initial_wealth"></span> Bananen auf <span id="p2_final_wealth_no_redist"></span> Bananen steigen.</p>


 </div>
 {%endif%}

 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Vorschlag</h1>
      <p> Die Auszahlung von Affe 1 würde laut Vorschlag <span style="color:blue;">um <span id="p1_initial_percentage"></span> %</span> von <span id="p1_initial_wealth"></span> Bananen auf <span id="p1_final_wealth_no_redist"></span> Bananen steigen.</p>
      <p> Die Auszahlung von Affe 2 würde laut Vorschlag <span style="color:blue;">um <span id="p2_initial_percentage"></span> %</span> von <span id="p2_initial_wealth"></span> Bananen auf <span id="p2_final_wealth_no_redist"></span> Bananen steigen.</p>


  </div>
  {%endif%}


<p></p>
<p> Sie können den obigen Vorschlag nun <b>abändern</b>. Bitte nutzen Sie dazu den Slider. </p>
<p> Da es sich hier nur um einen <b>Aufmerksamkeitstest</b> handelt, hat Ihre Entscheidung keinerlei Einfluss auf die Anzahl der Bananen irgendwelcher Affen. Bitte bewegen Sie den Slider <b>ganz nach links</b>. </p>

{% if player.treatment == "Absolute" %}
 <div class="div1">
     <h1>Anpassen des Vorschlages</h1>
     <p> Bitte nutzen Sie den Slider, um den obigen Vorschlag nach Belieben anzupassen. </p>
     <p id="redist_choice_feedback"><br></p>
         <input type="range" class="inline "name="attention_check_answer" value="0" step="0.1"  min="-100" max="100" id="attention_check_answer" class="form-control" list="tickmarks" width="500 px">
         <input id="reset" class="inline" type="button" value="Vorschlag beibehalten">
         <input type="hidden" name="attention_slider_touched" value="0" id="id_slider_touched">
         {{ form.attention_slider_touched.errors }}
     <datalist id="tickmarks">
          <option value="-100" label="Alles an Affe 1"></option>
          <option value="0" label="Keine Umverteilung"></option>
          <option value="100" label="Alles an Affe 2"></option>
      </datalist>
      <p> Die Auszahlung von Affe 1 steigt <span style="color:blue;">um <span id="p1_live_income"></span> Bananen</span> von <span id="p1_initial_wealth_2"></span> Bananen auf <span id="p1_live_final_wealth"></span> Bananen.</p>
      <p> Die Auszahlung von Affe 2 steigt <span style="color:blue;">um <span id="p2_live_income"></span> Bananen</span> von <span id="p2_initial_wealth_2"></span> Bananen auf <span id="p2_live_final_wealth"></span> Bananen.</p>


     <canvas id="bar-chart" width="500" height="200"></canvas>



     </div> </div>


     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         // ADD RESET BUTTON
         // ADD LABELS ON BOTH SIDES SAYING "Alles an Affe 1/2"


         var p1_initial_wealth = 1.0;
         var p2_initial_wealth = 2.0;

         var slider_frame = "Relative";


         var p1_income_no_redist = 3.0;
         var p2_income_no_redist = 2.0;

         var p1_final_wealth_no_redist = p1_initial_wealth + p1_income_no_redist;
         var p2_final_wealth_no_redist = p2_initial_wealth + p2_income_no_redist;


         var p1_live_income = p1_income_no_redist;
         var p2_live_income = p2_income_no_redist;

         Chart.defaults.font.size = 18;


         var myChart = new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
              labels: ["Affe 1", "Affe 2"],
              datasets: [
                {
                  label: "Weiteres Einkommen bei gewählter Änderung",
                  backgroundColor: ["#FFC20A", "#0C7BDC"],
                  data: [p1_live_income, p2_live_income]
                }
              ]
            },
            options: {

              scales : {
                        y : {
                            min: 0,
                            max: p1_income_no_redist + p2_income_no_redist,
                        },

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


         document.getElementById('reset').onclick = function(){

               document.getElementById('id_slider_touched').value = 1;
               document.getElementById('attention_check_answer').value = 0;
               document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
               document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);

               document.getElementById("p1_live_income").innerHTML = p1_income_no_redist.toFixed(2);
               document.getElementById("p2_live_income").innerHTML = p2_income_no_redist.toFixed(2);
               document.getElementById("test_check").innerHTML = '';
               document.getElementById("redist_choice_feedback").innerHTML = "Sie haben keine Änderung gewählt.";

               p1_live_income = p1_income_no_redist;
               p2_live_income = p2_income_no_redist;

               myChart.config.data = {
                 labels: ["Affe 1", "Affe 2"],
                 datasets: [
                   {
                     label: "Weiteres Einkommen bei gewählter Änderung",
                     backgroundColor: ["#FFC20A", "#0C7BDC"],
                     data: [p1_live_income, p2_live_income]
                   }
                 ]
             };
               myChart.update();
        };

       $(document).ready(function () {


            document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);

            document.getElementById("p1_final_wealth_no_redist").innerHTML = p1_final_wealth_no_redist.toFixed(2);
            document.getElementById("p2_final_wealth_no_redist").innerHTML = p2_final_wealth_no_redist.toFixed(2);

            document.getElementById("p1_initial_wealth").innerHTML = p1_initial_wealth.toFixed(2);
            document.getElementById("p2_initial_wealth").innerHTML = p2_initial_wealth.toFixed(2);
            document.getElementById("p1_initial_wealth_2").innerHTML = p1_initial_wealth.toFixed(2);
            document.getElementById("p2_initial_wealth_2").innerHTML = p2_initial_wealth.toFixed(2);

            document.getElementById("p1_live_income").innerHTML = p1_income_no_redist.toFixed(2);
            document.getElementById("p2_live_income").innerHTML = p2_income_no_redist.toFixed(2);

            document.getElementById("p1_initial_income").innerHTML = p1_income_no_redist.toFixed(2);
            document.getElementById("p2_initial_income").innerHTML = p2_income_no_redist.toFixed(2);

            document.getElementById("redist_choice_feedback").innerHTML = "<span style='color:red;'><b>Bitte berühren Sie den Slider, um eine Entscheidung zu treffen.</b></span>";



           $("input[name=attention_check_answer]").on('input', function() {

                document.getElementById('id_slider_touched').value = 1;

                if ($(this).val() > 0) {

                    if (slider_frame == "Relative") {
                          document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+$(this).val()+'% des vorgeschlagenen Einkommens von Affe 1 an Affe 2 umverteilt. ';
                    } else {
                          document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ (($(this).val()/100)*p1_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 1 an Affe 2 umverteilt. ';
                      }

                    p1_live_income = p1_income_no_redist - p1_income_no_redist * $(this).val() / 100;
                    p2_live_income = p2_income_no_redist + p1_income_no_redist * $(this).val() / 100;
                    document.getElementById("test_check").innerHTML = '';
                }

                if ($(this).val() ==0 ) {

                    document.getElementById("redist_choice_feedback").innerHTML = "Sie haben keine Änderung gewählt.";
                    p1_live_income = p1_income_no_redist
                    p2_live_income = p2_income_no_redist
                    document.getElementById("test_check").innerHTML = '';
                }

                if ($(this).val() < 0) {

                    if (slider_frame == "Relative") {
                          document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ -$(this).val()+'% des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. ';
                    } else {
                          document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ ((-$(this).val()/100)*p1_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. ';
                      }

                    p2_live_income = p2_income_no_redist - p2_income_no_redist * (-$(this).val()) / 100;
                    p1_live_income = p1_income_no_redist + p2_income_no_redist * (-$(this).val()) / 100;
                    document.getElementById("test_check").innerHTML = '';

                }

                if ($(this).val() == -100) {

                    if (slider_frame == "Relative") {
                        document.getElementById("redist_choice_feedback").innerHTML = `<span style='color:green;'><b>Es werden `+ -$(this).val()+'% des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. </b> </span> ';
                    } else {
                          document.getElementById("redist_choice_feedback").innerHTML = `<span style='color:green;'><b>Es werden `+ ((-$(this).val()/100)*p1_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. </b> </span> ';
                      }
                    document.getElementById("test_check").innerHTML = '<span style="color:green;"><b>Aufmerksamkeitstest bestanden!</b> </span>';
                    p2_live_income = p2_income_no_redist - p2_income_no_redist * (-$(this).val()) / 100;
                    p1_live_income = p1_income_no_redist + p2_income_no_redist * (-$(this).val()) / 100;

                }


                p1_live_final_wealth = p1_initial_wealth + p1_live_income;
                p2_live_final_wealth = p2_initial_wealth + p2_live_income;

                document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
                document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

                document.getElementById("p1_live_income").innerHTML = p1_live_income.toFixed(2);
                document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);


                myChart.config.data = {
                  labels: ["Affe 1", "Affe 2"],
                  datasets: [
                    {
                      label: "Weiteres Einkommen bei gewählter Änderung",
                      backgroundColor: ["#FFC20A", "#0C7BDC"],
                      data: [p1_live_income, p2_live_income]
                    }
                  ]
              };
                myChart.update();

             });


          });



     </script>
 {%endif%}

 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Anpassen des Vorschlages</h1>
      <p> Bitte nutzen Sie den Slider, um eine Umverteilungsrate auszuwählen. </p>
      <p id="redist_choice_feedback"><br></p>
          <input type="range" class="inline "name="attention_check_answer" value="0" step="0.1"  min="-100" max="100" id="attention_check_answer" class="form-control" list="tickmarks" width="500 px">
          <input id="reset" class="inline" type="button" value="Vorschlag beibehalten">
          <input type="hidden" name="attention_slider_touched" value="0" id="id_slider_touched"/>
          {{ form.attention_slider_touched.errors }}
      <datalist id="tickmarks">
           <option value="-100" label="Alles an Affe 1"></option>
           <option value="0" label="Keine Umverteilung"></option>
           <option value="100" label="Alles an Affe 2"></option>
       </datalist>

      <p> Das Vermögen von Affe 1 steigt <span style="color:blue;">um <span id="p1_live_percentage"></span> %</span> von <span id="p1_initial_wealth_2"></span> Bananen auf <span id="p1_live_final_wealth"></span> Bananen.</p>
      <p> Das Vermögen von Affe 2 steigt <span style="color:blue;">um <span id="p2_live_percentage"></span> %</span> von <span id="p2_initial_wealth_2"></span> Bananen auf <span id="p2_live_final_wealth"></span> Bananen.</p>

      <canvas id="bar-chart" width="500" height="200"></canvas>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
      var p1_initial_wealth = 1.0;
      var p2_initial_wealth = 2.0;


      var p1_income_no_redist = 3.0;
      var p2_income_no_redist = 2.0;

      var slider_frame = "Relative";

      var p1_final_wealth_no_redist = p1_initial_wealth + p1_income_no_redist;
      var p2_final_wealth_no_redist = p2_initial_wealth + p2_income_no_redist;


      var p1_live_income = p1_income_no_redist;
      var p2_live_income = p2_income_no_redist;

      var p1_live_percentage = (p1_final_wealth_no_redist / p1_initial_wealth - 1)*100;
      var p2_live_percentage = (p2_final_wealth_no_redist / p2_initial_wealth - 1)*100;

      var max_factor = 100*(Math.max((p1_initial_wealth + p1_income_no_redist + p2_income_no_redist)/p1_initial_wealth,
                                (p2_initial_wealth + p1_income_no_redist + p2_income_no_redist)/p2_initial_wealth)-1)


      Chart.defaults.font.size = 18;


      var myChart = new Chart(document.getElementById("bar-chart"), {
         type: 'bar',
         data: {
           labels: ["Affe 1", "Affe 2"],
           datasets: [
             {
               label: "Prozentuale Zuwächse bei gewählter Änderung",
               backgroundColor: ["#FFC20A", "#0C7BDC"],
               data: [p1_live_percentage, p2_live_percentage]
             }
           ]
         },
         options: {

           scales : {
                     y : {
                         min: 0,
                         max: Math.ceil(max_factor/50)*50,
                     },

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

      document.getElementById('reset').onclick = function(){

            document.getElementById('id_slider_touched').value = 1;
            document.getElementById('attention_check_answer').value = 0;
            document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);

            document.getElementById("p1_live_percentage").innerHTML = (100*(p1_final_wealth_no_redist / p1_initial_wealth - 1)).toFixed(0);
            document.getElementById("p2_live_percentage").innerHTML = (100*(p2_final_wealth_no_redist / p2_initial_wealth - 1)).toFixed(0);
            document.getElementById("test_check").innerHTML = '';
            document.getElementById("redist_choice_feedback").innerHTML = "Sie haben keine Änderung gewählt.";

            p1_live_percentage = 100*(p1_final_wealth_no_redist / p1_initial_wealth - 1);
            p2_live_percentage = 100*(p2_final_wealth_no_redist / p2_initial_wealth - 1);

            myChart.config.data = {
              labels: ["Affe 1", "Affe 2"],
              datasets: [
                {
                  label: "Prozentuale Zuwächse bei gewählter Änderung",
                  backgroundColor: ["#FFC20A", "#0C7BDC"],
                  data: [p1_live_percentage, p2_live_percentage]
                }
              ]
          };

          myChart.update()
     };




    $(document).ready(function () {


         document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
         document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);

         document.getElementById("p1_live_percentage").innerHTML = p1_live_percentage.toFixed(0);
         document.getElementById("p2_live_percentage").innerHTML = p2_live_percentage.toFixed(0);


         document.getElementById("p1_initial_percentage").innerHTML = p1_live_percentage.toFixed(0);
         document.getElementById("p2_initial_percentage").innerHTML = p2_live_percentage.toFixed(0);


         document.getElementById("p1_final_wealth_no_redist").innerHTML = p1_final_wealth_no_redist.toFixed(2);
         document.getElementById("p2_final_wealth_no_redist").innerHTML = p2_final_wealth_no_redist.toFixed(2);

         document.getElementById("p1_initial_wealth").innerHTML = p1_initial_wealth.toFixed(2);
         document.getElementById("p2_initial_wealth").innerHTML = p2_initial_wealth.toFixed(2);
         document.getElementById("p1_initial_wealth_2").innerHTML = p1_initial_wealth.toFixed(2);
         document.getElementById("p2_initial_wealth_2").innerHTML = p2_initial_wealth.toFixed(2);

         document.getElementById("redist_choice_feedback").innerHTML = "<span style='color:red;'><b>Bitte berühren Sie den Slider, um eine Entscheidung zu treffen.</b></span>";


        $("input[name=attention_check_answer]").on('input', function() {

            document.getElementById('id_slider_touched').value = 1;

             if ($(this).val() > 0) {

                 if (slider_frame == "Relative") {
                       document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+$(this).val()+'% des vorgeschlagenen Einkommens von Affe 1 an Affe 2 umverteilt. ';
                 } else {
                       document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ (($(this).val()/100)*p1_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 1 an Affe 2 umverteilt. ';
                   }

                 p1_live_income = p1_income_no_redist - p1_income_no_redist * $(this).val() / 100;
                 p2_live_income = p2_income_no_redist + p1_income_no_redist * $(this).val() / 100;
                 document.getElementById("test_check").innerHTML = '';
             }

             if ($(this).val() ==0 ) {

                 document.getElementById("redist_choice_feedback").innerHTML = "Sie haben keine Änderung gewählt.";
                 p1_live_income = p1_income_no_redist
                 p2_live_income = p2_income_no_redist
                 document.getElementById("test_check").innerHTML = '';
             }

             if ($(this).val() < 0) {

                 if (slider_frame == "Relative") {
                       document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ -$(this).val()+'% des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. ';
                 } else {
                       document.getElementById("redist_choice_feedback").innerHTML = `Es werden `+ ((-$(this).val()/100)*p2_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt. ';
                   }

                 p2_live_income = p2_income_no_redist - p2_income_no_redist * (-$(this).val()) / 100;
                 p1_live_income = p1_income_no_redist + p2_income_no_redist * (-$(this).val()) / 100;
                 document.getElementById("test_check").innerHTML = '';
             }

             if ($(this).val() == -100) {

                 if (slider_frame == "Relative") {
                     document.getElementById("redist_choice_feedback").innerHTML = `<span style='color:green;'><b>Es werden `+ -$(this).val()+'% des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt.</b> </span> ';
                 } else {
                       document.getElementById("redist_choice_feedback").innerHTML = `<span style='color:green;'><b>Es werden `+ ((-$(this).val()/100)*p1_income_no_redist).toFixed(2) +'Bananen des vorgeschlagenen Einkommens von Affe 2 an Affe 1 umverteilt.</b> </span> ';
                   }

               document.getElementById("test_check").innerHTML = '<span style="color:green;"><b>Aufmerksamkeitstest bestanden!</b> </span>';
                   p2_live_income = p2_income_no_redist - p2_income_no_redist * (-$(this).val()) / 100;
                   p1_live_income = p1_income_no_redist + p2_income_no_redist * (-$(this).val()) / 100;

             }


             p1_live_final_wealth = p1_initial_wealth + p1_live_income;
             p2_live_final_wealth = p2_initial_wealth + p2_live_income;

             p1_live_percentage = 100*(p1_live_final_wealth / p1_initial_wealth - 1);
             p2_live_percentage = 100*(p2_live_final_wealth / p2_initial_wealth - 1);

             document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
             document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

             document.getElementById("p1_live_percentage").innerHTML = p1_live_percentage.toFixed(0);
             document.getElementById("p2_live_percentage").innerHTML = p2_live_percentage.toFixed(0);



             myChart.config.data = {
               labels: ["Affe 1", "Affe 2"],
               datasets: [
                 {
                   label: "Prozentuale Zuwächse bei gewählter Änderung",
                   backgroundColor: ["#FFC20A", "#0C7BDC"],
                   data: [p1_live_percentage, p2_live_percentage]
                 }
               ]
           };

           myChart.update()


          });
       });

  </script>
  {%endif%}

  <script>


    setTimeout(function () {
        $('.otree-btn-next').delay(10000).show(0)
    }, 0);

</script>






<p></p>
<p> Die Weiter-Schaltfläche erscheint nach 10 Sekunden. </p>
<span id="test_check"></span>
 <p></p>
{% next_button %}

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


{% endblock %}