请根据用户提供的文章和内容制作一个精美的学习测验应用：

【内容要求】

从上述材料中提炼出 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. 所有交互响应灵敏