{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds == 45) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>
{% endblock %}


{% block title %}
<h4 style="text-align: center">
    Solving Logical Questions
</h4>
{% endblock %}

{% block content %}

<p>This next task asks you to answer three logical questions.
    <strong>
        You will have up to 90 seconds to answer all the questions.
    </strong>
</p>

{% if crt_payoff_per_question > 0 %}
<p>
    You will be paid {{ crt_payoff_per_question | c }} for each question answered correctly.
</p>
{% endif %}


<p>
   Click the following button when you are ready to start.
</p>
<div style="text-align:center">
    <button class="otree-btn-next btn btn-primary">Click to Start</button>
</div>


{% endblock %}