“UDL is a way to provide children with choices for what they are learning, how they are learning, and how they are showing what they know, as well as a variety of ways to be motivated and challenged.”— Engaging Young Engineers, Second Edition, by Angi Stone-MacDonald, Kristen B. Wendell, Anne Douglass, Mary Lu Love & Amanda Wiehe Lopes
Portfolio concept · HTML game, designed with a 2nd grade teacher
- Audience
- 2nd graders practicing number comparison on their own, and the teachers who run small-group place-value lessons.
- Problem
- In a 2nd grade small group, students could read and build the numbers, but often chose the wrong sign: saying “greater than” while writing <.
- My role
- Observed the lesson with the classroom teacher, then designed and built the game, read-aloud, teacher report and exit ticket with Claude.
- Constraint
- Young readers who need very little text and play on their own, without an adult checking every answer.
- Outcome
- A four-level game that teaches place by place, pairs every sign with its words, and reports first-try accuracy to the teacher.
Pip's Number Garden
A game-based learning garden for 2nd grade math
A cozy, self-paced garden game that helps 2nd graders compare numbers with >, <, and = by reading place value one place at a time. Students compare two numbers in three focused steps: check the biggest place first, decide which number is greater, then pick the sign, which always comes with its words. Every first-try answer earns a seed, and five seeds grow a new plant in their garden. I designed it as a concept for small-group practice, built from what I observed alongside a 2nd grade teacher.
Play the gameMy process
From problem to prototype
Worked alongside a 2nd grade teacher in a small-group place-value lesson and noted where comparing broke down: the sign, more than the place value.
See it DesignMapped each observation to a game feature and to the 2nd grade comparison standard (2.NBT.A.4), with a color, block and label for each place.
See it DevelopBuilt a single-page game with Claude in HTML, CSS and JavaScript: four levels, hints, read-aloud, a teacher report and a printable exit ticket.
See it EvaluateThe teacher played it and gave feedback, and first-try accuracy gates every level and feeds the teacher report.
See itThe Problem
Working alongside a 2nd grade teacher in a small-group place-value lesson, I saw where comparing numbers really broke down. Students could already build three-digit numbers with base-ten blocks, and many knew to start with the hundreds. The trouble came at the last step: a student would say “greater than” and then write the less-than sign. Checking answers one student at a time was slow, so a wrong sign could go unnoticed, and the sentence frame that helps students explain their answer was easy to skip in a busy lesson.
The Solution
I designed a game students can play on their own, built around those moments. Hundreds, tens, and ones each get their own block, color, and label, and students compare one place at a time, starting with the biggest. Every sign button carries its words (“> is greater than”), so the symbol and the language always arrive together, and Pip can read every prompt and the full comparison sentence out loud. Getting 4 of 5 right on the first try unlocks the next level, from two-digit numbers (Sprout) to three-digit numbers with tricky ties (Sunflower).
Analysis
What I saw → what I designed
Every feature in the game answers something I observed alongside a 2nd grade teacher in a small-group place-value lesson.
Students said “greater than” out loud, then wrote the less-than sign.
Every sign button carries its words (“> is greater than”), and the bigger number’s crate lights up, so the symbol and the language always arrive together.
The class’s alligator trick helped students remember which way the sign opens.
Kept the idea as one plain cue, “the open side faces the bigger number,” instead of adding another character to remember.
Students who started with the hundreds got it right, and the teacher planned to reteach by covering the tens and ones so students focus on the hundreds first.
The biggest place lights up first. Students move to the tens only after a tie, then to the ones.
Checking answers one student at a time was slow, so a wrong sign could go unnoticed.
Every student gets instant feedback and a hint on their own screen, and a teacher report shows first-try accuracy by level.
The sentence frame (“___ is greater than ___”) helped students explain their thinking, but it was easy to skip in a busy lesson.
Pip says the full comparison sentence after every answer, and Read to me speaks it out loud.
Students did best when they could see, hear and handle the math, not just listen.
Base-ten blocks, a color and a label for each place, read-aloud, and tap or keyboard play (UDL: multiple means of representation and action).
Two decisions, and why
The class already used an alligator to remember which way the sign opens, and it helped. But the mistake I saw happened after that: a student named the comparison correctly, then wrote the opposite sign. So I kept the alligator's idea as a plain cue and paired every symbol with its words, instead of adding another character to remember.
I also chose a fixed, place-by-place routine over letting students compare however they like. It matches how the teacher planned to reteach, by covering the tens and ones and comparing the hundreds first, so the game and the small group teach the same habit.
Learning objectives
What learners will be able to do
Given two 2- or 3-digit numbers, a 2nd grade student will:
- 01
Compare the numbers starting from the greatest place: hundreds, then tens, then ones.
Practiced as step one of every round: check the biggest place first.
- 02
Decide which number is greater, or whether the two are equal.
Practiced as step two, with a hint from Pip after a wrong answer.
- 03
Choose the correct sign (>, < or =) and say the comparison as a full sentence.
Mastery: 4 of 5 correct on the first try unlocks the next level, from Sprout to Sunflower.
Aligned to Common Core 2.NBT.A.4, part of California's math standards.
Full Development
I built Pip's Number Garden with Claude as a single web page in HTML, CSS, and JavaScript. The visuals follow a concrete → representational → abstract progression: blocks students can count, then a labeled digit for each place, then the sign. Pip, a friendly garden guide, gives a short hint after a wrong answer and lets students try again, while seeds are only earned on the first try so the garden reflects real understanding.
Read to me uses the browser's built-in voice to read every prompt aloud, Calm mode turns off sounds, sparkles and motion, and the whole game can be played with a keyboard. A For grown-ups page explains the design choices, shows a progress report of first-try accuracy by level that teachers can download, and links to a printable exit ticket that checks the same skill on paper.
Accessibility & UDL
Designed so more learners can get in
Built in
- Place value never relies on color alone: hundreds, tens and ones each get their own block, color and written label.
- Read to me reads every prompt, hint and the full comparison sentence out loud, for early and emerging readers.
- Every sign comes with its words, so students practice the language along with the symbol.
- Calm mode turns off sounds, sparkles and motion, and the game respects reduced-motion settings.
- Playable with a keyboard (arrow keys, S for Same, and the sign keys), with screen-reader labels that name each place in every number.
- A hint after every wrong answer, then another try, so mistakes turn into practice instead of a dead end.
Next accessibility pass
- Check every color pair against WCAG 2.2 AA contrast.
- Test the game with a screen reader on a classroom tablet.
- Add a Spanish read-aloud option for English learners.
- Let teachers set a starting level for each student.
Evaluation plan
The game already collects the most honest learning signal for 2nd graders: whether they get it right on the first try. Seeds are only earned on a first-try answer, and the teacher report shows first-try accuracy by level.
Students want to keep playing.
Teacher notes on engagement during independent practice.
PlannedStudents compare by place value, not by guessing.
First-try accuracy by level in the teacher report; 4 of 5 unlocks the next level.
Built into the gameStudents use the place-by-place routine and say the full sentence in class.
The printable exit ticket: which place decides, plus the sentence frame.
PlannedFewer place-value mix-ups across the class.
Exit tickets on comparing three-digit numbers, before and after a few weeks of play.
PlannedTeacher feedback. A 2nd grade teacher I collaborate with played through the game and gave feedback from a classroom point of view. Pip is a portfolio concept that we would bring into small-group practice if approved.