Este es uno de los primeros proyectos que hice con Claude, ya hace unos meses.
Mi hijo tenía examen de formulación inorgánica: óxidos, hidróxidos, sales, la nomenclatura tradicional mezclada con la sistemática hasta marear a cualquiera. Llevaba dos tardes con los apuntes y cara de pocos amigos, así que en vez de sumar una tercera tarde de libro, cuaderno y papeles monté un quiz. Nada elaborado: un HTML suelto, algo que abriera en el ordenador o móvil y punto.
De los apuntes al quiz en el navegador
La primera versión fue directa al grano: una base de datos de compuestos metida a pelo en el propio archivo (de hecho, se los pasé con una foto de los apuntes), y pregunta con cuatro opciones, aciertas o fallas, siguiente. Carlos Sobera style, 50 por 15, seguro que os acordáis.
Con eso ya tenía algo mejor, pero se quedaba corto para un examen de verdad, así que en la siguiente sesión amplié la base a más de 110 compuestos y añadí niveles de dificultad: Muy Fácil, Fácil, Difícil y un cuarto nivel al que llamé Pesadilla.
El nivel Pesadilla es la parte que más me gusta del proyecto porque resuelve un problema real de estudiar formulación: si las opciones incorrectas son compuestos cualquiera, adivinas por descarte sin saber nada. Así que el algoritmo busca compuestos que compartan el mismo elemento principal que la respuesta correcta, excluyendo oxígeno e hidrógeno por ser demasiado comunes, para que las cuatro opciones sean parecidas de verdad y no puedas tirar de intuición.
La skin de Clash Royale (y una fuente que solo tenía mayúsculas)
Con la mecánica ya funcionando, el siguiente problema no era técnico, era de motivación: mi hijo abría el quiz porque se lo pedía yo, no porque le apeteciera. Así que en vez de tocar la lógica dupliqué el archivo y le puse una especie de skin de Clash Royale, que es lo que juega en el móvil todo el día. Nació game3.html, con los mismos compuestos por debajo pero renombrado como Clash Chemistry: los niveles pasaron a llamarse Arena Principiante, Iniciado, Maestro y Pesadilla, y el texto de instrucciones hablaba de dominar la arena de la nomenclatura en vez de simplemente responder preguntas. 😂
Puedes comprobar qué tal vas de química aquí.
Ese reskin trajo un bug tonto pero revelador: usé Bebas Neue para las fórmulas químicas porque quedaba muy en línea con la estética del juego, y resulta que esa fuente solo tiene mayúsculas. HClO₄ se veía como HCLO4, con los subíndices convertidos en un número plano al lado. Tuve que crear una clase aparte solo para fórmulas y cambiarla a Oswald, que sí respeta minúsculas y subíndices, y dejar Bebas Neue únicamente para los nombres de los compuestos. Anécdotas curiosas, sin más.
Rellenar los huecos y meter presión de verdad
Mientras tanto seguí retocando game2.html por su cuenta, con un rediseño más cuidado: paleta cian y violeta, tipografías Orbitron y Outfit, efectos de sonido y animaciones de brillo, pulso y sacudida al responder. Al probar el nivel Pesadilla con esa base ampliada, algunos elementos con pocos compuestos registrados generaban opciones repetidas o poco creíbles, así que añadí compuestos de oro y flúor para tener margen suficiente en esos casos.
Cada versión salió de un problema concreto de la anterior: pocas preguntas, opciones demasiado fáciles de descartar, poco enganche, fórmulas mal escritas, presión de tiempo. No hubo un plan inicial que contemplara las cuatro fases, solo ir resolviendo lo que fallaba en la siguiente sesión.
Y lo último que hicimos fue una versión con cuenta atrás: incluimos un temporizador de 12 segundos que te obligaba a contestar dentro de ese tiempo. Al final es seguir gamificando buscando la motivación y el pique que facilitara o mejor dicho, propiciara el aprendizaje.
Lo que me quedo de este proyecto pequeño
Ninguna de las versiones sustituye a la otra, y eso me parece la parte más útil: acabé con tres formas distintas de repasar lo mismo, cada una pensada para un momento distinto del estudio. La primera para trabajar sin prisa, la de Clash Royale para que abriera el quiz sin que se lo pidiera (sic), todo con modo Pesadilla para dejar de adivinar por descarte (lo que al final se convirtió en el modo «normal»), y el temporizador.
No hizo falta un plan de proyecto ni una arquitectura pensada de antemano. Cada archivo es independiente, con su CSS y su JS metidos dentro, así que probar una idea nueva era literalmente copiar el archivo anterior y cambiar lo que no funcionaba. Para un proyecto que iba a vivir un par de semanas y luego quedarse ahí sin mantenimiento, ese desprecio por la elegancia técnica fue justo la decisión correcta. 😉
