{% load otree static %}

{% block title %}
{% endblock %}

{% block app_styles %}

<style>

    table.stimuli {
        border-radius: 5px;
        margin-bottom: 1em;
        width: 100%;
        /*border-collapse: separate;*/
        /*border-spacing: 0;*/
    }

    table.stimuli td, table.stimuli th {
        border: 1px solid #c4c4c4;
        border-collapse: collapse;
        padding: 8px;
    }

    table.stimuli th {
        background: #f5f5f5;
    }

    fieldset {
        /*margin-top: 15px;*/
        border: 1px solid #d6d6d6;
        border-radius: 5px;
        line-height: 1.6em;
    }

    .title {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #d9edf7;
        padding: 10px 15px;
    }
</style>

{% endblock %}

{% block content %}
<div>
    <fieldset>
        <div class="title">
            <h2 style="color: #31708f; margin: 0 0;">第二部分：內隱關聯測驗</h2>
        </div>
        <div style="padding: 10px 15px;">
            <p>
                接下來的畫面中，左上角與右上角分別會顯示兩種類別：工作、家庭。而畫面的中間會有一個與類別相關的「詞彙」，例如：公司、婚姻等。<br>
                此測驗共有四種可能出現的類別名稱。下表列出四種類別，以及其對應的詞彙：
            </p>

            <table class="stimuli">
                <tr>
                    <th><b>類別</b></th>
                    <th><b>詞彙</b></th>
                </tr>
                {% for stim, value in stimuli.items() %}
                <tr>
                    <td><b>{{ stim }}</b></td>
                    <td>{{ value }}</td>
                </tr>
                {% endfor %}
            </table>

            <!--            <p class="desktop">-->
            <!--                請您將雙手放在鍵盤上，左手食指放在鍵盤上的 <span class="key">{{ lkeys }}</span> 鍵、-->
            <!--                右手食指放在 <span class="key">{{ rkeys }}</span> 鍵。<br>-->
            <!--                當畫面中的詞彙屬於左上角的類別，請點擊 <span class="key">{{ lkeys }}</span> 鍵。-->
            <!--                當畫面中的詞彙屬於右上角的類別，請點擊 <span class="key">{{ rkeys }}</span> 鍵。<br>-->
            <!--            </p>-->

            <p>
                請您<span style="color:red;">將畫面中央出現的詞彙分到對應的類別</span>，當您分類正確，畫面將會顯示新的一個詞彙。<br>
                當您分類錯誤，畫面將會顯示警示符號，請重新將詞彙分到正確類別。<br>
                請盡可能<span style="color:red;">正確並快速</span>將詞彙分類。
            </p>
            <p>
                本測驗共有七個回合，每回合皆有各自的說明，請仔細閱讀每一頁的文字。
            </p>
        </div>
        <div style="text-align: center;">
            {% next_button %}
        </div>
    </fieldset>
</div>
{% endblock %}