reading-teacher

阅读老师

一位互动、有趣的阅读老师，可即时生成引人入胜的学习体验，通过互动作品、视觉游乐场和游戏化挑战帮助幼儿学习。

此技能的作用

将阅读教育转化为互动式视觉体验：

• 即时生成游乐场 - 按需创建交互式 HTML/JS 作品
• 适龄内容 - 针对 1-10 岁儿童及其发展阶段量身定制
• 多感官学习 - 融合视觉、听觉和互动元素
• 自然拼读与常见词 - 提供系统的自然拼读教学和高频词学习
• 故事创作 - 互动式创作故事并训练理解能力
• 游戏化 - 星星、徽章、奖励和进度跟踪
• 家长/教师工具 - 进度报告和自定义选项

此技能的重要性

传统阅读教学：

• 参与度和互动性有限
• 千篇一律的教学方式
• 难以让幼儿长时间保持专注
• 练习机会有限
• 难以跟踪个人进度

使用此技能：

• 通过游戏即时激发兴趣
• 根据孩子的水平个性化定制
• 体验有趣且充满奖励的学习过程
• 提供无限多样的练习
• 清晰跟踪学习进度
• 采用多感官教学方式

核心原则

1. 符合发展阶段

• 针对不同年龄设计内容和挑战
• 采用循序渐进的学习路径
• 难度适宜
• 考虑注意力持续时间
• 庆祝每一个成长里程碑

2. 多感官参与

• 以视觉方式展示字母
• 提供发音音频
• 支持触摸/点击互动
• 提供动画反馈
• 采用色彩丰富、引人入胜的设计

3. 以游戏为基础的学习

• 以游戏取代机械练习
• 以故事为主线的活动
• 角色伙伴
• 奖励机制
• 庆祝动画

4. 系统化教学

• 按顺序培养技能
• 采用自然拼读教学法
• 学习高频常见词
• 培养阅读理解策略
• 提升阅读流畅度

5. 正向强化

• 即时鼓励
• 直观的进度标记
• 庆祝取得的成就
• 不提供负面反馈
• 培养成长型思维

涵盖的阅读阶段

阅读准备期（1-3 岁）

技能：

• 识别字母（大写和小写）
• 认识字母发音（音素意识）
• 认识环境中的文字
• 掌握翻阅书籍的技巧
• 听力理解

活动：

• 🔤 配有动画的字母歌
• 🎨 字母描摹游戏
• 🔊 发音匹配活动
• 📚 互动绘本
• 🎵 押韵词语游戏

初级阅读期（3-5 岁）

技能：

• 掌握字母与发音的对应关系
• 入门自然拼读（CVC 词）
• 认识印刷文字
• 掌握简单常见词
• 建立图片与文字之间的联系

活动：

• 🐱 拼读构成 CVC 词（cat、dog、sun）
• 🎯 常见词匹配游戏
• 📖 阅读简单句子
• 🧩 探索词族
• ✨ 押韵挑战

初级阅读者（5-7 岁）

技能：

• 掌握自然拼读规律（辅音连缀、辅音组合）
• 扩充常见词汇量
• 阅读简单句子
• 基础阅读理解
• 提升阅读流畅度

活动：

• 🌟 辅音组合侦探游戏（ch、sh、th）
• 📝 造句工坊
• 📚 可解码故事读本
• 🎭 角色理解活动
• ⏱️ 阅读流畅度练习路径

发展中阅读者（7-10 岁）

技能：

• 掌握高级自然拼读规律
• 拼读多音节词
• 运用阅读理解策略
• 扩充词汇量
• 流畅阅读

活动：

• 📖 故事理解挑战
• 🔍 语境线索侦探
• 📚 章节书伴读
• ✍️ 故事创作工作室
• 🎯 词汇拓展

互动游乐场示例

示例 1：字母乐园冒险（1-3 岁）

用户提问：“帮我的幼儿学习字母”

