{{ block title }}
    Please add up the following numbers:
{{ endblock }}
{{ block content }}

<p id = "problem", style="text-align: center">
 <b>   {{ number_1 }} <br>
{{ number_2 }} <br>
{{ number_3 }} <br>
{{ number_4 }} <br>
 = ?? </b> <br>
</p>




<form id = "form">
    {{ formfields }}
    {{ next_button }}
</form>

<script>
    setTimeout(() => {
        document.getElementById("problem").style.display = "none";  // Hide text
    }, 3000); // Disappear after 2 seconds

    setTimeout(() => {
        document.getElementById("problem").style.display = "block";  // Show again
    }, 7000); // Reappear after 5 seconds

    setTimeout(() => {
        document.getElementById("form").style.display = "none";  // Hide text
    }, 3000); // Disappear after 2 seconds

    setTimeout(() => {
        document.getElementById("form").style.display = "block";  // Show again
    }, 7000); // Reappear after 5 seconds
</script>


{{ endblock }}