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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/gonogo.css" %}">
{% endblock %}

{% block scripts %}
    <script>
        $('#gonogo-bar').on('click', function () {
            $('#form').submit()
        })
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

    <div class="wrapper">
        <div class="instructions">
            <p>
                In this game, a circle will repeatedly appear in the center of the screen.
            </p>
            <p>
                {% if not is_touch %}Press{% else %}Click{% endif %}
                On the {{ command_type }} as fast as you can when you see this circle:
            </p>

            <div id="go" class="gonogo-input">GO</div>

            <p class="gonogo-instructions">Do nothing if you see this circle:</p>

            <div id="nogo" class="gonogo-input">NO GO</div>

        </div>
        {% if is_touch %}
            <div id="gonogo-bar">
                <span>Start</span>
            </div>
        {% else %}
            <button class="otree-btn-next btn btn-primary">Start</button>
        {% endif %}
    </div>

{% endblock %}