{{ block title }}
    Entscheidung {{ player.round_number }} (von 4)
{{ endblock }}
{{ block content }}

<div class="card mt-3 mb-3 border-gray">
        <h5 class="card-header bg-gray" >Anfangsausstattung</h5>
                    <div class="card-body">
                    <h6 class="card-title"><strong>Person 1</strong></h6><br><br>
                        <p class="card-text  text-left mb-4">
                        <span class="alert alert-primary">
                            <strong>{{ player.endowment | c }}</strong>
                        </span>
                        </p>

                    <h6 class="card-title"><strong>Person 2</strong></h6><br><br>
                        <p class="card-text  text-left mb-4">
                        <span class="alert alert-primary">
                            <strong>{{ player.endowment2 | c }}</strong>
                        </span>
                        </p>
                    </div>
        </div>


<h5>Die von mir gewählte Alternative ist:</h5>
{{ formfield player.Frage_3 label="" }}



<div class="card mt-3 mb-3 border-gray">
<h5 class="card-header bg-gray" ><strong>Auszahlungstabelle</strong></h5>
<br>
<table>
  <thead>
    <tr class="header-row">
      <th style="width:24%" class="cell cell-product">Alternative</th>
      <th style="width:24%">Auszahlung Person 1</th>
      <th style="width:52%">Auszahlung Person 2</th>
    </tr>
  </thead>
  <tbody>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative a</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.0 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 100 % x {{ auszahlung2.0 | c }}:</td><td>{{ auszahlung2.0 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.0 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product1">
      <td class="cell cell-product">a</td>
      <td class="cell">{{ auszahlung.0 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (kein Schaden)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative b</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.1 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 90 % x {{ auszahlung2.0 | c }} + 10 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.1 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.1 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product2">
      <td class="cell cell-product">b</td>
      <td class="cell">{{ auszahlung.1 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 90 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 10 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative c</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.2 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 80 % x {{ auszahlung2.0 | c }} + 20 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.2 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.2 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product3">
      <td class="cell cell-product">c</td>
      <td class="cell">{{ auszahlung.2 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 80 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 20 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative d</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.3 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 70 % x {{ auszahlung2.0 | c }} + 30 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.3 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.3 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product4">
      <td class="cell cell-product">d</td>
      <td class="cell">{{ auszahlung.3 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 70 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 30 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative e</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.4 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 60 % x {{ auszahlung2.0 | c }} + 40 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.4 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.4 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product5">
      <td class="cell cell-product">e</td>
      <td class="cell">{{ auszahlung.4 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 60 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 40 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative f</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.5 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 50 % x {{ auszahlung2.0 | c }} + 50 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.5 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.5 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product6">
      <td class="cell cell-product">f</td>
      <td class="cell">{{ auszahlung.5 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 50 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 50 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative g</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.6 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 40 % x {{ auszahlung2.0 | c }} + 60 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.6 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.6 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product7">
      <td class="cell cell-product">g</td>
      <td class="cell">{{ auszahlung.6 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 40 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 60 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative h</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.7 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 30 % x {{ auszahlung2.0 | c }} + 70 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.7 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.7 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product8">
      <td class="cell cell-product">h</td>
      <td class="cell">{{ auszahlung.7 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 30 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 70 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative i</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.8 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 20 % x {{ auszahlung2.0 | c }} + 80 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.8 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.8 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product9">
      <td class="cell cell-product">i</td>
      <td class="cell">{{ auszahlung.8 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 20 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 80 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative j</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.9 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 10 % x {{ auszahlung2.0 | c }} + 90 % x ( {{ auszahlung2.0 | c }} - 40 Punkte ):</td><td>{{ auszahlung2.9 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.9 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product10">
      <td class="cell cell-product">j</td>
      <td class="cell">{{ auszahlung.9 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }} (mit 10 %) oder ( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2_schaden.0 | c }} (mit 90 %)</td>
    </tr>
    <tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style><table><tr><th style='width:50%'>Alternative k</th><th style='width:50'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.10 | c }}</td></tr>
    <tr><td>Erwarteter Betrag für Person 2 unter Berücksichtigung der Schadenswahrscheinlichkeit: 100 % x ( {{ auszahlung2.0 | c }}-{{ auszahlung2.10 | c }}):</td><td>{{ auszahlung2.10 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.10 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product11">
      <td class="cell cell-product">k</td>
      <td class="cell">{{ auszahlung.10 | c }}</td>
      <td class="cell">( {{ auszahlung2.0 }} - 40 ) = {{ auszahlung2.10 | c }} (Sicherer Schadenseintritt)</td>
    </tr>
  </tbody>
</table>

</div>

<p>Wenn Sie die einzelnen Zeilen der Tabelle <b>doppelt anklicken</b>, erhalten Sie für jede angebotene Alternative eine detaillierte Beschreibung.</p>
 <details>
    <summary><b>Um die Instruktionen erneut zu lesen, klicken Sie <u>hier</u>.</b></summary>
    <hr>
        <p>Im diesen letzten Teil des Experimentes werden Sie vier Entscheidungen treffen. Auch bei dieser Entscheidungsaufgabe entscheiden Sie über die Auszahlungen
            für Person 1 und Person 2.
            </p><p>
            Allerdings nehmen beide Personen nun konkrete Rollen in einer Gesellschaft ein. In dieser Gesellschaft werden Produkte für den Konsum produziert.

                <ul><li>Person 1 ist ein Konsument dieses Produktes</li></ul>
                <ul><li>Person 2 ist am Konsum des Produktes nicht beteiligt, aber von der Technologie betroffen, die bei seiner Produktion zum Einsatz kommt.</li></ul>
        <p>Ihre Entscheidungsaufgabe ist immer gleich. Sie besteht darin, für diese Gesellschaft ein Produkt aus einer Liste vorgegebener Alternativen auszuwählen.
            </p><p>
            Die zur Auswahl stehenden Produkte unterscheiden sich nicht in ihrer Qualität für den jeweiligen Konsumenten. Allerdings können unterschiedliche Technologien mit unterschiedlichen
            ökologischen und sozialen Sicherheitsstandards bei der Produktion zur Anwendung kommen. Die Produktionstechnologie wirkt sich auf die Kosten der Produktion und auf die Wahrscheinlichkeit
            aus, mit der es bei der Produktion zu einem Schaden kommen kann.
            </p><p>
            Von Ihrer Entscheidung sind die beiden Personen betroffen:

                <ul><li>Person 1 erhält als Konsument des Produktes einen Vorteil, wenn die Kosten der Produktion sinken und die Schadenswahrscheinlichkeit steigt. Die Vorteile, die Person 1 erhält,
                        sind umso größer, je größer die Schadenswahrscheinlichkeit ist. </li></ul>
                <ul><li>Person 2 erhält einen Nachteil, wenn ein Schaden eintritt, ihr Wohlergehen bleibt jedoch unverändert, wenn kein Schaden eintritt. </li></ul>
        <p>Mit Ihrer Entscheidung, welches Produkt produziert und konsumiert werden soll, bestimmen Sie die Auszahlungen für die beiden Personen. (Zur Erinnerung: Diese Auszahlungen werden
            tatsächlich an dafür bestimmte Teilnehmer einer anderen Vorlesung in einem Master-Studiengang der TU Clausthal geleistet).</p><p>

             <p>Person 1 und Person 2 haben bereits <b>vor</b> der Entscheidung, welches Produkt produziert und konsumiert werden soll, bestimmte Beträge an Punkten als Anfangsausstattung zur Verfügung.
            Diese Anfangsausstattung ist vorgegeben, aber mit Ihrer Entscheidung über das Punkt ändern Sie diese Beträge. Sie bestimmen mit Ihrer Entscheidung also über die Beträge, die an Person 1
            und Person 2 tatsächlich ausgezahlt werden. Ihre Entscheidung über das Produkt wird sich jedoch auf diese Beträge auswirken:

        <ul><li>Person 1 erhält durch den Konsum des Produktes in jedem Fall eine um 20 Punkte erhöhte Auszahlung. Von Ihrer Entscheidung über die Produktionsstandards und die Schadenswahrscheinlichkeit
            hängt ab, ob Person 1 weitere Vorteile erhält. Je höher die Schadenswahrscheinlichkeit ist, desto höher ist der Auszahlungsbetrag für Person 1.</li></ul>
        <ul><li>Person 2 erhält die Anfangsausstattung als Auszahlungsbetrag, sofern kein Schaden auftritt. Tritt der Schaden auf, erhält Person 2 eine um 40 Punkte reduzierte Auszahlung.</li></ul>

        <p>Mit Ihrer Wahl des Produktes, entscheiden Sie also über den erwarteten Schaden und damit über konkrete Konsequenzen für Person 1 und Person 2. Auf der nächsten Seite folgt ein Beispiel und
            wir erklären Ihnen die Konsequenzen der verschiedenen Produkte ausführlich.</p><p>

     <p>Zur Auswahl stehen Ihnen 11 Alternativen (a bis k), die in den Zeilen der oberen Tabelle dargestellt werden.</p>
    </details>

<br>
    <p>Wenn Sie mit dieser Runde fertig sind, klicken Sie bitte auf „Weiter“.</p>
<br>


    {{ next_button }}


<style>
    p {
        text-align: justify;
        margin-bottom: 2em;
        hyphens: auto;
    }
    br {
        display: block;
        margin: 1em 0;
    }
    li {
        text-align: justify;
    }
    table {
        border-collapse: collapse; /* Cell */
    }
    th, td {
      border: 1px solid lightgray;
      padding: 5px;
    }
    .cell-product {
        padding-left: 10px;
    }
    .highlight {
        background-color: #007bff;
        color: #ffffff;
        font-weight: bold;
    }
</style>

<script>
// Get all rows except the one with the "header-row" class
const rows = document.querySelectorAll('tr:not(.header-row)');

// Add click event listener to each row
for (let i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', function() {
    // Remove highlight class from all rows
    for (let j = 0; j < rows.length; j++) {
      rows[j].classList.remove('highlight');
    }

    // Add highlight class to clicked row
    this.classList.add('highlight');

    // Get product number from clicked row's id
    const productNumber = this.id.replace('product', '');

    // Change the answer
    document.getElementById('id_Frage_3').value = productNumber;
  });

  rows[i].addEventListener('dblclick', function() {
    // Get the information for the clicked row
    const info = this.getAttribute('data-info');

    // Open the information in a new window
    const newWindow = window.open('', '_blank');
    newWindow.document.write(info);
    newWindow.document.close(); // Close the document to tell the browser to finish loading the page
  });
}
</script>

<script> //Herunterscrollen
document.getElementById('id_Frage_1').addEventListener('change', function() {
  // Scroll to the bottom of the page
  window.scrollTo(0, document.body.scrollHeight);
});
</script>

{{ endblock }}