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


{% block title %}
Cutting-middle
{% endblock %}


{% block styles %}
    <style>
    .otree-timer {
        display: none;
    }
    </style>
{% endblock %}


{% block content %}
<p>
    <font size="+1">
        Welcome to a new stage of the experiment.<br>
        You will divide a cake in seven rounds against 1 human player using the
        <strong>Cut-middle procedure</strong>.<br>
        The other human player and toppings of the cake remain constant during these seven rounds.<br><br>
        Instructions of the procedure are described in the next page.<br>
        Read them carefully because your payment depends on you decisions.
    </font>
</p>
<button type="submit" class="btn btn-primary">Next</button>
{% endblock %}


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