クラス進捗ダッシュボードを作ろう
生徒の進捗トラッカー
全ての生徒の状況を一目で把握できることは、教師にとって最も強力なツールの一つです。すっきりした進捗ダッシュボードは、数字の羅列を数秒で読み取れるものに変えてくれます。このレッスンでは、AIに各ステップをガイドしてもらいながら、そのダッシュボードを作成します。
生徒の一覧を表示し、それぞれの進捗をビジュアルバーで示し、ステータスラベルを付けることで、誰が順調で誰がサポートを必要としているかを瞬時に確認できるテーブルを作ります。これは、どのクラスにも、どの教科にも応用できるツールです。
ステップに従って、ライブプレビューを確認しながら進めましょう。月曜日の朝から実際に使えるダッシュボードが完成しますよ！
手順
「Class Progress」というテキストを持つダッシュボードの見出しを、rounded-xl のカードコンテナの中に追加しましょう。
ヒント： `<h1>Class Progress</h1>` を `<div class="... rounded-xl ...">` の中に入れてみましょう。
どこに書けばいい？
<!-- Build your class progress dashboard here -->11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
Student（生徒）、Progress（進捗）、Status（ステータス）のヘッダー列を持つテーブルを作成しましょう。
各生徒の行に、進捗を反映した幅の緑色の塗りつぶし div を持つプログレスバーを追加しましょう。
各行に span を使ってステータスバッジを追加しましょう。少なくとも一つに「On Track」と表示させてください。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：「Class Progress」というテキストを持つダッシュボードの見出しを、rounded-xl のカードコンテナの中に追加しましょう。