Instruction
请根据用户提供的文章和内容制作一个精美的学习测验应用：
【内容要求】
从上述材料中提炼出 20 道单选题：
- 每道题考察一个核心知识点
- 难度分布：简单（8题）、中等（8题）、困难（4题）
- 每题有 4 个选项（A/B/C/D）
- 只有 1 个正确答案
- 提供详细的答案解析（50-100字）
【视觉设计规范 - 清新可爱风格】
1. 整体布局：
- 页面背景：柔和渐变（#e8eef5 → #d4dce8 → #c8d4e3）
- 添加可爱的装饰元素：
* 页面四周散落小图标（问号、星星、铅笔、灯泡等）
* 使用柔和的颜色装饰
* 简单的几何图案（圆点、加号）
- 居中显示题目卡片
2. 题目卡片样式：
- 卡片尺寸：宽度 700px，最大高度根据内容自适应
- 圆角：24px
- 背景：白色 (#ffffff)
- 阴影：0 8px 24px rgba(0,0,0,0.12)
- 卡片顶部装饰条：
* 高度 8px
* 根据题目难度显示不同颜色：
- 简单：浅绿色 (#aaf0d1)
- 中等：浅黄色 (#ffd96a)
- 困难：浅粉色 (#ff9999)
3. 卡片内部布局（从上到下）：
- 顶部区域（内边距 30px）：
* 题号标签（左上角）：
- 圆角矩形
- 背景：浅蓝色 (#a8d8ea)
- 文字："第 5 题"，14px，字重 600，白色
- 内边距 8px 16px，圆角 12px
* 难度标签（题号旁边）：
- 小圆角标签
- 背景色根据难度：简单（绿）、中等（黄）、困难（粉）
- 文字："★ 简单" / "★★ 中等" / "★★★ 困难"
- 字体 12px
- 题目区域（内边距 30px）：
* 题目文字：
- 字体大小 24px
- 字重 600
- 颜色 #2c3e50
- 行高 1.6
- 底部边距 30px
- 选项区域（内边距 30px）：
* 4个选项，垂直排列
* 每个选项间距 15px
* 选项样式：
- 圆角矩形按钮
- 宽度 100%，高度自适应（最小 60px）
- 圆角 16px
- 背景：#f8f9fa（未选中状态）
- 边框：2px solid #e9ecef
- 内边距 20px
- 左侧：选项标签（A/B/C/D）
· 圆形，直径 36px
· 背景：白色
· 文字：18px，字重 700，颜色 #5b9bd5
- 右侧：选项文字
· 字体 18px，字重 400，颜色 #2c3e50
· 左对齐
* 选项交互状态：
- 未选中 + 悬停：
· 背景 #e8f4f8
· 边框 #5b9bd5
· 光标 pointer
· 轻微放大（scale 1.02）
- 已选中（等待提交）：
· 背景 #d4e8f7
· 边框 2px solid #5b9bd5
· 选项标签背景 #5b9bd5，文字白色
- 答对后：
· 背景 #d4f4dd（浅绿）
· 边框 2px solid #52c41a（绿色）
· 选项标签背景 #52c41a，文字白色
· 右侧显示 ✓ 图标
- 答错后：
· 当前选项：背景 #ffe6e6（浅红），边框 #ff4d4f（红色）
· 正确选项：背景 #d4f4dd（浅绿），边框 #52c41a（绿色）
· 错误选项右侧显示 ✗ 图标
· 正确选项右侧显示 ✓ 图标
- 解析区域（答题后显示）：
* 背景：#f0f9ff（浅蓝）
* 圆角 16px
* 内边距 25px
* 边距：上 20px
* 图标 + 文字：
- 如果答对：绿色灯泡图标 + "回答正确！"（绿色文字）
- 如果答错：橙色灯泡图标 + "答错了，再接再厉"（橙色文字）
* 答案解析：
- 标题："答案解析"，16px，字重 600，颜色 #2c3e50
- 解析文字：16px，字重 400，颜色 #475569，行高 1.8
- 正确答案高亮：用浅蓝色背景标注
4. 按钮设计：
- 提交答案按钮（选择选项后出现）：
* 位置：选项区域下方，居中
* 宽度 200px，高度 48px
* 圆角 24px
* 背景：linear-gradient(135deg, #5b9bd5 0%, #4a8bc2 100%)
* 文字："提交答案"，16px，字重 600，白色
* 阴影：0 4px 12px rgba(91,155,213,0.3)
* 悬停：轻微放大（scale 1.05）+ 阴影加深
- 下一题按钮（答题后出现）：
* 样式同提交按钮
* 文字："下一题 →"
* 位置：解析区域下方，右对齐
5. 进度指示（卡片上方）：
- 进度文字：
* "第 5 题 / 共 20 题"
* 字体 20px，字重 600
* 颜色 #2c3e50
- 进度条：
* 宽度 700px（与卡片同宽）
* 高度 10px，圆角 5px
* 背景：rgba(91,155,213,0.2)
* 填充：linear-gradient(90deg, #5b9bd5, #4a8bc2)
* 平滑过渡动画 0.3秒
- 答题统计（进度条右侧）：
* 显示正确/错误数量
* 图标 + 数字
* ✓ 绿色：正确 5 题
* ✗ 红色：错误 2 题
6. 动画效果：
- 题目切换：
* 当前题目淡出 + 向左滑出
* 新题目从右侧淡入 + 滑入
* 时长 0.4秒
- 选项点击：
* 轻微缩放反馈（scale 0.98 → 1.02）
* 背景颜色平滑过渡
- 答题结果：
* 答对：绿色波纹扩散动画
* 答错：红色抖动动画（轻微左右晃动）
* 解析区域从上往下滑入
- 进度条更新：
* 填充动画，0.5秒
- 按钮悬停：
* 放大 1.05 倍
* 阴影加深
* 过渡 0.2秒
7. 完成页面（答完所有题后）：
- 显示测验结果卡片：
* 样式同题目卡片
* 居中显示
- 顶部：大号祝贺图标（Trophy 或 Award）
* 尺寸 80px
* 颜色根据分数：
- 90-100分：金色 #ffd700
- 70-89分：银色 #c0c0c0
- 60-69分：铜色 #cd7f32
- <60分：灰色 #95a5a6
- 成绩显示：
* "你的得分"
* 大号分数：80 / 100
* 字体 48px，字重 700
- 详细统计：
* 正确题数：✓ 16 / 20
* 错误题数：✗ 4 / 20
* 正确率：80%
* 用时：5分32秒
- 评价文字：
* 根据分数显示不同评语：
- 90-100分："太棒了！你完全掌握了这些知识！🎉"
- 70-89分："做得很好！继续保持！💪"
- 60-69分："还不错，再复习一下会更好！📚"
- <60分："别灰心，重新学习后再试试！💡"
- 操作按钮：
* "查看错题"按钮（如果有错题）
* "重新测验"按钮
* "返回学习"按钮
8. 错题列表页面（可选）：
- 显示所有答错的题目
- 每道错题显示：
* 题目内容
* 你的答案（红色标注）
* 正确答案（绿色标注）
* 详细解析
- 样式同题目卡片，垂直排列
【配色方案】
- 主色：#5b9bd5（蓝色）
- 成功色：#52c41a（绿色）
- 错误色：#ff4d4f（红色）
- 警告色：#faad14（橙色）
- 背景：#e8eef5（浅蓝灰）
- 卡片：#ffffff（白色）
- 文字：
* 主要：#2c3e50
* 次要：#7f8c8d
- 难度颜色：
* 简单：#aaf0d1（浅绿）
* 中等：#ffd96a（浅黄）
* 困难：#ff9999（浅粉）
【技术要求】
- 使用纯 HTML + CSS + JavaScript
- 从 CDN 引入 lucide icons：
https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js
- 使用 Flexbox 布局
- 题目数据用 JavaScript 数组存储
- 实时计算和显示分数
- 响应式设计，移动端适配
【交互逻辑】
1. **选择选项** → 选项高亮，显示"提交答案"按钮
2. **点击提交** → 判断对错，显示结果和解析，出现"下一题"按钮
3. **答对** → 选项变绿色，显示 ✓，累计正确数，显示解析
4. **答错** → 错误选项变红色显示 ✗，正确选项变绿色显示 ✓，累计错误数，显示解析
5. **点击下一题** → 切换到下一题，重置状态
6. **完成所有题** → 显示成绩页面，统计得分和用时
7. **查看错题** → 显示所有答错的题目列表
8. **重新测验** → 重置所有数据，从第1题开始
【额外功能】
- 计时器：记录答题总用时
- 键盘支持：数字键 1-4 选择选项，Enter 提交，→ 下一题
- 答题进度持久化（使用 localStorage，可选）
- 答题历史记录（可选）
- 打印成绩单功能（可选）
请生成完整的 HTML 文件（包含内嵌的 CSS 和 JavaScript），确保：
1. 清新可爱的视觉风格，与学习闪卡风格一致
2. 答对答错有明确的视觉反馈
3. 流畅的动画过渡
4. 详细的答案解析
5. 完整的测验流程
6. 所有交互响应灵敏
Agent
