Desafios y lecciones

Tutor IDE ofrece un sistema completo de desafios con tres tipos de tareas: lecciones paso a paso, CSS Battle y lecciones interactivas. Los profesores asignan desafios a los alumnos de forma individual, a grupos o como rutas de aprendizaje completas. Los alumnos resuelven las tareas en el editor, ganan puntos de experiencia y siguen su progreso.

---

Lecciones (desafios estandar)

Las lecciones son tareas de programacion con una plantilla de codigo e instrucciones listas. El alumno abre la leccion, lee las instrucciones y escribe su solucion en el editor.

Como funciona?

1. El profesor asigna una leccion -- elige un desafio y lo asigna a un alumno concreto o a todo un grupo
2. El alumno abre la tarea -- en el panel de control aparece la leccion asignada con instrucciones y codigo de inicio
3. El alumno escribe su solucion -- trabaja en el editor, usa la vista previa en vivo y el asistente de IA
4. El sistema verifica automaticamente -- si el profesor ha configurado reglas de evaluacion automatica, la puntuacion se calcula inmediatamente al enviar la solucion
5. El profesor evalua el trabajo -- revisa la solucion del alumno, agrega anotaciones de revision de codigo y asigna una calificacion

Evaluacion

El profesor evalua cada solucion:

• Puntos (0--100) -- calificacion numerica por la calidad de la solucion
• Comentario -- retroalimentacion escrita, consejos y elogios
• Fecha de entrega -- el profesor puede establecer una fecha limite para completar la tarea
• Evaluacion automatica -- verificacion automatica opcional basada en reglas definidas (ver la seccion Reglas de evaluacion automatica)

El alumno ve su calificacion, el comentario del profesor y las anotaciones del codigo en el panel de control.

Propiedades de los desafios

Cada desafio tiene los siguientes atributos:

• Categoria -- HTML, CSS, JS, HTML+CSS o Python
• Nivel de dificultad -- 1 (principiante), 2 (intermedio), 3 (avanzado)
• Creador (created_by) -- campo que registra quien creo el desafio
• Indicador is_global -- los desafios globales estan disponibles para todas las organizaciones
• Indicador is_active -- permite desactivar un desafio sin eliminarlo

---

CSS Battle

CSS Battle son desafios en los que el alumno reproduce una imagen objetivo usando HTML y CSS. Es una forma excelente de practicar estilos -- el alumno aprende a posicionar elementos, colores, formas y gradientes.

Como es la tarea?

• A la izquierda se muestra la imagen objetivo -- el modelo a reproducir
• A la derecha, el alumno escribe codigo en dos pestanas: index.html y style.css
• Debajo del editor se muestra la vista previa en vivo -- el resultado del codigo del alumno junto al modelo

Archivos de inicio

Cada tarea de CSS Battle comienza con archivos preparados:

• index.html -- <div></div> (un fragmento del body, no un documento completo)
• style.css -- reset del body + selector div vacio, listo para completar

El sistema envuelve automaticamente estos fragmentos en un documento HTML completo para la vista previa.

Configuracion del canvas

Cada tarea de CSS Battle puede tener sus propias dimensiones de canvas:

• Ancho (canvas_width) -- por defecto 400px
• Alto (canvas_height) -- por defecto 300px
• El profesor establece las dimensiones al crear la tarea

Evaluacion automatica

El sistema compara la imagen del alumno con la imagen objetivo pixel por pixel y calcula el porcentaje de coincidencia (0--100%):

• 100% -- perfecto! La imagen del alumno es identica al modelo
• 80--99% -- muy bien, diferencias minimas
• 50--79% -- buen comienzo, pero hay diferencias visibles
• Menos del 50% -- vale la pena intentarlo de nuevo

Bonificaciones de XP en CSS Battle

Los alumnos obtienen puntos de experiencia adicionales por buenos resultados en CSS Battle:

