reading-teacher

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reading Teacher

交互式阅读老师

An interactive, playful reading teacher that instantly generates engaging learning experiences through interactive artifacts, visual playgrounds, and gamified challenges for young learners.

这是一个充满趣味的交互式阅读教学工具，可通过交互式学习内容、可视化学习场景和游戏化挑战，为低龄学习者即时生成引人入胜的学习体验。

What This Skill Does

该Skill的功能

Transforms reading education into interactive, visual experiences:

Instant Playground Generation - Creates interactive HTML/JS artifacts on demand
Age-Appropriate Content - Tailored for ages 1-10 with developmental stages
Multi-Sensory Learning - Visual, auditory, and interactive elements
Phonics & Sight Words - Systematic phonics instruction and high-frequency words
Story Building - Interactive story creation and comprehension
Gamification - Stars, badges, rewards, and progress tracking
Parent/Teacher Tools - Progress reports and customization options

将阅读教育转化为交互式可视化体验：

即时生成学习场景 - 按需创建交互式HTML/JS学习内容
适龄内容 - 针对1-10岁儿童的发展阶段定制
多感官学习 - 包含视觉、听觉和互动元素
自然拼读与高频词 - 系统的自然拼读教学和高频词学习
故事创作 - 互动式故事创建与阅读理解训练
游戏化设计 - 星星、徽章、奖励和进度追踪
家长/教师工具 - 进度报告和自定义选项

Why This Skill Matters

该Skill的重要性

Traditional reading instruction:

Limited engagement and interactivity
One-size-fits-all approach
Difficult to maintain young attention spans
Limited practice opportunities
Hard to track individual progress

With this skill:

Instant engagement through games
Personalized to child's level
Fun, rewarding experiences
Unlimited practice variations
Clear progress tracking
Multi-sensory approach

传统阅读教学：

互动性和吸引力有限
一刀切的教学方式
难以维持低龄儿童的注意力
练习机会有限
难以追踪个体学习进度

使用本Skill后：

通过游戏即时吸引孩子注意力
根据孩子水平提供个性化内容
有趣且有成就感的学习体验
无限的练习变化形式
清晰的进度追踪
多感官教学方式

Core Principles

核心原则

1. Developmentally Appropriate

1. 符合发展规律

Age-specific content and challenges
Scaffolded learning progression
Appropriate complexity levels
Sensitive to attention spans
Celebrates every milestone

适龄的内容和挑战
循序渐进的学习进阶
难度适中的学习任务
适配孩子的注意力时长
庆祝每一个学习里程碑

2. Multi-Sensory Engagement

2. 多感官互动

Visual letter displays
Audio pronunciation
Interactive touch/click
Animated feedback
Colorful, engaging design

可视化字母展示
音频发音指导
交互式点击/触摸操作
动画反馈
色彩丰富的趣味设计

3. Play-Based Learning

3. 游戏化学习

Games over drills
Story-driven activities
Character companions
Reward systems
Celebration animations

用游戏替代机械练习
故事驱动的活动设计
陪伴式角色设定
奖励机制
庆祝动画

4. Systematic Instruction

4. 系统化教学

Sequential skill building
Phonics-based approach
High-frequency sight words
Comprehension strategies
Fluency development

循序渐进的技能构建
基于自然拼读的教学方法
高频词学习
阅读理解策略
阅读流利度培养

5. Positive Reinforcement

5. 正向强化

Immediate encouragement
Visual progress markers
Achievement celebrations
No negative feedback
Growth mindset focus

即时鼓励
可视化进度标记
成就庆祝
无负面反馈
培养成长型思维

Reading Stages Covered

覆盖的阅读阶段

Pre-Reading (Ages 1-3)

学前阅读（1-3岁）

Skills:

Letter recognition (uppercase & lowercase)
Letter sounds (phonemic awareness)
Environmental print awareness
Book handling skills
Listening comprehension

Activities:

🔤 Alphabet song with animations
🎨 Letter tracing games
🔊 Sound matching activities
📚 Interactive picture books
🎵 Rhyming word games

技能目标：

字母识别（大小写）
字母发音（音素意识）
环境印刷体认知
图书使用技能
听力理解

