Interactive learning case study

Interactive math tools that make abstract ideas visible

A selection of working GeoGebra experiences that combine mathematical explanation, guided discovery, practice, animation, and feedback. Each model turns a learning objective into an interaction a student can explore.

  • 4working models
  • Math → interactioncurriculum translation
  • GeoGebra + XMLscripted implementation

The brief

From mathematical objective to student action

My role sits between curriculum, classroom practice, and technical production. I identify what a learner needs to notice, choose an interaction that makes that idea observable, and build the model’s visual states, controls, feedback, animation, and reset logic.

The four examples below use different learning patterns: a guided game, a conceptual simulation, a dynamic explainer, and a discovery activity. Together they show how the same technical environment can support very different instructional purposes.

Learning interaction design GeoGebra construction Scripting & state logic Visual feedback Web packaging

Try the work

Four models, four learning patterns

Select a model to load it in the interactive player. The demos are the working GeoGebra files, not simulated screenshots.

Interactive demo

Bouncing Ball — Signed Numbers as Movement

A guided game that connects addition and subtraction with movement on a number line.

Download .ggb

Loading Bouncing Ball…

Bouncing Ball

Learning purpose: build a visual mental model of signed-number operations. Positive addition moves right; subtraction moves left; later steps reveal why subtracting a negative number reverses that direction.

Interaction pattern: tutorial → prediction → animated jump → flag target → stars and increasing levels.

Average Speed

Learning purpose: make “total distance divided by total time” observable. An imagined constant-speed car starts and finishes with the changing-speed car, giving average speed a concrete meaning.

Interaction pattern: editable values → synchronized animation → symbolic derivation.

Linear Slope

Learning purpose: connect a changing geometric line with slope calculation and point-slope form. Learners can use either defining point as the equation’s reference.

Interaction pattern: drag points → inspect rise/run → see algebra update instantly.

Running Dog

Learning purpose: develop coordinate-plane fluency: x before y, positive and negative directions, and accurate point placement.

Interaction pattern: choose a mystery card → place points → track progress → reveal and animate the picture.

Learning design

Every animation has an instructional job

01

Turn symbols into actions

Movement, position, and timing give learners a physical interpretation before the formal rule is summarized.

02

Keep representations synchronized

Geometry, numerical values, formulas, and animation change together, helping students connect multiple representations.

03

Use feedback as scaffolding

Prompts, visual states, progress counts, and rewards make the next useful action clear without replacing the reasoning.

04

Design for teacher pacing

Reset, replay, draggable values, and staged reveals let a teacher pause, compare cases, and ask for predictions.

Under the hood

GeoGebra as a structured application environment

I treat each .ggb file as a packaged application rather than a static construction. The archive contains a structured XML model, scripts, images, view settings, and reusable interaction logic that can be inspected, tested, and prepared for web delivery.

State and interaction logic

Conditional visibility, tutorial steps, counters, input validation, score logic, resets, and transitions between learning states.

Dynamic mathematical objects

Draggable points, generated values, live equations, synchronized views, calculated positions, and responsive camera behavior.

Animation and feedback

Timed motion, pulsing prompts, staged reveals, visual rewards, and feedback states controlled through GeoGebra scripts.

Web packaging

Model inspection through XML, asset cleanup, exact view sizing, browser embedding, and a lightweight HTML/CSS/JavaScript presentation layer.

  • GeoGebra scripting
  • GeoGebra XML
  • JavaScript API
  • HTML/CSS
  • Conditional state logic
  • Interactive animation

Classroom fit

Reusable in explanation, exploration, and practice

Before

Frame a prediction

The teacher introduces the problem and asks students to anticipate a direction, value, graph, or outcome.

During

Make the idea observable

The model provides a controlled example that can be paused, replayed, adjusted, or explored through student input.

After

Generalize the rule

The visual experience becomes evidence for a mathematical explanation, formula, or strategy students can reuse.

Employer-facing value

What this work demonstrates

These models show my ability to bridge rigorous mathematics, real classroom needs, interaction design, and technical implementation. I can move from a curriculum idea to a working student-facing tool—and reason about the learning experience and the production workflow at the same time.

Technical curriculum development Interactive learning design STEM visualization Educational prototyping

Discuss an EdTech role Download CV