quiz.tsx

quiz.tsx

说明

⚠️ 注意：quiz.tsx 文件不存在。Quiz 组件实际定义在 <code>ui.tsx</code> 文件中。

本文档描述 ui.tsx 中导出的 Quiz 组件。

Quiz 组件

交互式测验/问答组件，用于书籍中创建选择题目，帮助读者检验理解程度。

组件

Quiz

选择题测验组件，支持单选、即时反馈和答案解析。

Props：

属性类型必填描述
questionstring是问题文本
optionsstring[]是选项数组
correctIndexnumber是正确选项的索引
explanationstring是答案解析

状态管理：

状态类型描述
selected`number \null`用户选择的选项索引
showExplanationboolean是否显示答案解析

交互流程：

  1. 用户看到问题和选项
  2. 用户点击某个选项
  3. 禁用所有选项（防止重复选择）
  4. 选中的选项高亮显示：

- 正确：绿色背景 + 绿色边框 - 错误：红色背景 + 红色边框

  1. 正确答案同时高亮显示
  2. 显示答案解析区域

视觉样式：

  • 容器：p-4 border rounded-lg bg-card
  • 问题：font-semibold m-0! mb-4!
  • 选项按钮：

- 默认：w-full p-3 text-left rounded-lg border transition-colors text-sm hover:bg-muted - 选中正确：bg-green-100 border-green-500 dark:bg-green-950 dark:border-green-700 - 选中错误：bg-red-100 border-red-500 dark:bg-red-950 dark:border-red-700

  • 解析区域：

- 正确：bg-green-50 dark:bg-green-950/50 - 错误：bg-amber-50 dark:bg-amber-950/50

国际化：

使用 book.interactive 命名空间的翻译键：

  • correct - "正确！" 提示
  • notQuite - "不太对" 提示

使用示例：

import { Quiz } from "@/components/book/elements/ui";

<Quiz
  question="什么是温度参数（Temperature）的主要作用？"
  options={[
    "控制模型的响应速度",
    "控制输出的随机性和创造性",
    "限制输入文本的长度",
    "设置模型的知识截止日期"
  ]}
  correctIndex={1}
  explanation="温度参数控制模型输出的随机性。较低的温度（如0.2）产生更确定性的输出，较高的温度（如0.8）产生更多样化和创造性的输出。"
/>

完整示例：

import { Quiz, Callout } from "@/components/book/elements/ui";

export function ChapterQuiz() {
  return (
    <div className="quiz-section">
      <Callout type="tip" title="知识检验">
        完成以下测验来检验你对本章内容的理解。
      </Callout>
      
      <Quiz
        question="以下哪个是编写有效提示词的最佳实践？"
        options={[
          "使用模糊的语言让模型自由发挥",
          "提供具体的上下文和明确的指令",
          "尽可能缩短提示词以节省令牌",
          "使用复杂的词汇展示专业性"
        ]}
        correctIndex={1}
        explanation="有效的提示词应该清晰、具体，并提供足够的上下文。模糊的提示词会导致不一致的输出，而过度的简洁可能遗漏重要信息。"
      />
      
      <Quiz
        question="Few-shot 提示的主要目的是什么？"
        options={[
          "减少 API 调用成本",
          "通过示例展示期望的输出格式",
          "加快模型响应速度",
          "限制模型的知识范围"
        ]}
        correctIndex={1}
        explanation="Few-shot 提示通过提供输入-输出示例，帮助模型理解任务的格式和期望，从而提高输出质量。"
      />
    </div>
  );
}

依赖

依赖用途
react - useState选择状态和解析显示状态
next-intl - useTranslations国际化翻译
@/lib/utils - cn类名合并

注意事项

  1. 单选限制 - 当前仅支持单选题，用户选择后不可更改
  2. 即时反馈 - 选择后立即显示答案和解析
  3. 多题目 - 在同一页面使用多个 Quiz 组件时，各自独立维护状态
  4. 无障碍 - 使用 <button> 元素，支持键盘导航

与 ui.tsx 的关系

Quiz 组件与以下组件一同定义在 ui.tsx 中：

  • Collapsible - 可折叠面板
  • Callout - 标注/提示框
  • CopyableCode - 可复制代码块
  • TryIt - 试试点组件
  • NavButton - 导航按钮
  • NavFooter - 导航页脚

如需导入 Quiz 组件：

// 方式1：从 ui.tsx 直接导入
import { Quiz } from "@/components/book/elements/ui";

// 方式2：从 interactive.tsx 导入（推荐）
import { Quiz } from "@/components/book/interactive";
← 返回目录