跳转到正文

构建游戏化课程卡片

入门~12 分钟0/4 步骤

让内容变得像游戏一样有趣

当学习感觉像游戏时,学生会更专注。积分、进度和明确的挑战能把枯燥的课程变成值得完成的体验。在本课中,你将以 AI 为搭档,构建一张游戏化课程卡片。

你将组合每个优秀游戏界面都具备的三个要素:奖励努力的积分徽章、展示学生进度的进度条,以及给学生设定目标的挑战卡片。完成后,你将拥有一个可复用的组件,可以嵌入任何课程中。

不用担心凭记忆写出完美的代码。跟着每个步骤走,善用提示,让实时预览确认你走在正确的轨道上。

操作说明

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

实时预览

实时预览