Créez votre propre QCM interactif avec l'IA !

Message par **cyril** » 26 févr. 2025, 05:33

Dans le cadre de ma préparation aux certifications, j'ai conçu un quiz à choix multiple (QCM) en m'aidant de l'intelligence artificielle. Ce projet simple et efficace permet de s'entraîner facilement tout en testant ses connaissances sur divers sujets.

Fonctionnalités du QCM :

Affichage aléatoire des questions

Feedback immédiat sur les réponses

Explication en cas de mauvaise réponse

Suivi du score

Voici le code source complet :

1. Fichier HTML (index.html)

Ce fichier gère l'affichage du quiz et son interface utilisateur.

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .question {
            font-size: 1.2em;
        }
        .choices {
            margin-top: 10px;
        }
        .choices button {
            display: block;
            width: 100%;
            margin: 5px 0;
            padding: 10px;
            font-size: 1em;
        }
        .score, .notification, .next-question {
            margin-top: 20px;
            font-size: 1.2em;
        }
        .notification {
            color: #ffffff;
            padding: 10px;
            border-radius: 5px;
        }
        .correct {
            background-color: #4CAF50;
        }
        .incorrect {
            background-color: #F44336;
        }
        .next-question {
            display: none;
            text-align: center;
        }
        .next-question button {
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="quiz-container">
        <div class="question" id="question">Question ici</div>
        <div class="choices" id="choices"></div>
    </div>

    <div class="notification" id="notification"></div>

    <div class="next-question" id="next-question">
        <button onclick="displayQuestion()">Question suivante</button>
    </div>

    <div class="score">
        <p>Bonnes réponses : <span id="correct">0</span></p>
        <p>Mauvaises réponses : <span id="incorrect">0</span></p>
        <p>Questions posées : <span id="total">0</span></p>
    </div>

    <script src="quiz.js"></script>
</body>
</html>

2. Fichier JavaScript (quiz.js)

Ce fichier gère la logique du quiz.

Code : Tout sélectionner

const questions = [
    {
        question: "Quelle est la capitale de la France ?",
        choices: ["Paris", "Londres", "Berlin", "Madrid"],
        correctAnswer: "Paris",
        explanation: "Paris est la capitale de la France depuis plus de 1 000 ans."
    },
    {
        question: "Combien de continents y a-t-il sur Terre ?",
        choices: ["5", "6", "7", "8"],
        correctAnswer: "7",
        explanation: "Il y a 7 continents : Afrique, Amérique du Nord, Amérique du Sud, Antarctique, Asie, Europe, et Océanie."
    },
    {
        question: "Quel est l'océan le plus grand du monde ?",
        choices: ["Atlantique", "Pacifique", "Indien", "Arctique"],
        correctAnswer: "Pacifique",
        explanation: "L'océan Pacifique est le plus grand du monde, couvrant plus de 63 millions de miles carrés."
    },
    // Ajoutez jusqu'à 100 questions ici...
];

let correctCount = 0;
let incorrectCount = 0;
let totalQuestions = 0;

function getRandomQuestion() {
    const randomIndex = Math.floor(Math.random() * questions.length);
    return questions[randomIndex];
}

function displayQuestion() {
    const currentQuestion = getRandomQuestion();
    const questionElement = document.getElementById('question');
    const choicesElement = document.getElementById('choices');
    const notificationElement = document.getElementById('notification');
    const nextQuestionElement = document.getElementById('next-question');

    questionElement.textContent = currentQuestion.question;
    choicesElement.innerHTML = '';
    notificationElement.innerHTML = '';
    notificationElement.className = 'notification';
    nextQuestionElement.style.display = 'none';

    currentQuestion.choices.forEach(choice => {
        const button = document.createElement('button');
        button.textContent = choice;
        button.addEventListener('click', () => handleAnswer(choice, currentQuestion.correctAnswer, currentQuestion.explanation));
        choicesElement.appendChild(button);
    });

    totalQuestions++;
    document.getElementById('total').textContent = totalQuestions;
}

function handleAnswer(selectedChoice, correctAnswer, explanation) {
    const notificationElement = document.getElementById('notification');
    const nextQuestionElement = document.getElementById('next-question');

    if (selectedChoice === correctAnswer) {
        correctCount++;
        document.getElementById('correct').textContent = correctCount;
        notificationElement.textContent = "Bonne réponse !";
        notificationElement.classList.add('correct');
    } else {
        incorrectCount++;
        document.getElementById('incorrect').textContent = incorrectCount;
        notificationElement.textContent = `Mauvaise réponse. ${explanation}`;
        notificationElement.classList.add('incorrect');
    }

    nextQuestionElement.style.display = 'block';
}

// Affiche la première question au chargement de la page
window.onload = displayQuestion;

Comment utiliser ce quiz ?

Remplacez les questions par celles de votre choix.

Enregistrez les fichiers index.html et quiz.js.

Ouvrez index.html dans votre navigateur, et le quiz est prêt !

Sur mobile ?

Si vous souhaitez tester ce quiz sur votre smartphone, vous pouvez utiliser l'application Acode (Lien officiel).

Créez les fichiers index.html et quiz.js dans l'application.

Copiez-collez le code ci-dessus.

Enregistrez, puis appuyez sur "Play" pour exécuter votre quiz !

Amusez-vous et bon apprentissage !