Breadcrumbs

Creating an Interactive Gear Simulation

This guide demonstrates how to build an interactive web simulation that shows the rotation behavior of interlocking gears. Users can modify the number of teeth on three gears (A, B, and C) and observe the resulting motion. The central question is: "How many times must Gear A turn to make all dots align again?"

gear_simulation/
gear_simulation_20250421-155059.zip

gear_simulation_sls_20250423-082511.zip

Objective

The goal is to simulate three interlocking gears (A, B, C), where turning Gear A causes Gears B and C to turn based on their teeth ratios. Each gear has a reference dot. The user can adjust the number of teeth and rotate Gear A to determine how many turns it takes for all dots to line up again.

1. HTML Structure (`index.html`)

The HTML structure is essential for building the layout:

Title: An <h1> tag to present the question.
Gear Elements: Three div elements (id="gearA", id="gearB", id="gearC") to represent the gears, each containing:
- A div for the radius line (class="radius-line").
- A div for the reference dot (class="dot").
Controls:
- Buttons for "Turn" (id="turnButton") and "Reset" (id="resetButton").
Inputs & Labels:
- Number input fields (id="teethA", id="teethB", id="teethC") for setting the teeth count.
- Labels for each gear and span elements to display the rotation count.
Answer Section:
- An input field (id="answerA") for the user’s guess.
- A button (id="checkAnswerButton") for checking the answer.
- A p tag (id="feedbackMessage") for feedback.
External Resources: <link> for style.css and <script> for script.js.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interlocking Gears</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>How many times must each wheel turn to make all of the dots line up again?</h1>

    <div class="controls wide-controls">
        <button id="turnButton" class="wide-button">Turn</button>
        <button id="resetButton" class="wide-button">Reset</button>
    </div>

    <div class="simulation-container">
        <div class="gear-assembly">
            <!-- Gear A -->
            <div class="gear gear-a" id="gearA">
                <div class="radius-line"></div>
                <div class="dot"></div>
            </div>
            <!-- Gear B -->
            <div class="gear gear-b" id="gearB">
                <div class="radius-line"></div>
                <div class="dot"></div>
            </div>
            <!-- Gear C -->
            <div class="gear gear-c" id="gearC">
                <div class="radius-line"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="labels">
            <!-- Label Group A -->
            <div class="label-group">
                <span class="label-text">A</span>
                <input type="number" class="teeth-input" id="teethA" value="8" min="1">
                <span class="rotation-count" id="rotCountA">0</span>
            </div>
            <!-- Label Group B -->
            <div class="label-group">
                <span class="label-text">B</span>
                <input type="number" class="teeth-input" id="teethB" value="16" min="1">
                <span class="rotation-count" id="rotCountB">0</span>
            </div>
            <!-- Label Group C -->
            <div class="label-group">
                <span class="label-text">C</span>
                <input type="number" class="teeth-input" id="teethC" value="24" min="1">
                <span class="rotation-count" id="rotCountC">0</span>
            </div>
        </div>
        <div class="answer-check-inline">
            <label for="answerA">Turns of A for alignment:</label>
            <input type="number" id="answerA" min="1">
            <button id="checkAnswerButton">Check Answer</button>
            <p id="feedbackMessage" class="feedback-message"></p>
        </div>
    </div>

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

2. CSS Styling (`style.css`)

CSS handles the appearance and animation:

Gear Style: Use border-radius: 50% to make gears circular and style them with a background color and border. Use a ::before pseudo-element to represent the axle.
Dot and Radius Line: Style the .dot as a small circle and .radius-line as a thin line from the center of the gear to the edge.
Positioning: Use absolute positioning for gears and relative positioning for the container. JavaScript will handle gear positioning.
Rotation Animation: Smooth rotation is achieved using transition: transform 0.5s linear; for the .gear class.
Layout: Use Flexbox to arrange controls and labels.
Responsive Design: Use @media queries for mobile responsiveness.

css

/* Key CSS Snippets */
.gear {
    position: absolute;
    border-radius: 50%;
    background-color: #3498db;
    border: 3px solid #2980b9;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s linear; /* Smooth rotation */
}

.gear::before {
    content: '';
    position: absolute;
    width: 20%; height: 20%;
    background-color: #2c3e50;
    border-radius: 50%;
    border: 3px solid #34495e;
}

