{% block title %}
  Converting letters into numbers
{% 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_1 }}</b> </th>
        </tr>
        <tr>
            <th><b>{% formfield player.digit_response_1 %}</b> </th>
        </tr>
            <tr>
            <th>Which number corresponds to letter <b>{{ player.random_letter_2 }}</b></th>
        </tr>
    <tr>
            <th><b>{% formfield player.digit_response_2 %}</b></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 %}


<script>
  $(document).on('keydown', function(e) {
    if (e.keyCode === 13 || e.keyCode === 9) { // 13 is Enter, 9 is Tab
      e.preventDefault();
      // Optionally, handle further actions here
    }
  });
</script>
{% endblock %}