Gamificación

Aprender a programar en Tutor IDE no es solo escribir código — también es ganar puntos de experiencia, subir de nivel, coleccionar logros, jugar minijuegos educativos, completar misiones diarias y competir con los compañeros en la tabla de clasificación. El sistema de gamificación convierte cada lección en una aventura.

Puntos de experiencia (XP)

Por cada actividad en la plataforma, el alumno gana puntos de experiencia (XP). Cuanto más crea y aprende el alumno, más rápido sube su nivel.

¿Cómo ganar XP?

Actividad	Puntos XP
Crear un nuevo proyecto	50 XP
Completar un desafío (lección)	100 XP
Completar un CSS Battle	75 XP
CSS Battle — puntuación 90%+	+50 XP bonus
CSS Battle — puntuación 100%	+100 XP bonus
Conversar con el asistente de IA	5 XP por mensaje (límite diario)
Publicar un proyecto en el portafolio	25 XP
Minijuego — nivel Fácil	15 XP
Minijuego — nivel Medio	30 XP
Minijuego — nivel Difícil	50 XP
Minijuego — 3 estrellas (perfecto)	+25 XP bonus

Los XP de los minijuegos solo se otorgan cuando el alumno supera su mejor puntuación anterior en ese juego y nivel de dificultad.

Niveles

Los puntos XP se traducen en niveles — desde el nivel 1 hasta el nivel 50. Cada nivel requiere más puntos:

Nivel	XP requeridos
Nivel 1	0 XP
Nivel 2	100 XP
Nivel 3	250 XP
Nivel 5	1 000 XP
Nivel 10	5 000 XP
Nivel 20	25 000 XP
Nivel 50	500 000 XP

El nivel actual y la insignia de nivel son visibles en el perfil del alumno y en la tabla de clasificación.

Rachas (Streaks)

Iniciar sesión a diario crea una racha de actividad. Cada día consecutivo incrementa el contador de la racha — solo tienes que iniciar sesión y realizar cualquier actividad.

• El icono de fuego muestra la racha actual
• El sistema también recuerda la racha más larga del alumno
• Mantener la racha durante varios días seguidos desbloquea logros especiales

Minijuegos educativos

En la página /learn encontrarás 4 minijuegos educativos que hacen que aprender HTML y CSS sea aún más divertido. Cada juego tiene 3 niveles de dificultad y un sistema de estrellas — con un total de 36 estrellas por conseguir.

Juegos disponibles

Quiz del Maestro HTML

Un quiz de opción múltiple que pone a prueba tus conocimientos de HTML. Las preguntas cubren etiquetas, atributos, estructura de documentos y buenas prácticas. Cada nivel de dificultad tiene preguntas diferentes y cada vez más avanzadas.

Cazador de Bugs

Un juego donde el alumno debe encontrar y corregir errores en código roto. Recibes un fragmento de código con errores introducidos intencionalmente — tu trabajo es localizarlos y corregirlos. Cuanto más difícil es el nivel, más errores y más ingeniosas son las trampas.

Constructor de Tags

Construye elementos HTML correctos a partir de piezas. El juego presenta un conjunto de componentes (etiquetas de apertura, etiquetas de cierre, atributos, contenido) — y tú debes ordenarlos correctamente. Una forma perfecta de aprender la estructura de los elementos HTML.

Estilista CSS

Combina estilos CSS con objetivos visuales. El juego muestra la apariencia objetivo de un elemento — y tú debes escribir las reglas CSS apropiadas para reproducir ese aspecto. Practica colores, márgenes, padding, fuentes y otras propiedades CSS.

Niveles de dificultad

Cada juego tiene 3 niveles de dificultad que se desbloquean progresivamente:

Nivel	Color	Condición de desbloqueo
Fácil	Verde	Desbloqueado por defecto
Medio	Ámbar	Requiere al menos 1 estrella en Fácil
Difícil	Rojo	Requiere al menos 1 estrella en Medio

Sistema de estrellas

Al completar un juego, el alumno recibe de 0 a 3 estrellas según su puntuación:

Estrellas	Puntuación
0 estrellas	menos del 50%
1 estrella	50% — 79%
2 estrellas	80% — 94%
3 estrellas	95% — 100%

XP de los minijuegos

Nivel de dificultad	XP
Fácil	15 XP
Medio	30 XP
Difícil	50 XP
Bonus por 3 estrellas (perfecto)	+25 XP

Los XP solo se otorgan cuando el alumno supera su mejor puntuación anterior. Jugar el mismo nivel varias veces no da XP adicional a menos que el alumno obtenga una puntuación más alta que antes.

Seguimiento del progreso

• Las estrellas y las mejores puntuaciones se guardan por separado para cada juego y cada nivel de dificultad
• En la página de selección de juegos, una barra de progreso muestra el número total de estrellas conseguidas (X/36)
• Cada tarjeta de juego muestra indicadores de estrellas para cada nivel de dificultad

Total: 4 juegos x 3 niveles de dificultad = 12 modos de juego, hasta 36 estrellas por conseguir.

Misiones diarias (Daily Quests)

Las misiones diarias son objetivos a nivel de organización que se renuevan cada día. Proporcionan motivación extra para volver a la plataforma regularmente y completar metas a corto plazo.

Ejemplos de misiones diarias

• Completar una lección
• Escribir X líneas de código
• Ganar X puntos de XP
• Mantener la racha de inicio de sesión
• Crear un nuevo proyecto

¿Cómo funcionan?

• Las misiones se renuevan a diario
• Los profesores configuran qué misiones están activas para su organización
• Una vez que se cumple la condición, la misión se marca como completada
• Completar las misiones diarias ayuda a crear el hábito de aprender regularmente

