{% extends "TREATMENT_03/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>
        Wir präsentieren Ihnen im Anschluss daran Pro- und Contra-Argumente für die Entscheidung des Protagonisten.
        <br><br>
        Ihr Trainingsprogramm besteht darin, sich diese Argumente in Ruhe durchzulesen und
        sich mit beiden Perspektiven (Pro und Contra) vertraut zu machen.
        Hierfür haben Sie 20 Minuten Zeit.
        Erst nach Ablauf der Zeit geht es automatisch weiter im Experiment.
        <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.
    </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 %}