{{ block title }}
Scenario #{{ round }} out of 25
{{ endblock }}

{{ block content }}
<div class="card" style="background-color: #e6ecf2">
    <div class=card-header><b><img src="{{ math_img }}" oncontextmenu="return false;"></b></div>
    <div class="card-body"> 
        <input name='math_answer' id=math class="form-control" type="number" maxlength="3" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
    </div>
</div>
<input type="hidden" name="time_firstmath" id="time_first"/>
<input type="hidden" name="time_lastmath" id="time_last"/>
<button id='next' style="display: none;">Next</button>

{{ endblock }}

{{ block scripts }}
    <script>
        // Timer
        const time = document.getElementById('time');
        const next = document.getElementById('next');
        let countdown;
        let seconds = 15;

        // Tracker
        const input = document.getElementById('math');
        const timefirst = document.getElementById('time_first');
        const timelast = document.getElementById('time_last');
        let first = null;
        let last = null;
            
        input.addEventListener('input', (event) => {
            const now = Date.now()/1000;

            if (first === null) {
                first = now;
            }

            last = now;
        });
            
        function startCountdown() {
            if (countdown) {
                clearInterval(countdown);
            }

            countdown = setInterval(function () {
                seconds--;

                if (seconds == 1) {
                    timefirst.value = first;
                    timelast.value = last;
                };
                if (seconds < 0) {
                    clearInterval(countdown);
                    updateButton();
                }
            }, 1000);
        }

        function initialButton() {
            next.disabled = true;
        }

        function updateButton() {
            next.disabled = false;
        }
        // Automatically start countdown when the page loads
        initialButton();
        startCountdown();
    </script>
{{ endblock }}