{{ extends 'otree/WaitPage.html' }}
{{ block title }}{{ title_text }}{{ endblock }}
{{ block content }}
{{ body_text }}
<br>
<br>
<div id="timeout_div">
    <p>Time elapsed: ~<span>{{ time_elapsed }} minutes.</span></p>

    <p><strong>Please, do not change tabs in your browser while waiting. If you do so, you will not be matched into a
        group. If we detect that you lost focus on this tab for more than 2 minutes, the experiment will be terminated
        and you will be redirected to Prolific.</strong></p>

    <p id="lost_focus" class="alert alert-danger" role="alert"><strong>We detected you lost focus on the experiment tab, if we detect you are out for more than
        2 minutes, we will consider you as inactive and you cannot continue with the experiment.</strong></p>
</div>
<script>

    function sayReady() {
        let msg = new SpeechSynthesisUtterance();
        // or: de-DE, zh-CN, ja-JP, es-MX, etc.
        msg.language = 'en-US';
        // actually better to use js_vars than double-braces
        msg.text = "Please return to the experiment tab.";
        window.speechSynthesis.speak(msg);
    }

    if (document.hidden) {
        sayReady();
        document.getElementById("lost_focus").style.display = "inline-block"
    }


</script>

<style>
    #lost_focus {
        display: none;
    }
</style>

{{ endblock }}