document.addEventListener('DOMContentLoaded', function () {
    console.log('tasks.js wurde geladen.');

    // Event-Delegation für "Antwort prüfen" Buttons
    const checkButtons = document.querySelectorAll('.check-answer');
    console.log(`Found ${checkButtons.length} check-answer buttons.`);

    checkButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            console.log('Antwort prüfen Button geklickt.');
            const variableContainer = this.closest('.variable-container');
            const input = variableContainer.querySelector('input');
            const userAnswer = input.value.trim();
            const correctAnswer = input.getAttribute('data-correct-answer').trim().toLowerCase();
            const feedback = variableContainer.querySelector('.feedback');

            if (userAnswer.toLowerCase() === correctAnswer) {
                feedback.style.color = 'green';
                feedback.textContent = 'Richtig!';
            } else {
                feedback.style.color = 'red';
                feedback.textContent = 'Falsch. Versuchen Sie es erneut.';
            }
            feedback.style.display = 'block';
        });
    });

    // Event-Delegation für "Antwort anzeigen" Buttons
    const showButtons = document.querySelectorAll('.show-answer');
    console.log(`Found ${showButtons.length} show-answer buttons.`);

    showButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            console.log('Antwort anzeigen Button geklickt.');
            const variableContainer = this.closest('.variable-container');
            const input = variableContainer.querySelector('input');
            const correctAnswer = input.getAttribute('data-correct-answer');
            const correctAnswerDiv = variableContainer.querySelector('.correct-answer span');

            correctAnswerDiv.textContent = correctAnswer;
            correctAnswerDiv.parentElement.style.display = 'block';
        });
    });
});