Initial commit
This commit is contained in:
Zhongwei Li
848
skills/reading-teacher/SKILL.md
Normal file
848
skills/reading-teacher/SKILL.md
Normal file
@@ -0,0 +1,848 @@
|
||||
---
|
||||
name: reading-teacher
|
||||
description: Interactive reading teacher that instantly generates playful, engaging learning experiences for children ages 1-10. Creates visual playgrounds, phonics games, and interactive stories to build reading skills from letter recognition to comprehension.
|
||||
---
|
||||
|
||||
# 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
|
||||
|
||||
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
|
||||
|
||||
## Why This Skill Matters
|
||||
|
||||
**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
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Developmentally Appropriate
|
||||
- Age-specific content and challenges
|
||||
- Scaffolded learning progression
|
||||
- Appropriate complexity levels
|
||||
- Sensitive to attention spans
|
||||
- Celebrates every milestone
|
||||
|
||||
### 2. Multi-Sensory Engagement
|
||||
- Visual letter displays
|
||||
- Audio pronunciation
|
||||
- Interactive touch/click
|
||||
- Animated feedback
|
||||
- Colorful, engaging design
|
||||
|
||||
### 3. Play-Based Learning
|
||||
- Games over drills
|
||||
- Story-driven activities
|
||||
- Character companions
|
||||
- Reward systems
|
||||
- Celebration animations
|
||||
|
||||
### 4. Systematic Instruction
|
||||
- Sequential skill building
|
||||
- Phonics-based approach
|
||||
- High-frequency sight words
|
||||
- Comprehension strategies
|
||||
- Fluency development
|
||||
|
||||
### 5. Positive Reinforcement
|
||||
- Immediate encouragement
|
||||
- Visual progress markers
|
||||
- Achievement celebrations
|
||||
- No negative feedback
|
||||
- Growth mindset focus
|
||||
|
||||
## Reading Stages Covered
|
||||
|
||||
### Pre-Reading (Ages 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)
|
||||
**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
|
||||
|
||||
### Beginning Readers (Ages 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
|
||||
|
||||
### Developing Readers (Ages 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)
|
||||
|
||||
**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
|
||||
|
||||
### Example 2: Sight Word Safari (Ages 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
|
||||
|
||||
### Example 3: Story Builder Studio (Ages 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
|
||||
|
||||
### 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
|
||||
|
||||
### Progress Tracking
|
||||
- Letters learned (26 total)
|
||||
- Sight words mastered
|
||||
- Stories completed
|
||||
- Reading streak (days)
|
||||
- Time spent reading
|
||||
- Accuracy percentage
|
||||
- Reading level advancement
|
||||
|
||||
### 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;
|
||||
}
|
||||
```
|
||||
|
||||
### 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}/`
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
### 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 };
|
||||
}
|
||||
```
|
||||
|
||||
### 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!'
|
||||
}
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### 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}!`;
|
||||
}
|
||||
```
|
||||
|
||||
## 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']
|
||||
};
|
||||
```
|
||||
|
||||
### 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)
|
||||
```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 };
|
||||
}
|
||||
```
|
||||
|
||||
### 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!';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
## 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
|
||||
|
||||
## 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
|
||||
|
||||
### 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*
|
||||
|
||||
## 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!
|
||||
Reference in New Issue
Block a user