Panel de padres

Los padres pueden ver el progreso de su hijo a través de un enlace seguro basado en token — sin necesidad de crear una cuenta ni iniciar sesión.

¿Cómo funciona?

1. El alumno genera un enlace de invitación desde su Panel de Control (Dashboard)
2. El alumno comparte el enlace con su padre o madre
3. El padre/madre abre el enlace en el navegador — no necesita cuenta ni inicio de sesión
4. El padre/madre ve el progreso del hijo en una vista segura de solo lectura

¿Qué pueden ver los padres?

• XP actual y nivel
• Racha de actividad
• Lista de proyectos
• Logros obtenidos
• Estadísticas generales del progreso

Gestión de enlaces

• Los alumnos pueden generar múltiples enlaces para diferentes padres/tutores
• Cada enlace se puede revocar (invalidar) en cualquier momento
• Los enlaces son únicos y seguros — solo la persona que tiene el enlace puede acceder

Logros

En la plataforma esperan 44 logros en 10 categorías. Cada logro se desbloquea automáticamente al cumplir la condición, y el alumno recibe una notificación en pantalla. Cada logro tiene su propia imagen de insignia (badge) única generada por IA.

Proyectos (5)

• Primer proyecto (first-project) — crea tu primer proyecto
• Constructor (builder) — crea 5 proyectos
• Arquitecto (architect) — crea 10 proyectos
• Fábrica de código (code-factory) — crea 25 proyectos
• Máquina de código (code-machine) — crea 50 proyectos

Desafíos (5)

• Primer desafío (first-challenge) — completa tu primer desafío
• Resuelve problemas (problem-solver) — completa 5 desafíos
• Maestro de desafíos (challenge-master) — completa 10 desafíos
• Campeón de desafíos (challenge-champion) — completa 25 desafíos
• Leyenda de lecciones (lesson-legend) — completa 50 desafíos

CSS Battle (5)

• Pixel Perfect (pixel-perfect) — obtén 100% en un CSS Battle
• Francotirador de píxeles (pixel-sniper) — obtén 100% en 3 CSS Battles
• Máquina de píxeles (pixel-machine) — obtén 100% en 5 CSS Battles
• Guerrero CSS (css-warrior) — completa 5 tareas de CSS Battle
• Leyenda CSS (css-legend) — completa 10 tareas de CSS Battle

Rachas (5)

• En racha (on-fire) — mantén una racha de 3 días seguidos
• Comprometido (dedicated) — mantén una racha de 7 días seguidos
• Imparable (unstoppable) — mantén una racha de 14 días seguidos
• Mes de código (month-of-code) — mantén una racha de 30 días seguidos
• Maratón de código (code-marathon) — mantén una racha de 60 días seguidos

Tutor de IA (4)

• Primer chat (first-chat) — inicia una conversación con el asistente de IA
• Mente curiosa (curious-mind) — envía 50 mensajes al asistente de IA
• Explorador de IA (ai-explorer) — envía 200 mensajes al asistente de IA
• Cerebro de IA (ai-mastermind) — envía 500 mensajes al asistente de IA

Social / Publicaciones (3)

• ¡Publicado! (published) — publica tu primer proyecto
• Escaparate (showcase) — publica 5 proyectos
• Portfolio Pro (portfolio-pro) — publica 10 proyectos

Niveles (5)

• Estrella en ascenso (rising-star) — alcanza el nivel 5
• La cosa se pone seria (getting-serious) — alcanza el nivel 10
• A medio camino (halfway-there) — alcanza el nivel 25
• Programador de élite (elite-coder) — alcanza el nivel 40
• Nivel máximo (max-level) — alcanza el nivel 50

Tabla de clasificación (3)

• Top 3 (top-3) — termina entre los 3 primeros en la tabla de clasificación
• Número uno (number-one) — alcanza el 1er lugar en la tabla de clasificación
• Líder de rachas (streak-leader) — ten la racha más larga de tu organización

Juegos (7)

• Jugador principiante (game-starter) — completa tu primer minijuego
• Maestro de juegos (game-master) — consigue 3 estrellas en 10 juegos
• Domador de tortugas (turtle-tamer) — completa todos los niveles de dificultad en el juego Turtle
• Mago de los colores (color-wizard) — consigue una puntuación perfecta en el juego de colores
• Ninja del Flexbox (flexbox-ninja) — domina todos los desafíos de Flexbox
• Demonio de la velocidad (speed-demon) — completa un juego en tiempo récord
• Exterminador de bugs (bug-exterminator) — encuentra y corrige 50 errores en el Cazador de Bugs

Especiales (2)

• ¡Bienvenido! (welcome) — inicia sesión por primera vez
• Early Adopter (early-adopter) — logro secreto para los primeros usuarios

Tabla de clasificación

Los alumnos pueden comparar sus resultados con los de sus compañeros de la organización en la tabla de clasificación.

¿Cómo funciona el ranking?

• El ranking incluye a todos los alumnos de la organización (escuela o grupo)
• Los alumnos se ordenan por la cantidad de puntos XP obtenidos
• Los tres primeros lugares están destacados con medallas: oro, plata y bronce
• La posición del alumno actual siempre está resaltada, aunque esté lejos en el ranking

Filtros de tiempo

La tabla de clasificación se puede filtrar por período:

• Esta semana — quién ganó más XP esta semana
• Este mes — ranking mensual
• Desde el inicio — ranking acumulado desde la creación de la cuenta

Gracias a los filtros, incluso los alumnos nuevos tienen la oportunidad de llegar al podio en el ranking semanal.