{{ block title }}
{{ endblock }}

{{ block content }}
<p>
    Bitte zählen Sie alle 7er im angezeigten Zahlenblock
</p>
<div class="grid" id="numberGrid">
    {% for number_set in Numbers %}
    <div class="row" style="border-bottom: 2px solid #000; background-color: #333; color: #fff;">
        {% for number in number_set %}
        <div class="col" style="border: 2px solid #000; padding: 20px; background-color: #333; color: #fff;">
            {% for digit in number %}
            <div class="digit">{{ digit|safe }}</div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
    your solution: {{ solution }}</b>
</div>
    <b>Your solution: <input type="text" id="userInput"></input></b>

<div style="display: flex; flex-direction: column; align-items: center;">
    <button type="button" class="btn btn-primary" onclick="checkAnswer()" style="background-color: #333; color: #fff;">OK</button>
</div>
{{ formfield_errors 'User_input' }}
<script>
    // Get the initial correct solution from the server
    var correctSolution = '{{ solution }}';

    function checkAnswer() {
        var userInput = document.getElementById('userInput').value;

        if (userInput === correctSolution) {
            // Increment the counter (you might need to fetch the counter value from the server)
            // For simplicity, let's assume a variable 'counter' that you increment
            var counter = parseInt('{{ counter }}') || 0;  // Initialize counter to 0 if undefined
            counter += 1;
            // Log the counter value to the console
            console.log('Counter:', counter);

            // Update the content of the numberGrid div using AJAX
            var numberGrid = document.getElementById('numberGrid');
            var xhrGrid = new XMLHttpRequest();

            xhrGrid.onreadystatechange = function () {
                if (xhrGrid.readyState === 4 && xhrGrid.status === 200) {
                    // Replace the content of the numberGrid div with the updated content
                    numberGrid.innerHTML = xhrGrid.responseText;
                }
            };

            // Make an AJAX request to update the content of the numberGrid
            var urlGrid = window.location.pathname + '?counter=' + counter + '&nocache=' + new Date().getTime();
            xhrGrid.open('GET', urlGrid, true);
            xhrGrid.send();
        } else {
            // Refresh only the userInput field
            document.getElementById('userInput').value = '';

            // Optionally, you can provide feedback to the user about the incorrect answer
            alert('Incorrect answer. Please try again.');
        }
    }
</script>




{{ endblock }}