🚀 PROMPT TEMPLATE para actividad gamificada

 Construye una actividad HTML interactiva single-file siguiendo el sistema 

d3magindesign para el curso "[NOMBRE DEL CURSO]" de la institución 

"[IDC | UTP]", ciclo [CICLO] (ej. 2026-I).

TEMA DEL EJERCICIO:

[Título del tema, ej. "Composición tipográfica: Bringhurst vs Tschichold"]

FUENTES PRIMARIAS (dos):

- Fuente A: [Autor, año, obra, postura central]

- Fuente B: [Autor, año, obra, postura central]

CONTENIDO ESCALAR / TEMÁTICO:

[Descripción del eje conceptual. Ej. "Una escala de 8 niveles de jerarquía 

tipográfica" o "5 categorías de proporción áurea aplicada"]

IMÁGENES DEL SET:

[Adjuntar imágenes con descripción de qué representa cada una. 

Si no hay imágenes, indicar "usar placeholders SVG icónicos"]

PREGUNTA DE REFLEXIÓN FINAL:

[Pregunta abierta que requiera aplicación al campo del estudiante. 

Ej. "¿Cómo aplicarías estas dos visiones en tu próximo proyecto?"]

DATOS DEL DOCENTE:

- Nombre: Mg. Mario R. Quiroz Martínez

- Correo IDC: mquiroz@idc.edu.pe

PLATAFORMA DE ENTREGA:

Q10 (https://idc.q10.com o https://utp.q10.com según institución)

REQUISITOS OBLIGATORIOS:

1. Estructura de 6 bloques pedagógicos (Brandbar / Hero / Instrucciones / 

   Visualizaciones / Galería / Cierre con Reflexión + Certificado + Entrega)

2. Sistema de puntuación 1/0.5/0 por intento

3. Banco mínimo de 15 preguntas con explicación pedagógica

4. Modal de bienvenida bloqueante con captura de nombre

5. Barra de score sticky con avatar, puntos, contador y reset

6. Certificado PDF con html2pdf.js (A4 horizontal, marca d3magindesign)

7. Botón mailto con cuerpo pre-redactado (umbral 70% + 80 palabras)

8. Link externo a Q10 con instrucción de subir PDF

9. Persistencia localStorage con prefijo único del ejercicio

10. Paleta WCAG (#1a4d7c primary, #e65100 fuente A, #388e3c fuente B)

11. Tipografía Syne + DM Sans + DM Mono (CDN Google Fonts)

12. Responsive completo (breakpoints 880px y 520px)

13. @media print para imprimir sin elementos interactivos

14. Skip link de accesibilidad y prefers-reduced-motion respetados

15. Imágenes embebidas en base64 (no rutas externas)

ENTREGABLE:

Un único archivo HTML autocontenido (~1.5 MB con imágenes), sin dependencias externas más allá de Google Fonts, html2pdf.js CDN, y los CSS variables del sistema.