{% block styles  %}
    <link href="{{ static 'count_numbers_environmental/count_numbers.css' }}" rel="stylesheet"/>
{% endblock %}

{{ block title }}
{{C.COUNTED_CHARS}}er zählen
{{ endblock }}

{{ block content }}
<p>
    Bitte tragen Sie in das Feld unten ein, wie oft die Ziffer "7" in dem jeweils angezeigten Zahlenblock vorkommt.<br>
    Klicken Sie anschließend auf "OK", um den nächsten Zahlenblock zu erhalten.
</p>
<br>

<div class="d-flex flex-column align-items-center">
    <h3>
        Runde <span id="iter-txt"></span>
    </h3>
    <br>
    <img class="captcha m-1" id="captcha-img">
<br>
    <div class="input-group m-1">
        <input type="{{ input_type }}" id="answer-inp" class="form-control"
               placeholder="{{ placeholder }}"
               autocorrect="off" autocapitalize="off" spellcheck="false">
        <button type="button" id="submit-btn" class="btn btn-outline-secondary">OK</button>
    </div>

    <p class="warn" id="warning-txt"></p>


</div>
<br>


<p>
    <i>(Klicken Sie auf den  „Abgabe frühzeitig beenden“-Button, wenn Sie die Aufgabe beenden oder überspringen möchten)</i>
</p>

<p align="center">
      <button class="nexttab btn-primary btn next">Aufgabe frühzeitig beenden</button>
</p>

<script>
    setTimeout(function() {
    document.getElementById('next-button').style.display = 'block';
    }, 5 * 1000);
</script>

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'count_numbers_environmental/count_numbers.js' }}"></script>
{{ endblock }}