相关活动：

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

Early Reading (Ages 3-5)

早期阅读（3-5岁）

Skills:

Letter-sound correspondence
Beginning phonics (CVC words)
Print awareness
Simple sight words
Picture-text connection

Activities:

🐱 CVC word building (cat, dog, sun)
🎯 Sight word matching games
📖 Simple sentence reading
🧩 Word family exploration
✨ Rhyme time challenges

技能目标：

字母-发音对应
基础自然拼读（CVC单词）
印刷体意识
简单高频词
图文关联

相关活动：

🐱 CVC单词构建（cat, dog, sun）
🎯 高频词匹配游戏
📖 简单句子阅读
🧩 词族探索
✨ 押韵挑战

Beginning Readers (Ages 5-7)

初级阅读者（5-7岁）

Skills:

Phonics patterns (blends, digraphs)
Expanding sight word vocabulary
Simple sentence reading
Basic comprehension
Fluency building

Activities:

🌟 Digraph detective games (ch, sh, th)
📝 Sentence building workshops
📚 Decodable story readers
🎭 Character comprehension
⏱️ Fluency practice tracks

技能目标：

自然拼读模式（辅音连缀、双辅音）
扩充高频词词汇量
简单句子阅读
基础阅读理解
阅读流利度培养

相关活动：

🌟 双辅音侦探游戏（ch, sh, th）
📝 句子构建练习
📚 可解码故事阅读
🎭 角色理解训练
⏱️ 流利度练习追踪

Developing Readers (Ages 7-10)

进阶阅读者（7-10岁）

Skills:

Advanced phonics patterns
Multi-syllable words
Reading comprehension strategies
Vocabulary development
Fluent reading

Activities:

📖 Story comprehension challenges
🔍 Context clue detectives
📚 Chapter book companions
✍️ Story writing studios
🎯 Vocabulary builders

技能目标：

高级自然拼读模式
多音节单词
阅读理解策略
词汇拓展
流利阅读

相关活动：

📖 故事理解挑战
🔍 语境线索推理
📚 章节书配套练习
✍️ 故事创作工作室
🎯 词汇拓展训练

Interactive Playground Examples

交互式学习场景示例

Example 1: Letter Land Adventure (Ages 1-3)

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

User asks: "Help my toddler learn letters"

Teacher generates:

html

<!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>

Features:

Large, colorful letter display
Click to hear letter name and sound
Progress tracking with stars
Alphabet grid showing learned letters
Randomization for variety
Encouraging animations
Mobile-friendly touch interface

用户请求： "帮我的幼儿学习字母"

生成内容：

html

<!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>

功能特点：

大尺寸彩色字母展示
点击即可收听字母名称和发音
星星进度追踪
显示已学字母的字母表网格
随机切换功能增加多样性
鼓励性动画
适配移动端的触摸交互

Example 2: Sight Word Safari (Ages 5-7)

示例2：高频词探险（5-7岁）

User asks: "Practice sight words for first grade"

Teacher generates: Interactive safari game with:

High-frequency Dolch/Fry words
Word recognition challenges
Sentence building activities
Timed reading practice
Progress badges and rewards

用户请求： "练习一年级高频词"

生成内容： 交互式探险游戏，包含：

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

Example 3: Story Builder Studio (Ages 7-10)

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

User asks: "Help with reading comprehension"

Teacher generates: Interactive story workshop with:

Choose-your-own-adventure format
Comprehension questions embedded
Vocabulary highlighting
Character analysis tools
Story sequencing activities

用户请求： "帮助提升阅读理解能力"

生成内容： 交互式故事工作室，包含：

选择式冒险故事格式
嵌入式阅读理解问题
词汇高亮
角色分析工具
故事排序活动

Gamification System

游戏化系统

Rewards & Stars

奖励与星星

Letter Stars (1 star): Learn a new letter
Word Stars (5 stars): Read a new word
Story Stars (10 stars): Complete a story
Speed Stars (3 stars): Quick recognition
Perfect Stars (20 stars): 100% accuracy

字母星星（1颗）：学会新字母
单词星星（5颗）：读出新单词
故事星星（10颗）：完成一个故事
速度星星（3颗）：快速识别单词
完美星星（20颗）：准确率100%

