WordPredictor 组件

WordPredictor 组件

词语预测组件，帮助儿童理解 AI 如何预测下一个词。

功能概述

  • 预测练习: 选择句子中缺失的最佳词语
  • AI 思维模拟: 展示 AI 的思考过程
  • 即时反馈: 选择后立即显示正确/错误
  • 解释说明: 提供正确答案的解释
  • 状态持久化: 保存答题进度

Props 接口

interface WordPredictorProps {
  title?: string;           // 标题
  instruction?: string;     // 说明文字
  sentence: string;         // 句子（使用 ___ 表示空白）
  options: string[];        // 选项数组
  correctAnswer: string;    // 正确答案
  explanation: string;      // 解释说明
  aiThinking?: string;      // AI 思考过程（可选）
  successMessage?: string;  // 成功消息
}

数据结构

保存的状态

interface SavedState {
  selectedAnswer: string | null;  // 选择的答案
  submitted: boolean;             // 是否已提交
}

交互流程

  1. 查看题目: 显示带空白的句子和选项
  2. 查看 AI 思考: 显示 AI 的思考过程
  3. 选择答案: 点击选择认为正确的选项
  4. 提交检查: 点击检查按钮
  5. 查看结果: 显示正确/错误和解释
  6. 重试或继续: 错误可以重试

使用示例

import { WordPredictor } from "@/components/kids/elements/word-predictor";

<WordPredictor
  title="猜猜 AI 会说什么"
  instruction="看看 AI 在想什么，然后选择正确的词"
  sentence="今天天气很___，我们出去野餐吧"
  options={["晴朗", "下雨", "寒冷", "多云"]
  correctAnswer="晴朗"
  explanation="因为后面说'出去野餐'，晴朗的天气适合野餐"
  aiThinking="人们在好天气时喜欢户外活动..."
  successMessage="猜对了！你很懂 AI 的想法！"
/>

翻译键

{
  "kids": {
    "wordPredictor": {
      "title": "🧠 词语预测器",
      "instruction": "看看 AI 会怎么完成这个句子",
      "aiThinks": "AI 正在思考...",
      "thinkingDefault": "让我想想接下来应该说什么...",
      "check": "检查答案",
      "correct": "回答正确！",
      "tryAgain": "再试一次"
    }
  }
}

状态样式

选项按钮

  • 默认: 白色背景，靛蓝色边框
  • 选中: 靛蓝色背景，边框加粗，放大效果
  • 正确: 绿色背景，显示 ✓
  • 错误: 红色背景，显示 ✗

空白显示

  • 未提交: 黄色虚线边框
  • 正确: 绿色实线边框
  • 错误: 红色实线边框

完成判断

const isCorrect = selectedAnswer === correctAnswer;

// 如果正确，标记关卡完成
if (isCorrect && levelSlug) {
  markSectionCompleted(levelSlug, currentSection);
  markSectionComplete(currentSection);
}

样式说明

  • 面板样式: pixel-panel pixel-panel-indigo
  • 标题颜色: #4338CA (靛蓝色)
  • AI 思考区: 浅蓝色背景 (#F0F9FF)

像素边框

所有主要元素使用像素风格边框：

clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"

依赖

  • next-intl - 国际化
  • @/lib/utils (cn)
  • @/components/kids/providers/level-context
  • @/lib/kids/progress

注意事项

  • 需要包裹在 LevelProvider 内使用
  • 必须提供正确答案和解释
  • 选项建议提供 2-4 个
  • 句子中必须包含 ___ 作为空白标记
  • 正确回答后自动标记关卡进度
← 返回目录