构建班级进度仪表板
入门~13 分钟0/4 步骤
学生进度追踪器
一眼掌握每位学生的学习状态，是教师最强大的能力之一。一个简洁的进度仪表板能把一张数字表格变成几秒钟就能读懂的信息。在本课中，你将在 AI 的引导下一步步构建它。
你将创建一个表格，列出学生姓名，用可视化进度条展示每人的进度，并标注状态标签，让你立刻看出谁进展顺利、谁需要帮助。这种工具可以适用于任何班级、任何科目。
跟着步骤操作，观察实时预览，你将拥有一个周一早上就能真正使用的仪表板。
操作说明
1
在一个 rounded-xl 卡片容器内，添加文字为"Class Progress"的仪表板标题。
提示： 将 `<h1>Class Progress</h1>` 包裹在 `<div class="... rounded-xl ...">` 中。
这段代码写在哪里？
<!-- Build your class progress dashboard here -->写在第 11 行——在那条注释下方，接在你已经写好的代码后面。
2
创建一个表格，包含 Student、Progress 和 Status 三列表头。
3
在每个学生行中，添加一个进度条，用绿色填充 div 的宽度来反映该学生的进度。
4
在每一行中使用 span 添加状态标签，至少有一个显示 "On Track"。
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：在一个 rounded-xl 卡片容器内，添加文字为"Class Progress"的仪表板标题。
实时预览
实时预览