{{ block title }}Erneute Schätzung{{ endblock }}
{{ block content }}

{% if treatment == "Pressure" %}
    <p>Bitte beantworten Sie die Schätzfrage erneut innerhalb von 14 Sekunden.</p>
{% elif treatment == "Delay" %}
    <p>Bitte beantworten Sie die Schätzfrage erneut. Bitte denken Sie zuerst 60 Sekunden über die Schätzfrage und die Gründe für Ihre Schätzung nach und geben Ihre Antwort dann innerhalb von 120 Sekunden.</p>
{% elif treatment == "Low" %}
    <p>Bitte beantworten Sie die Schätzfrage erneut.</p>
{% else %}
    <p>Bitte beantworten Sie die Schätzfrage erneut.</p>
{% endif %}

    <!-- Shows the integerfield for the question (saved in answer) and uses the dynamically generated question label  -->
    {{ formfield 'revised_answer' label=question_label}}  
    
    <!-- Places and hides the time measurement variable so it cannot be interacted with by user  -->
    <input type="hidden" name='revised_time_spent' id='revised_time_spent'/>
    
     <script>
        // This bit creates 2 variables, one will function as a timer, the other will hold the timer output. They are set to 0 and -1 here to initialise them, these will not be the final outputs.
        var pageTimeElapsed = 0;
        var pageTimerID = -1;

        // This function captures the timer output. When the timer starts it will increase 'pageTimeElapsed' every second and send this value to the 'timeSpent' variable that will be saved
        // When a person moves to the next page, or the page times out, the final value that the timer was on will be saved. The value resets each round/page.
        function pageTick() {
            pageTimeElapsed++
            document.getElementById("revised_time_spent").value = pageTimeElapsed;
        }

        // This function automatically starts the timer when the page loads. In this case I want seconds so the interval is set to 1000, but I believe if you set it to 1 then it will count milliseconds - you will need to test this
        window.onload = function() {
            if(pageTimerID == -1){
                pageTimerID = setInterval(pageTick, 1000);
            }
        };
    </script>

    <p>
        <br>
    </p>

    {{ next_button }}

    <script>
        // Assign the variables passed from the python script
        let treatment = js_vars.treatment;
        let timer = js_vars.timer;

        // Hides the 'timer' for control
        if (treatment == 'Control'|| treatment == 'High' || treatment == 'Low') {
            $('.otree-timer').hide();

           document.addEventListener("DOMContentLoaded", function (event) {
           $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 20) {
               $('.otree-timer').show();
            }
        });
    });

        }
        // Hides the 'Next' button and the entry form for Delay and shows them after half of the time has passed
        if (treatment == 'Delay') {
            $('.otree-btn-next').hide();
            $('.form-control').hide();

            document.addEventListener("DOMContentLoaded", function (event) {
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    if (event.offset.totalSeconds === timer/3) {
                        $('.otree-btn-next').show();
                        $('.form-control').show();
                    }
                });
            });
        }
    </script>

{{ endblock }}