Source

solutions.js

/** 
 * Solutions individuelles
 * @const links1 {Array} - Tableau contenant les liens des articles
 * @const card {HTMLElement} - Élément HTML de la carte
 * @const idx {number} - Index de la carte dans la liste
 * @description Ajoute un événement de clic à chaque carte de la section "Solutions individuelles".
 * 
 */
document.querySelectorAll('#solutions .card').forEach((card, idx) => {
    const links1 = [
        'https://gereports.fr/le-velo-et-la-marche-des-alternatives-ecologiques-pour-des-voyages-plus-verts-93', 
        'https://ecobnb.fr/blog/2024/08/facons-reduire-limpact-environnemental-alimentation-voyage/#:~:text=Choisir%20un%20plat%20sans%20viande,options%20v%C3%A9g%C3%A9tariennes%20et%20v%C3%A9g%C3%A9taliennes%20cr%C3%A9atives.',            
        'https://www.tf1info.fr/environnement-ecologie/manger-local-aide-t-il-vraiment-a-reduire-son-empreinte-ecologique-2331227.html'
    ];
    card.style.cursor = 'pointer';
    card.addEventListener('click', () => {
        window.open(links1[idx], '_blank');
    });
});

/**
 * Quiz de solutions individuelles
 * @description Gère le quiz de solutions individuelles en vérifiant les réponses de l'utilisateur.
 * @param {Event} e - L'événement de soumission du formulaire.
 * @returns {void}
*/
document.addEventListener('DOMContentLoaded', function() {
    const quizForm = document.getElementById('solutions-quiz-form');
    if (quizForm) {
        quizForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const answers = [
                document.getElementById('q1').value,
                document.getElementById('q2').value,
                document.getElementById('q3').value,
                document.getElementById('q4').value
            ];
            const correct = ['solaires', 'solaires', 'gaspillage', 'local'];
            let score = 0;
            for (let i = 0; i < correct.length; i++) {
                if (answers[i] === correct[i]) score++;
            }
            const result = document.getElementById('quiz-result');
            if (score === correct.length) {
                result.textContent = "Bravo ! Toutes tes réponses sont correctes 🎉";
                result.style.color = "#007700";
            } else {
                result.textContent = `Tu as ${score}/${correct.length} bonnes réponses. Essaie encore !`;
                result.style.color = "#c0392b";
            }
        });
    }
});