• 90%+ de coincidencia -- bonificacion de +50 XP
• 100% de coincidencia (pixel-perfect) -- bonificacion de +100 XP

Herramientas de ayuda

• Control deslizante de comparacion -- el alumno puede desplazar un control para superponer su imagen sobre el modelo y ver donde estan las diferencias
• Paleta de colores -- los colores usados en la imagen objetivo se muestran como muestras en las que se puede hacer clic, para que el alumno no tenga que adivinar los valores de los colores. Los colores se extraen automaticamente del codigo objetivo.
• Vista previa en vivo -- cada cambio en el codigo actualiza la vista previa al instante

---

Lecciones interactivas

Las lecciones interactivas son un tercer tipo de desafio que combina teoria y practica en una experiencia unica y estructurada. El alumno avanza a traves de bloques de contenido secuenciales, adquiriendo conocimientos y poniendolos a prueba de forma inmediata.

Tipos de bloques

Cada leccion interactiva consta de una secuencia ordenada de bloques:

Bloque de teoria (theory)

• Texto con formato enriquecido con encabezados, listas y resaltados
• Ejemplos de codigo con resaltado de sintaxis
• Ilustraciones y diagramas
• Ideal para introducir un concepto nuevo o explicar una idea

Bloque de cuestionario (quiz)

• Preguntas que verifican la comprension de la teoria
• Diversos formatos de preguntas (opcion unica, opcion multiple)
• Retroalimentacion inmediata despues de responder
• El alumno debe responder correctamente para continuar

Bloque de tarea de codigo (code_task)

• El alumno escribe y ejecuta codigo en el editor
• La tarea esta vinculada a la teoria previamente cubierta
• Verificacion automatica de la correccion de la solucion
• Pistas disponibles si el alumno se queda atascado

Progresion a traves de los bloques

• El alumno avanza por los bloques en un orden fijo -- no se permite saltar adelante
• Cada bloque debe completarse antes de pasar al siguiente
• El progreso se guarda automaticamente -- el alumno puede volver a la leccion en cualquier momento
• Una vez completados todos los bloques, la leccion se marca como finalizada

Ejemplo de flujo de leccion interactiva

Leccion: Introduccion a CSS Flexbox

1. Teoria -- Que es Flexbox? Explicacion de display: flex, eje principal y eje transversal
2. Cuestionario -- "Que propiedad establece la direccion del eje principal?" (pregunta de opcion unica)
3. Tarea -- "Coloca tres elementos en fila usando Flexbox"
4. Teoria -- Las propiedades justify-content y align-items
5. Cuestionario -- "Que valor de justify-content distribuye los elementos de forma uniforme?"
6. Tarea -- "Centra un elemento vertical y horizontalmente en un contenedor"

---

Rutas de aprendizaje

Las rutas de aprendizaje son secuencias ordenadas de desafios que forman un plan de estudios completo. En lugar de asignar desafios individuales, el profesor puede asignar una ruta completa, y el alumno la recorre paso a paso.

Idiomas disponibles

Las rutas de aprendizaje estan disponibles para tres lenguajes de programacion:

• HTML+CSS -- desde los fundamentos de HTML hasta layouts avanzados de CSS
• JavaScript -- desde variables y bucles hasta aplicaciones interactivas
• Python Turtle -- programacion de graficos con tortuga (ideal para los alumnos mas jovenes)

Niveles de dificultad

Cada ruta se divide en tres niveles:

• Principiante -- conceptos fundamentales, tareas sencillas, mucho apoyo
• Intermedio -- tareas mas complejas, menos pistas
• Avanzado -- desafios que requieren pensamiento independiente y creatividad

Mecanismo de puertas (gates)

Ciertos pasos de una ruta estan marcados como puertas (is_gate). Las puertas son tareas clave que el alumno debe completar antes de poder avanzar:

