{% 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: center;
    padding-top: 5%;
}
.page-header {
    margin: 0px;
}

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

p { text-align: justify }

body {background-color:black;}

.input-group, input.form-control, select.form-control, textarea.form-control {
    max-width: 200px;
    margin: auto;
}
</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
        <p>This ends Phase 1.</p>
        <p>Before continuing to Phase 2, we want to make sure you are paying attention to this study.</p>
        <p>When asked for your favourite color, ignore the question and enter the word puce in the text box.</p>
        <p>What is your favorite color?</p>
    <br>

        {% formfields %}
        <br>
        Press ENTER to submit your answer and continue to Phase 2.
    </div>
</div>

    <div class="col-2" style="border: 2px solid black; text-align: center;"></div>

<br>
<br>
        <div class="btn-div">
        <button id="confirm" type="submit" style="display:none;">Confirm</button>

    </div>


{% 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 %}