JavaScript interactif - Créer des exercices dynamiques

JavaScript permet de rendre vos pages web interactives : réagir aux clics, valider des formulaires, afficher des résultats dynamiquement. Idéal pour créer des exercices auto-corrigés.

Les bases

Sélectionner un élément

JavaScript

// Par ID (le plus courant)
const element = document.getElementById('myId');

// Par classe (retourne une collection)
const elements = document.getElementsByClassName('myClass');

// Sélecteur CSS (très flexible)
const element = document.querySelector('#id .class');
const all = document.querySelectorAll('.class');

Modifier le contenu

JavaScript

// Modifier le texte
element.textContent = "New text";

// Modifier le HTML
element.innerHTML = "<strong>Bold text</strong>";

// Modifier un attribut
element.setAttribute('class', 'new-class');

// Modifier le style
element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";

Événements

Les événements permettent de réagir aux actions de l'utilisateur :

HTML + JavaScript

<!-- Méthode 1 : attribut onclick -->
<button onclick="myFunction()">Cliquez-moi</button>

<!-- Méthode 2 : addEventListener (recommandée) -->
<button id="myButton">Cliquez-moi</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
    alert('Bouton cliqué !');
});
</script>

Événements courants

click : clic sur un élément
input : saisie dans un champ
change : changement de valeur (select, checkbox)
submit : soumission d'un formulaire
keydown / keyup : appui sur une touche

Formulaires interactifs

Récupérer et traiter les valeurs saisies par l'utilisateur :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Calculator</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        input { padding: 10px; font-size: 16px; width: 100px; }
        button { padding: 10px 20px; font-size: 16px; }
        #result { font-size: 24px; margin-top: 20px; color: #2563eb; }
    </style>
</head>
<body>

    <h1>Calculator</h1>

    <input type="number" id="num1" placeholder="Number 1">
    <select id="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">×</option>
        <option value="/">÷</option>
    </select>
    <input type="number" id="num2" placeholder="Number 2">

    <button onclick="calculate()">Calculate</button>

    <div id="result"></div>

    <script>
        function calculate() {
            const n1 = parseFloat(document.getElementById('num1').value);
            const n2 = parseFloat(document.getElementById('num2').value);
            const op = document.getElementById('operation').value;

            let result;
            switch(op) {
                case '+': result = n1 + n2; break;
                case '-': result = n1 - n2; break;
                case '*': result = n1 * n2; break;
                case '/': result = n1 / n2; break;
            }

            document.getElementById('result').textContent = `Result: ${result}`;
        }
    </script>

</body>
</html>

Créer un quiz auto-corrigé

Voici un exemple complet de quiz avec score :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math Quiz</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .question { background: #f3f4f6; padding: 20px; border-radius: 10px; margin: 15px 0; }
        .question h3 { margin-top: 0; }
        input[type="text"] { padding: 10px; font-size: 16px; width: 100px; }
        button { padding: 15px 30px; font-size: 18px; background: #10b981; color: white; border: none; border-radius: 8px; cursor: pointer; }
        button:hover { background: #059669; }
        .correct { color: #10b981; font-weight: bold; }
        .incorrect { color: #ef4444; font-weight: bold; }
        #score { font-size: 24px; text-align: center; margin-top: 20px; }
    </style>
</head>
<body>

    <h1>Math Quiz</h1>

    <div class="question">
        <h3>Question 1</h3>
        <p>What is 7 × 8?</p>
        <input type="text" id="q1" data-answer="56">
        <span id="feedback1"></span>
    </div>

    <div class="question">
        <h3>Question 2</h3>
        <p>What is the square root of 144?</p>
        <input type="text" id="q2" data-answer="12">
        <span id="feedback2"></span>
    </div>

    <div class="question">
        <h3>Question 3</h3>
        <p>Solve: 2x + 5 = 13. x = ?</p>
        <input type="text" id="q3" data-answer="4">
        <span id="feedback3"></span>
    </div>

    <button onclick="check()">Check Answers</button>

    <div id="score"></div>

    <script>
        function check() {
            let score = 0;
            const total = 3;

            for (let i = 1; i <= total; i++) {
                const input = document.getElementById('q' + i);
                const feedback = document.getElementById('feedback' + i);
                const correctAnswer = input.dataset.answer;
                const userAnswer = input.value.trim();

                if (userAnswer === correctAnswer) {
                    score++;
                    feedback.textContent = ' ✓ Correct!';
                    feedback.className = 'correct';
                } else {
                    feedback.textContent = ' ✗ Wrong (answer: ' + correctAnswer + ')';
                    feedback.className = 'incorrect';
                }
            }

            document.getElementById('score').textContent =
                `Score: ${score} / ${total} (${Math.round(score/total*100)}%)`;
        }
    </script>

</body>
</html>

Astuce Utilisez les attributs data-* pour stocker les bonnes réponses. C'est pratique mais visible dans le code source. Pour un vrai examen, utilisez une vérification côté serveur.

Validation en temps réel

HTML

<input type="text" id="answer" placeholder="Your answer">
<span id="validation"></span>

<script>
document.getElementById('answer').addEventListener('input', function() {
    const value = this.value.trim();
    const validation = document.getElementById('validation');

    if (value === '42') {
        validation.textContent = '✓ Correct!';
        validation.style.color = 'green';
    } else if (value.length > 0) {
        validation.textContent = '✗ Try again';
        validation.style.color = 'red';
    } else {
        validation.textContent = '';
    }
});
</script>

Prêt à créer des exercices ?

Mettez en pratique avec vos propres quiz interactifs

Créer un compte gratuit