ゲーミフィケーション付きレッスンカードを作ろう
コンテンツをゲームにしよう
学習がゲームのように感じられると、生徒は集中します。ポイント、進捗、明確なチャレンジがあれば、平凡なレッスンも最後まで取り組む価値のあるものに変わります。このレッスンでは、AIをパートナーにしてゲーミフィケーション付きレッスンカードを作ります。
優れたゲームUIに共通する3つのパーツを組み立てます:努力を報いるポイントバッジ、生徒がどこまで進んだかを示すプログレスバー、そして目標を与えるチャレンジカードです。レッスンが終わる頃には、どのレッスンにも使い回せる再利用可能なコンポーネントが完成します。
完璧なコードを暗記して書く必要はありません。各ステップに従い、ヒントを活用して、ライブプレビューで確認しながら進めましょう。
手順
レッスンカードのコンテナを作成します:rounded-xlの角丸、パディング、ダークグレー(gray-800)の背景を持つdivを追加しましょう。
ヒント: こちらを使ってください:`<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
どこに書けばいい?
<!-- Build your gamified lesson card here -->11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
明るい黄色の背景を持つspanを使って、生徒のスコアを表示するポイントバッジを追加しましょう。
プログレスバーを追加します:グレーのトラックdivの中に、幅が設定された緑の塗りつぶしdivを入れましょう。
「Today's Challenge」という見出しテキストと生徒への短い目標を持つチャレンジカードを追加しましょう。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:レッスンカードのコンテナを作成します:rounded-xlの角丸、パディング、ダークグレー(gray-800)の背景を持つdivを追加しましょう。