{{ block title }}
Experimentsbeschreibung
{{ endblock }}

{{ block content }}

<br>
  <div class="grid" >
    <div class="row" >
      <div class="row">
        <div class="col">

            <h3>Verständnisfragen</h3>
        </div>
      </div>

      <div class="row">
          <div class="col" style="background-color: lightgray; margin-bottom: 80px;">
              Bitte beantworten Sie die folgenden Verständnisfragen. Die Antworten, die Sie hier geben, haben keinen Einfluss auf Ihre Auszahlung.

          </div>
      </div>
<br>
      <div class="row">
          <div class="col">
              Ihre Rolle ist die eines Mitarbeiters. Ihr Festgehalt beträgt 100 ECU. Sie haben es geschafft, die 7er in 10 Zahlenblöcken zu zählen. Wie hoch ist Ihre Auszahlung?
            Mein Umweltbewusstsein Typ ist
        <input id="employeeInput" type="number" name="employeeInput" style="width: 200px" />
                    <span id="employeeError" style="color: red;"></span>

          </div>
      </div>

      <div class="row">
          <div class="col">
              Ihre Rolle ist die eines Managers. Ihr Mitarbeiter hat es geschafft, die 7er in 10 Zahlenblöcken zu zählen. Sie haben beschlossen, 80 % der Ressourcen im Unternehmen zu belassen (x=0,8). Der Rest wird gespendet. Wie hoch ist Ihre Auszahlung?
            Mein Umweltbewusstsein Typ ist
        <input id="managerInput" type="number" name="managerInput" style="width: 200px" />
                    <span id="managerError" style="color: red;"></span>

          </div>
</div>
    </div>
  </div>
<div style="display: flex; flex-direction: column; align-items: center;">
    <button class="btn btn-primary" type="button" onclick="validateAndSubmit()" id="next">
            Weiter
       </button>
    </div>
<div style="display: flex; flex-direction: column; align-items: center;">
    <button id="finishButton" class="btn btn-primary" type="button" style="display: none;" onclick="submitFormAfterFinish()">
        Finish
    </button>
</div>

<script>
    let totalAttempts = 0;

    function validateAndSubmit() {
        const employeeInput = document.getElementById('employeeInput');
        const managerInput = document.getElementById('managerInput');
        const employeeError = document.getElementById('employeeError');
        const managerError = document.getElementById('managerError');
        const finishButton = document.getElementById('finishButton'); // Add this line

        if (employeeInput.value !== '100' || managerInput.value !== '160') {
            totalAttempts++;
            const errorMessage = `Incorrect answer. Attempt ${totalAttempts}/3.`;

            if (totalAttempts === 3) {
                errorMessage += ' Maximum number of attempts reached. Continuation will proceed.';
                employeeInput.setAttribute('disabled', 'disabled');
                managerInput.setAttribute('disabled', 'disabled');
                finishButton.style.display = 'block';
            }

            employeeError.textContent = errorMessage;
            managerError.textContent = errorMessage;

            return;
        }

        // If both answers are correct, submit the form
        document.forms[0].submit();
    }

    function submitFormAfterFinish() {
        document.forms[0].submit();
    }
</script>






<style>
        .col {
            border: 2px solid #000;
            padding: 20px;
            background-color: gray;
            margin-bottom: 20px; /* Adjust the margin to create spaces between divs */
            width: 80%;
        }

        .row .col {
            background-color: #fff;
        }
         h3 {
            text-align: center;
        }
    </style>
{{ endblock }}