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



{% block content %}


<div id="time-limit" align='right' class="otree-timer alert alert-warning" style="display:none;width:100px;
            height:50px;float:right;">
    <p style="text-align:center;">
        <span style="font-weight: bold">
            <span class="glyphicon glyphicon-time"></span>
            <span class="otree-timer__time-left"></span>
        </span>
    </p>
</div>


<p> <br>
<p>
<p> <br>
<p>
<p> <br>
<p>
<div id='number'>

    <center>
        <p ondragstart="return false" onmousedown="return false">Bitte merken Sie sich folgende Zahl:
        <p>

        <p ondragstart="return false" onmousedown="return false"> {{ player.cognitive_load_rand_int}}
        <p>

</div>



<div id='hide'>
    <p>
        <input id='weiter' style="height:1px;width:1px;background-color: white;"
            class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Weiter" />
    </p>
</div>


{% endblock %}


{% block scripts %}

<script src="/static/otree/js/jquery.countdown.min.js"></script>

<script>
    $(document).ready(function () {
        $('#hide').hide();
        // $('#number').hide();
    });

    window.onload = function () {
        $('#number').show();
        $('div#time-limit').show();

        var currentDate = new Date();
        var milliseconds = 10.7 * 1000;
        $('.otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)
            .on('update.countdown', function (event) {
                // %-N is "Total count of minutes till the end, non-padded"
                // %S is seconds left
                var format = '%-N:%S';
                $(this).html(event.strftime(format));
            })
            .on('finish.countdown', function (event) {
                $('#number').hide();
                $("#weiter").click()
            });
    };

</script>



{% endblock %}