{{ block head }}
    <script>
<!-- For Dynamic button -->

$('#next').click(function() {
  var $current = $('.question.active');
  if ($($current).next(".question").length > 0) {
    $('.question').removeClass('active');
    $current.next().addClass('active');
    buttonCheck();
  }
});
$('#back').click(function() {
  var $current = $('.question.active');
  if ($($current).prev(".question").length > 0) {
    $('.question').removeClass('active');
    $current.prev().addClass('active');
    buttonCheck();
  }
});
buttonCheck();

function buttonCheck() {
  var $current = $('.question.active');
  if ($($current).next(".question").length == 0) {
    $('#next').hide();
    $('#back').show();
    $('#finish').show();


  }
  else if ($($current).prev(".question").length == 0) {

    $('#back').hide();
    $('#next').show();
    $('#finish').hide();

  } else {
    $('#next').show();
    $('#back').show();
    $('#finish').hide();

  }
}
<!-- End of Dynamic Button Code -->



</script>
    <style>
.question:not(.active) {
  display: none;

}

</style>

{{ endblock }}
{{ block title }}
    Instruction

{{ endblock }}

{{ block content }}
{{   block script }}



{{ endblock }}


<div id="questions" style="text-align: justify">
  <div class="question active">

   <h3> Information about the experiment </h3>
      <ul>
    <li>
        Die heutige Experiment besteht aus zwei Teilen.

    </li>
    <li>
Der erste Teil besteht aus einem Fragebogen und dem Bearbeiten von Aufgaben über 2 Runden.
        </li>
    <li>Ihre Auszahlung in Teil 1 ist nicht von den Antworten und Ergebnissen der anderen Teilnehmer abhängig.
</li>
    <li>
