849 lines
23 KiB
Markdown
849 lines
23 KiB
Markdown
---
|
|
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!
|