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

{% block title %}
{% endblock %}

{% block styles %}
<style>
.content {
    height: 100%;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    font-size: 1.3rem;
    text-align: left;
    padding-top: 5%;
}
.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-weight: normal;
}

.form-group {
    text-align: left;
}

body {background-color:black;}
/* remove bullets from lists */
li {list-style-type: none;}
</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-7">
    <p>In Phase 1, you are asked to classify whether the numbers that appear on your screen are larger or smaller than...</p>

        {{ form.quiz_answer_1 }}

    <!--
    <p>Question 2) What key should you press on your keyboard to indicate the number on the screen is smaller than the reference number from Question 1?</p>
    <p>Question 3) What key should you press on your keyboard to indicate the number on the screen is larger than the reference number from Question 1?</p>
      -->

    <p>Choose one of the options and press ENTER to confirm your answer.</p>
    </div>

</div>

<button id="confirm" type="submit" style="display:none;"></button>

{% endblock %}


{% block scripts %}
<script>
    var confirm = document.getElementById("confirm");

    function confirmClicked() {
        confirm.click();
    }

    document.onkeydown = function (e) {
        var keyCode = e.keyCode;
        // When ENTER is pressed
        if(keyCode == 13) {
            confirmClicked();
        }
    };
</script>
{% endblock %}