{% 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='entry_field'>

<center>

<div class="form-group">

    <label class="control-label" for="id_cognitive_load_entry">Bitte geben Sie die Zahl ein, die Sie sich gemerkt haben.</label>

        <div class="controls  field-cognitive_load_entry">
            <input type="text" name="cognitive_load_entry" id="id_cognitive_load_entry"  autocomplete="off" maxlength="200" class="form-control"
>

        </div><!--- .controls -->



</div><!--- .form-group -->


</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();
        // $('#entry_field').hide();
    });

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

        var currentDate = new Date();
        var milliseconds = 20.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) {
                 $('#entry_field').hide();
                 $("#weiter").click()
            });
    };

</script>







{% endblock %}