模板 04：交互题规范模板（可选/可判分/可揭晓）

依赖：styles.css 中的 .quiz* 样式块 + quiz.js（均在 引用文件/，整文件复用）。 判分/揭晓逻辑全在 quiz.js 里，页面只需写正确 markup。

一、Markup 约定（三种题型）

1) 单选（点选判分，选对锁定）

<div class="quiz" data-success="✓ 正确：……解析……" data-retry="✗ 再想想：……提示……">
  <button class="quiz-opt">A．选项</button>
  <button class="quiz-opt" data-correct="true">B．正确项</button>
  <button class="quiz-opt">C．选项</button>
  <button class="quiz-opt">D．选项</button>
  <button class="quiz-btn" data-action="reset">重新作答</button>
  <div class="quiz-feedback"></div>   <!-- 留空，由 JS 填充 -->
</div>

2) 多选（如"哪些是项目"）

<div class="quiz" data-multi="true" data-success="✓ 判断正确！" data-retry="✗ 再想想：这是日常运营……">
  <button class="quiz-opt" data-correct="true" data-success="✓ A 是项目：……">A．……</button>
  <button class="quiz-opt" data-retry="✗ B 是运营：……">B．……</button>
  <button class="quiz-btn" data-action="reveal">查看小结</button>
  <div class="quiz-feedback">💡 小结：A、C 是项目……</div>
</div>
<!-- 多选：每个选项独立判分；data-multi=true 不锁定；"查看小结"用静态 quiz-feedback -->

3) 揭晓（提问/填空/思考，先隐藏答案）

<div class="quiz">
  <p>💡 思考：……问题……</p>
  <button class="quiz-btn" data-action="reveal">揭晓答案</button>
  <div class="quiz-feedback">答案/参考思路（点击前不可见）……</div>
</div>

二、可用属性速查

属性	作用
.quiz[data-correct="true"] 于选项	该选项为正确项
.quiz data-success / data-retry	正确/错误时的反馈文案（可被选项级 data-success/data-retry 覆盖）
.quiz[data-multi="true"]	多选模式：不锁定、每选项独立判分
data-action="reveal"	按钮：显示同 .quiz 内 .quiz-feedback
data-action="reset"	按钮：清空本 .quiz 的正误状态

三、行为约定（学生视角）

• 选对：选项变绿✓，反馈区显示 success，本题锁定（多选除外）；
• 选错：选项变红✗，反馈区显示 retry，可继续选其他项；
• 揭晓类：点击前答案不可见，点击后以绿色反馈块显示；
• 反馈只用 innerHTML 写入，勿拼外部输入（无注入风险面）。

四、什么时候用哪种

场景	类型
判断/选择（习题、速判）	单选点选（可加"重新作答"）
多项判断（破冰"哪些是项目"）	多选 + 查看小结
提问/思考/填空/案例要点	揭晓按钮（先想后看）
纯讲解	不交互，用 quote/info/card 排版

五、样式要点（styles.css 已内置，如需调整）

• 单页放映：.quiz-opt 2.0rem、.quiz-btn 1.7rem、.quiz-feedback 1.8rem；
• 正确=绿 #c6f6d5/#38a169，错误=红 #fed7d7/#e53e3e，与全套配色一致。