Devier_Project/qcm2.js at main · simonet4/Devier_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
document.addEventListener("DOMContentLoaded", () => {

    // Bonne réponse unique
    const bonneReponse = {
        q1: "A"
    };

    // Récupération des éléments
    const form = document.getElementById("qcm-form");
    const submitBtn = document.getElementById("qcm-submit");
    const resultBox = document.getElementById("qcm-result");
    const finishBtn = document.getElementById("finish-btn");

    // Empêche le formulaire de recharger la page
    form.addEventListener("submit", e => e.preventDefault());

    // Quand on clique sur "Valider le QCM"
    submitBtn.addEventListener("click", () => {

        let score = 0;

        // Reset des couleurs
        document.querySelectorAll(".q-option").forEach(opt => {
            opt.classList.remove("qcm-correct", "qcm-wrong");
        });

        // Vérification de q1 uniquement
        const selected = document.querySelector(`input[name="q1"]:checked`);

        if (selected) {
            const option = selected.closest(".q-option");

            if (selected.value === bonneReponse.q1) {
                option.classList.add("qcm-correct");
                score = 1;
            } else {
                option.classList.add("qcm-wrong");
            }
        }

        // Affichage du score
        resultBox.style.display = "block";
        resultBox.className = ""; // reset classes
        resultBox.innerHTML = `Score : <strong>${score}/1</strong>`;

        // Score parfait ?
        if (score === 1) {
            resultBox.classList.add("good");
            resultBox.innerHTML += "<br>Parfait ! Moustache t’applaudit ! 😺✨";

            finishBtn.disabled = false;
            finishBtn.classList.add("enabled");
            finishBtn.style.cursor = "pointer";

        } else {
            resultBox.classList.add("bad");
            resultBox.innerHTML += "<br>Ce n'est pas encore ça, réessaie ! 😿";

            finishBtn.disabled = true;
            finishBtn.classList.remove("enabled");
            finishBtn.style.cursor = "not-allowed";
        }
    });

    // Redirection sécurisée
    finishBtn.addEventListener("click", (e) => {
        e.preventDefault();

        if (!finishBtn.disabled) {
            window.location.href = "Quatrieme_Page.html";
        } else {
            // Animation "shake" si clic alors que désactivé
            finishBtn.animate([
                { transform: "translateX(0)" },
                { transform: "translateX(4px)" },
                { transform: "translateX(-4px)" },
                { transform: "translateX(0)" }
            ], { duration: 200 });
        }
    });

});