Achievement Badges

成就徽章

🌟 ABC Master: Learn all 26 letters
📖 First Reader: Read first complete sentence
🏆 Word Wizard: Master 50 sight words
🎯 Perfect Week: Practice 7 days in a row
🚀 Speed Reader: Read 20 words in 1 minute
📚 Story Time: Complete 10 stories
🎨 Creative Writer: Build own story
⭐ Super Star: Earn 1000 total stars

🌟 字母大师：学会全部26个字母
📖 初读者：读出第一个完整句子
🏆 单词巫师：掌握50个高频词
🎯 完美一周：连续练习7天
🚀 快速读者：1分钟内读出20个单词
📚 故事达人：完成10个故事
🎨 创意作家：创作自己的故事
⭐ 超级明星：累计获得1000颗星星

Progress Tracking

进度追踪

Letters learned (26 total)
Sight words mastered
Stories completed
Reading streak (days)
Time spent reading
Accuracy percentage
Reading level advancement

已学字母总数（共26个）
已掌握高频词数量
已完成故事数量
连续练习天数
阅读时长
准确率
阅读水平提升

Celebration Animations

庆祝动画

Confetti for achievements
Star explosions for correct answers
Character animations
Sound effects (optional)
Progress bar fills
Level-up animations

成就解锁时的彩屑效果
答对题目时的星星爆炸动画
角色动画
音效（可选）
进度条填充动画
等级提升动画

Learning Activities by Type

按类型划分的学习活动

Letter Recognition

字母识别

Activities:

Alphabet song with animations
Letter matching games
Upper/lowercase pairing
Letter tracing (touch/mouse)
Find the letter challenges
Letter sorting activities

Example Code:

javascript

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;
}

相关活动：

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

示例代码：

javascript

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;
}

Phonics Practice

自然拼读练习

Activities:

Sound matching (letter to sound)
CVC word building (cat, dog, run)
Word families (-at, -an, -ig)
Rhyming word games
Blend practice (bl, cr, st)
Digraph detection (ch, sh, th)

Example:

javascript

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}/`
  }));
}

相关活动：

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

示例代码：

javascript

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}/`
  }));
}

Sight Word Training

高频词训练

High-Frequency Words (Dolch/Fry Lists):

Pre-K:

javascript

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'];

First Grade:

javascript

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'];

Interactive Sight Word Game:

javascript

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 };
}

高频词列表（Dolch/Fry列表）：

学前班：

javascript

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'];

一年级：

javascript

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'];

交互式高频词游戏：

javascript

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 };
}

Reading Comprehension

阅读理解

Strategies:

Predicting what happens next
Identifying main characters
Recalling story details
Understanding cause/effect
Making inferences
Visualizing scenes

Interactive Questions:

javascript

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!'
    }
  ]
};

教学策略：

预测后续情节
识别主要角色
回忆故事细节
理解因果关系
推理判断
场景可视化

交互式问题示例：

javascript

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!'
    }
  ]
};

Story Building

故事创作

Components:

Character selection
Setting choices
Problem/solution structure
Sequence of events
Ending options
Illustration tools

javascript

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}!`;
}

核心组件：

角色选择
场景选择
问题/解决方案结构
事件顺序
结局选项
插画工具

javascript

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}!`;
}

Parent/Teacher Tools

家长/教师工具

Progress Reports

进度报告

javascript

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']
};

javascript

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']
};

Customization Options

自定义选项

Adjust difficulty level
Select word lists
Choose themes/characters
Set time limits
Enable/disable sound
Track multiple children
Export progress data

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

Technical Implementation

技术实现

Text-to-Speech (Web Speech API)

文本转语音（Web Speech API）

javascript

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);
  }
}

javascript

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);
  }
}

Interactive Word Building

交互式单词构建

javascript

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 };
}

javascript

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 };
}

Reading Fluency Timer

阅读流利度计时器

javascript

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!';
  }
}

javascript

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!';
  }
}

Reference Materials

参考资料

All included in

/references

phonics.md - Phonics patterns, rules, and activities
sight_words.md - Dolch and Fry word lists by level
comprehension.md - Reading strategies and question types
stories.md - Decodable texts and story templates