老师生成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🌈 Letter Land Adventure!</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #333;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 {
      font-size: 3em;
      color: #FF6B9D;
      text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
      margin-bottom: 10px;
    }
    .stars {
      font-size: 2em;
      background: rgba(255,255,255,0.8);
      padding: 10px 30px;
      border-radius: 30px;
      display: inline-block;
    }
    .letter-display {
      background: white;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15em;
      font-weight: bold;
      color: #FF6B9D;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      margin: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
    }
    .letter-display:hover {
      transform: scale(1.05);
      box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    }
    .letter-display:active {
      transform: scale(0.95);
    }
    .controls {
      display: flex;
      gap: 20px;
      margin: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 20px 40px;
      font-size: 1.5em;
      border-radius: 20px;
      cursor: pointer;
      transition: transform 0.2s;
      font-weight: bold;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .btn:hover { transform: translateY(-5px); }
    .btn:active { transform: translateY(0); }
    .letter-name {
      font-size: 2em;
      margin: 20px;
      color: #667eea;
      font-weight: bold;
    }
    .celebration {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-size: 10em;
      animation: celebrate 1s ease forwards;
      pointer-events: none;
      z-index: 1000;
    }
    @keyframes celebrate {
      0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); }
      50% { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0; }
    }
    .alphabet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 10px;
      max-width: 800px;
      margin: 20px;
    }
    .alphabet-letter {
      background: white;
      padding: 20px;
      border-radius: 15px;
      font-size: 2em;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      font-weight: bold;
      color: #667eea;
    }
    .alphabet-letter:hover {
      transform: scale(1.1);
      background: #FFD700;
    }
    .alphabet-letter.learned {
      background: #4CAF50;
      color: white;
    }
    @media (max-width: 768px) {
      .letter-display { width: 300px; height: 300px; font-size: 10em; }
      h1 { font-size: 2em; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>🌈 Letter Land Adventure!</h1>
    <div class="stars">
      Stars: <span id="stars">0</span> ⭐
    </div>
  </div>

  <div class="letter-display" id="letterDisplay" onclick="speakLetter()">
    A
  </div>

  <div class="letter-name" id="letterName">
    Click the letter to hear its name and sound!
  </div>

  <div class="controls">
    <button class="btn" onclick="nextLetter()">Next Letter ➡️</button>
    <button class="btn" onclick="randomLetter()">Random Letter 🎲</button>
    <button class="btn" onclick="showAlphabet()">Show All 🔤</button>
  </div>

  <div class="alphabet-grid" id="alphabetGrid" style="display: none;"></div>

  <script>
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    const letterNames = {
      'A': 'Apple', 'B': 'Ball', 'C': 'Cat', 'D': 'Dog', 'E': 'Elephant',
      'F': 'Fish', 'G': 'Goat', 'H': 'Hat', 'I': 'Ice Cream', 'J': 'Juice',
      'K': 'Kite', 'L': 'Lion', 'M': 'Moon', 'N': 'Nest', 'O': 'Orange',
      'P': 'Pig', 'Q': 'Queen', 'R': 'Rabbit', 'S': 'Sun', 'T': 'Tiger',
      'U': 'Umbrella', 'V': 'Violin', 'W': 'Whale', 'X': 'X-ray', 'Y': 'Yellow', 'Z': 'Zebra'
    };
    const letterSounds = {
      'A': 'ah', 'B': 'buh', 'C': 'kuh', 'D': 'duh', 'E': 'eh',
      'F': 'fuh', 'G': 'guh', 'H': 'huh', 'I': 'ih', 'J': 'juh',
      'K': 'kuh', 'L': 'luh', 'M': 'muh', 'N': 'nuh', 'O': 'ah',
      'P': 'puh', 'Q': 'kwuh', 'R': 'ruh', 'S': 'sss', 'T': 'tuh',
      'U': 'uh', 'V': 'vuh', 'W': 'wuh', 'X': 'ks', 'Y': 'yuh', 'Z': 'zzz'
    };

    let currentIndex = 0;
    let stars = 0;
    let learnedLetters = new Set();
    const colors = ['#FF6B9D', '#4ECDC4', '#FFE66D', '#A8E6CF', '#FF8B94', '#C7CEEA'];

    function updateDisplay(letter) {
      const display = document.getElementById('letterDisplay');
      display.textContent = letter;
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      const name = document.getElementById('letterName');
      name.textContent = `${letter} is for ${letterNames[letter]}!`;
    }

    function speakLetter() {
      const letter = document.getElementById('letterDisplay').textContent;

      // Award star
      stars++;
      document.getElementById('stars').textContent = stars;

      // Mark as learned
      if (!learnedLetters.has(letter)) {
        learnedLetters.add(letter);
        updateAlphabetGrid();
      }

      // Show celebration
      celebrate('🎉');

      // Simulate speech (in real implementation, use Web Speech API)
      const name = document.getElementById('letterName');
      name.textContent = `${letter}! ${letter} says "${letterSounds[letter]}"`;

      // Change color
      const display = document.getElementById('letterDisplay');
      display.style.color = colors[Math.floor(Math.random() * colors.length)];

      // Could use Web Speech API here:
      // const utterance = new SpeechSynthesisUtterance(`${letter}. ${letter} is for ${letterNames[letter]}`);
      // speechSynthesis.speak(utterance);
    }

    function nextLetter() {
      currentIndex = (currentIndex + 1) % alphabet.length;
      updateDisplay(alphabet[currentIndex]);
    }

    function randomLetter() {
      currentIndex = Math.floor(Math.random() * alphabet.length);
      updateDisplay(alphabet[currentIndex]);
      celebrate('✨');
    }

    function showAlphabet() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.style.display === 'none') {
        grid.style.display = 'grid';
        if (grid.children.length === 0) {
          alphabet.forEach(letter => {
            const div = document.createElement('div');
            div.className = 'alphabet-letter';
            div.textContent = letter;
            div.onclick = () => {
              currentIndex = alphabet.indexOf(letter);
              updateDisplay(letter);
              speakLetter();
            };
            grid.appendChild(div);
          });
        }
      } else {
        grid.style.display = 'none';
      }
    }

    function updateAlphabetGrid() {
      const grid = document.getElementById('alphabetGrid');
      if (grid.children.length > 0) {
        Array.from(grid.children).forEach((div, i) => {
          if (learnedLetters.has(alphabet[i])) {
            div.classList.add('learned');
          }
        });
      }
    }

    function celebrate(emoji) {
      const celebration = document.createElement('div');
      celebration.className = 'celebration';
      celebration.textContent = emoji;
      document.body.appendChild(celebration);
      setTimeout(() => celebration.remove(), 1000);
    }

    // Initialize
    updateDisplay(alphabet[0]);

    // Encourage interaction
    setTimeout(() => {
      const name = document.getElementById('letterName');
      name.textContent = '👆 Click the letter to hear it!';
    }, 3000);
  </script>
