FrogMath: Making Number Theory Amphibious

The Problem

Most students encounter number theory as a wall of abstract symbols—integers, divisibility, gcd, etc. They might learn the Euclidean algorithm without understanding why it works.

FrogMath (the brainchild of Jamie Pommersheim and myself) grounds these concepts in a playful visual model that students can see and interact with before they have to learn formal notation.

The Core Metaphor

We represent the integers as a river of lily pads. Then, we introduce the hoppers: frogs that always hop either direction a certain number of lily pads. For example, the 3-hopping frog always hops a distance of 3 lily pads. Then instead of asking questions like "Does 3 divide 12?", we can ask: "Can a 3-hopper reach lily pad 12?"

The answer is the same, but the question now has a concrete spatial meaning. Students can see the pattern of where a 3-hopper can land. They can explore the space of possibilities, ask interesting questions, and develop intuition in a playful way.

The Four Modes

Single-hopper: Explore the River

Meet single-hoppers and see where they can land. Build intuition for multiples and divisibility through free exploration.

Multi-hopper: Discover Your True Potential

Work with multihoppers: the offspring of a pair of hoppers. Which lily pads can a (5, 7)-multihopper reach? This mode is a series of puzzles that has surprisingly deep connections to the Euclidean algorithm and linear Diophantine equations.

Pond: Hoppin' Around

What happens when the lily pads are arranged in a circle rather than a line? This is a free exploration mode of pond hoppers.

Überhopper: Frogness Idealized

A challenge for advanced students: which lily pads can the überhopper reach? This module teases the idea of quadratic residues.

Bridging to Formal Mathematics

The real pedagogical power comes from the Math Concepts reference sheet, which is a translation between froggish and standard mathematical notation.

We can see:

• "The river" = The set of integers (ℤ)
• "The fly set" = The set of multiples of a hopper's jump size (formally, the ideal aℤ)
• "Alice mimics Bob" = aℤ ⊇ bℤ (equivalently, a divides b)
• "Hop combos" = Linear combinations

We see that froggish is a genuine conceptual scaffold that transfers to formal mathematics.

What Works (and What Doesn't)

Strengths

Spatial (and froggish) intuition is powerful. The frog model is memorable and intuitive. The proof of the linear combination lemma in froggish is frogvious.

Progression from play to proof. Students explore freely in Single-hopper mode, solve structured problems in Multihopper, then see the formal mathematics in the Concepts sheet.

The Euclidean algorithm becomes visible. Finding which pads a multihopper can reach naturally leads to questions about gcd. Students discover the algorithm before being told it.

Limitations

Some concepts don't map naturally. Prime factorization (and multiplication in general) can be less intuitive to represent with hoppers.

The metaphor can create scaffolding debt. At some point, students need to work abstractly with symbols. However, we believe building the intuition first is a richer path.

Technical Implementation

Built with vanilla JavaScript and SVG manipulation for responsive, accessible interaction. The entire app runs client-side with no backend—perfect for classroom use with unreliable internet.

The hopping animations use CSS transforms for smooth, 60fps movement across different devices. Touch and mouse events are handled uniformly so the experience works identically on tablets and desktops.

Try It Yourself

FrogMath is free and open-source. Try it yourself with your students, or just hop around yourself to rediscover number theory through the eyes of a frog. Ribbit!