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

{% block title %}
Teil 3: Verständnisfrage 2/3
{% endblock %}

{% block content %}

<style>


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

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

    .grid {
     width: 1050px;
     height: 320px;
    left: 50%;
    margin-left: 0px;

   }

   .grid2 {
    width: 1050px;
    height: 320px;
   left: 50%;
   margin-left: 25%;

  }



   .one-one {
     display: inline-block;
     float: left;
     width: 520px;
     background-color: #eefbf4;
     padding: 15px;
     font-size: 85%;
   }

   .one-two {
     display: inline-block;
     float: right;
     width: 520px;
     background-color: #eefbf4;
     padding: 15px;
     font-size: 85%;
   }

   .two-one {
     display: inline-block;
     float: left;
     width: 520px;
     background-color: #eefbf4;
     padding: 15px;
     font-size: 85%;
   }

   .two-two {
     display: inline-block;
     float: right;
     width: 520px;
     background-color: #eefbf4;
     padding: 15px;
     font-size: 85%;
   }

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



.otree-btn-next {

    display: none;
    float: right;
}

</style>
{{ form.calibration_choice_2.errors }}

<p> Ihre Entscheidung auf dieser Seite hat <b>KEINERLEI finanzielle Konsequenzen für andere Spieler</b>. </p>
<p> Wir bitten Sie, aus den folgenden Vorschlägen den Vorschlag auszuwählen, der zu <b>gleichen prozentualen Einkommenszuwächsen</b> für beide Spieler führt. </p>
<p> Wählen Sie die korrekte Antwort, so steigt Ihre persönliche Auszahlung um <b>20 Cent</b>. </p>
<input type="hidden" name="calibration_choice_2" value="0" id="calibration_choice_2"/>
 {% if player.treatment == "Relative" %}
 <div class="grid">
  <div class="one-one" onclick='select1()' id="answer1">
      <h1>Vorschlag 1</h1>
      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_percentage_1"></span> %</span> von <span id="p1_prize_1"></span> € auf <span id="p1_wealth_1"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_percentage_1"></span> %</span> von <span id="p2_prize_1"></span> € auf <span id="p2_wealth_1"></span> €.</p>
      <canvas id="chart_1" width="500" height="150"></canvas>

  </div>

  <div class="one-two" onclick='select2()' id="answer2">
      <h1>Vorschlag 2</h1>
      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_percentage_2"></span> %</span> von <span id="p1_prize_2"></span> € auf <span id="p1_wealth_2"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_percentage_2"></span> %</span> von <span id="p2_prize_2"></span> € auf <span id="p2_wealth_2"></span> €.</p>
      <canvas id="chart_2" width="500" height="150"></canvas>

  </div>
  </div>
<div class="grid2">
  <div class="two-one" onclick='select3()' id="answer3">
      <h1>Vorschlag 3</h1>
      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_percentage_3"></span> %</span> von <span id="p1_prize_3"></span> € auf <span id="p1_wealth_3"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_percentage_3"></span> %</span> von <span id="p2_prize_3"></span> € auf <span id="p2_wealth_3"></span> €.</p>
      <canvas id="chart_3" width="500" height="150"></canvas>

  </div>