</body>
</html>

功能：

• 大号彩色字母展示
• 点击即可听到字母名称和发音
• 用星星跟踪进度
• 通过字母表网格展示已学会的字母
• 随机呈现内容，增加变化
• 鼓励性动画
• 适合移动设备的触控界面

示例 2：常见词探险（5-7 岁）

用户提问：“练习一年级常见词”

**教师生成：**互动式探险游戏，包含：

• 高频 Dolch/Fry 词汇
• 词汇识别挑战
• 句子构建活动
• 限时阅读练习
• 进度徽章和奖励

示例 3：故事创作工作室（7-10 岁）

用户提问：“帮助我提升阅读理解能力”

**教师生成：**互动式故事工坊，包含：

• 选择你自己的冒险故事形式
• 嵌入理解题
• 词汇高亮
• 角色分析工具
• 故事排序活动

游戏化系统

奖励与星星

• 字母星星（1 颗星）：学习一个新字母
• 单词星星（5 颗星）：读一个新单词
• 故事星星（10 颗星）：完成一个故事
• 速度星星（3 颗星）：快速识别
• 满分星星（20 颗星）：准确率达到 100%

成就徽章

• 🌟 ABC 达人：学会全部 26 个字母
• 📖 阅读新手：读完第一个完整句子
• 🏆 单词奇才：掌握 50 个常见词
• 🎯 完美一周：连续练习 7 天
• 🚀 速读达人：1 分钟读 20 个单词
• 📚 故事时间：完成 10 个故事
• 🎨 创意作家：创作自己的故事
• ⭐ 超级明星：累计获得 1000 颗星

进度跟踪

• 已学字母数（共 26 个）
• 已掌握的常见词
• 已完成的故事
• 连续阅读天数
• 阅读用时
• 准确率
• 阅读级别提升情况

庆祝动画

• 成就达成时撒彩纸
• 答对时星星爆炸效果
• 角色动画
• 音效（可选）
• 进度条填充动画
• 升级动画

按类型划分的学习活动

字母识别

活动：

• 带动画的字母歌
• 字母配对游戏
• 大小写字母配对
• 字母描摹（触摸/鼠标）
• 找字母挑战
• 字母分类活动

示例代码：

function createLetterMatch() {
  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  const lowercase = 'abcdefghijklmnopqrstuvwxyz'.split('');

  // Shuffle and match pairs
  const pairs = uppercase.map((u, i) => ({
    upper: u,
    lower: lowercase[i],
    matched: false
  }));

  return pairs;
}

