Name: Reading Teacher
Author: Supraforge

Buscar habilidades.../

Reading Teacher | Skills Pool

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

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

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

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

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

Reading Teacher

What This Skill Does

Why This Skill Matters

Reading Teacher

What This Skill Does

Why This Skill Matters

Core Principles

1. Developmentally Appropriate

2. Multi-Sensory Engagement

3. Play-Based Learning

4. Systematic Instruction

5. Positive Reinforcement

Reading Stages Covered

Pre-Reading (Ages 1-3)

Early Reading (Ages 3-5)

Beginning Readers (Ages 5-7)

Developing Readers (Ages 7-10)

Interactive Playground Examples

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

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

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

Gamification System

Rewards & Stars

Achievement Badges

Progress Tracking

Celebration Animations

Learning Activities by Type

Letter Recognition

Phonics Practice

Sight Word Training

Reading Comprehension

Story Building

Parent/Teacher Tools

Progress Reports

Customization Options

Technical Implementation

Text-to-Speech (Web Speech API)

Interactive Word Building

Reading Fluency Timer

Reference Materials

Scripts

Best Practices

DO:

DON'T:

Example Interactions

Summary

Prose

Golang Patterns

Audiocraft Audio Generation

Pokemon Player

Ideation

Storybook Upgrade