Crea una UI Adaptativa de Próxima Lección
Contenido que se Adapta
El mejor aprendizaje llega a cada estudiante donde está. Un estudiante que dominó el cuestionario necesita un desafío; uno que tuvo dificultades necesita repasar. En esta lección crearás una UI adaptativa de «próxima lección recomendada» que sugiere un camino según el rendimiento.
Crearás tres tarjetas de recomendación etiquetadas, una para cada nivel de rendimiento: un camino de repaso para estudiantes que necesitan más práctica, un camino estable para quienes van bien, y un camino avanzado para los de alto rendimiento. Las etiquetas claras y las señales de color hacen que la elección correcta sea obvia.
Aquí es donde el contenido creado con IA demuestra su valor: no hay dos estudiantes que vean exactamente el mismo próximo paso. Sigue los pasos y observa cómo tu UI adaptativa toma forma.
Instrucciones
Agrega un encabezado de página «Recommended Next Lesson» y un subtítulo corto que explique que el camino se adapta.
Pista: Usa `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` seguido de un subtítulo `<p>`.
¿Dónde va esto?
<!-- Build your adaptive recommendation UI here -->Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.
Crea un contenedor de cuadrícula responsiva para albergar las tres tarjetas de recomendación.
Agrega tres tarjetas rounded-xl, cada una con un span de etiqueta de nivel de rendimiento (por ejemplo, «Needs Review»).
Dale a cada tarjeta un botón de llamada a la acción para que el estudiante pueda comenzar ese camino.
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Agrega un encabezado de página «Recommended Next Lesson» y un subtítulo corto que explique que el camino se adapta.