{{ extends 'global/Page.html' }}
{{ block title }}Task (1/3){{ endblock }}

{{ block content }}


<img src="{% static "Graphs/counting_symbols_1.PNG" %}" width=400px/> 
{{ formfield 'symbols1' }}
<br>
<br>

<img src="{% static "Graphs/counting_symbols_2.PNG" %}" width=400px/> 
{{ formfield 'symbols2' }}

<br>
<br>
<img src="{% static "Graphs/counting_symbols_3.PNG" %}" width=400px/> 
{{ formfield 'symbols3' }}

<br>
<br>
<img src="{% static "Graphs/counting_symbols_4.PNG" %}" width=400px/> 
{{ formfield 'symbols4' }}

<br>
<br>
<img src="{% static "Graphs/counting_symbols_5.PNG" %}" width=400px/> 
{{ formfield 'symbols5' }}
<br>
<br>
<img src="{% static "Graphs/counting_symbols_6.PNG" %}" width=400px/> 
{{ formfield 'symbols6' }}

<br>
<p>Time left to complete this page: <span id="time-left"></span></p>
<script>
        let customTimerEle = document.getElementById('time-left');

        document.addEventListener("DOMContentLoaded", function (event) {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                customTimerEle.innerText = event.offset.totalSeconds;
            });
        });

    </script>



{{ endblock }}