Saltar al contenido
Aula en la nube
Sección 3 · Tu laboratorio

Tu proyecto: el quiz de autoevaluación

Esto es lo que hicimos juntos en el bloque de portátil. Si te lo llevaste funcionando, esta página es tu apunte para adaptarlo a TU tema antes del examen. Si te quedaste a medias, todo está aquí con sus prompts para rematarlo desde casa.

Por qué «quiz web» y no algo más gordo

Paso 0 · Tu encargo (así lo hicimos)

Carpeta ~/ponencia/quiz abierta en VS Code, chat de Copilot, y este encargo (copia y cambia solo el tema):

Crea en esta carpeta un quiz web de autoevaluación sobre [TU TEMA, p. ej. "transformadores y distribución de energía"],
para la oposición de Tecnología Secundaria.

Requisitos duros:
1) Un único index.html + styles.css + quiz.js (sin frameworks, sin build).
2) 8 preguntas tipo test de una sola respuesta, con 2-3 distractores creíbles CADA una
   (no obvios: si no sabías la respuesta, no deberías descartar 3 de 4 al vuelo).
3) Al terminar: puntuación sobre 8, y por cada pregunta incorrecta, 1 línea de
   justificación de por qué era la respuesta correcta (la explicación didáctica es
   tan importante como la pregunta).
4) Diseño digno: 1 sola pregunta visible, botón "Siguiente", barra de progreso,
   tipografía legible, responsive para pantallas táctiles.
5) No uses librerías externas ni CDN: si el tribunal no tiene internet, debe funcionar.

El agente tardó 2–4 min y dejó 3 ficheros en TU carpeta. El tuyo está en ~/ponencia/quiz. No lo borres: es el punto de partida de todo lo que viene.

Paso 1 · Verificar (lo que separa tus defensas)

La parte más importante de toda la sesión. No es opcional: si no verificas, estás defendiendo lo que la IA cree que hace, no lo que hace.

  1. Corre el código: terminal de VS Code → npx serve . (o dobleclick en el index.html). Juega el quiz entero, de principio a fin.
  2. Revisa las 8 preguntas: ¿son creíbles? ¿la respuesta correcta lo es de verdad? Si la IA falló alguna, corrígela tú en el JS y anótala mentalmente para la defensa: «esto lo he verificado y corregido yo».
  3. Busca los fallos clásicos (los que vimos juntos): el distractor «todas las anteriores» que resulta correcto, texto cortado en móvil, el botón que se queda negro tras reiniciar.
  4. Pide al agente cada arreglo por separado: «El botón Reiniciar no limpia el estado: arrégalo sin tocar el resto». Verifica otra vez.

Paso 2 · Mejorar (3 peticiones, en orden)

Estas tres mejoras son las que hicimos en la sesión. Si no llegaste, hazlas ahora — cada una es una petición de chat + verificación:

  1. Modo examen: «Añade un modo examen que oculta las explicaciones hasta el final y guarda mi mejor resultado en localStorage» — demuestra que el programa persiste datos.
  2. Tu marca: «Cambia la estética: sobria, cabecera con el nombre exacto del tema, y al pie mi nombre. Nada de logos ajenos» — tu firma en el código es una señal de autoría.
  3. Compartir resultado: «Añade un botón Compartir que copia al portapapeles el texto para pegar en WhatsApp con mi puntuación» — 15 líneas de JS, 10 segundos de agente.
El truco que no debes olvidar: cuando te atques, no escribas «ayúdame». Escribe «¿por qué hace eso?» o «explícame el bug antes de arreglarlo». Si no entiendes la explicación, sigue preguntando hasta que la entiendas. Eso es el criterio de opositor, y es lo que el tribunal no puede generarte.

Paso 3 · Publicar (que no se quede en el portátil)

  1. Sube a GitHub: repo quiz-oposicion con los 3 ficheros. En el chat: «sube esta carpeta a mi repo quiz-oposicion; no tiene secretos» — la IA guía el git paso a paso.
  2. GitHub Pages: repo → Settings → Pages → desde la rama principal. En 1 min tienes https://TUusuario.github.io/quiz-oposicion/. Ese link va en tu defensa: el vocal lo abre desde su PC sin instalar nada.
  3. Capturas: una del quiz funcionando + una del código en VS Code. Van en la diapositiva de la práctica — venden más que diez párrafos.

✏️ Tu material de repaso

Cierre de la sección: ya sabes programar agéntico — especificar, delegar, verificar, dirigir. En la defensa lo enseñas con el portátil abierto; eso no se imita con diapositivas.
← Sección 2Sección 4 · La práctica y la defensa →