{% extends 'global/Page.html' %}

{% block title %}{% endblock %}

{% block content %}

    <p class="t-extra example-label text-center">
        THIS IS AN EXAMPLE
    </p>
    <p>
        Please decide which of the four labels best describes what the displayed person thinks, feels, or expresses.
        Please click on that label. Once you click on it, you answer is saved and you more on.
    </p>
    
    <div style="position: relative; margin-top: -10vh">
        <div id="eyes_test_container">
            <img id="eyes_img" src="{% static 'eyes_test/eyes/example.png' %}">
            {% for o in options %}
                <button class="btn btn-success eyes-task-options" value="{{ o }}" name="option">{{ o }}</button>
            {% endfor %}
        </div>
    </div>

{% endblock %}

{% block styles %}
    <style>
        .debug-info {
            display: none;
        }
    </style>
{% endblock %}