{{ block title }}
{{ block.title }}
{{ endblock }}

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

{{ block content }}
<progress id="progress-bar" max="{{ num_iterations }}" value="0"></progress>
<div class="corners-container">
    <div class="left corner">
        <p class="press_key desktop">按 <span class="key">{{ lkeys }}</span> 將詞彙歸類為</p>

        <p class="press_key mobile-device">按 <span class="key">左邊</span> 將詞彙歸類為</p>

        {{ if params.primary_images }}
        {{ if 'primary' in thumbnails.left }}
        <img class="left primary category" src="{{ thumbnails.left.primary }}">
        {{ endif }}
        {{ else }}
        {{ if 'primary' in block.left }}

        <div class="left primary category">{{ block.left.primary }}</div>
        {{ endif }}
        {{ endif }}

        {{ if params.secondary_images }}
        {{ if 'secondary' in thumbnails.left }}
        <img class="left secondary category" src="{{ thumbnails.left.secondary }}">
        {{ endif }}
        {{ else }}
        {{ if 'secondary' in block.left }}
        <div class="left secondary category">{{ block.left.secondary }}</div>
        {{ endif }}
        {{ endif }}
    </div>
    <div class="right corner">
        <p class="press_key desktop">按 <span class="key">{{ rkeys }}</span> 將詞彙歸類為</p>

        <p class="press_key mobile-device">按 <span class="key">右邊</span> 將詞彙歸類為</p>

        {{ if params.primary_images }}
        {{ if 'primary' in thumbnails.right }}
        <img class="right primary category" src="{{ thumbnails.right.primary }}">
        {{ endif }}
        {{ else }}
        {{ if 'primary' in block.right }}
        <div class="right primary category" style="text-align:right">{{ block.right.primary }}</div>
        {{ endif }}
        {{ endif }}

        {{ if params.secondary_images }}
        {{ if 'secondary' in thumbnails.right }}
        <img class="right secondary category" src="{{ thumbnails.right.secondary }}">
        {{ endif }}
        {{ else }}
        {{ if 'secondary' in block.right }}
        <div class="right secondary category" style="text-align:right">{{ block.right.secondary }}</div>
        {{ endif }}
        {{ endif }}
    </div>
</div>
<div class="corners-container-mobile mobile-device">
    <div class="left corner" style="background-color:#D3D4D6;width:124.8px;height:170px;">
        <p>

        </p>
    </div>
    <div class="right corner" style="background-color:#D3D4D6;width:124.8px;height:170px;">
        <p>

        </p>
    </div>
</div>

<!--<div id="load-sign" class="col-xs-4">-->
<!--    <div class="loader-inner ball-spin-fade-loader"></div>-->
<!--</div>-->
<div id="load-sign">
    <div>
        <div class="la-ball-pulse la-dark">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

<div id="stimulus-container" class="stimulus-container m-1">
    <p class="stimulus" id="stimulus"></p>
    <img class="stimulus" id="stimulus-img">
</div>

<div id="feedback-input-group" class="feedback input-group">
    <input type="text" id="answer-inp" class="form-control" readonly>
    <div class="invalid-feedback" id="warning-txt"></div>
</div>


<div class="instructions">


    <div id="start-help">
        <hr/>
        {% if player.round_number == 1 %}
        <p class="desktop">
            請您將左手與右手分別放在 <span class="key">{{ lkeys }}</span> 鍵
            和 <span class="key">{{ rkeys }}</span> 鍵上。
        </p>

        <p class="mobile-device">請您使用雙手操作行動裝置，兩手分別放在畫面左右兩邊。</p>

        {% endif %}
        <p class="desktop">若畫面中的詞彙屬於
            {{ if 'primary' in labels.left }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.left and 'secondary' in labels.left }} 或 {{ endif }}
            {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{ endif }}
            ，請點擊 <span class="key">{{ lkeys }}</span> 鍵
        </p>

        <p class="mobile-device">若畫面中的詞彙屬於
            {{ if 'primary' in labels.left }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.left and 'secondary' in labels.left }} 或 {{ endif }}
            {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{ endif }}
            ，請點擊視窗左邊的灰色框框。
        </p>

        <p class="desktop">若畫面中的詞彙屬於
            {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.right and 'secondary' in labels.right }} 或 {{ endif }}
            {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{ endif }}
            ，請點擊 <span class="key">{{ rkeys }}</span> 鍵
        </p>

        <p class="mobile-device">若畫面中的詞彙屬於
            {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.right and 'secondary' in labels.right }} 或 {{ endif }}
            {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{ endif }}
            ，請點擊視窗右邊的灰色框框。
        </p>

        <p>
            當您分類正確，畫面將會顯示新的一個詞彙。<br>
            當您分類錯誤，畫面將會顯示警示符號，請重新將詞彙分到正確類別。
            請盡可能<span style="color:red;">正確並快速</span>將詞彙分類。
        </p>
        <p class="desktop"><b>請先將輸入法切換為英文</b>，再按 <span class="key">空白鍵（SPACE）</span> 開始。</p>

        <p class="mobile-device">請點選「開始」以進行測驗。</p>
        <button id='btn-start' class="mobile-device" type="button"> 開始</button>


    </div>
</div>


<!--    {{ if DEBUG }}-->
<!--    <button type="button" id="cheat-btn" class="btn btn-dark">Cheat</button>-->
<!--    <input type="range" min="0" max="2" step="0.1" value="1.0" id="cheat-reaction">-->
<!--    {{ endif }}-->

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'iat.js' }}"></script>
<script>
    // $('.loader-inner').loaders();
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state !== 'complete') {
            setTimeout(function () {
                document.getElementById('load-sign').classList.add("hidden");
            }, 1000);
        }
    }
</script>
{{ if DEBUG }}
<script src="{{ static 'iat_cheating.js' }}"></script>{{ endif }}
{{ endblock }}