Qué vas a conseguir
Si quieres aprender a estudiar de la forma mas fácil del mundo, no te puedes perder este caso.
A partir de la transcripción de un vídeo de YouTube, conseguirás un archivo HTML completo con un quiz interactivo de 20 preguntas, animaciones, niveles de puntuación y un resumen visual al final.
Lo descargas, lo abres en el navegador y ya puedes jugar, sin instalar nada, sin registrarte en ningún sitio.
El juego funciona solo, pregunta, corrige, explica, puntúa… y lo puedes compartir por WhatsApp o email con quien quieras.
Cómo hacerlo
PASO 1 — Instala la extensión Scripsy en Chrome
Entra en scripsy.ai desde Chrome y añade la extensión al navegador, es gratuita y tarda menos de un minuto en instalarse.
Scripsy sirve para descargar la transcripción automática de cualquier vídeo de YouTube con un solo clic. Sin ella, tendrías que copiar el texto a mano desde los subtítulos del vídeo, que es un auténtico rollo.
PASO 2 — Abre el vídeo de YouTube y descarga la transcripción
Busca en YouTube un vídeo sobre el tema que quieres estudiar, puede ser una clase, una conferencia, un documental, lo que sea, cuanto más denso en contenido, mejor quiz te va a salir.
Con el vídeo abierto, haz clic en el icono de Scripsy que aparece en la barra del navegador.
La extensión extrae la transcripción completa y te la muestra en pantalla, pulsa el botón de copiar para seleccionarla.
PASO 3 — Abre Claude y pega el prompt con la transcripción
Entra en claude.ai y abre una conversación nueva.
Copia el prompt de abajo, pégalo en el chat y sustituye la parte final donde pone [PEGA AQUÍ LA TRANSCRIPCIÓN COMPLETA] por el texto que acabas de copiar de Scripsy.
No toques nada más del prompt, está diseñado para que Claude analice el vídeo, extraiga los 20 conceptos más importantes y monte el quiz entero.
IMPORTANTE Luego en mejoras aprenderas tips para poder personalizar el quiz a tu gusto, no te preocupes
ANÁLISIS PREVIO
Antes de escribir código, analiza la transcripción e identifica:
El tema principal y la temática exacta del vídeo
Los 20 datos, hechos o conceptos más relevantes y verificables
Un nombre corto y descriptivo para el quiz (máximo 4 palabras)
PREGUNTAS
Genera exactamente 20 preguntas de opción múltiple (4 opciones cada una)
Cada pregunta debe tener UNA respuesta claramente correcta basada en la transcripción
Varía la dificultad: 6 fáciles, 8 medias, 6 difíciles
Las respuestas incorrectas deben ser plausibles pero claramente incorrectas
Incluye una explicación breve (1-2 frases) de por qué la respuesta es correcta
DISEÑO VISUAL
Crea un HTML con este stack:
Google Fonts: Bebas Neue (títulos) + DM Sans (cuerpo)
Tema oscuro: fondo
#0a0a0f, superficies #111118, acento naranja #ff6b35 y violeta #7c5cfcFondo con cuadrícula sutil y halos de color radiales
Sin frameworks externos — CSS y JS puro
ESTRUCTURA DEL ARCHIVO HTML
El archivo debe incluir estas secciones en orden: Durante el juego:
Header con el TEMA DEL QUIZ (no «QUIZ» genérico) + píldora de progreso «X / 20»
Barra de progreso animada con degradado naranja-violeta
Tarjeta de pregunta con número formateado (01, 02…)
4 opciones con letra (A/B/C/D) + animación de entrada escalonada
Hover con desplazamiento lateral y color violeta
Respuesta correcta: borde + fondo verde, animación pulse
Respuesta incorrecta: borde + fondo rojo, animación shake
Explicación animada debajo de las opciones
Botón «Siguiente pregunta →» con degradado
Contador de aciertos en vivo con 20 dots que se colorean Pantalla de resultado (5 niveles según puntuación):
Nivel 1 (0-5): Rookie — color rojo
Nivel 2 (6-9): Aficionado — color ámbar
Nivel 3 (10-13): Conocedor — color azul
Nivel 4 (14-17): All-Star — color violeta
Nivel 5 (18-20): Leyenda — color dorado
Para cada nivel: icono, título en Bebas Neue con color del nivel, tagline, badge animado
Número de puntuación animado (cuenta de 0 al resultado)
Barra de progreso que se rellena con transición lenta
5 indicadores de tier que se iluminan en cascada
Descripción personalizada según nivel
Grid 3 columnas: correctas / falladas / precisión %
Historial visual pregunta a pregunta (22px dots verde/rojo con número)
Botón «JUGAR DE NUEVO» en Bebas Neue con degradado
COMPORTAMIENTO JS
Todo el estado en variables simples (cur, score, answered, history[])
Animación de entrada con slide-in al cambiar pregunta
Animación de número con requestAnimationFrame
Función restart() que resetea todo sin recargar la página
Sin dependencias externas de JS
REQUISITOS TÉCNICOS
Un único archivo .html autocontenido (sin archivos externos salvo Google Fonts)
Compatible con cualquier navegador moderno
Responsive: funciona bien en móvil y escritorio (max-width 640px centrado)
Dark mode nativo (el tema ya es oscuro) TRANSCRIPCIÓN: [PEGA AQUÍ LA TRANSCRIPCIÓN COMPLETA]
PASO 4 — Descarga el archivo HTML y compártelo
Claude tardará entre 20 y 40 segundos en generar el quiz completo, cuando termine abria su visor donde podrás interactuar con el test y también puedes ver el código del archivo HTML si cambias la vista del visor.
Haz clic en el botón de descarga que aparece en la esquina del artefacto para guardarlo en tu dispositivo.
Ya puedes abrirlo con cualquier navegador (Chrome, Safari, Firefox) haciendo doble clic sobre él, el juego arranca directamente, sin internet, sin cuentas, sin nada.
También puedes compartirlo por WhatsApp ya que esta optimizado para móviles, solo tienes que adjuntar el archivo como si fuera una foto o un PDF, la otra persona lo abre y juega en su móvil.
Así puedes usarlo
Para repasar antes de un examen
Buscas en YouTube una clase sobre el tema que entra en el examen, descargas la transcripción y en dos minutos tienes un quiz personalizado sobre exactamente eso.
Nada de temarios genéricos, el juego está hecho con el contenido del vídeo que tú has elegido.
Para que los profesores compartan recursos con sus alumnos
Si eres profesor puedes buscar un vídeo que encaje con la unidad didáctica, generar el HTML con el prompt y mandarlo al grupo de WhatsApp de la clase o por email.
Los alumnos lo abren en el móvil y repasan el contenido jugando, sin apps, sin plataformas, sin contraseñas.
Para opositores que estudian con temario en vídeo
Cualquier canal de YouTube con clases de tu oposición sirve.
Transcripción, prompt, quiz… y con esta sencilla formula puedes hacer uno por tema y usarlos para autoevaluarte.
Cuando empiezas a sacar 18 o más de 20, sabes que ese tema lo tienes controlado.
Mejoras
Una vez tienes el quiz generado, puedes seguir en la misma conversación de Claude para ajustarlo:
Cambiar la dificultad
Si el quiz te ha salido demasiado fácil o demasiado difícil, dile a Claude:
Añadir más preguntas
El prompt genera 20 preguntas, pero si el vídeo es muy largo y hay más contenido:
Entrenar al quiz con información en otro formato
En este ejemplo te he enseñado a entrenarlo con info sacado de YouTube, pero puedes crear quiz con todo tipo de documentación… PDF, DOC, XLS…
Incluso con capturas de pantalla o fotografias.
Combinar varios vídeos
Puedes pegar varias transcripciones en el mismo prompt separadas por un guion y Claude creará un quiz que mezcla el contenido de todas.
Realmente útil cuando un tema se explica en varios vídeos cortos en lugar de uno solo largo.