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

{% block title %}
{% endblock %}

{% block styles %}
<style>
.content {
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-size: 70px;
}
.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-size: 1.5rem;
    font-weight: normal;
}
.cross-instructions {
    position: absolute;
    margin-top: 200px;
    font-size: 1.5rem;
}

</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-2" style="text-align: center;">51</div>
    <div class="cross-instructions">
    In this practice trial, press A to indicate the number is smaller than 55
  </div>
</div>
    <div class="btn-div">
        <button id="next-page" type="submit" style="display:none;">Advance</button>
    </div>

<input type="hidden" name=dectime id="id_stop"/>

{% endblock %}


{% block scripts %}
<script>
    var start = document.getElementById("next-page");

    function startClicked() {
        start.click();
    }

    document.onkeydown = function (e) {
        var keyCode = e.keyCode;
        // When ENTER is pressed
        if(keyCode == 65) {
            startClicked();
        }
    };
</script>

{% endblock %}