你的第一个互动测验应用
beginner~15 分钟0/4 步骤
你的第一个互动测验应用
讲课是单向的。测验是一场对话。
主动自测的学生比单纯重读的学生多记住 50% 的内容。在本课中，你将构建一个真实可点击的测验应用——包含一道题目、点击后变绿或变红的答案选项、分数计数器和结果提示。它直接在浏览器中运行，无需框架，无需后端，只需 HTML + 一点点 JavaScript。
操作说明
1
添加一个 <h1>，写上你的测验标题——这道测验考查的是什么主题？
提示： 试试：`<h1 class="text-3xl font-bold text-white mb-2">Quick Knowledge Check</h1>`
2
添加一个 <div class="question">，其中包含测验题目的文字内容
3
添加至少 3 个 <button class="answer-btn"> 答案按钮，并在正确答案上标注 data-correct="true"
4
在底部添加一个 <div class="score-counter">，显示"Score: 0"——当点击正确答案时，初始代码中的 JavaScript 会自动更新它
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：添加一个 <h1>，写上你的测验标题——这道测验考查的是什么主题？
实时预览
实时预览