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

{% block title %}
    タスクA（コード入力作業）
{% endblock %}

<style>
    .otree-timer {
        vertical-align: middle;
    }
</style>

{% block content %}
<div align="right"><p> {{ period }}ラウンド</p></div>

<!--<p>現在のスコア： {{ participant.vars.score }}（Debug用）</p>-->

<p>下表から つぎの3つのアルファベットに対応する数字（3桁）を見つけて答えなさい。</p>
    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>

				<th>{{ prob.0 }}</th>
                <th>{{ prob.1 }}</th>
                <th>{{ prob.2 }}</th>
            </tr>
            <tr>
				<td>{% formfield player.ans1 label="" %}</td>
				<td>{% formfield player.ans2 label="" %}</td>
				<td>{% formfield player.ans3 label="" %}</td>
            </tr>
        </table>
    </div>
    <button class="otree-btn-next btn btn-primary">OK</button>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <td>{{ chars.0 }}</td>
                <td>{{ chars.1 }}</td>
                <td>{{ chars.2 }}</td>
                <td>{{ chars.3 }}</td>
                <td>{{ chars.4 }}</td>
                <td>{{ chars.5 }}</td>
                <td>{{ chars.6 }}</td>
                <td>{{ chars.7 }}</td>
                <td>{{ chars.8 }}</td>
                <td>{{ chars.9 }}</td>
                <td>{{ chars.10 }}</td>
                <td>{{ chars.11 }}</td>
                <td>{{ chars.12 }}</td>
            </tr>
            <tr>
				<td>{{ codes.0 }}</td>
				<td>{{ codes.1 }}</td>
				<td>{{ codes.2 }}</td>
				<td>{{ codes.3 }}</td>
				<td>{{ codes.4 }}</td>
				<td>{{ codes.5 }}</td>
				<td>{{ codes.6 }}</td>
				<td>{{ codes.7 }}</td>
				<td>{{ codes.8 }}</td>
				<td>{{ codes.9 }}</td>
				<td>{{ codes.10 }}</td>
				<td>{{ codes.11 }}</td>
				<td>{{ codes.12 }}</td>
			</tr>
        </table>
    </div>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <td>{{ chars.13 }}</td>
                <td>{{ chars.14 }}</td>
                <td>{{ chars.15 }}</td>
                <td>{{ chars.16 }}</td>
                <td>{{ chars.17 }}</td>
                <td>{{ chars.18 }}</td>
                <td>{{ chars.19 }}</td>
                <td>{{ chars.20 }}</td>
                <td>{{ chars.21 }}</td>
                <td>{{ chars.22 }}</td>
                <td>{{ chars.23 }}</td>
                <td>{{ chars.24 }}</td>
                <td>{{ chars.25 }}</td>
            </tr>
            <tr>
				<td>{{ codes.13 }}</td>
				<td>{{ codes.14 }}</td>
				<td>{{ codes.15 }}</td>
				<td>{{ codes.16 }}</td>
				<td>{{ codes.17 }}</td>
				<td>{{ codes.18 }}</td>
				<td>{{ codes.19 }}</td>
				<td>{{ codes.20 }}</td>
				<td>{{ codes.21 }}</td>
				<td>{{ codes.22 }}</td>
				<td>{{ codes.23 }}</td>
				<td>{{ codes.24 }}</td>
				<td>{{ codes.25 }}</td>
			</tr>
        </table>
    </div>

{% endblock %}