Hide Zero Cards 把 1 到十亿之间的任意整数变成一组可拖拽的卡片，每位数字一张，标注该数字的真实值。输入 5,432 会得到写着 5,000、400、30 和 2 的卡片，按数位组着色：个位到百位用红色系，千位用黄色，百万位用绿色，十亿位用蓝色。把卡片拖开，就像亲手把一个数拆成它的数位组成部分。
同名交互是零开关。零的数字会变成写着 0,000 的占位卡而不是数值卡，工具栏的 Zero 按钮可以隐藏或显示这些占位卡，直观呈现「没有这个数位」和「这个数位是零」的区别。骰子按钮按可调范围随机出数，还有 Zero 专注模式，会一直重摇直到数字里包含零，让练习有的放矢。
数字形式对话框用四种方式呈现同一个数：标准式、文字式（通过手写的数字转文字转换器）、单位式（5 个千、4 个百、3 个十、2 个一）、展开式（5,000 + 400 + 30 + 2）。内置指南提供五个课堂活动和测评检查，首次访问有欢迎对话框，学生拼出第一个数字时还有庆祝 toast。
用 Next.js 15、React 19、TypeScript 和 shadcn/ui 构建。拖拽是基于 Pointer Events + pointer capture 手写的 hook，而不是拖拽库，所以卡片对鼠标、触屏和触控笔的响应完全一致。全部源码在 GitHub 公开。
功能
- 1 到 1,000,000,000 的数字输入，移动端数字键盘，千分位分隔符
- 每位数字一张可拖拽卡片，标注数字真实值，按数位组着色
- 零占位卡，带显示/隐藏开关，用于探究零的数位
- Mix 按钮把卡片打散到随机位置，Reset 恢复有序布局
- 随机出数器，范围可调，带 Zero 专注模式
- 数字形式对话框并排展示标准式、文字式、单位式和展开式
- 教学指南，含五个课堂活动和测评检查
- 浅色/深色主题，PWA 支持，偏好本地持久化
常见问题
「hide zero cards」是什么意思？
当数字包含零的数位时，比如 5,043 里的 0，应用会创建一张写着 0,000 的占位卡而不是数值卡。工具栏的 Zero 按钮可以开关这些占位卡，让学生探究「这个数位不存在」和「这个数位是零」的区别。
学生能用多大的数字？
1 到 1,000,000,000（十亿）之间的任意整数，覆盖从个位到十亿位的十个数位。随机出数默认范围是 1 到 1,000,000，最大值可调。
四种数字形式是什么？
数字形式对话框用四种方式呈现同一个数：标准式 (5,432)、文字式（five thousand four hundred thirty-two，由内置转换器生成）、单位式（5 个千、4 个百、3 个十、2 个一）、展开式（5,000 + 400 + 30 + 2）。
拖拽交互是怎么实现的？
拖拽基于 Pointer Events + pointer capture 实现，而不是拖拽库，所以卡片对鼠标、触屏和触控笔的响应完全一致。卡片用 CSS transform 移动，层叠顺序经计算得出。
Hide Zero Cards 还能用吗？
可以，网站在 hidezerocards.org 在线运行，全部源码在 GitHub 公开。