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

{% block title %}Teil 2: Entscheidung{% endblock %}

{% block content %}



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

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

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

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

    .tab { margin-left: 50px; }

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

</style>


 <p> Im Folgenden sehen Sie die alten Vermögen der beiden Gruppenmitglieder, sowie das zugeteilte Einkommen und die implizierten neuen Vermögen. Bitte teilen Sie das Gesamteinkommen von 5 Euro auf beide Spieler auf. Die Anzeige wird live aktualisiert.</p>


{% if player.treatment == "Absolute" %}
 <div class="div1">
     <h1>Verteilung bei gewählter Aufteilung</h1>
     <p> Bitte nutzen Sie die Buttons, um das Einkommensbudget auf die beiden Gruppenmitglieder aufzuteilen. </p>
     <p>Das Vermögen jedes Gruppenmitglieds ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">+ Einkommen</span>.</p>
     <p> <b>Noch nicht zugeteiltes Einkommen: <span id="budget"></span> €</b> </p>
     <p> Spieler 1: <span id="p1_live_final_wealth"></span> € =  <span id="p1_initial_wealth"></span> €<span style="color:blue;"> + <span id="p1_live_income"></span> €</span>  <input id="p1_plus100" class="inline" type="button" value="+ 1€" style="background-color:limegreen"> <input id="p1_minus100" class="inline" type="button" value="- 1€" style="background-color:tomato"> <input id="p1_plus10" class="inline" type="button" value="+ 10ct" style="background-color:limegreen"> <input id="p1_minus10" class="inline" type="button" value="- 10ct" style="background-color:tomato"> </p>
     <p> Spieler 2: <span id="p2_live_final_wealth"></span> € =  <span id="p2_initial_wealth"></span><span style="color:blue;"> + <span id="p2_live_income"></span> €</span>  <input id="p2_plus100" class="inline" type="button" value="+ 1€" style="background-color:limegreen"> <input id="p2_minus100" class="inline" type="button" value="- 1€" style="background-color:tomato"> <input id="p2_plus10" class="inline" type="button" value="+ 10ct" style="background-color:limegreen"> <input id="p2_minus10" class="inline" type="button" value="- 10ct" style="background-color:tomato"> </p>
     <input type="hidden" name="p1_free_decision" value="" id="p1_free_decision"/>
     <input type="hidden" name="p2_free_decision" value="" id="p2_free_decision"/>
     {{ form.p1_free_decision.errors }}
     {{ form.p2_free_decision.errors }}
     <canvas id="bar-chart" width="500" height="200"></canvas>

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

         Chart.defaults.font.size = 18;

         var p1_initial_wealth = {{ p1_free_initial_wealth }};
         var p2_initial_wealth = {{ p2_free_initial_wealth }};

         var p1_live_income = 0;
         var p2_live_income = 0;

         var budget = {{ budget }};



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

              scales : {
                        y : {
                            min: 0,
                            max: budget,
                        },

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


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

             if (budget >= 1.0) {
                 budget = budget - 1.0;
                 p1_live_income = p1_live_income + 1.0;
                 budget = Math.round(10*budget)/10;
                 p1_live_income = Math.round(10*p1_live_income)/10;
             };

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

             document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
             document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

             document.getElementById('p1_free_decision').value = p1_live_income;
             document.getElementById('p2_free_decision').value = p2_live_income;

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

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

              if (budget >= 1.0) {
                  budget = budget - 1.0;
                  p2_live_income = p2_live_income + 1.0;
                  budget = Math.round(10*budget)/10;
                  p2_live_income = Math.round(10*p2_live_income)/10;
              };

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

              document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
              document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

              document.getElementById('p1_free_decision').value = p1_live_income;
              document.getElementById('p2_free_decision').value = p2_live_income;

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

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

              if (budget >= 0.1) {
                  budget = budget - 0.1;
                  p1_live_income = p1_live_income + 0.1;
                  budget = Math.round(10*budget)/10;
                  p1_live_income = Math.round(10*p1_live_income)/10;
              };

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

              document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
              document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

              document.getElementById('p1_free_decision').value = p1_live_income;
              document.getElementById('p2_free_decision').value = p2_live_income;

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

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

               if (budget >= 0.1) {
                   budget = budget - 0.1;
                   p2_live_income = p2_live_income + 0.1;
                   budget = Math.round(10*budget)/10;
                   p2_live_income = Math.round(10*p2_live_income)/10;
               };

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

               document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
               document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

               document.getElementById('p1_free_decision').value = p1_live_income;
               document.getElementById('p2_free_decision').value = p2_live_income;

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

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

                if (p1_live_income >= 1.0) {
                    budget = budget + 1.0;
                    p1_live_income = p1_live_income - 1.0;
                    budget = Math.round(10*budget)/10;
                    p1_live_income = Math.round(10*p1_live_income)/10;
                };

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

                document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                document.getElementById('p1_free_decision').value = p1_live_income;
                document.getElementById('p2_free_decision').value = p2_live_income;

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

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

                 if (p2_live_income >= 1.0) {
                     budget = budget + 1.0;
                     p2_live_income = p2_live_income - 1.0;
                     budget = Math.round(10*budget)/10;
                     p2_live_income = Math.round(10*p2_live_income)/10;
                 };

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

                 document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                 document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                 document.getElementById('p1_free_decision').value = p1_live_income;
                 document.getElementById('p2_free_decision').value = p2_live_income;

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

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

                 if (p1_live_income >= 0.1) {
                     budget = budget + 0.1;
                     p1_live_income = p1_live_income - 0.1;
                     budget = Math.round(10*budget)/10;
                     p1_live_income = Math.round(10*p1_live_income)/10;
                 };

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

                 document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                 document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);
                 document.getElementById('p1_free_decision').value = p1_live_income;
                 document.getElementById('p2_free_decision').value = p2_live_income;

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

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

                  if (p2_live_income >= 0.1) {
                      budget = budget + 0.1;
                      p2_live_income = p2_live_income - 0.1;
                      budget = Math.round(10*budget)/10;
                      p2_live_income = Math.round(10*p2_live_income)/10;
                  };

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

                  document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                  document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                  document.getElementById('p1_free_decision').value = p1_live_income;
                  document.getElementById('p2_free_decision').value = p2_live_income;

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



      	$(document).ready(function () {
            document.getElementById("p1_live_final_wealth").innerHTML = p1_initial_wealth.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_initial_wealth.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_live_income").innerHTML = p1_live_income.toFixed(2);
            document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);


            document.getElementById("budget").innerHTML = budget.toFixed(2);

          });

     </script>
 </div>
 {%endif%}


 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Verteilung bei gewählter Aufteilung</h1>
      <p> Bitte nutzen Sie die Buttons, um das Einkommensbudget auf die beiden Gruppenmitglieder aufzuteilen. </p>
      <p>Das Vermögen jedes Gruppenmitglieds ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">× Wachstumsfaktor</span>.</p>
      <p> <b>Noch nicht zugeteiltes Einkommen: <span id="budget"></span> €</b> </p>
      <p> Spieler 1: <span id="p1_live_final_wealth"></span> € =  <span id="p1_initial_wealth"></span> €<span style="color:blue;"> × <span id="p1_live_factor"></span></span>  <input id="p1_plus100" class="inline" type="button" value="+ 1€" style="background-color:limegreen"> <input id="p1_minus100" class="inline" type="button" value="- 1€" style="background-color:tomato"> <input id="p1_plus10" class="inline" type="button" value="+ 10ct" style="background-color:limegreen"> <input id="p1_minus10" class="inline" type="button" value="- 10ct" style="background-color:tomato"> </p>
      <p> Spieler 2: <span id="p2_live_final_wealth"></span> € =  <span id="p2_initial_wealth"></span> €<span style="color:blue;"> × <span id="p2_live_factor"></span></span>  <input id="p2_plus100" class="inline" type="button" value="+ 1€" style="background-color:limegreen"> <input id="p2_minus100" class="inline" type="button" value="- 1€" style="background-color:tomato"> <input id="p2_plus10" class="inline" type="button" value="+ 10ct" style="background-color:limegreen"> <input id="p2_minus10" class="inline" type="button" value="- 10ct" style="background-color:tomato"> </p>
      <input type="hidden" name="p1_free_decision" value="" id="p1_free_decision"/>
      <input type="hidden" name="p2_free_decision" value="" id="p2_free_decision"/>
      <input type="hidden" name="p1_live_income" value="" id="p1_live_income"/>
      <input type="hidden" name="p2_live_income" value="" id="p2_live_income"/>
      {{ form.p1_free_decision.errors }}
      {{ form.p2_free_decision.errors }}
      <canvas id="bar-chart" width="500" height="200"></canvas>


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

          Chart.defaults.font.size = 18;

          var p1_initial_wealth = {{ p1_free_initial_wealth }};
          var p2_initial_wealth = {{ p2_free_initial_wealth }};

          var p1_live_income = 0;
          var p2_live_income = 0;

          var p1_live_factor = 1.0;
          var p2_live_factor = 1.0;


          var budget = {{ budget }};

          var max_factor = Math.max((p1_initial_wealth + budget)/p1_initial_wealth,
                                    (p2_initial_wealth + budget)/p2_initial_wealth)

          var myChart = new Chart(document.getElementById("bar-chart"), {
             type: 'bar',
             data: {
               labels: ["Spieler 1", "Spieler 2"],
               datasets: [
                 {
                   label: "Wachstumsfaktoren bei gewählter Aufteilung",
                   backgroundColor: ["#FFC20A", "#0C7BDC"],
                   data: [p1_live_factor, p2_live_factor]
                 }
               ]
             },
             options: {

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

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


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

              if (budget >= 1.0) {
                  budget = budget - 1.0;
                  p1_live_income = p1_live_income + 1.0;
                  budget = Math.round(10*budget)/10;
                  p1_live_income = Math.round(10*p1_live_income)/10;
              };

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

              document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
              document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

              document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
              document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

              p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
              p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

              document.getElementById('p1_free_decision').value = p1_live_income;
              document.getElementById('p2_free_decision').value = p2_live_income;

              myChart.config.data = {
                labels: ["Spieler 1", "Spieler 2"],
                datasets: [
                  {
                    label: "Wachstumsfaktoren bei gewählter Aufteilung",
                    backgroundColor: ["#FFC20A", "#0C7BDC"],
                    data: [p1_live_factor, p2_live_factor]
                  }
                ]
            };
              myChart.update();
           };

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

               if (budget >= 1.0) {
                   budget = budget - 1.0;
                   p2_live_income = p2_live_income + 1.0;
                   budget = Math.round(10*budget)/10;
                   p2_live_income = Math.round(10*p2_live_income)/10;
               };

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

               document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
               document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

               document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
               document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

               p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
               p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

               document.getElementById('p1_free_decision').value = p1_live_income;
               document.getElementById('p2_free_decision').value = p2_live_income;

               myChart.config.data = {
                 labels: ["Spieler 1", "Spieler 2"],
                 datasets: [
                   {
                     label: "Wachstumsfaktoren bei gewählter Aufteilung",
                     backgroundColor: ["#FFC20A", "#0C7BDC"],
                     data: [p1_live_factor, p2_live_factor]
                   }
                 ]
             };
               myChart.update();
            };

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

               if (budget >= 0.1) {
                   budget = budget - 0.1;
                   p1_live_income = p1_live_income + 0.1;
                   budget = Math.round(10*budget)/10;
                   p1_live_income = Math.round(10*p1_live_income)/10;
               };

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

               document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
               document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

               document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
               document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

               p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
               p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

               document.getElementById('p1_free_decision').value = p1_live_income;
               document.getElementById('p2_free_decision').value = p2_live_income;

               myChart.config.data = {
                 labels: ["Spieler 1", "Spieler 2"],
                 datasets: [
                   {
                     label: "Wachstumsfaktoren bei gewählter Aufteilung",
                     backgroundColor: ["#FFC20A", "#0C7BDC"],
                     data: [p1_live_factor, p2_live_factor]
                   }
                 ]
             };
               myChart.update();
            };

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

                if (budget >= 0.1) {
                    budget = budget - 0.1;
                    p2_live_income = p2_live_income + 0.1;
                    budget = Math.round(10*budget)/10;
                    p2_live_income = Math.round(10*p2_live_income)/10;
                };

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

                document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
                document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

                p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
                p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

                document.getElementById('p1_free_decision').value = p1_live_income;
                document.getElementById('p2_free_decision').value = p2_live_income;

                myChart.config.data = {
                  labels: ["Spieler 1", "Spieler 2"],
                  datasets: [
                    {
                      label: "Wachstumsfaktoren bei gewählter Aufteilung",
                      backgroundColor: ["#FFC20A", "#0C7BDC"],
                      data: [p1_live_factor, p2_live_factor]
                    }
                  ]
              };
                myChart.update();
             };

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

                 if (p1_live_income >= 1.0) {
                     budget = budget + 1.0;
                     p1_live_income = p1_live_income - 1.0;
                     budget = Math.round(10*budget)/10;
                     p1_live_income = Math.round(10*p1_live_income)/10;
                 };

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

                 document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                 document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                 document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
                 document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

                 p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
                 p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

                 document.getElementById('p1_free_decision').value = p1_live_income;
                 document.getElementById('p2_free_decision').value = p2_live_income;

                 myChart.config.data = {
                   labels: ["Spieler 1", "Spieler 2"],
                   datasets: [
                     {
                       label: "Wachstumsfaktoren bei gewählter Aufteilung",
                       backgroundColor: ["#FFC20A", "#0C7BDC"],
                       data: [p1_live_factor, p2_live_factor]
                     }
                   ]
               };
                 myChart.update();
              };

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

                  if (p2_live_income >= 1.0) {
                      budget = budget + 1.0;
                      p2_live_income = p2_live_income - 1.0;
                      budget = Math.round(10*budget)/10;
                      p2_live_income = Math.round(10*p2_live_income)/10;
                  };

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

                  document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                  document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                  document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
                  document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

                  p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
                  p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

                  document.getElementById('p1_free_decision').value = p1_live_income;
                  document.getElementById('p2_free_decision').value = p2_live_income;

                  myChart.config.data = {
                    labels: ["Spieler 1", "Spieler 2"],
                    datasets: [
                      {
                        label: "Wachstumsfaktoren bei gewählter Aufteilung",
                        backgroundColor: ["#FFC20A", "#0C7BDC"],
                        data: [p1_live_factor, p2_live_factor]
                      }
                    ]
                };
                  myChart.update();
               };

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

                  if (p1_live_income >= 0.1) {
                      budget = budget + 0.1;
                      p1_live_income = p1_live_income - 0.1;
                      budget = Math.round(10*budget)/10;
                      p1_live_income = Math.round(10*p1_live_income)/10;
                  };

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

                  document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                  document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                  document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
                  document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

                  p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
                  p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

                  document.getElementById('p1_free_decision').value = p1_live_income;
                  document.getElementById('p2_free_decision').value = p2_live_income;

                  myChart.config.data = {
                    labels: ["Spieler 1", "Spieler 2"],
                    datasets: [
                      {
                        label: "Wachstumsfaktoren bei gewählter Aufteilung",
                        backgroundColor: ["#FFC20A", "#0C7BDC"],
                        data: [p1_live_factor, p2_live_factor]
                      }
                    ]
                };
                  myChart.update();
               };

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

                   if (p2_live_income >= 0.1) {
                       budget = budget + 0.1;
                       p2_live_income = p2_live_income - 0.1;
                       budget = Math.round(10*budget)/10;
                       p2_live_income = Math.round(10*p2_live_income)/10;
                   };

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

                   document.getElementById("p1_live_final_wealth").innerHTML = (p1_initial_wealth + p1_live_income).toFixed(2);
                   document.getElementById("p2_live_final_wealth").innerHTML = (p2_initial_wealth + p2_live_income).toFixed(2);

                   document.getElementById("p1_live_factor").innerHTML = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth).toFixed(2);
                   document.getElementById("p2_live_factor").innerHTML = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth).toFixed(2);

                   p1_live_factor = ((p1_initial_wealth + p1_live_income)/p1_initial_wealth)
                   p2_live_factor = ((p2_initial_wealth + p2_live_income)/p2_initial_wealth)

                   document.getElementById('p1_free_decision').value = p1_live_income;
                   document.getElementById('p2_free_decision').value = p2_live_income;

                   myChart.config.data = {
                     labels: ["Spieler 1", "Spieler 2"],
                     datasets: [
                       {
                         label: "Wachstumsfaktoren bei gewählter Aufteilung",
                         backgroundColor: ["#FFC20A", "#0C7BDC"],
                         data: [p1_live_factor, p2_live_factor]
                       }
                     ]
                 };
                   myChart.update();
                };



       	$(document).ready(function () {
             document.getElementById("p1_live_final_wealth").innerHTML = p1_initial_wealth.toFixed(2);
             document.getElementById("p2_live_final_wealth").innerHTML = p2_initial_wealth.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_live_income").innerHTML = p1_live_income.toFixed(2);
             document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);

             document.getElementById("p1_live_factor").innerHTML = p1_live_factor.toFixed(2);
             document.getElementById("p2_live_factor").innerHTML = p2_live_factor.toFixed(2);


             document.getElementById("budget").innerHTML = budget.toFixed(2);

           });

      </script>
  </div>
  {%endif%}

 <!-- Bitte sicherstellen, dass der Wert höchstens 12 Ziffern enthält? Fehler bei 10ct klicken bzw bei mehr als 12 klickd?-->



 <p></p>
{% next_button %}

{% endblock %}