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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/gonogo.css" %}">
    <style>
        body {
            background-color: #000000;
        }
        #go, #nogo {
            display: none;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        var trials = {{ trials|json }};
    </script>
    <script type="text/javascript" src="{% static "global/js/gonogo.js" %}"></script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    
    {% if is_touch %}
        <div id="gonogo" style="min-height: 360px">
    {% else %}    
        <div id="gonogo">
    {% endif %}
        <div id="go" class="gonogo-input gonogo-input-in-task">GO</div>
        <div id="go-error" class="gonogo-error">Mistake<br>You should have pressed the "Space" key</div>
        <div id="nogo" class="gonogo-input gonogo-input-in-task">NO GO</div>
        <div id="nogo-error" class="gonogo-error">Mistake<br>You shouldn't have pressed the "Space" key</div>
    </div>

    {% if is_touch %}
        <div id="gonogo-bar"></div>
    {% endif %}

    {{ form.gonogo_trials.as_hidden }}

{% endblock %}