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

{% block title %}
    Ihr Urteil ist gefragt
{% 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">0:30</span>
        </div>
    </div>
    <div id="text-wrapper">
        Die Protagonisten in den beiden folgenden Geschichten müssen eine Entscheidung treffen:
        <br><br>
        Ist sie richtig oder falsch?
        <br><br>
        Und wie akzeptabel finden Sie die Argumente, die für und gegen ihre Entscheidung vorgebracht werden?
        <br><br>
        Sie können sich bei Ihren Antworten Zeit lassen. Aber Sie müssen nicht zu lange darüber nachdenken.
    </div>
    {% next_button %}
{% endblock %}

{% block scripts %}
    <script>
    $( document ).ready(function() {
        var distance = 30000;
        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 %}