Proyecto · Creador
En vivoHide Zero Cards
Herramienta de valor posicional para matemáticas de 4.º grado
Hide Zero Cards convierte cualquier número entero de 1 a mil millones en un conjunto de tarjetas arrastrables, una por dígito, cada una etiquetada con el valor real del dígito. Escribe 5,432 y obtienes tarjetas que dicen 5,000, 400, 30 y 2, codificadas por color por grupo de posición: rojos para unidades hasta centenas, amarillo para miles, verde para millones, azul para miles de millones. Arrastrar las tarjetas separa físicamente un número en sus componentes de valor posicional.
La interacción que da nombre al proyecto es el interruptor de cero. Un dígito cero se convierte en una tarjeta de marcador que dice 0,000 en lugar de una tarjeta de valor, y el botón Cero de la barra de herramientas oculta o muestra esos marcadores, enmarcando la diferencia entre no tener dígito y tener un dígito cero. Un botón de dados genera números aleatorios con un rango ajustable y un modo de enfoque en cero que sigue generando hasta que el número contiene un cero, para que la práctica ejercite deliberadamente el concepto.
Un diálogo de Formas numéricas renderiza el mismo número de cuatro maneras: Estándar, Palabra (a través de un convertidor propio de número a palabras), Unidad (5 miles, 4 centenas, 3 decenas, 2 unidades) y Expandida (5,000 + 400 + 30 + 2). Una guía dentro de la app agrega cinco actividades de aula y verificaciones de evaluación, con un diálogo de bienvenida en la primera visita y un toast de celebración cuando un estudiante construye su primer número.
Construido con Next.js 15, React 19, TypeScript y shadcn/ui. El arrastre es un hook propio sobre Pointer Events con captura de puntero en lugar de una librería de arrastrar y soltar, para que las tarjetas respondan igual a mouse, tacto y lápiz. El código fuente completo es público en GitHub.
Características
- Entrada de números de 1 a 1,000,000,000 con teclado numérico móvil y separadores de miles
- Una tarjeta arrastrable por dígito, etiquetada con el valor real del dígito y codificada por color por grupo de posición
- Tarjetas de marcador de cero con interruptor para mostrar u ocultar e investigar los dígitos cero
- El botón Mezclar dispersa las tarjetas a posiciones aleatorias; Restablecer restaura el diseño ordenado
- Generador de números aleatorios con rango ajustable y modo de enfoque en cero
- Diálogo de Formas numéricas que muestra las formas Estándar, Palabra, Unidad y Expandida lado a lado
- Guía instructiva con cinco actividades de aula y verificaciones de evaluación
- Temas claro y oscuro, soporte PWA y preferencias guardadas localmente
Preguntas frecuentes
¿Qué significa ocultar las tarjetas de cero?
Cuando un número contiene un dígito cero, como el 0 en 5,043, la app crea una tarjeta de marcador que dice 0,000 en lugar de una tarjeta de valor. El botón Cero de la barra de herramientas alterna estos marcadores, permitiendo a los estudiantes investigar la diferencia entre no tener dígito y tener un dígito cero en una posición.
¿Con qué tamaño de números pueden trabajar los estudiantes?
Cualquier número entero de 1 a 1,000,000,000 (mil millones), abarcando diez valores posicionales desde unidades hasta miles de millones. El generador de números aleatorios va por defecto de 1 a 1,000,000 con un máximo ajustable.
¿Cuáles son las cuatro formas numéricas?
El diálogo de Formas numéricas muestra el mismo número de cuatro maneras: forma Estándar (5,432), forma Palabra (cinco mil cuatrocientos treinta y dos, producida por un convertidor integrado), forma Unidad (5 miles, 4 centenas, 3 decenas, 2 unidades) y forma Expandida (5,000 + 400 + 30 + 2).
¿Cómo funciona la interacción de arrastre?
El arrastre está construido sobre Pointer Events con captura de puntero en lugar de una librería de arrastrar y soltar, para que las tarjetas respondan igual a mouse, tacto y lápiz. Las tarjetas se mueven con transformaciones CSS y un orden de apilamiento calculado.
¿Hide Zero Cards sigue disponible?
Sí, el sitio está en vivo en hidezerocards.org, y el código fuente completo es público en GitHub.