.radius-line {
    position: absolute;
    width: 2px; height: 50%;
    background-color: #333;
    left: 50%; top: 0;
    transform-origin: bottom center;
    transform: translateX(-50%);
}

.dot {
    position: absolute;
    width: 12px; height: 12px;
    background-color: red;
    border-radius: 50%;
    top: 8px; left: 50%;
    transform: translateX(-50%);
}

.simulation-container {
    position: relative;
}

3. JavaScript Logic (`script.js`)

JavaScript controls the interactive behavior:

Initialization: Reference HTML elements and set initial values.
updateGearVisuals(): Adjust the size and position of each gear based on the number of teeth, ensuring they mesh properly.
applyRotation(): Triggered by the "Turn" button, it rotates the gears based on the inputted teeth ratios. It updates the rotation angles and modifies their visual transformations.
resetGears(): Resets the rotation and inputs to default values.
Answer Calculation: Use the Greatest Common Divisor (GCD) and Least Common Multiple (LCM) to calculate the number of turns for alignment.
checkAnswer(): Compares the user's answer with the calculated answer and provides feedback.
Event Listeners: Attach functions to relevant buttons and input changes.

javascript

let currentRotationA = 0, currentRotationB = 0, currentRotationC = 0;
const BASE_RADIUS_PER_TOOTH = 5;

function updateGearVisuals() {
    const teethA = parseInt(teethAInput.value) || 1;
    // ... get teethB, teethC ...

    const radiusA = teethA * BASE_RADIUS_PER_TOOTH;
    // ... calculate radiusB, radiusC ...

    gearA.style.width = gearA.style.height = `\){2 * radiusA}px`;
    gearA.style.left = `\({centerAX - radiusA}px`;
    // ... set styles for B and C ...
}

function applyRotation() {
    const teethA = parseInt(teethAInput.value) || 1;
    // ... get teethB, teethC ...

    const additionalRotationA = 360;
    const additionalRotationB = -additionalRotationA * (teethA / teethB);
    const additionalRotationC = -additionalRotationB * (teethB / teethC);

    currentRotationA += additionalRotationA;
    currentRotationB += additionalRotationB;
    currentRotationC += additionalRotationC;

    gearA.style.transform = `rotate(\){currentRotationA}deg)`;
    gearB.style.transform = `rotate(\({currentRotationB}deg)`;
    gearC.style.transform = `rotate(\){currentRotationC}deg)`;
}

function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }
function lcm(a, b) { return Math.abs(a * b) / gcd(a, b); }

function calculateCorrectAnswer() {
    const teethA = /* ... */; const teethB = /* ... */; const teethC = /* ... */;
    const turnsForB = teethB / gcd(teethA, teethB);
    const turnsForC = teethC / gcd(teethA, teethC);
    return lcm(turnsForB, turnsForC);
}

function checkAnswer() {
    const userAnswer = parseInt(answerA.value);
    const correctAnswer = calculateCorrectAnswer();
    feedbackMessage.textContent = userAnswer === correctAnswer ? "Correct!" : "Try again!";
}

turnButton.addEventListener('click', applyRotation);
resetButton.addEventListener('click', resetGears);
teethAInput.addEventListener('input', updateGearVisuals);
// ... other event listeners ...

Replication Steps

Save the HTML structure in index.html.
Save the CSS in style.css.
Save the JavaScript in script.js.
Open index.html in your browser.

Now, you can experiment with different gear configurations and see how the gears interact and align.

Conclusion

This interactive gear simulation combines HTML for structure, CSS for styling, and JavaScript for dynamic behavior and calculations.

gear_simulation/
gear_simulation_20250421-155059.zip
gear_simulation_sls_20250423-082511.zip

The core mathematical concept involves using the Least Common Multiple (LCM) based on gear teeth ratios to find the point of simultaneous realignment.

For Teachers

[SIMU_TEACHER]

Software Requirements

[SIMU_SWREQ]

Translation

[text]

Research

[text]

Video

[text]

Credits

[SIMU_CREDITS]

Version:

https://weelookang.blogspot.com/2025/04/creating-interactive-gear-simulation.html

Other Resources

[text]

5 1 1 1 1 1 1 1 1 1 1 Rating 5.00 (1 Vote)

Details: Written by Loo Kang Wee; Parent Category: Whole Numbers; Category: 3. Multiplication and Division; Published: 22 April 2025; Created: 25 October 2016; Last Updated: 23 April 2025; Hits: 211

Breadcrumbs