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


{% block title %}

{% endblock %}

{% block styles  %}
    <link href="{% static 'global/css/iat.css' %}" rel="stylesheet"/>
{% endblock %}

{% block app_scripts %}
    <script>
    /*
    All variables which take their values from django tag should be placed here
    with ES5 format. I.e., use var rather than let or const.

     */
        var blocks = {{ blocks|json }};  // full list of blocks

        var all_correct_sides = {{ correct_sides|json }};  // full list of correct sides for each of the blocks
        var side = {
            'left': {{ Constants.LEFT }}, // don't change
            'right': {{ Constants.RIGHT }}, // don't change
        };
        var left_keycode = {{ Constants.LEFT_KEYCODE }}; // don't change
        var right_keycode = {{ Constants.RIGHT_KEYCODE }}; // don't change

        var categories = {{ categories_names|json }};
        var main_items = {{ main_items|json }}; // don't change
        var sub_items = {{ sub_items|json }}; // don't change
        var META_KEYCODE = {{ Constants.META_KEYCODE }};
        var left_category_name = {{ left_category_name|json }}; // not used
        var right_category_name = {{ right_category_name|json }}; // not used
        var current_item;
    </script>
    <script src="{% static 'global/js/iat_single_round.js' %}?{{ seed_for_refresh_js_cache }}"></script>
{% endblock %}

