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

{% block title %}
    Comprehension quiz
{% endblock %}

{% block content %}
    <div class="instructions well well-lg">
        This quiz is designed to check your comprehension of the instructions and allow you to earn extra money.
        <strong>Each correct answer is worth $0.10. The sum will be sent to you as a bonus.</strong>
        When answering these questions, you can refer to the instructions below.
    </div><P>

    {% formfields %}
        <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 = 60;
                var newElement = document.createElement("p");
                newElement.innerHTML = "You can submit your answers and start the experiment in " + counter + " seconds.";
                var interval;
                showButton.parentNode.replaceChild(newElement, showButton);
                interval = setInterval(function() {
                    counter--;
                        if(counter < 0) {
                            newElement.parentNode.replaceChild(showButton, newElement);
                            clearInterval(interval);
                        } else {
                            newElement.innerHTML = "You can submit your answers and start the experiment in " + counter.toString() + " seconds.";
                        }
                }, 1000);
            </script></strong><p>
        {% include Constants.instructions_template %}
    {% endblock %}