{% 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 {
            margin: 0.5rem 0.25rem 0;
        }
        #text-wrapper #id_TRAINING_PROGRAM_01,
        #text-wrapper #id_TRAINING_PROGRAM_08,
        #text-wrapper #id_TRAINING_PROGRAM_09 {
            width: 30rem;
            height: 8rem;
        }
        #text-wrapper table tr {
            height: 1.5rem;
        }
        #text-wrapper table td {
            padding-left: 2rem;
        }
        #text-wrapper .field-TRAINING_PROGRAM_02 label,
        #text-wrapper .field-TRAINING_PROGRAM_03 label,
        #text-wrapper .field-TRAINING_PROGRAM_04 label,
        #text-wrapper .field-TRAINING_PROGRAM_05 label,
        #text-wrapper .field-TRAINING_PROGRAM_06 label{
            position: relative;
            top: 1.1rem;
            right: 1.1rem;
        }
        #text-wrapper #label-02-left {
            position: relative;
            right: 1.75rem;
        }
        #text-wrapper #label-02-right {
            position: relative;
            left: 2.6rem;
        }
        #text-wrapper #label-03-left,
        #text-wrapper #label-05-left {
            position: relative;
            right: 2rem;
        }
        #text-wrapper #label-03-right,
        #text-wrapper #label-05-right {
            position: relative;
            left: 9rem;
        }
        #text-wrapper #label-04-left {
            position: relative;
            right: 1.5rem;
        }
        #text-wrapper #label-04-right {
            position: relative;
            left: 9rem;
        }
        #text-wrapper #info-text {
            font-size: 1.25rem;
            margin-top: 2rem;
            text-align: center;
        }
    </style>
{% endblock %}

{% block title %}
    Fragebogen für die Schlusserhebung
{% 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">5:00</span>
        </div>
    </div>
    <div id="text-wrapper">
        Diese zweite Erhebung am Ende des Experiments dient als Grundlage für
        die abschließende Evaluation des Trainingsprogramms.
        <br><br>
        Die Erhebung erfolgt, wie schon die Basiserhebung, anonym. Notieren Sie daher bitte nirgends Ihren Namen.
        <br><br>
        Damit eine Zuordnung zur Basiserhebung auch ohne Ihren Namen möglich ist,
        benötigen wir die folgenden vier Angaben.
        <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>
        Im weiteren Fragebogen ist nun entweder eine von mehreren Antworten anzukreuzen oder etwas einzutragen.
        <br><br>
        Um die Schlusserhebung mit der Basiserhebung vergleichen zu können, ist ein Teil dieses Fragebogens identisch.
        Beantworten Sie bitte alle Fragen wieder genauso sorgfältig wie beim ersten Mal.
        <br><br>
        Ihr Alter: {% formfield player.AGE %}
        <br><br>
        Ihr Geschlecht:
        <br>
        {% formfield player.GENDER %}
        <br><br>
        Was sind die wichtigsten Dinge, die Sie während dieses Trainingsprogramms gelernt haben?
        <br><br>
        {% formfield player.TRAINING_PROGRAM_01 %}
        <br><br>
        Wie waren Ihre Erfahrungen mit diesem Trainingsprogramm?
        <br><br>
        <table>
            <tr>
                <td></td>
                <td>
                    <span id="label-02-left">Gar nicht</span>
                    <span id="label-02-right">Sehr</span>
                </td>
            </tr>
            <tr>
                <td>Hat Ihnen das Trainingsprogramm Spaß gemacht?</td>
                <td>{% formfield player.TRAINING_PROGRAM_02 %}</td>
            </tr>
            <tr></tr>
            <tr>
                <td>Wie viel haben Sie bislang in diesem<br>Trainingsprogramm gelernt</td>
                <td>
                    <span id="label-03-left">Viel weniger</span>
                    <span id="label-03-right">Viel mehr</span>
                </td>
            </tr>
            <tr>
                <td>... im Vergleich zu dem, was Sie erwartet haben?</td>
                <td>{% formfield player.TRAINING_PROGRAM_03 %}</td>
            </tr>
            <tr></tr>
            <tr>
                <td>... im Vergleich zu anderen Unterrichts-/<br>Seminarveranstaltungen?</td>
                <td>{% formfield player.TRAINING_PROGRAM_04 %}</td>
            </tr>
            <tr></tr>
            <tr>
                <td></td>
                <td>
                    <span id="label-04-left">Gar nicht</span>
                    <span id="label-04-right">Sehr stark</span>
                </td>
            </tr>
            <tr>
                <td>
                    Wie stark, glauben Sie, wird Ihnen das hier Gelernte<br>beruflich später einmal von Nutzen sein?
                </td>
                <td>{% formfield player.TRAINING_PROGRAM_05 %}</td>
            </tr>
            <tr></tr>
            <tr>
                <td></td>
                <td>
                    <span id="label-05-left">Viel weniger</span>
                    <span id="label-05-right">Viel mehr</span>
                </td>
            </tr>
            <tr>
                <td>
                    War die Veranstaltung mehr oder weniger<br>nützlich als andere Trainingsprogramme<br>und
                    Unterrichts-/Seminarveranstaltungen?
                </td>
                <td>{% formfield player.TRAINING_PROGRAM_06 %}</td>
            </tr>
        </table>
        <br><br>
        Ich würde an dem Trainingsprogramm auch freiwillig wieder teilnehmen.
        <br><br>
        {% formfield player.TRAINING_PROGRAM_07 %}
        <br><br>
        Was hat Ihnen besonders gut gefallen an diesem Trainingsprogramm?
        <br><br>
        {% formfield player.TRAINING_PROGRAM_08 %}
        <br><br>
        Welche Anregungen oder Verbesserungsvorschläge haben Sie zu dem Trainingsprogramm?
        <br><br>
        {% formfield player.TRAINING_PROGRAM_09 %}
        <div id="info-text">
            Was meinen Sie jetzt zu den folgenden beiden Geschichten?
            <br>
            Beantworten Sie die Fragen bitte wieder genauso sorgfältig wie beim ersten Mal.
        </div>
    </div>
    {% next_button %}
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $( 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 %}