所有资料均位于

/references

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

Scripts

脚本工具

All in

/scripts

generate_playground.sh - Create interactive reading playground
generate_game.sh - Build phonics or sight word game
generate_story.sh - Create interactive story

所有脚本均位于

/scripts

generate_playground.sh - 创建交互式阅读学习场景
generate_game.sh - 构建自然拼读或高频词游戏
generate_story.sh - 创建交互式故事

Best Practices

最佳实践

DO:

建议：

✅ Use large, clear fonts (minimum 24pt for beginners) ✅ Include audio pronunciation ✅ Provide immediate positive feedback ✅ Use colorful, engaging visuals ✅ Celebrate every success ✅ Keep sessions short (5-15 minutes) ✅ Make it playful and fun ✅ Track progress visibly

✅ 使用大尺寸清晰字体（初学者最小24pt） ✅ 包含音频发音 ✅ 提供即时正向反馈 ✅ 使用色彩丰富的趣味视觉设计 ✅ 庆祝每一次成功 ✅ 保持学习时长简短（5-15分钟） ✅ 设计得有趣且充满游戏性 ✅ 可视化展示学习进度

DON'T:

避免：

❌ Use complex vocabulary ❌ Show negative feedback ❌ Make activities too long ❌ Use small or hard-to-read text ❌ Skip audio support ❌ Make it feel like work ❌ Overwhelm with too many choices ❌ Forget to celebrate progress

❌ 使用复杂词汇 ❌ 展示负面反馈 ❌ 活动时长过长 ❌ 使用小字体或难以阅读的文本 ❌ 跳过音频支持 ❌ 让学习感觉像任务 ❌ 提供过多选择导致孩子不知所措 ❌ 忘记庆祝学习进度

Example Interactions

互动示例

Toddler (Age 2):

"Teach my toddler the alphabet"

Generates: Interactive Letter Land with clickable letters, sounds, animations, and tracking

Kindergarten (Age 5):

"Help with CVC words"

Generates: Word family game with cat, bat, rat - drag-and-drop letter building with sounds

First Grade (Age 6):

"Practice sight words"

Generates: Sight Word Safari with timed challenges, sentences, and progress badges

Second Grade (Age 7):

"Reading comprehension practice"

Generates: Interactive story with embedded questions, vocabulary help, and rewards

幼儿（2岁）：

"教我的孩子学字母"

生成内容：交互式字母乐园，包含可点击字母、发音、动画和进度追踪

幼儿园学生（5岁）：

"帮助练习CVC单词"

生成内容：词族游戏，包含cat、bat、rat等单词，可拖拽字母构建单词并发音

一年级学生（6岁）：

"练习高频词"

生成内容：高频词探险游戏，包含限时挑战、句子练习和进度徽章

二年级学生（7岁）：

"练习阅读理解"

生成内容：交互式故事，包含嵌入式问题、词汇帮助和奖励机制

Summary

总结

This skill transforms reading education by:

Instant Engagement - Generates playgrounds immediately
Multi-Sensory - Visual, audio, interactive elements
Developmentally Appropriate - Age 1-10 coverage
Systematic - Phonics-based progression
Gamified - Stars, badges, celebrations
Effective - Research-based methods
Fun - Play-based learning

"Every child can learn to read with the right support and encouragement." 📚

Usage: Ask for help with any reading skill - letter recognition, phonics, sight words, comprehension - and get an instant, interactive learning experience tailored to your child's level!

该Skill通过以下方式变革阅读教育：

即时吸引注意力 - 即时生成学习场景
多感官体验 - 视觉、音频、互动元素结合
适龄设计 - 覆盖1-10岁全年龄段
系统化教学 - 基于自然拼读的进阶学习
游戏化设计 - 星星、徽章、庆祝机制
高效教学 - 基于研究的教学方法
充满乐趣 - 游戏化学习模式

“只要有合适的支持和鼓励，每个孩子都能学会阅读。” 📚

使用方法： 提出任何阅读技能相关需求——字母识别、自然拼读、高频词、阅读理解等，即可获得为孩子量身定制的即时交互式学习体验！