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

{% block title %}
Teil 1: Entscheidung {{player.round_number}}/8

{% endblock %}

{% block content %}

<style>


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

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

   }


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



   .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>
<p> Nehmen Sie an, dass Ihre beiden Gruppenmitglieder für den Wettbewerb ausgelost wurden. </p>
<p> Spieler 1 hat den Wettbewerb gewonnen und erhält dafür ein <b>hohes Preisgeld von <span id="p1_prize_0"></span> €</b>. Spieler 2 erhält als Verlierer ein <b>niedriges Preisgeld von <span id="p2_prize_0"></span> €</b>.</p>


{% if player.treatment == "Absolute" %}
<p> Im Folgenden sehen Sie verschiedene <b>Vorschläge</b> für die Zuteilung der <b>zusätzlichen Einkommen</b>. Die insgesamt verteilte Geldsumme ist für jeden Vorschlag gleich. </p>
{% endif %}

{% if player.treatment == "Relative" %}
<p> Im Folgenden sehen Sie verschiedene <b>Vorschläge</b> für die Zuteilung der <b>zusätzlichen prozentualen Zuwächse</b>. Die insgesamt verteilte Geldsumme ist für jeden Vorschlag gleich.</p>
{% endif %}
<p>Bitte wählen Sie per Klick einen der Vorschläge, damit er gegebenenfalls umgesetzt wird. </p>
<input type="hidden" name="choice" value="0" id="choice"/>

 {% 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="grid">
  <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 class="two-two" onclick='select4()' id="answer4">
      <h1>Vorschlag 4</h1>
      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_percentage_4"></span> %</span> von <span id="p1_prize_4"></span> € auf <span id="p1_wealth_4"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_percentage_4"></span> %</span> von <span id="p2_prize_4"></span> € auf <span id="p2_wealth_4"></span> €.</p>
      <canvas id="chart_4" 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;
       }

      index_arr = [0,1,2,3]

      if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, AdvantageRich") {

           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),
                           100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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),
                           100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

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

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

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


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

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

           }

       if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, AdvantagePoor") {

            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),
                            100*(({{p1_prize}}+{{p1_income_AdvantagePoor}})/{{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),
                            100*(({{p2_prize}}+{{p2_income_AdvantagePoor}})/{{p2_prize}} - 1)];

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

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

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


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

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


            }

        if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, Intermediate") {

             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),
                             100*(({{p1_prize}}+{{p1_income_Intermediate}})/{{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),
                             100*(({{p2_prize}}+{{p2_income_Intermediate}})/{{p2_prize}} - 1)];

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

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

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


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

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

             }


         if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, AdvantagePoor, AdvantageRich") {

              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_AdvantagePoor}})/{{p1_prize}} - 1),
                              100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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_AdvantagePoor}})/{{p2_prize}} - 1),
                              100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

              p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_AdvantagePoor}},
                                  {{p1_income_AdvantageRich}}];

              p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_AdvantagePoor}},
                                  {{p2_income_AdvantageRich}}];

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


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

             type_arr = ["RelativeDefault", "AbsoluteDefault", "AdvantagePoor", "AdvantageRich"]

              }

        if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, Intermediate, AdvantageRich") {

               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_Intermediate}})/{{p1_prize}} - 1),
                               100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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_Intermediate}})/{{p2_prize}} - 1),
                               100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

               p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_Intermediate}},
                                   {{p1_income_AdvantageRich}}];

               p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_Intermediate}},
                                   {{p2_income_AdvantageRich}}];

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


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

              type_arr = ["RelativeDefault", "AbsoluteDefault", "Intermediate", "AdvantageRich"]

               }



       if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, Intermediate, AdvantagePoor") {

            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_Intermediate}})/{{p1_prize}} - 1),
                            100*(({{p1_prize}}+{{p1_income_AdvantagePoor}})/{{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_Intermediate}})/{{p2_prize}} - 1),
                            100*(({{p2_prize}}+{{p2_income_AdvantagePoor}})/{{p2_prize}} - 1)];

            p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_Intermediate}},
                                {{p1_income_AdvantagePoor}}];

            p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_Intermediate}},
                                {{p2_income_AdvantagePoor}}];

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


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

           type_arr = ["RelativeDefault", "AbsoluteDefault", "Intermediate", "AdvantagePoor"]

            }



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

      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 p1_percentage_4 = p1_percentage_arr[index[3]];


      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 p2_percentage_4 = p2_percentage_arr[index[3]];


      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 p1_income_4 = p1_income_arr[index[3]];


      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 p2_income_4 = p2_income_arr[index[3]];



      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 p1_wealth_4 = p1_wealth_arr[index[3]];


      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 p2_wealth_4 = p2_wealth_arr[index[3]];


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

      var maximum = Math.max(...[p1_percentage_1, p1_percentage_2, p1_percentage_3, p1_percentage_4, p2_percentage_1, p2_percentage_2, p2_percentage_3, p2_percentage_4]);
      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,
         }
       }
   });

   var chart_4 = new Chart(document.getElementById("chart_4"), {
      type: 'bar',
      data: {
        labels: ["Spieler 1", "Spieler 2"],
        datasets: [
          {
            label: "Prozentuales Wachstum",
            backgroundColor: ["#FFC20A", "#0C7BDC"],
            data: [p1_percentage_4, p2_percentage_4]
          }
        ]
      },
      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_0").innerHTML = {{p1_prize}}.toFixed(2);
          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("p1_prize_4").innerHTML = {{p1_prize}}.toFixed(2);


          document.getElementById("p2_prize_0").innerHTML = {{p2_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("p2_prize_4").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("p1_percentage_4").innerHTML = p1_percentage_4.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("p2_percentage_4").innerHTML = p2_percentage_4.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("p1_wealth_4").innerHTML = p1_wealth_4.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);
          document.getElementById("p2_wealth_4").innerHTML = p2_wealth_4.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";
          document.getElementById("answer4").style.backgroundColor="#eefbf4";
          document.getElementById("answer4").style.border="";
          document.getElementById("answer4").style.padding="15px";
          $('.otree-btn-next').delay(0).show(0)

          document.getElementById("choice").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";
          document.getElementById("answer4").style.backgroundColor="#eefbf4";
          document.getElementById("answer4").style.border="";
          document.getElementById("answer4").style.padding="15px";
          $('.otree-btn-next').delay(0).show(0)

          document.getElementById("choice").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";
          document.getElementById("answer4").style.backgroundColor="#eefbf4";
          document.getElementById("answer4").style.border="";
          document.getElementById("answer4").style.padding="15px";
          $('.otree-btn-next').delay(0).show(0)

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


      }

      function select4(){

          document.getElementById("answer4").style.backgroundColor="aliceblue";
          document.getElementById("answer4").style.border="5px solid black";
          document.getElementById("answer4").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";
          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("choice").value = type_4;


      }



  </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="grid">
   <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 class="two-two" onclick='select4()' id="answer4">
       <h1>Vorschlag 4</h1>
       <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_income_4"></span> €</span> von <span id="p1_prize_4"></span> € auf <span id="p1_wealth_4"></span> €.</p>
       <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_income_4"></span> €</span> von <span id="p2_prize_4"></span> € auf <span id="p2_wealth_4"></span> €.</p>
       <canvas id="chart_4" 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;
        }


       if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, AdvantageRich") {

            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),
                            100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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),
                            100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

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

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

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


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

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

            }

        if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, AdvantagePoor") {

             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),
                             100*(({{p1_prize}}+{{p1_income_AdvantagePoor}})/{{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),
                             100*(({{p2_prize}}+{{p2_income_AdvantagePoor}})/{{p2_prize}} - 1)];

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

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

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


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

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


             }

         if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, EqualWealth, Intermediate") {

              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),
                              100*(({{p1_prize}}+{{p1_income_Intermediate}})/{{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),
                              100*(({{p2_prize}}+{{p2_income_Intermediate}})/{{p2_prize}} - 1)];

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

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

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


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

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

              }


          if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, AdvantagePoor, AdvantageRich") {

               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_AdvantagePoor}})/{{p1_prize}} - 1),
                               100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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_AdvantagePoor}})/{{p2_prize}} - 1),
                               100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

               p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_AdvantagePoor}},
                                   {{p1_income_AdvantageRich}}];

               p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_AdvantagePoor}},
                                   {{p2_income_AdvantageRich}}];

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


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

              type_arr = ["RelativeDefault", "AbsoluteDefault", "AdvantagePoor", "AdvantageRich"]

               }

         if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, Intermediate, AdvantageRich") {

                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_Intermediate}})/{{p1_prize}} - 1),
                                100*(({{p1_prize}}+{{p1_income_AdvantageRich}})/{{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_Intermediate}})/{{p2_prize}} - 1),
                                100*(({{p2_prize}}+{{p2_income_AdvantageRich}})/{{p2_prize}} - 1)];

                p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_Intermediate}},
                                    {{p1_income_AdvantageRich}}];

                p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_Intermediate}},
                                    {{p2_income_AdvantageRich}}];

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


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

               type_arr = ["RelativeDefault", "AbsoluteDefault", "Intermediate", "AdvantageRich"]

                }



        if  ({{decisions}} == "RelativeDefault, AbsoluteDefault, Intermediate, AdvantagePoor") {

             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_Intermediate}})/{{p1_prize}} - 1),
                             100*(({{p1_prize}}+{{p1_income_AdvantagePoor}})/{{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_Intermediate}})/{{p2_prize}} - 1),
                             100*(({{p2_prize}}+{{p2_income_AdvantagePoor}})/{{p2_prize}} - 1)];

             p1_income_arr = [{{p1_income_RelativeDefault}}, {{p1_income_AbsoluteDefault}}, {{p1_income_Intermediate}},
                                 {{p1_income_AdvantagePoor}}];

             p2_income_arr = [{{p2_income_RelativeDefault}}, {{p2_income_AbsoluteDefault}}, {{p2_income_Intermediate}},
                                 {{p2_income_AdvantagePoor}}];

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


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

            type_arr = ["RelativeDefault", "AbsoluteDefault", "Intermediate", "AdvantagePoor"]

             }


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

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

       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 p1_percentage_4 = p1_percentage_arr[index[3]];


       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 p2_percentage_4 = p2_percentage_arr[index[3]];


       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 p1_income_4 = p1_income_arr[index[3]];


       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 p2_income_4 = p2_income_arr[index[3]];



       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 p1_wealth_4 = p1_wealth_arr[index[3]];


       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 p2_wealth_4 = p2_wealth_arr[index[3]];


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

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

       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,
          }
        }
    });

    var chart_4 = new Chart(document.getElementById("chart_4"), {
       type: 'bar',
       data: {
         labels: ["Spieler 1", "Spieler 2"],
         datasets: [
           {
             label: "Zusätzliche Einkommen",
             backgroundColor: ["#FFC20A", "#0C7BDC"],
             data: [p1_income_4, p2_income_4]
           }
         ]
       },
       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_0").innerHTML = {{p1_prize}}.toFixed(2);
           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("p1_prize_4").innerHTML = {{p1_prize}}.toFixed(2);


           document.getElementById("p2_prize_0").innerHTML = {{p2_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("p2_prize_4").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("p1_income_4").innerHTML = p1_income_4.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("p2_income_4").innerHTML = p2_income_4.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("p1_wealth_4").innerHTML = p1_wealth_4.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);
           document.getElementById("p2_wealth_4").innerHTML = p2_wealth_4.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";
           document.getElementById("answer4").style.backgroundColor="#eefbf4";
           document.getElementById("answer4").style.border="";
           document.getElementById("answer4").style.padding="15px";
           $('.otree-btn-next').delay(0).show(0)

           document.getElementById("choice").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";
           document.getElementById("answer4").style.backgroundColor="#eefbf4";
           document.getElementById("answer4").style.border="";
           document.getElementById("answer4").style.padding="15px";
           $('.otree-btn-next').delay(0).show(0)

           document.getElementById("choice").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";
           document.getElementById("answer4").style.backgroundColor="#eefbf4";
           document.getElementById("answer4").style.border="";
           document.getElementById("answer4").style.padding="15px";
           $('.otree-btn-next').delay(0).show(0)

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


       }

       function select4(){

           document.getElementById("answer4").style.backgroundColor="aliceblue";
           document.getElementById("answer4").style.border="5px solid black";
           document.getElementById("answer4").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";
           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("choice").value = type_4;


       }



   </script>
   {%endif%}


<p></p>




{% next_button %}

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


{% endblock %}