• Las puertas garantizan que el alumno domine los fundamentos antes de pasar a tareas mas dificiles
• El profesor puede ver que alumnos estan atascados en las puertas
• Las tareas entre puertas pueden completarse en cualquier orden

Progreso del alumno

Cada alumno ve su progreso en cada ruta asignada:

• Barra de progreso -- indicador visual del porcentaje de completado de la ruta
• Indicadores de pasos -- cada paso de la ruta tiene su propio marcador (completado, actual, bloqueado)
• Porcentaje de completado -- p. ej., "Has completado 12 de 20 tareas (60%)"

Asignacion de rutas

Los profesores asignan rutas completas a alumnos o grupos:

1. Abre el panel de Desafios en el panel de administracion
2. Selecciona la pestana Rutas de aprendizaje
3. Elige una ruta -- p. ej., "HTML+CSS: Principiante"
4. Asigna a un alumno, un grupo o varios alumnos a la vez
5. Supervisa el progreso -- sigue que alumnos han completado cada paso

Ejemplo de ruta: HTML+CSS para principiantes

Paso	Tipo	Titulo	Puerta?
1	Leccion interactiva	Que es HTML?	No
2	Desafio estandar	Mi primera pagina	Si
3	Leccion interactiva	Etiquetas y atributos	No
4	Desafio estandar	Lista de compras en HTML	No
5	Desafio estandar	Galeria de fotos	Si
6	Leccion interactiva	Introduccion a CSS	No
7	CSS Battle	Cuadrado de colores	No
8	Desafio estandar	Tarjeta de visita con estilo	Si

---

Reglas de evaluacion automatica

Los profesores pueden configurar criterios de evaluacion automatica para cada desafio. El sistema verifica la solucion del alumno inmediatamente despues del envio y calcula una puntuacion basada en las reglas definidas.

Tipos de reglas

Tipo de regla	Descripcion	Ejemplo
output_match	La salida del codigo debe coincidir exactamente con el valor esperado	Salida esperada: Hello World!
contains_element	El codigo HTML debe contener un elemento especifico	Elemento requerido: <ul> con al menos 3 elementos <li>
css_property	Un elemento especifico debe tener una propiedad CSS determinada	El elemento .container debe tener display: flex
code_contains	El codigo fuente debe contener un fragmento especifico	El codigo debe contener addEventListener
regex_match	El codigo o la salida deben coincidir con una expresion regular	Patron: function\s+\w+\(.*\)

Configuracion de reglas

Cada regla tiene:

• Tipo -- uno de los tipos listados arriba
• Valor esperado -- que exactamente debe verificarse
• Puntos -- cuantos puntos obtiene el alumno al cumplir la regla
• Pista (opcional) -- un consejo mostrado al alumno si la regla no se cumple

Ejemplo de configuracion

Desafio: "Crea una lista de compras"

Regla	Puntos	Pista
contains_element: la pagina contiene <ul>	20 pts	"Usa la etiqueta <ul> para crear una lista"
contains_element: la lista tiene al menos 5 elementos <li>	30 pts	"Agrega al menos 5 elementos a la lista"
contains_element: la pagina contiene <h1>	20 pts	"Agrega un encabezado a la pagina"
css_property: ul tiene list-style-type	15 pts	"Cambia el estilo de las vinetas de la lista en CSS"
css_property: body tiene font-family	15 pts	"Establece una fuente personalizada para la pagina"

Flujo de evaluacion automatica

1. El alumno envia su solucion -- hace clic en el boton "Enviar"
2. El sistema verifica las reglas -- cada regla se comprueba individualmente
3. Calculo de la puntuacion -- suma de puntos por las reglas cumplidas
4. Retroalimentacion inmediata -- el alumno ve que reglas cumplio y cuales no (con pistas)
5. El profesor puede anular -- la calificacion manual del profesor siempre tiene prioridad sobre la evaluacion automatica

Vista previa de evaluacion automatica

El profesor puede probar las reglas de evaluacion automatica en cualquier solucion de un alumno:

