{% extends "TREATMENT_04/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 einen Text zum Kakaoanbau.
        <br><br>
        Ihr Trainingsprogramm besteht darin,
        sich den Text in Ruhe durchzulesen und sich mit den Inhalten vertraut zu machen.
        <br><br>
        Hierfür haben Sie 23 Minuten Zeit.
        Erst nach Ablauf der Zeit geht es automatisch weiter im Experiment.
    </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 %}