{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% csrf_token %}

{% block title %}
    Quick questions
{% endblock %}

{% block content %}

<div class="instructions well well-lg">
    Please answer these last three questions. Your answers will not have an impact on receiving the performance
    bonus.
</div>

{% formfield player.answer_1 %}

{% formfield player.answer_2 %}

{% formfield player.answer_3 %}

<strong>
    <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
   <script>
    var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    var counter = localStorage.getItem("time_left");
    counter = counter ? counter : 5 ;
    var newElement = document.createElement("p");
    newElement.innerHTML = "You can proceed to the final page in " + counter + " seconds.";

    window.onbeforeunload = function() {
        if (counter > 0) {
            localStorage.setItem("time_left", counter);
        }
    };

    showButton.parentNode.replaceChild(newElement, showButton);
    var interval = setInterval(function() {
        counter--;
        if (counter == 0) {
            newElement.parentNode.replaceChild(showButton, newElement);
            localStorage.removeItem("time_left");
            clearInterval(interval);
        } else {
            newElement.innerHTML = "You can proceed to the final page in " + counter  + " seconds.";
        };
    }, 1000);
    </script>
</strong>

{% endblock %}