script.js

const progression = document.getElementById("progression");
const question = document.getElementById("question");
const barreProgression = document.getElementById("barreProgression");
const listeChoix = document.getElementById("listeChoix");
const btnSuivant = document.getElementById("btnSuivant");
const resultatScore = document.getElementById("resultatScore");
const resultatMessage = document.getElementById("resultatMessage");
const btnRecommencer = document.getElementById("btnRecommencer");
const quiz = document.getElementById("quiz");
const ecranTerminal = document.getElementById("ecranTerminal");

const questions = [
    {
        question: "Quelle est la capitale de la Côte d'Ivoire ?",
        choix: ["Abidjan", "Yamoussoukro", "Bouaké", "Yopougon"],
        bonneReponse: 1
    },
    {
        question: "Combien font 7 × 8 ?",
        choix: ["54", "56", "40", "64"],
        bonneReponse: 1
    },
    {
        question: "Quel langage est utilisé pour styliser une page web ?",
        choix: ["HTML", "CSS", "JavaScript", "Python"],
        bonneReponse: 1
    },
    {
        question: "Combien de continents y a-t-il sur Terre ?",
        choix: ["5", "6", "7", "8"],
        bonneReponse: 2
    }
];

let indiceActuel = 0;
let score = 0;
let reponseSelectionnee = null;

function afficherQuestion() {
    reponseSelectionnee = null;
    btnSuivant.disabled = true;

    const questionActuelle = questions[indiceActuel];
    progression.textContent = `Question ${indiceActuel + 1} / ${questions.length}`;

    const pourcentage = (indiceActuel / questions.length) * 100;
    barreProgression.style.width = `${pourcentage}%`;
    question.textContent = questionActuelle.question;
    listeChoix.innerHTML = "";

    questionActuelle.choix.forEach((choix, index) => {
        const bouton = document.createElement("button");

        bouton.className = "btn-choix";
        bouton.textContent = choix;
        bouton.addEventListener("click", () => selectionnerReponse(index));
        listeChoix.appendChild(bouton);
    });
}

function selectionnerReponse(indexChoix) {
    if (reponseSelectionnee !== null) return;

    reponseSelectionnee = indexChoix;

    const questionActuelle = questions[indiceActuel];
    const boutonsChoix = document.querySelectorAll(".btn-choix");

    boutonsChoix.forEach((bouton, index) => {
        bouton.disabled = true;

        if (index === questionActuelle.bonneReponse) {
            bouton.classList.add("correct");
        } else if (index === indexChoix) {
            bouton.classList.add("incorrect");
        }
    });

    if (indexChoix === questionActuelle.bonneReponse) {
        score++;
    }

    btnSuivant.disabled = false;
}

function questionSuivante() {
    indiceActuel++;

    if (indiceActuel < questions.length) {
        afficherQuestion();
    } else {
        afficherResultat();
    }
}

function afficherResultat() {
    barreProgression.style.width = "100%";
    quiz.classList.add("cache");
    ecranTerminal.classList.remove("cache");

    resultatScore.textContent = `${score} / ${questions.length}`;

    const pourcentageReussi = (score / questions.length) * 100;

    if (pourcentageReussi === 100) {
        resultatMessage.textContent = "Score parfait, bravo !";
    } else if (pourcentageReussi >= 60) {
        resultatMessage.textContent = "Bien joué !";
    } else {
        resultatMessage.textContent = "Peut faire mieux !";
    }
}

function recommencerQuiz() {
    indiceActuel = 0;
    score = 0;
    ecranTerminal.classList.add("cache");
    quiz.classList.remove("cache");
    afficherQuestion();
}

btnSuivant.addEventListener("click", questionSuivante);
btnRecommencer.addEventListener("click", recommencerQuiz);

afficherQuestion();