{% 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;
    }

    /*!*第一欄第一列：左上*!*/
    /*tr:first-child th:first-child {*/
    /*    border-top-left-radius: 10px;*/
    /*}*/

    /*!*第一欄最後列：左下*!*/
    /*tr:last-child td:first-child {*/
    /*    border-bottom-left-radius: 10px;*/
    /*}*/

    /*!*最後欄第一列：右上*!*/
    /*tr:first-child th:last-child {*/
    /*    border-top-right-radius: 10px;*/
    /*}*/

    /*!*最後欄第一列：右下*!*/
    /*tr:last-child td:last-child {*/
    /*    border-bottom-right-radius: 10px;*/
    /*}*/


    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 styles  %}
    <link href="{% static 'iat.css' %}" rel="stylesheet"/>
{% endblock %}

{% block content %}
<div>
    <fieldset>
        <div class="title">
            <h2 style="color: #31708f; margin: 0 0;">內隱關聯測驗</h2>
        </div>
        <div style="padding: 10px 15px;">
            <p><b>
                畫面將會顯示四個類別與各類別相對應的詞彙。<br>
                請使用鍵盤上的 <span class="key">{{ lkeys }}</span> 鍵和 <span class="key">{{ rkeys }}</span>
                鍵將詞彙正確分到所屬的類別。<br>
                以下是四個類別及與之相對應的詞彙：</b>
            </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>
                <b>本測驗共有七個回合，每回合的說明皆不同，請專注閱讀實驗說明。</b>
            </p>
        </div>
        <div style="text-align: center;">
            {% next_button %}
        </div>
    </fieldset>
</div>
{% endblock %}