Créer une interface adaptative «Leçon suivante»
Un contenu qui s'adapte
Le meilleur apprentissage rejoint chaque élève là où il en est. Un élève qui a brillé au quiz a besoin d'un défi ; celui qui a eu du mal a besoin d'une révision. Dans cette leçon, vous allez créer une interface adaptative «leçon suivante recommandée» qui suggère un parcours en fonction des performances.
Vous créerez trois cartes de recommandation étiquetées, une pour chaque niveau de performance : un parcours de révision pour les élèves qui ont besoin de plus de pratique, un parcours régulier pour ceux qui avancent bien, et un parcours avancé pour les plus performants. Des étiquettes claires et des repères de couleur rendent le bon choix évident.
C'est là que le contenu créé par l'IA prouve sa valeur — aucun élève ne voit exactement la même prochaine étape. Suivez les étapes et regardez votre interface adaptative prendre forme.
Instructions
Ajoutez un titre de page «Leçon suivante recommandée» et un court sous-titre expliquant que le parcours s'adapte.
Indice : Utilisez `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` suivi d'un `<p>` pour le sous-titre.
Où faut-il écrire ça ?
<!-- Build your adaptive recommendation UI here -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Créez un conteneur de grille responsive pour accueillir les trois cartes de recommandation.
Ajoutez trois cartes rounded-xl, chacune avec un span d'étiquette de niveau de performance (par exemple «Needs Review»).
Donnez à chaque carte un bouton d'appel à l'action pour que l'élève puisse démarrer ce parcours.
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 : Ajoutez un titre de page «Leçon suivante recommandée» et un court sous-titre expliquant que le parcours s'adapte.