Fase 2: carichiamo le domande e creiamo il quiz!

[
    {
        "question": "Qual è la capitale della Francia?",
        "choices": ["Parigi", "Londra", "Berlino", "Roma"],
        "correctAnswer": 0
    },
    {
        "question": "Qual è la formula chimica dell'acqua?",
        "choices": ["H2O", "O2", "CO2", "NaCl"],
        "correctAnswer": 0
    },
    {
        "question": "Qual è il pianeta più vicino al sole?",
        "choices": ["Venere", "Terra", "Mercurio", "Marte"],
        "correctAnswer": 2
    }
]

document.addEventListener('DOMContentLoaded', function() {
    const quizContainer = document.getElementById('quiz-container');
    const resultContainer = document.getElementById('result');

    // Caricamento delle domande dal JSON
    const questions = [
        {
            "question": "Qual è la capitale della Francia?",
            "choices": ["Parigi", "Londra", "Berlino", "Roma"],
            "correctAnswer": 0
        },
        {
            "question": "Qual è la formula chimica dell'acqua?",
            "choices": ["H2O", "O2", "CO2", "NaCl"],
            "correctAnswer": 0
        },
        {
            "question": "Qual è il pianeta più vicino al sole?",
            "choices": ["Venere", "Terra", "Mercurio", "Marte"],
            "correctAnswer": 2
        }
    ];

    // Funzione per creare le domande del quiz
    function createQuiz() {
        questions.forEach((question, index) => {
            const section = document.createElement('div');
            section.className = 'section';

            const title = document.createElement('h2');
            title.textContent = `Domanda ${index + 1}: ${question.question}`;

            section.appendChild(title);

            question.choices.forEach((choice, choiceIndex) => {
                const label = document.createElement('label');
                const input = document.createElement('input');
                input.type = 'radio';
                input.name = `question${index}`;
                input.value = choiceIndex;

                label.appendChild(input);
                label.appendChild(document.createTextNode(choice));
                section.appendChild(label);
                section.appendChild(document.createElement('br'));
            });

            quizContainer.appendChild(section);
        });

        const submitButton = document.createElement('button');
        submitButton.className = 'button';
        submitButton.textContent = 'Invia';
        submitButton.addEventListener('click', calculateResults);
        quizContainer.appendChild(submitButton);
    }

    // Funzione per calcolare i risultati del quiz
    function calculateResults() {
        let score = 0;

        questions.forEach((question, index) => {
            const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
            if (selectedOption && parseInt(selectedOption.value) === question.correctAnswer) {
                score++;
            }
        });

        displayResults(score);
    }

    // Funzione per visualizzare i risultati
    function displayResults(score) {
        quizContainer.style.display = 'none';

        const totalQuestions = questions.length;
        resultContainer.textContent = `Hai risposto correttamente a ${score} su ${totalQuestions} domande.`;
        resultContainer.style.display = 'block';

        if (score === totalQuestions) {
            document.body.style.backgroundColor = 'lightgreen';
        } else {
            document.body.style.backgroundColor = 'lightcoral';
        }

        const resetButton = document.createElement('button');
        resetButton.className = 'button';
        resetButton.textContent = 'Ricomincia';
        resetButton.addEventListener('click', resetQuiz);
        resultContainer.appendChild(resetButton);
    }

    // Funzione per resettare il quiz
    function resetQuiz() {
        quizContainer.style.display = 'block';
        resultContainer.style.display = 'none';
        document.body.style.backgroundColor = '';

        const selectedOptions = document.querySelectorAll('input[type="radio"]:checked');
        selectedOptions.forEach(option => {
            option.checked = false;
        });

        resultContainer.innerHTML = '';
    }

    // Creazione del quiz all'avvio
    createQuiz();
});