Créer une carte de leçon ludique
Rendez votre contenu ludique
Les élèves sont attentifs quand l'apprentissage ressemble à un jeu. Les points, la progression et un défi clair transforment une leçon ordinaire en quelque chose qui vaut la peine d'être terminé. Dans cette leçon, vous allez créer une carte de leçon ludique avec l'IA comme partenaire de construction.
Vous assemblerez trois éléments que tout grand jeu partage : un badge de points qui récompense l'effort, une barre de progression qui montre le chemin parcouru, et une carte de défi qui donne un objectif à l'élève. À la fin, vous aurez un composant réutilisable que vous pourrez intégrer dans n'importe quelle leçon.
Pas de panique si vous ne savez pas écrire le code de mémoire. Suivez chaque étape, appuyez-vous sur les indices, et laissez l'aperçu en direct confirmer que vous êtes sur la bonne voie.
Instructions
Créez le conteneur de la carte de leçon : un div avec des coins arrondis rounded-xl, du rembourrage et un fond gris foncé gray-800.
Indice : Utilisez : `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Où faut-il écrire ça ?
<!-- Build your gamified lesson card here -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Ajoutez un badge de points en utilisant un span avec un fond jaune vif qui affiche le score de l'élève.
Ajoutez une barre de progression : un div de piste grise contenant un div de remplissage vert avec une largeur définie.
Ajoutez une carte de défi avec le titre «Défi du jour» et un court objectif pour l'élève.
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Créez le conteneur de la carte de leçon : un div avec des coins arrondis rounded-xl, du rembourrage et un fond gris foncé gray-800.