{{ block title }}Schätzfrage{{ endblock }}
{{ block content }}
<style>
/* This CSS will prevent users from selecting text, which discourages copying. */
body {
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   user-select: none;
}
</style>

{% if treatment == "Pressure" %}
    <p>Bitte beantworten Sie die Schätzfrage innerhalb von 14 Sekunden.</p>
{% elif treatment == "Delay" %}
    <p>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.</p>
{% else %}
    <p>Bitte beantworten Sie die Schätzfrage.</p>
{% endif %}

    <!-- Shows the integerfield for the question (saved in answer) and uses the dynamically generated question label  -->
    {{formfield 'answer' label=question_label}}

    <!-- Places and hides the time measurement variable so it cannot be interacted with by user  -->
    <input type="hidden" name='time_spent' id='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("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 }}