• Abre la solucion del alumno en el panel
• Haz clic en "Vista previa de evaluacion automatica"
• El sistema muestra que reglas se cumplen y cuales no
• Util para verificar que las reglas estan configuradas correctamente

Evaluacion por lotes

El profesor puede evaluar multiples soluciones a la vez:

• Selecciona alumnos en la tabla
• Haz clic en "Evaluar seleccionados"
• Aplica la evaluacion automatica a todas las soluciones seleccionadas
• Opcionalmente agrega un comentario compartido

---

Revisiones de codigo

Los profesores pueden realizar revisiones detalladas del codigo de las soluciones de los alumnos, agregando anotaciones a lineas especificas del codigo.

Flujo de revision

Cada solucion tiene un estado de revision:

1. Pendiente (pending) -- la solucion ha sido enviada, esperando revision
2. En revision (in_review) -- el profesor ha comenzado a revisar el codigo
3. Completada (completed) -- la revision esta terminada, el alumno puede ver las anotaciones

Anotaciones de codigo

El profesor agrega anotaciones directamente a lineas especificas del codigo del alumno:

Tipos de anotaciones

• Sugerencia (suggestion) -- una propuesta para mejorar el codigo, p. ej., "Podrias usar forEach en lugar de un bucle for"
• Problema (issue) -- un error o problema a corregir, p. ej., "Este selector no apunta al elemento correcto"
• Elogio (praise) -- retroalimentacion positiva, p. ej., "Excelente uso de variables CSS!"

Como lo ve el alumno?

• El alumno abre su solucion en el editor
• Las lineas con anotaciones estan resaltadas con colores:
  • Amarillo -- sugerencia
  • Rojo -- problema
  • Verde -- elogio
• Al hacer clic en una linea resaltada, se muestra el texto de la anotacion
• El alumno puede corregir su codigo en funcion de los comentarios del profesor

Multiples revisiones

Cada solucion puede tener multiples revisiones -- por ejemplo, la primera revision despues del envio inicial, la segunda despues de las correcciones del alumno. El historial de revisiones se conserva, lo que permite seguir el progreso del alumno a lo largo del tiempo.

Ejemplo de flujo de trabajo

1. El alumno envia su solucion para "Galeria de fotos"
2. El profesor abre la solucion y cambia el estado a "En revision"
3. El profesor agrega anotaciones:
   • Linea 5 (problema): "Falta el atributo alt en la etiqueta <img>"
   • Linea 12 (sugerencia): "Usa gap en lugar de margin en Flexbox"
   • Linea 18 (elogio): "Buena seleccion de colores!"
4. El profesor marca la revision como completada
5. El alumno ve las anotaciones en el editor y corrige el codigo
6. El alumno envia la solucion corregida
7. El profesor realiza una segunda revision

---

Libro de calificaciones (Gradebook)

El libro de calificaciones es una vista completa que resume los resultados de todos los alumnos en un solo lugar.

Vista de matriz

El libro de calificaciones muestra los datos en formato de matriz: desafios x alumnos:

• Columnas -- cada desafio es una columna separada
• Filas -- cada alumno es una fila separada
• Celdas -- la puntuacion del alumno para el desafio dado (puntos, porcentaje o estado)

Los colores de las celdas indican el estado:

• Gris -- no asignado o no iniciado
• Amarillo -- en progreso
• Verde -- completado y calificado
• Rojo -- fuera de plazo

Filtrado

El profesor puede filtrar la vista por:

• Desafio -- mostrar solo desafios seleccionados o una ruta completa
• Alumno -- buscar un alumno concreto por nombre
• Estado -- mostrar solo los incompletos, completados o fuera de plazo
• Grupo -- mostrar alumnos de un grupo seleccionado

Exportacion CSV

El profesor puede exportar los datos del libro de calificaciones a un archivo CSV:

