適応型「次のレッスン」UIを作ろう
適応するコンテンツ
最高の学習体験は、各生徒の現在地に合わせて提供されます。クイズで高得点を取った生徒にはチャレンジが必要で、苦労した生徒には復習が必要です。このレッスンでは、成績に基づいてパスを提案する適応型「おすすめ次のレッスン」UIを作成します。
3つのラベル付き推薦カードを作成します。それぞれのパフォーマンスレベルに対応しています：もっと練習が必要な生徒向けの復習パス、順調に進んでいる生徒向けの標準パス、そして高得点者向けのストレッチパスです。明確なラベルとカラーキューにより、適切な選択が一目でわかります。
ここがAIで構築されたコンテンツの真価が発揮される場面です。同じ次のステップを見る生徒は二人といません。ステップに従って、適応型UIが完成していく様子を見てみましょう。
手順
ページ見出し「Recommended Next Lesson」と、パスが適応することを説明する短いサブタイトルを追加しましょう。
ヒント： `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` の後に `<p>` でサブタイトルを追加してください。
どこに書けばいい？
<!-- Build your adaptive recommendation UI here -->11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
3つの推薦カードを収めるレスポンシブなグリッドコンテナを作成しましょう。
rounded-xl のカードを3つ追加し、それぞれにパフォーマンスレベルのラベルspanを付けましょう（例：「Needs Review」）。
生徒がそのパスを開始できるよう、各カードにコールトゥアクションボタンを追加しましょう。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：ページ見出し「Recommended Next Lesson」と、パスが適応することを説明する短いサブタイトルを追加しましょう。