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

{% block title %}
  The task
{% endblock %}


{% block content %}

        <table class='table table-bordered text-center'
        style='width: auto; margin: auto'>
        <tr>
            <th>Letters</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
            <th>G</th>
            <th>H</th>
            <th>I</th>
            <th>J</th>
            <th>K</th>
            <th>L</th>
            <th>M</th>
            <th>N</th>
            <th>O</th>
            <th>P</th>
            <th>Q</th>
            <th>R</th>
            <th>S</th>
            <th>T</th>
            <th>U</th>
            <th>V</th>
            <th>W</th>
            <th>X</th>
            <th>Y</th>
            <th>Z</th>
        </tr>
        <tr>
            <th>Numbers</th>
            <th>{{ player.digits1}}</th>
            <th>{{ player.digits2}}</th>
            <th>{{ player.digits3}}</th>
            <th>{{ player.digits4}}</th>
            <th>{{ player.digits5}}</th>
            <th>{{ player.digits6}}</th>
            <th>{{ player.digits7}}</th>
            <th>{{ player.digits8}}</th>
            <th>{{ player.digits9}}</th>
            <th>{{ player.digits10}}</th>
            <th>{{ player.digits11}}</th>
            <th>{{ player.digits12}}</th>
            <th>{{ player.digits13}}</th>
            <th>{{ player.digits14}}</th>
            <th>{{ player.digits15}}</th>
            <th>{{ player.digits16}}</th>
            <th>{{ player.digits17}}</th>
            <th>{{ player.digits18}}</th>
            <th>{{ player.digits19}}</th>
            <th>{{ player.digits20}}</th>
            <th>{{ player.digits21}}</th>
            <th>{{ player.digits22}}</th>
            <th>{{ player.digits23}}</th>
            <th>{{ player.digits24}}</th>
            <th>{{ player.digits25}}</th>
            <th>{{ player.digits26}}</th>
        </tr>

    </table>

<p>
    <br/><table class='table table-bordered text-center'
        style='width: auto; margin: auto'>
        <tr>
            <th>Which number corresponds to letter <b>{{ player.random_letter}}</b></th>
        </tr>
        <tr>
            <th><b>{% formfield player.digit_response %}</b></th>
        </tr>
            <tr>
            <th></th>
        </tr>
                <tr>
            <th><b>Number of correct responses: </b></th>
        </tr>
            <tr>
            <th><b>{{ player.correct_prev}}</b></th>
        </tr>

    </table>
</p>
<p>

    {% next_button %}


{% endblock %}