• Haz clic en el boton "Exportar CSV"
• El archivo contiene: nombre del alumno, nombre del desafio, puntuacion, fecha de envio, estado
• Ideal para importar a sistemas de calificacion externos u hojas de calculo

Operaciones por lotes

Desde el libro de calificaciones, el profesor puede:

• Evaluar por lotes -- aplicar la evaluacion automatica a multiples soluciones a la vez
• Asignar por lotes -- asignar un desafio a varios alumnos simultaneamente
• Exportar seleccionados -- exportar solo las filas seleccionadas a CSV

---

Gestion de desafios (perspectiva del profesor)

Crear desafios

Los profesores pueden crear sus propios desafios desde el panel de administracion:

1. Abre la pestana Desafios en el panel de administracion
2. Haz clic en "Nuevo desafio"
3. Completa el formulario:
   • Titulo y descripcion de la tarea
   • Categoria (HTML, CSS, JS, HTML+CSS, Python)
   • Nivel de dificultad (1--3)
   • Tipo: leccion estandar, CSS Battle o leccion interactiva
   • Archivos de inicio (plantilla de codigo)
   • Reglas de evaluacion automatica (opcional)
4. Guarda y asigna a los alumnos

Visibilidad de desafios (gestion de dos niveles)

El sistema utiliza una gestion de materiales de dos niveles:

• El propietario de la organizacion crea desafios y los asigna a los profesores
• Los profesores solo ven los desafios que ellos mismos crearon (created_by) o que les fueron asignados por el propietario
• El propietario ve todos los desafios de la organizacion
• Los profesores tambien pueden crear sus propios desafios -- estos seran visibles solo para ellos y el propietario

Esto permite al propietario controlar que materiales estan disponibles para cada profesor, al mismo tiempo que permite a los profesores crear sus propios materiales.

Asignar desafios

1. Abre el Panel de administracion -- ve a la pestana Desafios (Challenges)
2. Elige el tipo -- alterna entre las pestanas Lecciones, CSS Battle y Lecciones interactivas
3. Asigna el desafio -- selecciona un alumno concreto o todo un grupo
4. Establece la fecha limite (opcional) -- define la fecha de entrega de la tarea
5. Revisa el progreso -- consulta las soluciones de los alumnos, sus resultados y estados
6. Evalua el trabajo -- aplica la evaluacion automatica o califica manualmente con comentarios y anotaciones

Vista de resultados

En el panel, el profesor ve:

• La lista de alumnos asignados a un desafio determinado
• El estado de cada alumno: no iniciado, en progreso, completado
• La puntuacion (para lecciones -- calificacion del profesor o evaluacion automatica; para CSS Battle -- resultado automatico)
• Estado de la revision de codigo: pendiente, en revision, completada
• La fecha de entrega del trabajo
• Barra de progreso de la ruta de aprendizaje (si el desafio forma parte de una ruta)

---

Ejemplo de flujo de trabajo

Escenario: Curso de HTML+CSS para una clase

1. El propietario crea una ruta de aprendizaje "HTML+CSS: Principiante" con 20 tareas
2. El propietario asigna la ruta a la profesora Sra. Garcia
3. La Sra. Garcia asigna la ruta a su grupo "Clase 5A"
4. Los alumnos comienzan con el primer paso -- la leccion interactiva "Que es HTML?"
5. Tras completar la leccion interactiva, los alumnos pasan al desafio "Mi primera pagina" (puerta)
6. El sistema evalua automaticamente las soluciones basandose en las reglas de evaluacion automatica
7. La Sra. Garcia realiza revisiones de codigo de las soluciones seleccionadas, agregando anotaciones
8. Los alumnos corrigen su codigo basandose en las anotaciones
9. La Sra. Garcia revisa el progreso en el libro de calificaciones y exporta un informe CSV
10. Los alumnos que completaron la puerta desbloquean automaticamente las siguientes tareas de la ruta