コンテンツへスキップ

ゲーミフィケーション付きレッスンカードを作ろう

初級~12 0/4 ステップ

コンテンツをゲームにしよう

学習がゲームのように感じられると、生徒は集中します。ポイント、進捗、明確なチャレンジがあれば、平凡なレッスンも最後まで取り組む価値のあるものに変わります。このレッスンでは、AIをパートナーにしてゲーミフィケーション付きレッスンカードを作ります。

優れたゲームUIに共通する3つのパーツを組み立てます:努力を報いるポイントバッジ、生徒がどこまで進んだかを示すプログレスバー、そして目標を与えるチャレンジカードです。レッスンが終わる頃には、どのレッスンにも使い回せる再利用可能なコンポーネントが完成します。

完璧なコードを暗記して書く必要はありません。各ステップに従い、ヒントを活用して、ライブプレビューで確認しながら進めましょう。

手順

1

レッスンカードのコンテナを作成します: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 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。

2

明るい黄色の背景を持つspanを使って、生徒のスコアを表示するポイントバッジを追加しましょう。

3

プログレスバーを追加します:グレーのトラックdivの中に、幅が設定された緑の塗りつぶしdivを入れましょう。

4

「Today's Challenge」という見出しテキストと生徒への短い目標を持つチャレンジカードを追加しましょう。

あなたのコード

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

ライブプレビュー

ライブプレビュー