Interactive JavaScript - Create Dynamic Exercises

JavaScript allows you to make your web pages interactive: respond to clicks, validate forms, display results dynamically. Ideal for creating self-correcting exercises.

The Basics

Select an Element

JavaScript

// By ID (most common)
const element = document.getElementById('myId');

// By class (returns a collection)
const elements = document.getElementsByClassName('myClass');

// CSS Selector (very flexible)
const element = document.querySelector('#id .class');
const all = document.querySelectorAll('.class');

Modify Content

JavaScript

// Modify text
element.textContent = "New text";

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

// Modify an attribute
element.setAttribute('class', 'new-class');

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

Events

Events allow you to respond to user actions:

HTML + JavaScript

<!-- Method 1: onclick attribute -->
<button onclick="myFunction()">Click me</button>

<!-- Method 2: addEventListener (recommended) -->
<button id="myButton">Click me</button>

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

Common Events

click : click on an element
input : input in a field
change : value change (select, checkbox)
submit : form submission
keydown / keyup : key press

Interactive Forms

Retrieve and process values entered by the user:

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>

Create a Self-Correcting Quiz

Here is a complete example of a quiz with 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>

Tip Use data-* attributes to store correct answers. It's convenient but visible in the source code. For a real exam, use server-side verification.

Real-Time Validation

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>

Ready to Create Exercises?

Practice with your own interactive quizzes

Create a free account