{% extends "global/BaseMotherhood.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Tabulation (level {{player.participant.lc1a}}) task
{% endblock %}



{% block content %}

<div class="instructions well well-lg">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p>
        Count the number of zeroes in the following grid. There is <b>no</b> time limit.
        <br> Once you have entered the number of zeroes, click the <b>Submit</b> button or press the <b>Enter</b> key.<br><br>
        Note: If you enter an incorrect answer, you will have to wait 5 seconds before being able to enter another answer.
    </p>
</div>
                <center>
        <img src="{{ static tab_img}}">
                </center>
                <br><br>



    <table class="table">
            <tr>
                <th style="vertical-align:middle">
                    <br><br>
                    {% formfield player.user_text label="" %}
                    <br><br>
                </th>
                <th style="vertical-align:middle; text-align: left">
                    <br><br>
                    <div id="countdown"></div>
                    <button id="button" class="otree-btn-next btn btn-primary" onclick="return validateForm()">Submit</button>
                    <br><br>
                </th>
            </tr>

            <tr>
                <th>
                    <h2> You have {{rounds_remaining}} rounds remaining. </h2>
                </th>
                <th style="vertical-align:top; text-align: left">
                    <h2><br></h2>
                </th>
            </tr>


        </table>

    {% if debug %}

        <div class="panel panel-success">
            <div class="panel-heading">

            <h4><br>Cheater Mode Activated (Debug Mode Only)  - <a href="#" id="prefill">Click Here to Autofill Text</a></h4>
            <p>You are playing in debug mode, so you can skip the manual
                transcription by clicking the above link.
                and clicking "next".
            </p>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('a#prefill').click(function () {
                    $('#id_user_text').val('{{ player.correct_text }}');
                    $('#id_user_text').focus();

                })
            });
        </script>
    {% endif %}


<script>
    $(document).ready(function () {
        $('#id_user_text').focus();
    });
</script>
<!-- Text to png Image -->
{{ include 'task_encoding1a/timer_countdown.html' }}
{% endblock %}


{% block script %}

{% endblock %}