构建自适应下一课程界面
中级~14 分钟0/4 步骤
自适应内容
最好的学习能够满足每位学生的实际需求。在测验中表现出色的学生需要挑战；遇到困难的学生则需要复习。在本课中，你将构建一个自适应的"推荐下一课程"界面，根据学习表现为学生推荐学习路径。
你将创建三张带标签的推荐卡片，分别对应三种表现水平：为需要更多练习的学生提供复习路径，为进度正常的学生提供稳步前进路径，以及为高水平学生提供进阶挑战路径。清晰的标签和颜色提示让正确的选择一目了然。
这正是 AI 构建内容大显身手的地方——没有两个学生会看到完全相同的下一步。按照步骤操作，见证你的自适应界面逐步成形吧！
操作说明
1
添加页面标题"Recommended Next Lesson"以及一段简短的副标题，说明路径会根据表现自动调整。
提示： 使用 `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>`，然后跟上一个 `<p>` 副标题。
这段代码写在哪里？
<!-- Build your adaptive recommendation UI here -->写在第 11 行——在那条注释下方，接在你已经写好的代码后面。
2
创建一个响应式网格容器，用于容纳三张推荐卡片。
3
添加三张 rounded-xl 卡片，每张卡片包含一个表现等级标签 span（例如 "Needs Review"）。
4
为每张卡片添加一个行动按钮，让学生可以开始对应的学习路径。
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：添加页面标题"Recommended Next Lesson"以及一段简短的副标题，说明路径会根据表现自动调整。
实时预览
实时预览