Sowohl die Angaben im Fragebogen als auch die von Ihnen erreichten Punkte in den Aufgaben können einen Einfluss auf die Auszahlungen des zweiten Teils des Experiments haben.
    </li>
    <li>
        Ihre Ergebnisse bleiben anonym. Weder können andere Teilnehmer noch die Experimentatoren anhand dieser Rückschlüsse auf Ihre Person ziehen.
    </li>
    <li>
        Teil 2 des Experiments startet mit neuen Instruktionen, sobald alle Teilnehmer Teil 1 beendet haben.

    </li>
    </ul>
              <h3>Informationen zum Ablauf von Teil 1</h3>


        <h4>1) FRAGEBOGEN</h4>
    <ul>
        <li>
            Zuerst werden Sie gebeten, einen Fragebogen auszufüllen. Dieser umfasst 24 Fragen, die sich bspw. auf Ihre Hobbies, Charaktereigenschaften oder Lebensmotive beziehen.
        </li>
        <li>
            Wählen Sie bei jeder Frage die Antwort(en) aus, die am besten auf Sie zutrifft bzw. zutreffen. Einige Fragen lassen eine Mehrfachauswahl zu. Die Ausfüllanweisung befindet sich jeweils hinter der Frage.
        </li>
        <li>
            Für die Bearbeitung des Fragebogens haben Sie 15 Minuten Zeit.
        </li>

    </ul><br>
      <p style="text-align: center">Seite 1</p>
  </div>

  <div class="question">
      <h4>2) AUFGABENBEARBEITUNG</h4>
      <ul>
          <li>
              Die Aufgabenbearbeitung startet, sobald jeder Teilnehmer den Fragebogen beantwortet hat.
          </li>
          <li>
              Dieser Teil besteht aus 2 Runden, in denen jeweils zwei verschiedene Aufgabentypen, „Aufgabe A“ und „Aufgabe B“, abwechselnd zu bearbeiten sind. Für die erfolgreiche Bearbeitung einer Aufgabe erhalten Sie Punkte. Jeder Punkt wird in Geld umgerechnet. Je nachdem wie gut Sie die Aufgaben bearbeiten, erhalten Sie entsprechend mehr Punkte und damit auch mehr Geld.
          </li>
          <li>
              Die beiden Aufgabentypen werden nachfolgend erläutert.
          </li>
          <br>
          <li>
              <b>Aufgabe A</b> besteht darin, alle 7er in einem Zahlenblock zu zählen.
              <ul>
                <li>
          Ein Beispiel sehen Sie hier abgebildet, wobei die Gesamtanzahl der 7er in dem Beispiel 24 ist.
                </li>
                  <img src="{%static 'social_proximity_single_session/number7.jpg' %}" style="width: 600px"/>


                <li>
                    Sie erhalten bis zu maximal 4 Punkte pro Aufgabe A:
                    <ul>
                        <li>
                            Entspricht die von Ihnen eingegebene Gesamtzahl der exakten Anzahl an 7ern, erhalten Sie die maximale Zahl von 4 Punkten.
                        </li>
                        <li>
                            Weicht die von Ihnen eingegebene Gesamtzahl von der exakten Anzahl bis zu drei 7er nach oben oder nach unten ab, ergibt sich die folgende Bepunktung:
                        </li>
                            <br>
                            <img src="{% static 'social_proximity_single_session/tablepointsA.JPG' %}" style="width: 300px"/>
                    </ul>
                </li>

              </ul>
          </li>

      </ul>
      <p style="text-align: center">Seite 2</p>
  </div>
  <div class="question">
      <ul>
          <li>
              <b>Aufgabe B</b> besteht darin, Logikaufgaben zu lösen, die sich aus Analogien und Zahlenreihen zusammensetzen.
              <ul>
                  <li>
                      <b>Analogien:</b> Ihnen werden jeweils drei Begriffe vorgegeben, ein vierter Begriff fehlt (Fragezeichen). Sie sollen nun den fehlenden Begriff so auswählen, dass zwischen den beiden Begriffen im zweiten Wortpaar dieselbe Beziehung besteht wie zwischen den beiden Begriffen im ersten Wortpaar. Zwei Beispiele für Analogien sehen Sie nachfolgend abgebildet, wobei die korrekten Antworten jeweils markiert sind.
                  </li>
                  <img src="{% static 'social_proximity_single_session/analogies.jpg' %}" style="width: 600px"/>
                  <br>
                  <br>

                  <li>
                      <b>Zahlenreihen: </b>Sie sehen jeweils einige Zahlen, die eine Zahlenreihe bilden. Dabei sind die Zahlen durch eine bestimmte Regel miteinander verknüpft. Anhand dieser Regel lässt sich jede Reihe logisch fortsetzen. Setzen Sie am Ende jeder Zahlenreihe die Zahl ein, die gemäß der Regel diese Zahlenreihe logisch fortsetzt. Zwei Beispiele sehen Sie hier abgebildet.
                  </li>
                  <img src="{% static 'social_proximity_single_session/numberseq.JPG' %}" style="width: 600px"/>
                  <br> <br>
                  <li>
                      Für die erfolgreiche Lösung einer Analogie erhalten Sie 2 Punkte. Ebenso für die erfolgreiche Fortführung einer Zahlenreihe.
                  </li>
                  <li>
                      Falls die eingegebene Lösung nicht korrekt sein sollte, erhalten Sie für eine Aufgabe 0 Punkte.
                  </li>

              </ul>
          </li>
          <br>
      </ul>
      <p style="text-align: center">Seite 3</p>
  </div>
 <div class="question">
     <h3>Anzahl Aufgaben pro Runde</h3>
     <ul>
          <li>
              In Abhängigkeit der Geschwindigkeit der Bearbeitung stehen Ihnen in jeder Runde bis zu vier Aufgaben vom Typ A sowie bis zu vier Aufgaben vom Typ B (zwei Analogien und zwei Zahlenreihen) zur Verfügung.
          </li>
          <li>
              In jeder Runde können Sie damit <b>maximal 24 Punkte</b> erreichen:
              <ul>
                  <li>
                      Maximal 16 Punkte (4x4 Punkte) durch Bearbeitung der Aufgaben A.
                  </li>
                  <li>
                      Maximal 8 Punkte (4x2 Punkte) durch Bearbeitung der Aufgaben B.
                  </li>
              </ul>
          </li>
          <li>
              Für die Bearbeitung der beiden Aufgaben stehen Ihnen in jeder Runde <b>insgesamt 160 Sekunden </b> zur Verfügung.
          </li>
          <li>
              Sobald Sie die erste Runde beendet haben, beginnt nach einer kurzen Pause die zweite Runde.
          </li>

     </ul>

     <h3>Auszahlungen</h3>
      <ul>
          <li>
               Am Ende von Teil 1 wird die Summe der erreichten Punkte über die 2 Runden zu einem Wechselkurs von <b>7 Cent pro Punkt umgetauscht</b>.
               Die Gesamtsumme, die sich aus den Beträgen der beiden Teile und der Show-up Fee von 2,50 Euro zusammensetzt, wird Ihnen im Anschluss an das Experiment bar ausbezahlt.

          </li>
      </ul>

      <h3>Bitte beachten Sie</h3>
      <ul>
          <li>
               Während des Experiments ist keine Kommunikation gestattet.
          </li>
          <li>
               Bei Fragen oder technischen Problemen, heben Sie bitte die Hand.
          </li>

      </ul>
        <br>
        <h3 style="text-align:center">Viel Erfolg und vielen Dank für Ihre Teilnahme</h3>
        <br>
        <p style="text-align: center">Seite 4</p>
 </div>
{#  <div class="question">Some question 4</div>#}
{#  <div class="question">Some question 5</div>#}
{#  <div class="question">Some question 6</div>#}
{#  <div class="question">Some question 7</div>#}
{#  <div class="question">Some question 8</div>#}
</div>
    <div class="d-flex justify-content-between">
<button type="button" id="back" class="btn btn-primary" >Vorherige Seite</button>
<button type="button" id="next" class="btn btn-primary">Nächste Seite</button>
<!--<button id="finish" class="btn btn-primary"> Finish</button>!-->
    </div>
{{ endblock }}