</SUK> ShanUKI VALIDAFORM DOM // Conectar los formularios del OA con JavaScript
0/12

VALIDAFORM DOM

¿Qué es VALIDAFORM DOM? En la práctica anterior programaste la lógica que corrige los formularios del OA, y la página se encargaba de leer el formulario y mostrar el resultado. Ahora esa parte la haces tú, con el DOM: buscas los elementos con document.querySelector, escuchas cuando el estudiante envía o cambia algo con addEventListener, y le muestras el resultado en pantalla con textContent, classList y createElement.

Son 6 niveles con 2 ejercicios cada uno (12 en total), con los mismos formularios que ya conoces. Todos los niveles están abiertos: es una práctica guiada, así que te recomendamos seguir el orden, pero puedes entrar a cualquier nivel cuando quieras.

HTML el formulario (ya hecho)
DOM leer · escuchar · mostrar (lo escribes tú)
Lógica las funciones de la práctica anterior

▶ ¿Cómo funciona el botón "Ejecutar y verificar"?

  1. Tu código se conecta al formulario de la vista previa, como en una página real: desde ese momento, sus botones y campos responden con lo que programaste. Pruébalo tú mismo.
  2. Después VALIDAFORM lo prueba solo, en silencio: completa el formulario con distintas respuestas, lo envía y revisa qué apareció en pantalla (textos, clases, elementos nuevos).
  3. Verás la lista de pruebas: ✅ las que pasan y ❌ las que todavía no.

🧱 Un formulario, dos archivos… y el DOM en el medio

En cada ejercicio ves el formulario (🖥️) y su código (📄 index.html). En el script.js escribes JavaScript tal como funciona en cualquier página:

  1. Leer: document.querySelector("#resultado"), campo.value, :checked, querySelectorAll.
  2. Escuchar: formulario.addEventListener("submit", …) con event.preventDefault(), y también "change" e "input".
  3. Mostrar: textContent, classList.add / remove, document.createElement y appendChild.

Las funciones de lógica de la práctica anterior (corregirMultiple, puntajeVF…) vienen ya escritas cuando las necesitas: ahora el trabajo es conectarlas al formulario.

🎨 Verde y rojo sin tocar colores

El CSS del formulario ya trae dos clases: correcto (verde) e incorrecto (rojo). Para dar feedback visual solo las agregas o sacas con classList, en el resultado, en un combo o en la etiqueta de una casilla.

🧠 Fichas de repaso: el DOM de los formularios

toca cada ficha para voltearla