{% block content %}

    <div id="iat-instructions">
        <div class="wrapper" style="border: 5px solid lightblue">
            <div class="container-fluid">
                {% if is_touch %}
                    <div class="row align-items-start" style="min-height: 140px">
                {% else %}
                    <div class="row align-items-start" style="min-height: 260px">
                {% endif %}
                    <div class="col-6 text-left" id="left_panel">
                        <div>
                            {% if is_touch %}
                                Tap on "G" to
                            {% else %}
                                Press on {{ Constants.LEFT_KEY_NAME }} for
                            {% endif %}
                        </div>
                        <h3>
                            <span class="keyword main iat-k-left" style="color:#31940F"></span>
                            <div class="instr-two-categories">or</div><span class="keyword sub iat-k-left" style="color:#0000FF"></span>
                        </h3>
                    </div>
                    <div class="col-6 text-right" id="right_panel">
                        <div>
                            {% if is_touch %}
                                Tap "D" to
                            {% else %}
                                Press on {{ Constants.RIGHT_KEY_NAME }} for
                            {% endif %}
                        </div>
                        <h3>
                            <span class="keyword main iat-k-right" style="color:#31940F"></span>
                            <div class="instr-two-categories">or</div><span class="keyword sub iat-k-right" style="color:#0000FF"></span>
                        </h3>
                    </div>
                </div>

                <div class="row">
                    <h5 class="col text-center">
                        <u>Tour <span id="round"></span> out of 7</u>
                    </h5>
                </div>
                <div class = "row">
                    <div class="col text-center">
                        This page contains the instructions. The game starts on the next page.
                    </div>
                </div>

                <div class="row">
                    <div class="col text-left">
                        <div style="margin-left: auto; margin-right: auto">
                            {% if is_touch %}
                                <div class="text-center">
                                    <p>
                                        On the game page, you will see the following two gray boxes:
                                    </p>
                                    <div class="row justify-content-between mb-2">
                                        <div class="col-5">
                                            one on the left of the screen<br>
                                            (denoted "G")
                                        </div>
                                        <div class="col-5">
                                            one on the right of the screen<br>
                                            (denoted "D")
                                        </div>
                                    </div>
                                    <div class="row justify-content-between">
                                        <div id="left" class="iat-buttons col-5" style="min-height: 60px; background-color: lightgrey; line-height: 60px; font-size: x-large">G</div>
                                        <div id="right" class="iat-buttons col-5" style="min-height: 60px; background-color: lightgrey; line-height: 60px; font-size: x-large">D</div>
                                    </div>
                                    <p class="mt-4">
                                        When a word appears:<br>
                                        Tap on the box <b>"G</b>
                                        for <span class="instr-one-categories">the words of the
                                        category </span><span class="keyword main iat-k-left" style="color:#31940F"></span><span class="instr-two-categories"> and </span><span class="keyword sub iat-k-left" style="color:#0000FF"></span>.<br>
                                        Tap on the box <b>"D"</b>
                                        for <span class="instr-one-categories">the words of the
                                        category </span><span class="keyword main iat-k-right" style="color:#31940F"></span><span class="instr-two-categories"> and </span><span class="keyword sub iat-k-right" style="color:#0000FF"></span>.<br>
                                        <span class="instr-two-categories">Each word belongs to a single category.</span>
                                    </p>
                                    <p>
                                        An <b style="color: red">X</b> appears during an error.<br>
                                        Correct the error by pressing the correct key.
                                    </p>
                                    <p>
                                        <u>Go as fast as possible</u> while making as few mistakes as possible.
                                    </p>
                                </div>
                            {% else %}
                                <p class="mt-3">
                                    When a word appears:<br>
                                    Press your left index finger on the <b>{{ Constants.LEFT_KEY_NAME }}</b>
                                    Key <span class="instr-one-categories">for the words in 
                                    category </span><span class="keyword main iat-k-left" style="color:#31940F"></span><span class="instr-two-categories"> and </span><span class="keyword sub iat-k-left" style="color:#0000FF"></span>.<br>
                                    Press your right index finger on the <b>{{ Constants.RIGHT_KEY_NAME }}</b>
                                    Key <span class="instr-one-categories">for the words in
                                    category </span><span class="keyword main iat-k-right" style="color:#31940F"></span><span class="instr-two-categories"> and </span><span class="keyword sub iat-k-right" style="color:#0000FF"></span>.<br>
                                    <span class="instr-two-categories">Each word belongs to a single category.</span>
                                </p>
                                <p>
                                    An <b style="color: red">X</b> appears for an error. Correct the error by pressing the correct key.<br>
                                    <u>Go as fast as you can</u> while making as few mistakes as possible.
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col text-center">
                    {% if is_touch %}
                        <p>
                            Click on the space bar to begin.
                        </p>
                        <div id="iat-start-bar" style="cursor: pointer; background-color: lightgrey; min-height: 60px; margin-bottom: 20px; width: 80%; margin-left: auto; margin-right: auto">
                            <div style="line-height: 60px">Start</div>
                        </div>
                    {% else %}
                        <p>Click on the<b>{{ Constants.META_KEY_NAME }}</b> to begin.</p>
                    {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="iat-task">
        <div class="wrapper" style="border: 5px solid lightblue; position: relative">
            <div class="container-fluid">
                <div class="row align-items-start">
                    <div class="col-6 text-left" id="left_panel">
                        <div>
                            {% if is_touch %}
                                Tap "G" to
                            {% else %}
                                Press on {{ Constants.LEFT_KEY_NAME }} for
                            {% endif %}
                        </div>
                        <h3>
                            <span class="keyword main iat-k-left" style="color:#31940F"></span>
                            <div class="instr-two-categories">or </div><span class="keyword sub iat-k-left" style="color:#0000FF"></span>
                        </h3>
                    </div>
                    <div class="col-6 text-right" id="right_panel">
                        <div>
                            {% if is_touch %}
                                Tap "D" to
                            {% else %}
                                Press on {{ Constants.RIGHT_KEY_NAME }} for
                            {% endif %}
                        </div>
                        <h3>
                            <span class="keyword main iat-k-right" style="color:#31940F"></span>
                            <div class="instr-two-categories">or </div><span class="keyword sub iat-k-right" style="color:#0000FF"></span>
                        </h3>
                    </div>
                </div>
            </div>

            <div class="text-center" style="margin-top: 6rem; margin-bottom: 6rem">
                <div id="keyword"></div>
            </div>


            <div class="text-center mt-5">
                <div class="wrong_answer_mark">X</div>
            </div>
            {% if is_touch %}
                <div class="container" style="position: absolute; bottom: 18%; left:0; right:0; margin: auto">
                    <div class="row justify-content-between">
                        <div id="left" class="iat-buttons col-4 text-center" style="min-height: 140px; cursor: pointer; background-color: lightgrey; line-height: 140px; font-size: x-large">G</div>
                        <div id="right" class="iat-buttons col-4 text-center" style="min-height: 140px; cursor: pointer; background-color: lightgrey; line-height: 140px; font-size: x-large">D</div>
                    </div>
                </div>
            {% endif %}

            <div class="text-center">
                <p>
                    An <b style="color: red">X</b> appears during an error. Correct the error by pressing the correct key.
                </p>
            </div>

        </div>

        <form id="form">
            <input type="hidden" name={{ iat_tables|json }} id={{ iat_tables|json }}>
        </form>
    </div>

{% endblock %}