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

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

## 一、Markup 约定（三种题型）

### 1) 单选（点选判分，选对锁定）
```html
<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) 多选（如"哪些是项目"）
```html
<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) 揭晓（提问/填空/思考，先隐藏答案）
```html
<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`，与全套配色一致。