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

{% block title %}
    コード入力作業
{% endblock %}

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

{% block content %}
<div>
    <span style="color:ff0000;">画面上部に 残り時間 が表示されます。</span>
</div>

<div align="right"><p>1ラウンド</p></div>

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

				<th>O</th>
                <th>S</th>
                <th>D</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>G</td>
                <td>X</td>
                <td>P</td>
                <td>B</td>
                <td>J</td>
                <td>H</td>
                <td>E</td>
                <td>T</td>
                <td>A</td>
                <td>U</td>
                <td>S</td>
                <td>K</td>
                <td>W</td>
            </tr>
            <tr>
				<td>192</td>
				<td>355</td>
				<td>152</td>
				<td>777</td>
				<td>404</td>
				<td>957</td>
				<td>435</td>
				<td>456</td>
				<td>281</td>
				<td>134</td>
				<td>401</td>
				<td>640</td>
				<td>830</td>
			</tr>
        </table>
    </div>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <td>V</td>
                <td>C</td>
                <td>F</td>
                <td>O</td>
                <td>Q</td>
                <td>L</td>
                <td>I</td>
                <td>M</td>
                <td>Y</td>
                <td>N</td>
                <td>Z</td>
                <td>D</td>
                <td>R</td>
            </tr>
            <tr>
				<td>965</td>
				<td>315</td>
				<td>874</td>
				<td>246</td>
				<td>472</td>
				<td>622</td>
				<td>900</td>
				<td>199</td>
				<td>253</td>
				<td>835</td>
				<td>693</td>
				<td>415</td>
				<td>784</td>
			</tr>
        </table>
    </div>

    <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        説明を表示／非表示
    </button>
    <div class="collapse" id="collapseExample">
        <div class="border p-3">
    
                      {% include Constants.instructions_WEDR %}
         
    
        </div>
    </div>
{% endblock %}