</div>

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

      function shuffle(a) {
           var j, x, i;
           for (i = a.length - 1; i > 0; i--) {
               j = Math.floor(Math.random() * (i + 1));
               x = a[i];
               a[i] = a[j];
               a[j] = x;
           }
           return a;
       }




       p1_percentage_arr = [100*(({{p1_prize}}+{{p1_income_RelativeDefault}})/{{p1_prize}} - 1),
                       100*(({{p1_prize}}+{{p1_income_AbsoluteDefault}})/{{p1_prize}} - 1),
                       100*(({{p1_prize}}+{{p1_income_EqualWealth}})/{{p1_prize}} - 1)];

       p2_percentage_arr = [100*(({{p2_prize}}+{{p2_income_RelativeDefault}})/{{p2_prize}} - 1),
                       100*(({{p2_prize}}+{{p2_income_AbsoluteDefault}})/{{p2_prize}} - 1),
                       100*(({{p2_prize}}+{{p2_income_EqualWealth}})/{{p2_prize}} - 1)];

       p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_EqualWealth}}];

       p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_EqualWealth}}];

       p1_wealth_arr = [{{p1_income_RelativeDefault}} + {{p1_prize}},
                       {{p1_income_AbsoluteDefault}} + {{p1_prize}},
                       {{p1_income_EqualWealth}} + {{p1_prize}}];


       p2_wealth_arr = [{{p2_income_RelativeDefault}} + {{p2_prize}},
                       {{p2_income_AbsoluteDefault}} + {{p2_prize}},
                       {{p2_income_EqualWealth}} + {{p2_prize}}];

       type_arr = ["RelativeDefault", "AbsoluteDefault", "EqualWealth"]



      index = shuffle([0,1,2]);

      var p1_percentage_1 = p1_percentage_arr[index[0]];
      var p1_percentage_2 = p1_percentage_arr[index[1]];
      var p1_percentage_3 = p1_percentage_arr[index[2]];


      var p2_percentage_1 = p2_percentage_arr[index[0]];
      var p2_percentage_2 = p2_percentage_arr[index[1]];
      var p2_percentage_3 = p2_percentage_arr[index[2]];


      var p1_income_1 = p1_income_arr[index[0]];
      var p1_income_2 = p1_income_arr[index[1]];
      var p1_income_3 = p1_income_arr[index[2]];


      var p2_income_1 = p2_income_arr[index[0]];
      var p2_income_2 = p2_income_arr[index[1]];
      var p2_income_3 = p2_income_arr[index[2]];



      var p1_wealth_1 = p1_wealth_arr[index[0]];
      var p1_wealth_2 = p1_wealth_arr[index[1]];
      var p1_wealth_3 = p1_wealth_arr[index[2]];


      var p2_wealth_1 = p2_wealth_arr[index[0]];
      var p2_wealth_2 = p2_wealth_arr[index[1]];
      var p2_wealth_3 = p2_wealth_arr[index[2]];


      var type_1 = type_arr[index[0]];
      var type_2 = type_arr[index[1]];
      var type_3 = type_arr[index[2]];

      var maximum = Math.max(...[p1_percentage_1, p1_percentage_2, p1_percentage_3, p2_percentage_1, p2_percentage_2, p2_percentage_3]);

      maximum = Math.round(maximum / 10)*10;



      Chart.defaults.font.size = 16;

      var chart_1 = new Chart(document.getElementById("chart_1"), {
         type: 'bar',
         data: {
           labels: ["Spieler 1", "Spieler 2"],
           datasets: [
             {
               label: "Prozentuales Wachstum",
               backgroundColor: ["#FFC20A", "#0C7BDC"],
               data: [p1_percentage_1, p2_percentage_1]
             }
           ]
         },
         options: {

             indexAxis: 'y',

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

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

     var chart_2 = new Chart(document.getElementById("chart_2"), {
        type: 'bar',
        data: {
          labels: ["Spieler 1", "Spieler 2"],
          datasets: [
            {
              label: "Prozentuales Wachstum",
              backgroundColor: ["#FFC20A", "#0C7BDC"],
              data: [p1_percentage_2, p2_percentage_2]
            }
          ]
        },
        options: {

            indexAxis: 'y',

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

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

    var chart_3 = new Chart(document.getElementById("chart_3"), {
       type: 'bar',
       data: {
         labels: ["Spieler 1", "Spieler 2"],
         datasets: [
           {
             label: "Prozentuales Wachstum",
             backgroundColor: ["#FFC20A", "#0C7BDC"],
             data: [p1_percentage_3, p2_percentage_3]
           }
         ]
       },
       options: {

           indexAxis: 'y',

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

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





      $(document).ready(function () {

          document.getElementById("p1_prize_1").innerHTML = {{p1_prize}}.toFixed(2);
          document.getElementById("p1_prize_2").innerHTML = {{p1_prize}}.toFixed(2);
          document.getElementById("p1_prize_3").innerHTML = {{p1_prize}}.toFixed(2);


          document.getElementById("p2_prize_1").innerHTML = {{p2_prize}}.toFixed(2);
          document.getElementById("p2_prize_2").innerHTML = {{p2_prize}}.toFixed(2);
          document.getElementById("p2_prize_3").innerHTML = {{p2_prize}}.toFixed(2);


          document.getElementById("p1_percentage_1").innerHTML = p1_percentage_1.toFixed(0);
          document.getElementById("p1_percentage_2").innerHTML = p1_percentage_2.toFixed(0);
          document.getElementById("p1_percentage_3").innerHTML = p1_percentage_3.toFixed(0);


          document.getElementById("p2_percentage_1").innerHTML = p2_percentage_1.toFixed(0);
          document.getElementById("p2_percentage_2").innerHTML = p2_percentage_2.toFixed(0);
          document.getElementById("p2_percentage_3").innerHTML = p2_percentage_3.toFixed(0);


          document.getElementById("p1_wealth_1").innerHTML = p1_wealth_1.toFixed(2);
          document.getElementById("p1_wealth_2").innerHTML = p1_wealth_2.toFixed(2);
          document.getElementById("p1_wealth_3").innerHTML = p1_wealth_3.toFixed(2);


          document.getElementById("p2_wealth_1").innerHTML = p2_wealth_1.toFixed(2);
          document.getElementById("p2_wealth_2").innerHTML = p2_wealth_2.toFixed(2);
          document.getElementById("p2_wealth_3").innerHTML = p2_wealth_3.toFixed(2);





      });


      function select1(){

          document.getElementById("answer1").style.backgroundColor="aliceblue";
          document.getElementById("answer1").style.border="5px solid black";
          document.getElementById("answer1").style.padding="10px";
          document.getElementById("answer2").style.backgroundColor="#eefbf4";
          document.getElementById("answer2").style.border="";
          document.getElementById("answer2").style.padding="15px";
          document.getElementById("answer3").style.backgroundColor="#eefbf4";
          document.getElementById("answer3").style.border="";
          document.getElementById("answer3").style.padding="15px";
          $('.otree-btn-next').delay(0).show(0)

          document.getElementById("calibration_choice_1").value = type_1;

      }

      function select2(){

          document.getElementById("answer2").style.backgroundColor="aliceblue";
          document.getElementById("answer2").style.border="5px solid black";
          document.getElementById("answer2").style.padding="10px";
          document.getElementById("answer1").style.backgroundColor="#eefbf4";
          document.getElementById("answer1").style.border="";
          document.getElementById("answer1").style.padding="15px";
          document.getElementById("answer3").style.backgroundColor="#eefbf4";
          document.getElementById("answer3").style.border="";
          document.getElementById("answer3").style.padding="15px";

          $('.otree-btn-next').delay(0).show(0)

          document.getElementById("calibration_choice_1").value = type_2;


      }

      function select3(){

          document.getElementById("answer3").style.backgroundColor="aliceblue";
          document.getElementById("answer3").style.border="5px solid black";
          document.getElementById("answer3").style.padding="10px";
          document.getElementById("answer2").style.backgroundColor="#eefbf4";
          document.getElementById("answer2").style.border="";
          document.getElementById("answer2").style.padding="15px";
          document.getElementById("answer1").style.backgroundColor="#eefbf4";
          document.getElementById("answer1").style.border="";
          document.getElementById("answer1").style.padding="15px";

          $('.otree-btn-next').delay(0).show(0)

          document.getElementById("calibration_choice_1").value = type_3;


      }





  </script>
  {%endif%}


  {% if player.treatment == "Absolute" %}
  <div class="grid">
   <div class="one-one" onclick='select1()' id="answer1">
       <h1>Vorschlag 1</h1>
       <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_income_1"></span> €</span> von <span id="p1_prize_1"></span> € auf <span id="p1_wealth_1"></span> €.</p>
       <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_income_1"></span> €</span> von <span id="p2_prize_1"></span> € auf <span id="p2_wealth_1"></span> €.</p>
       <canvas id="chart_1" width="500" height="150"></canvas>

   </div>

   <div class="one-two" onclick='select2()' id="answer2">
       <h1>Vorschlag 2</h1>
       <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_income_2"></span> €</span> von <span id="p1_prize_2"></span> € auf <span id="p1_wealth_2"></span> €.</p>
       <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_income_2"></span> €</span> von <span id="p2_prize_2"></span> € auf <span id="p2_wealth_2"></span> €.</p>
       <canvas id="chart_2" width="500" height="150"></canvas>

   </div>
   </div>
 <div class="grid2">
   <div class="two-one" onclick='select3()' id="answer3">
       <h1>Vorschlag 3</h1>
       <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_income_3"></span> €</span> von <span id="p1_prize_3"></span> € auf <span id="p1_wealth_3"></span> €.</p>
       <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_income_3"></span> €</span> von <span id="p2_prize_3"></span> € auf <span id="p2_wealth_3"></span> €.</p>
       <canvas id="chart_3" width="500" height="150"></canvas>

   </div>


 </div>

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

       function shuffle(a) {
            var j, x, i;
            for (i = a.length - 1; i > 0; i--) {
                j = Math.floor(Math.random() * (i + 1));
                x = a[i];
                a[i] = a[j];
                a[j] = x;
            }
            return a;
        }




        p1_percentage_arr = [100*(({{p1_prize}}+{{p1_income_RelativeDefault}})/{{p1_prize}} - 1),
                        100*(({{p1_prize}}+{{p1_income_AbsoluteDefault}})/{{p1_prize}} - 1),
                        100*(({{p1_prize}}+{{p1_income_EqualWealth}})/{{p1_prize}} - 1)];

        p2_percentage_arr = [100*(({{p2_prize}}+{{p2_income_RelativeDefault}})/{{p2_prize}} - 1),
                        100*(({{p2_prize}}+{{p2_income_AbsoluteDefault}})/{{p2_prize}} - 1),
                        100*(({{p2_prize}}+{{p2_income_EqualWealth}})/{{p2_prize}} - 1)];

        p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_EqualWealth}}];

        p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_EqualWealth}}];

        p1_wealth_arr = [{{p1_income_RelativeDefault}} + {{p1_prize}},
                        {{p1_income_AbsoluteDefault}} + {{p1_prize}},
                        {{p1_income_EqualWealth}} + {{p1_prize}}];


        p2_wealth_arr = [{{p2_income_RelativeDefault}} + {{p2_prize}},
                        {{p2_income_AbsoluteDefault}} + {{p2_prize}},
                        {{p2_income_EqualWealth}} + {{p2_prize}}];

        type_arr = ["RelativeDefault", "AbsoluteDefault", "EqualWealth"]



       index = shuffle([0,1,2]);

       var p1_percentage_1 = p1_percentage_arr[index[0]];
       var p1_percentage_2 = p1_percentage_arr[index[1]];
       var p1_percentage_3 = p1_percentage_arr[index[2]];


       var p2_percentage_1 = p2_percentage_arr[index[0]];
       var p2_percentage_2 = p2_percentage_arr[index[1]];
       var p2_percentage_3 = p2_percentage_arr[index[2]];


       var p1_income_1 = p1_income_arr[index[0]];
       var p1_income_2 = p1_income_arr[index[1]];
       var p1_income_3 = p1_income_arr[index[2]];


       var p2_income_1 = p2_income_arr[index[0]];
       var p2_income_2 = p2_income_arr[index[1]];
       var p2_income_3 = p2_income_arr[index[2]];



       var p1_wealth_1 = p1_wealth_arr[index[0]];
       var p1_wealth_2 = p1_wealth_arr[index[1]];
       var p1_wealth_3 = p1_wealth_arr[index[2]];


       var p2_wealth_1 = p2_wealth_arr[index[0]];
       var p2_wealth_2 = p2_wealth_arr[index[1]];
       var p2_wealth_3 = p2_wealth_arr[index[2]];


       var type_1 = type_arr[index[0]];
       var type_2 = type_arr[index[1]];
       var type_3 = type_arr[index[2]];

       var maximum = Math.max(...[p1_income_1, p1_income_2, p1_income_3, p2_income_1, p2_income_2, p2_income_3]);

       maximum = Math.round(maximum / 1)*1;



       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ätzliche Einkommen",
                backgroundColor: ["#FFC20A", "#0C7BDC"],
                data: [p1_income_1, p2_income_1]
              }
            ]
          },
          options: {

              indexAxis: 'y',

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

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

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

             indexAxis: 'y',

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

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

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

            indexAxis: 'y',

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

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





       $(document).ready(function () {

           document.getElementById("p1_prize_1").innerHTML = {{p1_prize}}.toFixed(2);
           document.getElementById("p1_prize_2").innerHTML = {{p1_prize}}.toFixed(2);
           document.getElementById("p1_prize_3").innerHTML = {{p1_prize}}.toFixed(2);


           document.getElementById("p2_prize_1").innerHTML = {{p2_prize}}.toFixed(2);
           document.getElementById("p2_prize_2").innerHTML = {{p2_prize}}.toFixed(2);
           document.getElementById("p2_prize_3").innerHTML = {{p2_prize}}.toFixed(2);


           document.getElementById("p1_income_1").innerHTML = p1_income_1.toFixed(2);
           document.getElementById("p1_income_2").innerHTML = p1_income_2.toFixed(2);
           document.getElementById("p1_income_3").innerHTML = p1_income_3.toFixed(2);


           document.getElementById("p2_income_1").innerHTML = p2_income_1.toFixed(2);
           document.getElementById("p2_income_2").innerHTML = p2_income_2.toFixed(2);
           document.getElementById("p2_income_3").innerHTML = p2_income_3.toFixed(2);


           document.getElementById("p1_wealth_1").innerHTML = p1_wealth_1.toFixed(2);
           document.getElementById("p1_wealth_2").innerHTML = p1_wealth_2.toFixed(2);
           document.getElementById("p1_wealth_3").innerHTML = p1_wealth_3.toFixed(2);


           document.getElementById("p2_wealth_1").innerHTML = p2_wealth_1.toFixed(2);
           document.getElementById("p2_wealth_2").innerHTML = p2_wealth_2.toFixed(2);
           document.getElementById("p2_wealth_3").innerHTML = p2_wealth_3.toFixed(2);





       });


       function select1(){

           document.getElementById("answer1").style.backgroundColor="aliceblue";
           document.getElementById("answer1").style.border="5px solid black";
           document.getElementById("answer1").style.padding="10px";
           document.getElementById("answer2").style.backgroundColor="#eefbf4";
           document.getElementById("answer2").style.border="";
           document.getElementById("answer2").style.padding="15px";
           document.getElementById("answer3").style.backgroundColor="#eefbf4";
           document.getElementById("answer3").style.border="";
           document.getElementById("answer3").style.padding="15px";
           $('.otree-btn-next').delay(0).show(0)

           document.getElementById("calibration_choice_1").value = type_1;

       }

       function select2(){

           document.getElementById("answer2").style.backgroundColor="aliceblue";
           document.getElementById("answer2").style.border="5px solid black";
           document.getElementById("answer2").style.padding="10px";
           document.getElementById("answer1").style.backgroundColor="#eefbf4";
           document.getElementById("answer1").style.border="";
           document.getElementById("answer1").style.padding="15px";
           document.getElementById("answer3").style.backgroundColor="#eefbf4";
           document.getElementById("answer3").style.border="";
           document.getElementById("answer3").style.padding="15px";

           $('.otree-btn-next').delay(0).show(0)

           document.getElementById("calibration_choice_1").value = type_2;


       }

       function select3(){

           document.getElementById("answer3").style.backgroundColor="aliceblue";
           document.getElementById("answer3").style.border="5px solid black";
           document.getElementById("answer3").style.padding="10px";
           document.getElementById("answer2").style.backgroundColor="#eefbf4";
           document.getElementById("answer2").style.border="";
           document.getElementById("answer2").style.padding="15px";
           document.getElementById("answer1").style.backgroundColor="#eefbf4";
           document.getElementById("answer1").style.border="";
           document.getElementById("answer1").style.padding="15px";

           $('.otree-btn-next').delay(0).show(0)

           document.getElementById("calibration_choice_1").value = type_3;


       }





   </script>
   {%endif%}


<p></p>




{% next_button %}

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


{% endblock %}