{% extends "TREATMENT_01/AppsBaseStyles.html" %}
{% load otree static %}

{% block title %}
    Ablauf der Studie
{% endblock %}

{% block content %}
    <div id="fixed-header-line">
        <div id="countdown-message">
            Bitte klicken Sie jetzt auf "Weiter"!
        </div>
        <div id="countdown">
            Verbleibende Zeit:
            <span class="otree-timer__time-left">5:00</span>
        </div>
    </div>
    <div id="text-wrapper">
        Im folgenden Experiment präsentieren wir Ihnen eine Geschichte, in der eine Person in einer Zwickmühle steckt.
        <br><br>
        Ihr Trainingsprogramm besteht darin, in Einzelarbeit, die Pro- und Contra-Argumente für die Entscheidung des
        Protagonisten zu sammeln. Hierfür haben Sie 20 Minuten Zeit.
        Erst nach Ablauf der Zeit geht es automatisch weiter im Experiment.
        Sammeln Sie bitte so viele starke Argumente wie möglich.
        Bitte sammeln Sie mindestens drei Argumente jeweils auf der Pro- und Contra-Seite.
        <br><br>
        Achten Sie bei der Sammlung der Argumente möglichst auf Ausgeglichenheit bezüglich der Anzahl der Argumente
        (ausgeglichene Anzahl an Pro- und Contra-Argumenten).
        <br><br>
        Bei der Sammlung ist jedes Argument zulässig, aber kein Teilnehmer (und auch kein anderer Mensch) darf
        angegriffen oder bewertet werden – auch nicht positiv.
        <br><br>
        Sowohl diese Instruktionen als auch die Geschichte kann während der Bearbeitung per Klick auf den Button
        „Blick in die Geschichte“ und „Blick in die Instruktionen“ immer wieder aufgerufen werden.
        <br><br>
        Die Argumente können Sie nacheinander eintragen.
        Bitte senden Sie jedes Argument einzeln ab und tragen dann das nächste Argument ein,
        da immer nur ein Argument zur selben Zeit gespeichert werden kann.
    </div>
    {% next_button %}
{% endblock %}

{% block scripts %}
    <script>
    $( document ).ready(function() {
        var distance = 300000;
        var pageInterval = setInterval(function() {
            distance = distance - 1000;
            if( distance == 0 ) {
                $('#countdown-message').attr('style', 'visibility:visible')
            }
            if( distance >= 0 ) {
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                if( seconds < 10 ) { seconds = "0" + seconds }
                $('.otree-timer__time-left').text(minutes + ":" + seconds);
            } else {
                clearInterval(pageInterval);
            }
        }, 1000);
    });
    </script>
{% endblock %}