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

{% block styles %}
    <style type="text/css">
        #text-wrapper .form-group {
            display: inline-block;
        }
        #text-wrapper #id_ID_01,
        #text-wrapper #id_ID_02,
        #text-wrapper #id_ID_03,
        #text-wrapper #id_ID_04,
        #text-wrapper #id_ID_05,
        #text-wrapper #id_ID_06,
        #text-wrapper #id_ID_07,
        #text-wrapper #id_ID_08 {
            width: 3.5rem;
            margin: 0.25rem 0.5rem 0.25rem 0;
            text-align: center;
            font-weight: bold;
        }
        #text-wrapper #id_AGE {
            margin-left: 0.5rem;
            text-align: center;
            font-weight: bold;
        }
        #text-wrapper #id_GENDER,
        #text-wrapper #id_EDUCATION,
        #text-wrapper #id_IS_STUDYING {
            margin: 0.5rem 0.25rem 0;
        }
        #text-wrapper #fields-of-study {
            display: none;
        }
        #text-wrapper #id_MAJOR_FIELD_OF_STUDY,
        #text-wrapper #id_MINOR_FIELD_OF_STUDY {
            width: 15rem;
            margin: 1rem 0 0 0.5rem;
        }
        #text-wrapper #id_YEARS_WORKING {
            margin: 1rem 2rem 0 0.5rem;
            text-align: center;
            font-weight: bold;
        }
        #text-wrapper #is-not-yet-working {
            position: relative;
            top: 1px;
        }
        #text-wrapper #info-text {
            font-size: 1.25rem;
            margin-top: 1rem;
            text-align: center;
        }
    </style>
{% endblock %}

{% block title %}
    Fragebogen für die Basiserhebung
{% endblock %}

{% block content %}
    <div id="fixed-header-line">
        <div id="countdown-message">
            Bitte kommen Sie langsam zum Ende!
        </div>
        <div id="countdown">
            Verbleibende Zeit:
            <span class="otree-timer__time-left">2:00</span>
        </div>
    </div>
    <div id="text-wrapper">
        Liebe*r Teilnehmer*in,
        <br><br>
        diese Erhebung dient als Grundlage für die Evaluation des folgenden Trainingsprogramms.
        <br><br>
        Diese Erhebung erfolgt anonym. Notieren Sie bitte nirgends Ihren Namen.
        <br><br>
        Am Ende des Trainingsprogramms werde ich Sie nochmal befragen.
        Damit dann eine Zuordnung zu dieser ersten Befragung auch ohne Ihren Namen möglich ist,
        benötige ich folgende Angaben als Kennung:
        <br><br>
        Erste zwei Buchstaben des Rufnamens Ihrer Mutter:
        <br>
        {% formfield player.ID_01 %}{% formfield player.ID_02 %}
        (z.B. M A für MAria)
        <br>
        Erste zwei Buchstaben des Rufnamens Ihres Vaters:
        <br>
        {% formfield player.ID_03 %}{% formfield player.ID_04 %}
        (z.B. P E für PEter)
        <br>
        Geburtstag (nur Tag, nicht Monat oder Jahr, zweistellig):
        <br>
        {% formfield player.ID_05 %}{% formfield player.ID_06 %}
        (z.B. 0 5 für 05.04.64)
        <br>
        Die ersten beiden Buchstaben Ihres Geburtsorts:
        <br>
        {% formfield player.ID_07 %}{% formfield player.ID_08 %}
        (z.B. E R bei ERfurt)
        <br><br>
        Bei den Fragen ist entweder eine von mehreren Antworten anzukreuzen oder etwas einzutragen.
        <br><br>
        Bitte beantworten Sie jede Frage!
        <br><br>
        Ihr Alter: {% formfield player.AGE %}
        <br><br>
        Ihr Geschlecht:
        <br>
        {% formfield player.GENDER %}
        <br><br>
        Welchen Bildungsabschluss haben Sie? Bitte den höchsten Abschluss ankreuzen:
        <br>
        {% formfield player.EDUCATION %}
        <br><br>
        Sind Sie zurzeit Studierende*r?
        <br>
        {% formfield player.IS_STUDYING %}
        <br><br>
        <div id="fields-of-study">
            Wenn ja, was ist Ihre Hauptstudienrichtung?
            <br>
            {% formfield player.MAJOR_FIELD_OF_STUDY %}
            <br><br>
            Wenn ja, was ist Ihre Nebenstudienrichtung?
            <br>
            {% formfield player.MINOR_FIELD_OF_STUDY %}
            <br><br>
        </div>
        Wie viele Jahre sind Sie bereits berufstätig (einschließlich Mutterschaft/Elternzeit und Zeit ohne Arbeit)?
        <br>
        {% formfield player.YEARS_WORKING %}
        <input id="is-not-yet-working" type="checkbox">
        <label for="is-not-yet-working">Noch nicht berufstätig</label>
        <br><br>
        <div id="info-text">
            Auf den nächsten Seiten sind zwei Geschichten.
            <br>
            Wie denken Sie darüber?
        </div>
    </div>
    {% next_button %}
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $( document ).ready(function() {
            var distance = 120000;
            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);
            $('#id_IS_STUDYING input').click(function() {
                if( $(this).val()<=3 ) {
                    $('#fields-of-study').attr('style', 'display:block');
                    $('#id_MAJOR_FIELD_OF_STUDY').prop('required',true);
                } else {
                    $('#id_MAJOR_FIELD_OF_STUDY').prop('required',false);
                    $('#fields-of-study').attr('style', 'display:none');
                }
            });
            $('#is-not-yet-working').click(function() {
                if( $(this).is(":checked") ) {
                    $('#id_YEARS_WORKING').val(0);
                } else {
                    $('#id_YEARS_WORKING').val('');
                }
            });
        });
    </script>
{% endblock %}