Analisi del codice JavaScript del quiz

Il codice JavaScript che abbiamo sviluppato per creare il quiz interattivo è il cuore del nostro progetto. Ma leggere e copiare degli snippet di codice non basta per farti assimilare le logiche alle spalle del funzionamento del quiz. Niente paura! In questa sezione andremo ad esaminare ogni parte del codice nel dettaglio, spiegando le scelte fatte e il funzionamento di ciascun componente. Cominciamo!

Caricamento del DOM

Per prima cosa, utilizziamo l’evento DOMContentLoaded per garantire che il DOM sia completamente caricato prima di eseguire qualsiasi manipolazione.

document.addEventListener('DOMContentLoaded', function() {
    // Il resto del codice verrà eseguito qui
});

document.addEventListener(‘DOMContentLoaded’, function() {…}) ricordiamo che aggiunge un listener per l’evento DOMContentLoaded che esegue il codice all’interno della funzione solo quando il DOM è completamente caricato. Questo garantisce che tutti gli elementi HTML necessari siano disponibili per la manipolazione.

Definizione delle domande del quiz.

Definiamo le domande del quiz direttamente nel codice. In una situazione reale, queste domande potrebbero essere caricate dinamicamente da un file JSON tramite una richiesta AJAX.

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
    }
];

Ogni oggetto rappresenta una domanda con un testo (question), un array Javascript di possibili risposte (choices) e l’indice della risposta corretta (correctAnswer). Questo formato è semplice e facilmente iterabile.

Creazione del quiz.

La funzione createQuiz genera dinamicamente le domande del quiz e le aggiunge al DOM.

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);
}

• Iterazione sulle domande: utilizziamo forEach per iterare su ogni domanda dell’array questions.
• Creazione delle sezioni: per ogni domanda, creiamo un elemento div con classe section, un titolo h2 con il testo della domanda e gli elementi label e input per le scelte multiple.
• Nome degli Input Radio: gli input radio per ogni domanda hanno lo stesso nome (name=”question${index}”), permettendo la selezione di una sola risposta per domanda.
• Pulsante di Invio: creiamo un pulsante di invio che chiama la funzione calculateResults quando viene cliccato.

Calcolo dei risultati.

La funzione calculateResults calcola il punteggio del quiz basandosi sulle risposte selezionate dall’utente.

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);
}

• Iterazione sulle domande: utilizziamo forEach per iterare su ogni domanda e verificare la risposta selezionata.
• Selezione della risposta: querySelector seleziona l’input radio selezionato per ogni domanda. Se esiste (selectedOption) e il suo valore corrisponde all’indice della risposta corretta (question.correctAnswer), incrementiamo il punteggio.

Visualizzazione dei risultati.

La funzione displayResults mostra il punteggio finale all’utente e cambia il colore di sfondo in base al punteggio.

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);
}

• Nascondere il quiz: nascondiamo il contenitore del quiz impostando display: none.
• Mostrare i risultati: mostriamo il punteggio nel contenitore dei risultati e lo rendiamo visibile.
• Cambiamento del colore di sfondo: Cambiamo il colore di sfondo della pagina in verde se tutte le risposte sono corrette, altrimenti in rosso.
• Pulsante di Reset: creiamo un pulsante di reset che chiama la funzione resetQuiz.

Reset del quiz.

La funzione resetQuiz ripristina lo stato iniziale del quiz per poter fare un nuovo round.

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 = '';
}

• Ripristinare la visibilità del Quiz: mostriamo di nuovo il contenitore del quiz e nascondiamo il contenitore dei risultati.
• Ripristinare lo sfondo: resettiamo il colore di sfondo della pagina.
• Deselezionare le risposte: deselezioniamo tutte le risposte selezionate impostando checked a false per ogni input radio selezionato.
• Pulizia del contenitore dei risultati: svuotiamo il contenuto del contenitore dei risultati.

Con questo tutorial hai a disposizione le basi per creare il tuo quiz interattivo. La cosa migliore? Puoi personalizzarlo sulla base degli argomenti e degli stili che preferisci. La pratica costante e l’esplorazione di nuove idee ti aiuteranno a perfezionare le tue abilità di web developer e a creare progetti sempre più innovativi e interessanti. Continua a sperimentare!

Non sei ancora sazio? Corri a provare il tutorial successivo!