Project · Builder
LiveHide Zero Cards
Place Value Learning Tool for 4th Grade Math
Hide Zero Cards turns any whole number from 1 to one billion into a set of draggable cards, one per digit, each labeled with the digit's true value. Type 5,432 and you get cards reading 5,000, 400, 30, and 2, color-coded by place group: reds for ones through hundreds, yellow for thousands, green for millions, blue for billions. Dragging the cards apart physically separates a number into its place-value components.
The namesake interaction is the zero toggle. A zero digit becomes a placeholder card reading 0,000 instead of a value card, and the Zero toolbar button hides or shows those placeholders, framing the difference between having no digit and having a zero digit. A dice button rolls random numbers with an adjustable range and a Zero-focus mode that keeps re-rolling until the number contains a zero, so practice deliberately exercises the concept.
A Number Forms dialog renders the same number four ways: Standard, Word (through a hand-rolled number-to-words converter), Unit (5 thousands, 4 hundreds, 3 tens, 2 ones), and Expanded (5,000 + 400 + 30 + 2). An in-app guide adds five classroom activities and assessment checks, with a first-visit welcome dialog and a celebratory toast when a student builds their first number.
Built with Next.js 15, React 19, TypeScript, and shadcn/ui. Dragging is a hand-rolled hook on Pointer Events with pointer capture rather than a drag-and-drop library, so cards respond identically to mouse, touch, and stylus. The full source is public on GitHub.
Features
- Number input from 1 to 1,000,000,000 with a mobile numeric keyboard and thousands separators
- One draggable card per digit, labeled with the digit's true value and color-coded by place group
- Zero placeholder cards with a show/hide toggle for investigating zero digits
- Mix button scatters cards to random positions; Reset restores the ordered layout
- Random number roller with adjustable range and a Zero-focus mode
- Number Forms dialog showing Standard, Word, Unit, and Expanded forms side by side
- Instructional guide with five classroom activities and assessment checks
- Light and dark themes, PWA support, and preferences persisted locally
Frequently asked questions
What does 'hide zero cards' mean?
When a number contains a zero digit, like the 0 in 5,043, the app creates a placeholder card reading 0,000 instead of a value card. The Zero toolbar button toggles these placeholders on and off, letting students investigate the difference between having no digit and having a zero digit in a place.
What size numbers can students work with?
Any whole number from 1 to 1,000,000,000 (one billion), spanning ten place values from ones to billions. The random-number roller defaults to 1 through 1,000,000 with an adjustable maximum.
What are the four number forms?
The Number Forms dialog shows the same number four ways: Standard form (5,432), Word form (five thousand four hundred thirty-two, produced by a built-in converter), Unit form (5 thousands, 4 hundreds, 3 tens, 2 ones), and Expanded form (5,000 + 400 + 30 + 2).
How does the drag interaction work?
Dragging is built on Pointer Events with pointer capture rather than a drag-and-drop library, so cards respond to mouse, touch, and stylus identically. Cards move with CSS transforms and a computed stacking order.
Is Hide Zero Cards still available?
Yes, the site is live at hidezerocards.org, and the full source code is public on GitHub.