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

{% 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 %}
{% endblock %}

{% block content %}

<h4 style="text-align: center">
    Solving puzzles
</h4>
    {% include Constants.instructions_template %}

    <p style="text-align: center">
        For example, for the following matrix, the correct pattern is 8.
    </p>

    <div style="text-align:center">
    <img src="{% static image_path %}"/>
    </div>


<br/>
    <div style="text-align:center">
        <p > Click next to start solving the problems. </p>
    {% next_button %}
    </div>

{% endblock %}