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

{{ block content }}


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

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

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

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

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

<img src="{% static "Graphs/counting_zeros_6.PNG" %}" width=400px/> 
{{ formfield 'zeros6' }}
<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 }}