{% load otree_tags staticfiles %}

<div class="instructions well well-lg">
    <div>
        <span style="font-size: large;"><strong>【コード入力作業の画面サンプル】</strong></span>
    </div>
    <div style="border: 1px solid #000000; margin-bottom: 2em; padding: 2em;">
        <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.dummy1 label="" %}</td>
                    <td>{% formfield player.dummy2 label="" %}</td>
                    <td>{% formfield player.dummy3 label="" %}</td>
                </tr>
            </table>
        </div>
        <button class="otree-btn-next btn btn-primary" disabled="True">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>
    </div>
</div>