Créer un tableau de bord de progression de classe
Suivi de la progression des élèves
Savoir en un coup d'œil où en est chaque élève est l'un des outils les plus puissants qu'un enseignant puisse avoir. Un tableau de bord clair transforme une feuille de calcul pleine de chiffres en quelque chose que vous pouvez lire en quelques secondes. Dans cette leçon, vous en construirez un avec l'IA pour vous guider à chaque étape.
Vous créerez un tableau qui liste les élèves, affiche la progression de chacun avec une barre visuelle, et indique leur statut pour que vous voyiez instantanément qui est en avance et qui a besoin d'aide. C'est exactement le genre d'outil que vous pouvez adapter à n'importe quelle classe, n'importe quelle matière.
Suivez les étapes, observez l'aperçu en direct, et vous aurez un tableau de bord que vous pourrez vraiment utiliser dès lundi matin.
Instructions
Ajoutez un titre au tableau de bord avec le texte «Class Progress» dans un conteneur carte avec rounded-xl.
Indice : Enveloppez `<h1>Class Progress</h1>` dans un `<div class="... rounded-xl ...">`.
Où faut-il écrire ça ?
<!-- Build your class progress dashboard here -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Créez un tableau avec des colonnes d'en-tête pour Student, Progress et Status.
Pour chaque ligne d'élève, ajoutez une barre de progression avec un div de remplissage vert dont la largeur reflète leur avancement.
Ajoutez un badge de statut dans chaque ligne avec un span. Faites en sorte qu'au moins un affiche «On Track».
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 au tableau de bord avec le texte «Class Progress» dans un conteneur carte avec rounded-xl.