概述
Perihelion 的 Quiz 组件支持在 Markdown 文章中直接嵌入交互式问卷与测验。通过 data-style 属性，你可以选择三种预设样式：
- Survey（量表问卷）：默认样式。适用于 Likert 量表类心理测评，支持统一刻度、反向计分和分数段结果解读。
- Correct（知识测验）：适用于有标准答案的客观题，选择后即时显示对错，统计正确数。
- Personality（性格测试）：适用于无正误之分的人格/偏好类测试，统计各分类占比并可视化展示。
所有样式均支持 LocalStorage 自动保存、进度条、暗色模式与打印优化。
样式一：Survey（量表问卷）
这是默认样式，无需指定 data-style（或设为 data-style="survey"）。每道题共用相同的评分刻度，最终求和计算总分。
关键属性
| 属性 | 说明 | 示例 |
|---|---|---|
data-title | 问卷标题 | data-title="压力感知量表" |
data-description | 说明文字 | data-description="回顾过去一周..." |
data-scale | 评分刻度定义 | data-scale="1=完全不符,2=不太符合,3=一般,4=比较符合,5=完全符合" |
data-results | 分数段→结果 | data-results="5-11=压力较低,12-18=压力中等,19-25=压力较高" |
data-reversed | 反向计分题号 | data-reversed="2,4" |
实例：生活满意度简易量表
以下是一个 5 题的生活满意度评估量表（改编自 SWLS），使用 1-5 分制。
Markdown 写法
<div class="perihelion-quiz"
data-style="survey"
data-title="生活满意度量表 SWLS-5"
data-description="请根据实际感受选择分数。1=完全不符，5=完全符合。"
data-scale="1=完全不符,2=不太符合,3=一般,4=比较符合,5=完全符合"
data-results="5-9=较低满意度,10-14=低于平均,15-19=平均水平,20-22=较高满意度,23-25=非常满意">
<div class="quiz-item">题目文本</div>
<div class="quiz-item">题目文本</div>
</div>提示：如果需要某些题目反向计分（例如消极题），添加
data-reversed="2,4"即可。系统会自动将这些题目的选项值用最大刻度值 - 选中值计算。
样式二：Correct（知识测验）
设置 data-style="correct" 启用。适用于每道题有唯一正确答案的客观知识测验。选中后立即反馈对错，并高亮正确答案。
关键属性
| 属性 | 说明 | 示例 |
|---|---|---|
data-style | 必须设为 correct | data-style="correct" |
data-title | 测验标题 | data-title="天文学常识测验" |
data-answer（在 quiz-item 上） | 正确答案的 value | data-answer="B" |
每个 quiz-item 内部通过 <span class="quiz-option" data-value="X"> 定义选项。
实例：天文学常识测验
来测试一下你的天文学知识！每道题只有一个正确答案，选择后会立即显示结果。
Markdown 写法
<div class="perihelion-quiz" data-style="correct" data-title="测验标题">
<div class="quiz-item" data-answer="B">
题目文本
<span class="quiz-option" data-value="A">选项 A</span>
<span class="quiz-option" data-value="B">选项 B（正确答案）</span>
<span class="quiz-option" data-value="C">选项 C</span>
</div>
</div>提示：
data-answer的值必须与某个quiz-option的data-value一致。选中后该题即锁定，不可更改。
样式三：Personality（性格测试）
设置 data-style="personality" 启用。适用于无标准答案的性格/偏好测试。每个选项对应一个分类标签，最终统计各分类出现次数并以条形图展示。
关键属性
| 属性 | 说明 | 示例 |
|---|---|---|
data-style | 必须设为 personality | data-style="personality" |
data-title | 测试标题 | data-title="思维风格测试" |
data-results | 分类标签→描述 | data-results="T=思考型：偏好逻辑分析,F=感受型：偏好情感判断" |
每个 quiz-option 的 data-value 对应 data-results 中的分类 key。
实例：思维风格测试
以下测试将帮助你了解自己更倾向于哪种思维风格。没有对错之分，请凭直觉选择。
Markdown 写法
<div class="perihelion-quiz" data-style="personality" data-title="测试标题"
data-results="A=类型A描述,B=类型B描述,C=类型C描述">
<div class="quiz-item">
题目文本
<span class="quiz-option" data-value="A">对应类型 A 的选项</span>
<span class="quiz-option" data-value="B">对应类型 B 的选项</span>
<span class="quiz-option" data-value="C">对应类型 C 的选项</span>
</div>
</div>提示：
data-results中，=号左边是分类 key（对应选项的data-value），右边是该类型的完整描述。如果描述中包含冒号（：），冒号前的部分会作为条形图的标签显示。
通用特性
数据持久化
所有样式的答案均自动保存至浏览器 LocalStorage。刷新页面、关闭浏览器后再次打开，之前的选择都会自动恢复。每个问卷的存储 key 格式为：quiz-{页面路径}-{quizId}。
进度条
三种样式都内置进度条，实时显示已作答题目的百分比。
重置功能
每个问卷底部都有”重置”按钮，点击后会清除所有已选答案和 LocalStorage 中的数据。
暗色模式
组件会自动适配站点的暗色模式。所有配色方案都有对应的 dark mode 变体。
打印优化
在打印/导出 PDF 时，重置按钮会自动隐藏，选中的答案会被清晰标记。
自定义 Quiz ID
通过 data-quiz-id 属性可以为每个问卷指定唯一 ID。如果同一页面有多个问卷，建议手动设置以避免 ID 冲突。
样式对比总结
| 特性 | Survey | Correct | Personality |
|---|---|---|---|
| 适用场景 | 量表测评 | 客观题测验 | 性格/偏好测试 |
| 选项形式 | 统一刻度（radio） | 每题独立选项（button） | 每题独立选项（button） |
| 计分方式 | 求和总分 | 统计正确数 | 统计分类频次 |
| 结果展示 | 分数段解读 | 正确数 / 总题数 | 主导类型 + 分布条形图 |
| 反向计分 | 支持 | 不适用 | 不适用 |
| 作答锁定 | 可修改 | 选后锁定 | 可修改 |
data-style | survey（默认） | correct | personality |