自然拼读练习

活动：

• 发音配对（字母与发音）
• CVC 单词构建（cat、dog、run）
• 单词家族（-at、-an、-ig）
• 押韵词游戏
• 辅音连缀练习（bl、cr、st）
• 双字母组合识别（ch、sh、th）

示例：

const wordFamilies = {
  'at': ['cat', 'bat', 'rat', 'hat', 'mat', 'sat'],
  'an': ['can', 'man', 'pan', 'ran', 'van', 'fan'],
  'ig': ['big', 'dig', 'fig', 'pig', 'wig', 'jig']
};

function generateWordFamily(family) {
  return wordFamilies[family].map(word => ({
    word: word,
    letters: word.split(''),
    sound: `/${family}/`
  }));
}

常见词训练

高频词（Dolch/Fry 词表）：

学前班：

const preK = ['a', 'and', 'away', 'big', 'blue', 'can', 'come',
              'down', 'find', 'for', 'funny', 'go', 'help', 'here',
              'I', 'in', 'is', 'it', 'jump', 'little', 'look', 'make',
              'me', 'my', 'not', 'one', 'play', 'red', 'run', 'said',
              'see', 'the', 'three', 'to', 'two', 'up', 'we', 'where',
              'yellow', 'you'];

一年级：

const firstGrade = ['after', 'again', 'an', 'any', 'as', 'ask', 'by',
                    'could', 'every', 'fly', 'from', 'give', 'going',
                    'had', 'has', 'her', 'him', 'his', 'how', 'just',
                    'know', 'let', 'live', 'may', 'of', 'old', 'once',
                    'open', 'over', 'put', 'round', 'some', 'stop',
                    'take', 'thank', 'them', 'then', 'think', 'walk',
                    'were', 'when'];

互动式常见词游戏：

function createSightWordChallenge(wordList, timeLimit = 60) {
  let score = 0;
  let currentWord = '';
  let timeRemaining = timeLimit;

  function nextWord() {
    currentWord = wordList[Math.floor(Math.random() * wordList.length)];
    displayWord(currentWord);
  }

  function checkAnswer(userInput) {
    if (userInput.toLowerCase() === currentWord.toLowerCase()) {
      score++;
      celebrate();
      nextWord();
    }
  }

  return { nextWord, checkAnswer, score };
}

阅读理解

策略：

• 预测接下来会发生什么
• 识别主要角色
• 回忆故事细节
• 理解因果关系
• 进行推断
• 想象场景

互动问题：

const comprehensionQuestions = {
  'The Cat and the Hat': [
    {
      question: 'Who are the main characters?',
      type: 'multiple-choice',
      options: ['Cat, Kids', 'Dog, Bird', 'Fish, Mom'],
      answer: 'Cat, Kids'
    },
    {
      question: 'Where does the story take place?',
      type: 'multiple-choice',
      options: ['Outside', 'At home', 'At school'],
      answer: 'At home'
    },
    {
      question: 'What did you like about the story?',
      type: 'open-ended',
      encouragement: 'Great thinking!'
    }
  ]
};

故事创作

组成部分：

• 选择角色
• 选择背景
• 问题/解决方案结构
• 事件顺序
• 结尾选项
• 插图工具

const storyElements = {
  characters: ['🐱 Cat', '🐶 Dog', '🦊 Fox', '🐻 Bear', '🦁 Lion'],
  settings: ['🏠 House', '🌳 Forest', '🏖️ Beach', '🏰 Castle', '🚀 Space'],
  problems: ['Lost something', 'Made a friend', 'Went on adventure', 'Solved mystery'],
  solutions: ['Found it!', 'Worked together', 'Used creativity', 'Never gave up']
};

function buildStory(selections) {
  return `Once upon a time, there was a ${selections.character}.
          The ${selections.character} lived in a ${selections.setting}.
          One day, the ${selections.character} ${selections.problem}.
          In the end, ${selections.solution}!`;
}

家长/教师工具

进度报告

const progressReport = {
  childName: 'Emma',
  age: 6,
  level: 'Beginning Reader',
  stats: {
    lettersLearned: 26,
    sightWordsMastered: 45,
    storiesCompleted: 12,
    currentStreak: 7,
    totalTimeMinutes: 240
  },
  strengths: ['Letter recognition', 'Phonics', 'Enthusiasm'],
  workingOn: ['Sight words', 'Reading fluency'],
  nextSteps: ['Practice high-frequency words', 'Read aloud daily']
};

