Crea una Tarjeta de Lección Gamificada
Gamifica Tu Contenido
Los estudiantes prestan atención cuando aprender se siente como un juego. Los puntos, el progreso y un desafío claro convierten una lección aburrida en algo que vale la pena terminar. En esta lección construirás una tarjeta de lección gamificada con la IA como tu compañera de construcción.
Ensamblarás tres piezas que comparte toda gran interfaz de juego: una insignia de puntos que recompensa el esfuerzo, una barra de progreso que muestra cuánto ha avanzado el estudiante, y una tarjeta de desafío que le da una meta. Al final tendrás un componente reutilizable que podrás insertar en cualquier lección.
No te preocupes por escribir código perfecto de memoria. Sigue cada paso, apóyate en las pistas y deja que la vista previa en vivo confirme que vas por buen camino.
Instrucciones
Crea el contenedor de la tarjeta de lección: un div con esquinas redondeadas rounded-xl, relleno y un fondo gris oscuro gray-800.
Pista: Usa: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
¿Dónde va esto?
<!-- Build your gamified lesson card here -->Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.
Agrega una insignia de puntos usando un span con fondo amarillo brillante que muestre la puntuación del estudiante.
Agrega una barra de progreso: un div de pista gris que contenga un div de relleno verde con un ancho definido.
Agrega una tarjeta de desafío con el texto de encabezado «Today's Challenge» y una meta breve para el estudiante.
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: Crea el contenedor de la tarjeta de lección: un div con esquinas redondeadas rounded-xl, relleno y un fondo gris oscuro gray-800.