自定义选项

• 调整难度级别
• 选择词表
• 选择主题/角色
• 设置时间限制
• 启用/禁用声音
• 跟踪多个孩子的进度
• 导出进度数据

技术实现

文本转语音（Web Speech API）

function speakText(text, rate = 1.0) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.rate = rate;
    utterance.pitch = 1.2; // Higher pitch for kids
    utterance.volume = 1.0;
    speechSynthesis.speak(utterance);
  } else {
    // Fallback: show text with pronunciation guide
    showPronunciation(text);
  }
}

互动式单词构建

function createWordBuilder(targetWord) {
  const letters = targetWord.split('');
  const scrambled = shuffle([...letters]);

  let builtWord = [];

  function addLetter(letter) {
    builtWord.push(letter);
    updateDisplay();

    if (builtWord.join('') === targetWord) {
      celebrate('Correct!');
      return true;
    }
    return false;
  }

  function removeLetter() {
    builtWord.pop();
    updateDisplay();
  }

  return { addLetter, removeLetter, scrambled };
}

阅读流利度计时器

class FluencyTracker {
  constructor(text) {
    this.text = text;
    this.wordCount = text.split(' ').length;
    this.startTime = null;
    this.endTime = null;
  }

  start() {
    this.startTime = Date.now();
  }

  stop() {
    this.endTime = Date.now();
    return this.calculate();
  }

  calculate() {
    const seconds = (this.endTime - this.startTime) / 1000;
    const minutes = seconds / 60;
    const wpm = Math.round(this.wordCount / minutes);

    return {
      wordsPerMinute: wpm,
      timeSeconds: seconds,
      wordCount: this.wordCount,
      rating: this.getRating(wpm)
    };
  }

  getRating(wpm) {
    // Age-appropriate WPM benchmarks
    if (wpm >= 100) return '🏆 Excellent!';
    if (wpm >= 70) return '⭐ Great job!';
    if (wpm >= 50) return '👍 Good work!';
    return '💪 Keep practicing!';
  }
}

参考资料

全部包含在 /references 中：

• phonics.md - 自然拼读模式、规则和活动
• sight_words.md - 按级别划分的 Dolch 和 Fry 词表
• comprehension.md - 阅读策略和问题类型
• stories.md - 可解码文本和故事模板

脚本

全部位于 /scripts 中：

• generate_playground.sh - 创建互动阅读游乐场
• generate_game.sh - 构建自然拼读或常见词游戏
• generate_story.sh - 创建互动故事

最佳实践

应该：

✅ 使用大而清晰的字体（初学者至少 24pt） ✅ 提供语音发音 ✅ 及时给予积极反馈 ✅ 使用色彩丰富、引人入胜的视觉素材 ✅ 庆祝每一次成功 ✅ 每次练习时间要短（5-15 分钟） ✅ 让学习充满乐趣 ✅ 清晰展示进度

不要：

❌ 使用复杂词汇 ❌ 给出负面反馈 ❌ 让活动持续太久 ❌ 使用太小或难以辨认的文字 ❌ 忽略音频支持 ❌ 让学习感觉像在工作 ❌ 提供太多选项，让人不知所措 ❌ 忘记庆祝进步

互动示例

幼儿（2 岁）：

“教我的孩子认识字母”

生成：互动字母乐园，包含可点击的字母、声音、动画和进度跟踪

幼儿园阶段（5 岁）：

“帮我练习 CVC 单词”

生成：单词家族游戏，包含 cat、bat、rat 等单词，通过拖放字母拼词，并配有声音

一年级（6 岁）：

“练习常见词”

生成：常见词探险之旅，包含限时挑战、句子和进度徽章

二年级（7 岁）：

“练习阅读理解”

生成：互动故事，包含内嵌问题、词汇帮助和奖励

总结

这项技能通过以下方式改变阅读教育：

• 即时吸引 - 立即生成游乐场
• 多感官体验 - 视觉、音频和互动元素
• 符合发展阶段 - 覆盖 1 至 10 岁
• 循序渐进 - 基于自然拼读法逐步学习
• 游戏化 - 星星、徽章和庆祝活动
• 有效 - 基于研究的方法
• 有趣 - 以游戏为基础的学习

“在适当的支持和鼓励下，每个孩子都能学会阅读。” 📚

---

用法： 请求任何阅读技能方面的帮助——字母识别、自然拼读法、常见词、阅读理解——即可获得适合孩子水平的即时互动学习体验！