Update index.html

index.html

@@ -570,4 +570,528 @@
             
             // Vowel Teams (30 patterns)
             { pattern: "ai", pronunciation: "ay", category: "Vowels", words: ["rain", "train", "wait", "mail", "pain", "brain", "chain", "sail", "tail", "frail"] },
-            { pattern: "ay", pronunciation: "ay", catego
+            { pattern: "ay", pronunciation: "ay", category: "Vowels", words: ["day", "play", "say", "way", "may", "pay", "stay", "gray", "clay", "spray"] },
+            { pattern: "ee", pronunciation: "ee", category: "Vowels", words: ["tree", "see", "sleep", "bee", "feet", "green", "sheep", "three", "queen", "sweet"] },
+            { pattern: "ea", pronunciation: "ee", category: "Vowels", words: ["eat", "sea", "team", "leaf", "meal", "seat", "beach", "peach", "teach", "cheap"] },
+            { pattern: "ie", pronunciation: "ee", category: "Vowels", words: ["piece", "chief", "field", "believe", "grief", "relief", "thief", "yield", "shield", "niece"] },
+            { pattern: "y", pronunciation: "ee", category: "Vowels", words: ["happy", "baby", "funny", "sunny", "candy", "city", "puppy", "lady", "penny", "cherry"] },
+            { pattern: "y", pronunciation: "eye", category: "Vowels", words: ["cry", "fly", "my", "dry", "sky", "try", "why", "shy", "spy", "ply"] },
+            { pattern: "igh", pronunciation: "eye", category: "Vowels", words: ["night", "light", "high", "right", "fight", "bright", "flight", "sight", "tight", "might"] },
+            { pattern: "oa", pronunciation: "oh", category: "Vowels", words: ["boat", "coat", "road", "goat", "soap", "toast", "float", "throat", "coach", "roast"] },
+            { pattern: "oe", pronunciation: "oh", category: "Vowels", words: ["toe", "hoe", "foe", "doe", "woe", "aloe", "canoe", "oboe", "roe", "shoe"] },
+            { pattern: "ow", pronunciation: "oh", category: "Vowels", words: ["snow", "grow", "show", "bow", "row", "blow", "flow", "slow", "throw", "arrow"] },
+            { pattern: "ou", pronunciation: "ow", category: "Vowels", words: ["out", "cloud", "found", "house", "mouse", "shout", "proud", "round", "sound", "count"] },
+            { pattern: "ow", pronunciation: "ow", category: "Vowels", words: ["cow", "town", "down", "how", "now", "brown", "crowd", "flower", "power", "tower"] },
+            { pattern: "oi", pronunciation: "oy", category: "Vowels", words: ["coin", "boil", "soil", "oil", "noise", "voice", "choice", "spoil", "join", "point"] },
+            { pattern: "oy", pronunciation: "oy", category: "Vowels", words: ["toy", "boy", "enjoy", "joy", "soy", "annoy", "destroy", "employ", "loyal", "royal"] },
+            { pattern: "oo", pronunciation: "oo (long)", category: "Vowels", words: ["moon", "spoon", "tooth", "food", "room", "boot", "root", "pool", "school", "cool"] },
+            { pattern: "oo", pronunciation: "oo (short)", category: "Vowels", words: ["book", "look", "foot", "good", "hood", "wood", "stood", "cook", "hook", "shook"] },
+            { pattern: "ew", pronunciation: "yoo", category: "Vowels", words: ["few", "dew", "new", "chew", "news", "jewel", "nephew", "stew", "view", "review"] },
+            { pattern: "ue", pronunciation: "yoo", category: "Vowels", words: ["blue", "true", "clue", "glue", "value", "rescue", "argue", "venue", "statue", "virtue"] },
+            { pattern: "au", pronunciation: "aw", category: "Vowels", words: ["haul", "autumn", "launch", "cause", "pause", "audio", "author", "sauce", "haunt", "fault"] },
+            { pattern: "aw", pronunciation: "aw", category: "Vowels", words: ["saw", "draw", "claw", "law", "paw", "straw", "jaw", "lawn", "dawn", "yawn"] },
+            { pattern: "ei", pronunciation: "ay", category: "Vowels", words: ["veil", "eight", "weigh", "neighbor", "reign", "freight", "vein", "beige", "sleigh", "rein"] },
+            { pattern: "ey", pronunciation: "ay", category: "Vowels", words: ["they", "prey", "grey", "convey", "survey", "obey", "disobey", "hey", "whey", "abeyance"] },
+            { pattern: "ei", pronunciation: "ee", category: "Vowels", words: ["receive", "ceiling", "deceive", "perceive", "conceive", "receipt", "seize", "leisure", "weird", "either"] },
+            { pattern: "ey", pronunciation: "ee", category: "Vowels", words: ["key", "monkey", "honey", "money", "donkey", "turkey", "valley", "journey", "chimney", "kidney"] },
+            { pattern: "ie", pronunciation: "eye", category: "Vowels", words: ["pie", "tie", "die", "lie", "fried", "cried", "tried", "dried", "spied", "supplied"] },
+            { pattern: "ea", pronunciation: "eh", category: "Vowels", words: ["bread", "head", "ready", "heavy", "weather", "feather", "leather", "sweater", "treasure", "pleasure"] },
+            { pattern: "ou", pronunciation: "oo", category: "Vowels", words: ["soup", "group", "youth", "coupon", "routine", "souvenir", "you", "through", "wound", "route"] },
+            { pattern: "ui", pronunciation: "oo", category: "Vowels", words: ["fruit", "juice", "suit", "bruise", "cruise", "suitcase", "recruit", "biscuit", "circuit", "pursuit"] },
+            { pattern: "ew", pronunciation: "oo", category: "Vowels", words: ["blew", "grew", "flew", "crew", "chew", "drew", "threw", "screw", "brew", "jewel"] },
+            
+            // Word Endings (15 patterns)
+            { pattern: "tion", pronunciation: "shun", category: "Endings", words: ["action", "station", "nation", "education", "vacation", "celebration", "information", "communication", "population", "attention"] },
+            { pattern: "sion", pronunciation: "zhun", category: "Endings", words: ["vision", "decision", "confusion", "television", "division", "conclusion", "explosion", "invasion", "occasion", "persuasion"] },
+            { pattern: "sion", pronunciation: "shun", category: "Endings", words: ["mission", "passion", "session", "expression", "discussion", "permission", "profession", "impression", "depression", "compression"] },
+            { pattern: "cian", pronunciation: "shun", category: "Endings", words: ["musician", "magician", "physician", "politician", "electrician", "mathematician", "technician", "beautician", "dietician", "statistician"] },
+            { pattern: "ture", pronunciation: "chur", category: "Endings", words: ["picture", "future", "nature", "creature", "adventure", "furniture", "temperature", "signature", "mixture", "literature"] },
+            { pattern: "le", pronunciation: "ul", category: "Endings", words: ["table", "candle", "little", "apple", "bubble", "puzzle", "turtle", "castle", "bottle", "middle"] },
+            { pattern: "ous", pronunciation: "us", category: "Endings", words: ["famous", "nervous", "dangerous", "enormous", "generous", "humorous", "mysterious", "numerous", "precious", "serious"] },
+            { pattern: "cious", pronunciation: "shus", category: "Endings", words: ["delicious", "suspicious", "precious", "conscious", "vicious", "gracious", "spacious", "judicious", "malicious", "auspicious"] },
+            { pattern: "tious", pronunciation: "shus", category: "Endings", words: ["ambitious", "cautious", "nutritious", "fictitious", "infectious", "superstitious", "contentious", "ostentatious", "pretentious", "conscientious"] },
+            { pattern: "cial", pronunciation: "shul", category: "Endings", words: ["special", "social", "official", "commercial", "financial", "racial", "crucial", "judicial", "beneficial", "superficial"] },
+            { pattern: "tial", pronunciation: "shul", category: "Endings", words: ["partial", "essential", "initial", "potential", "residential", "confidential", "substantial", "sequential", "influential", "presidential"] },
+            { pattern: "age", pronunciation: "ij", category: "Endings", words: ["cage", "page", "stage", "message", "village", "damage", "manage", "package", "passage", "voyage"] },
+            { pattern: "age", pronunciation: "azh", category: "Endings", words: ["garage", "massage", "mirage", "corsage", "camouflage", "espionage", "collage", "montage", "sabotage", "badinage"] },
+            { pattern: "ine", pronunciation: "in", category: "Endings", words: ["engine", "imagine", "medicine", "discipline", "determine", "famine", "routine", "doctrine", "genuine", "vaccine"] },
+            { pattern: "ine", pronunciation: "ine", category: "Endings", words: ["pine", "fine", "line", "mine", "nine", "vine", "wine", "shine", "whine", "divine"] }
+        ];
+
+        // Game state
+        let currentPattern = null;
+        let currentWord = "";
+        let selectedOption = null;
+        let score = 0;
+        let streak = 0;
+        let correctCount = 0;
+        let totalQuestions = 0;
+        let patternsMastered = new Set();
+        let timer = 30;
+        let timerInterval = null;
+        let gameActive = false;
+        let wordHistory = [];
+        let currentCategory = "all";
+        
+        // DOM Elements
+        const wordDisplay = document.getElementById('wordDisplay');
+        const wordHint = document.getElementById('wordHint');
+        const patternOptions = document.getElementById('patternOptions');
+        const feedback = document.getElementById('feedback');
+        const submitBtn = document.getElementById('submitBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const hintBtn = document.getElementById('hintBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+        const exportBtn = document.getElementById('exportBtn');
+        const scoreEl = document.getElementById('score');
+        const streakEl = document.getElementById('streak');
+        const correctCountEl = document.getElementById('correctCount');
+        const totalQuestionsEl = document.getElementById('totalQuestions');
+        const accuracyEl = document.getElementById('accuracy');
+        const progressFill = document.getElementById('progressFill');
+        const progressText = document.getElementById('progressText');
+        const historyList = document.getElementById('historyList');
+        const historyCount = document.getElementById('historyCount');
+        const timerEl = document.getElementById('timer');
+        const completedWord = document.getElementById('completedWord');
+        const patternCategories = document.getElementById('patternCategories');
+        
+        // Initialize game
+        function initGame() {
+            loadGameState();
+            setupEventListeners();
+            renderCategoryFilters();
+            generateNewWord();
+            updateStats();
+            updateHistory();
+        }
+        
+        // Load game state from localStorage
+        function loadGameState() {
+            const savedState = JSON.parse(localStorage.getItem('wordBuilderState'));
+            if (savedState) {
+                score = savedState.score || 0;
+                streak = savedState.streak || 0;
+                correctCount = savedState.correctCount || 0;
+                totalQuestions = savedState.totalQuestions || 0;
+                patternsMastered = new Set(savedState.patternsMastered || []);
+                wordHistory = savedState.wordHistory || [];
+                currentCategory = savedState.currentCategory || "all";
+            }
+        }
+        
+        // Save game state to localStorage
+        function saveGameState() {
+            const state = {
+                score,
+                streak,
+                correctCount,
+                totalQuestions,
+                patternsMastered: Array.from(patternsMastered),
+                wordHistory,
+                currentCategory,
+                timestamp: Date.now()
+            };
+            localStorage.setItem('wordBuilderState', JSON.stringify(state));
+        }
+        
+        // Render category filters
+        function renderCategoryFilters() {
+            const categories = ['all', 'Consonant', 'Vowels', 'Endings'];
+            
+            patternCategories.innerHTML = '';
+            categories.forEach(category => {
+                const count = category === 'all' 
+                    ? wordBuilderData.length 
+                    : wordBuilderData.filter(p => p.category === category).length;
+                
+                const tag = document.createElement('div');
+                tag.className = `category-tag ${currentCategory === category ? 'active' : ''}`;
+                tag.textContent = `${category} (${count})`;
+                tag.dataset.category = category;
+                
+                tag.addEventListener('click', () => {
+                    currentCategory = category;
+                    renderCategoryFilters();
+                    generateNewWord();
+                    saveGameState();
+                });
+                
+                patternCategories.appendChild(tag);
+            });
+        }
+        
+        // Setup event listeners
+        function setupEventListeners() {
+            submitBtn.addEventListener('click', checkAnswer);
+            nextBtn.addEventListener('click', generateNewWord);
+            hintBtn.addEventListener('click', showHint);
+            resetBtn.addEventListener('click', resetGame);
+            clearHistoryBtn.addEventListener('click', clearHistory);
+            exportBtn.addEventListener('click', exportHistory);
+            
+            // Keyboard shortcuts
+            document.addEventListener('keydown', (e) => {
+                if (e.key >= '1' && e.key <= '8') {
+                    const index = parseInt(e.key) - 1;
+                    const options = document.querySelectorAll('.pattern-option');
+                    if (options[index]) {
+                        options[index].click();
+                    }
+                } else if (e.key === 'Enter') {
+                    if (gameActive) {
+                        checkAnswer();
+                    } else {
+                        generateNewWord();
+                    }
+                } else if (e.key === ' ') {
+                    e.preventDefault();
+                    if (!gameActive) {
+                        generateNewWord();
+                    }
+                }
+            });
+        }
+        
+        // Generate a new word with continuous blank line
+        function generateNewWord() {
+            // Stop any existing timer
+            if (timerInterval) clearInterval(timerInterval);
+            
+            // Reset UI
+            feedback.style.display = 'none';
+            selectedOption = null;
+            completedWord.textContent = '';
+            
+            // Filter patterns by category
+            let filteredPatterns = wordBuilderData;
+            if (currentCategory !== 'all') {
+                filteredPatterns = wordBuilderData.filter(p => p.category === currentCategory);
+            }
+            
+            // Select random pattern
+            const randomIndex = Math.floor(Math.random() * filteredPatterns.length);
+            currentPattern = filteredPatterns[randomIndex];
+            
+            // Select random word from pattern
+            const wordIndex = Math.floor(Math.random() * currentPattern.words.length);
+            currentWord = currentPattern.words[wordIndex];
+            
+            // Find pattern in word (case insensitive)
+            const patternIndex = currentWord.toLowerCase().indexOf(currentPattern.pattern.toLowerCase());
+            
+            if (patternIndex !== -1) {
+                const before = currentWord.substring(0, patternIndex);
+                const after = currentWord.substring(patternIndex + currentPattern.pattern.length);
+                
+                // Display with continuous blank line
+                wordDisplay.innerHTML = `
+                    ${before ? `<span class="word-part">${before}</span>` : ''}
+                    <div class="continuous-blank">
+                        <div class="blank-line"></div>
+                    </div>
+                    ${after ? `<span class="word-part">${after}</span>` : ''}
+                `;
+                
+                // Update hint
+                wordHint.textContent = `Category: ${currentPattern.category} | Sound: "${currentPattern.pronunciation}"`;
+            } else {
+                // Fallback: show entire word as blank (shouldn't happen)
+                wordDisplay.innerHTML = `
+                    <div class="continuous-blank" style="min-width: 250px;">
+                        <div class="blank-line"></div>
+                    </div>
+                `;
+                wordHint.textContent = "Find the phonics pattern that completes this word";
+            }
+            
+            // Generate options
+            generateOptions();
+            
+            // Start timer
+            timer = 30;
+            timerEl.textContent = `Time: ${timer}s`;
+            timerEl.style.color = "#ffd166";
+            gameActive = true;
+            
+            timerInterval = setInterval(() => {
+                timer--;
+                timerEl.textContent = `Time: ${timer}s`;
+                
+                if (timer <= 0) {
+                    clearInterval(timerInterval);
+                    gameActive = false;
+                    feedback.textContent = "Time's up! The answer was: " + currentPattern.pattern;
+                    feedback.className = "feedback incorrect";
+                    feedback.style.display = "block";
+                    addToHistory(false, false);
+                }
+                
+                if (timer <= 10) {
+                    timerEl.style.color = "#ff416c";
+                } else if (timer <= 20) {
+                    timerEl.style.color = "#ffb347";
+                }
+            }, 1000);
+            
+            // Update UI
+            patternOptions.querySelectorAll('.pattern-option').forEach(opt => {
+                opt.classList.remove('selected', 'wrong');
+            });
+            
+            submitBtn.disabled = false;
+            submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Submit Answer';
+        }
+        
+        // Generate pattern options
+        function generateOptions() {
+            // Clear existing options
+            patternOptions.innerHTML = '';
+            const options = [currentPattern.pattern];
+            
+            // Get other patterns for wrong options
+            let allPatterns = [...new Set(wordBuilderData.map(p => p.pattern))];
+            
+            // Filter by category if needed
+            if (currentCategory !== 'all') {
+                allPatterns = [...new Set(wordBuilderData
+                    .filter(p => p.category === currentCategory)
+                    .map(p => p.pattern))];
+            }
+            
+            const wrongPatterns = allPatterns.filter(p => p !== currentPattern.pattern);
+            
+            // Shuffle and select 7 wrong options (8 total)
+            shuffleArray(wrongPatterns);
+            for (let i = 0; i < 7; i++) {
+                if (wrongPatterns[i]) {
+                    options.push(wrongPatterns[i]);
+                }
+            }
+            
+            // Shuffle options
+            shuffleArray(options);
+            
+            // Create option buttons
+            options.forEach((pattern, index) => {
+                const option = document.createElement('div');
+                option.className = 'pattern-option';
+                option.textContent = pattern;
+                option.dataset.pattern = pattern;
+                option.title = `Option ${index + 1} (Press ${index + 1})`;
+                
+                option.addEventListener('click', () => {
+                    if (!gameActive) return;
+                    
+                    // Deselect all options
+                    patternOptions.querySelectorAll('.pattern-option').forEach(opt => {
+                        opt.classList.remove('selected');
+                    });
+                    
+                    // Select clicked option
+                    option.classList.add('selected');
+                    selectedOption = pattern;
+                });
+                
+                patternOptions.appendChild(option);
+            });
+        }
+        
+        // Check answer
+        function checkAnswer() {
+            if (!selectedOption || !gameActive) return;
+            
+            clearInterval(timerInterval);
+            gameActive = false;
+            
+            const isCorrect = selectedOption === currentPattern.pattern;
+            const timeBonus = Math.floor(timer / 5) * 10;
+            
+            // Update score and streak
+            if (isCorrect) {
+                score += 10 + timeBonus;
+                streak++;
+                correctCount++;
+                patternsMastered.add(currentPattern.pattern);
+                
+                feedback.textContent = `Correct! +${10 + timeBonus} points (${timeBonus} time bonus)`;
+                feedback.className = "feedback correct";
+                completedWord.textContent = `Complete word: ${currentWord}`;
+            } else {
+                streak = 0;
+                
+                feedback.textContent = `Incorrect. The answer was: ${currentPattern.pattern}`;
+                feedback.className = "feedback incorrect";
+                
+                // Highlight correct option
+                patternOptions.querySelectorAll('.pattern-option').forEach(opt => {
+                    if (opt.dataset.pattern === currentPattern.pattern) {
+                        opt.classList.add('selected');
+                    } else if (opt.dataset.pattern === selectedOption) {
+                        opt.classList.add('wrong');
+                    }
+                });
+            }
+            
+            totalQuestions++;
+            
+            // Add to history
+            addToHistory(isCorrect, true);
+            
+            // Update stats and save
+            updateStats();
+            saveGameState();
+            
+            // Disable submit button
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<i class="fas fa-check"></i> Answered';
+        }
+        
+        // Show hint
+        function showHint() {
+            // Already showing hint in wordHint
+            // Could add more specific hint here
+            if (currentPattern) {
+                const examples = currentPattern.words.slice(0, 3).join(", ");
+                alert(`Hint: The pattern "${currentPattern.pattern}" makes the sound "${currentPattern.pronunciation}"\n\nExamples: ${examples}`);
+            }
+        }
+        
+        // Reset game
+        function resetGame() {
+            if (confirm("Start a new game? Your progress will be saved, but current streak will reset.")) {
+                streak = 0;
+                generateNewWord();
+                updateStats();
+                saveGameState();
+            }
+        }
+        
+        // Add word to history
+        function addToHistory(isCorrect, attempted) {
+            const historyItem = {
+                word: currentWord,
+                pattern: currentPattern.pattern,
+                correct: isCorrect,
+                attempted: attempted, // false for timeout
+                timestamp: new Date().toISOString(),
+                time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}),
+                date: new Date().toLocaleDateString(),
+                category: currentPattern.category
+            };
+            
+            wordHistory.unshift(historyItem);
+            // Keep only last 100 items
+            if (wordHistory.length > 100) {
+                wordHistory = wordHistory.slice(0, 100);
+            }
+            updateHistory();
+        }
+        
+        // Update history display
+        function updateHistory() {
+            historyList.innerHTML = '';
+            
+            if (wordHistory.length === 0) {
+                historyList.innerHTML = '<div style="text-align: center; padding: 20px; opacity: 0.7;">No attempts yet</div>';
+                historyCount.textContent = '0';
+                return;
+            }
+            
+            wordHistory.forEach(item => {
+                const div = document.createElement('div');
+                div.className = `history-item ${item.correct ? 'correct' : 'incorrect'}`;
+                
+                let statusIcon = item.correct ? '✓' : '✗';
+                let statusText = item.correct ? 'Correct' : 'Incorrect';
+                if (!item.attempted) {
+                    statusIcon = '⏰';
+                    statusText = 'Timeout';
+                }
+                
+                div.innerHTML = `
+                    <div class="history-word" title="${item.word}">${item.word}</div>
+                    <div class="history-pattern">${item.pattern}</div>
+                    <div class="history-result">
+                        <span>${statusIcon}</span>
+                        <span>${item.time}</span>
+                    </div>
+                `;
+                div.title = `${item.word} - ${item.pattern} - ${item.category} - ${statusText} at ${item.time}`;
+                
+                historyList.appendChild(div);
+            });
+            
+            historyCount.textContent = wordHistory.length;
+        }
+        
+        // Clear history
+        function clearHistory() {
+            if (confirm("Clear all attempt history? This cannot be undone.")) {
+                wordHistory = [];
+                updateHistory();
+                saveGameState();
+            }
+        }
+        
+        // Export history
+        function exportHistory() {
+            if (wordHistory.length === 0) {
+                alert("No history to export.");
+                return;
+            }
+            
+            let csvContent = "Word,Pattern,Category,Result,Date,Time\n";
+            
+            wordHistory.forEach(item => {
+                const result = item.correct ? 'Correct' : (item.attempted ? 'Incorrect' : 'Timeout');
+                csvContent += `"${item.word}","${item.pattern}","${item.category}",${result},"${item.date}","${item.time}"\n`;
+            });
+            
+            const blob = new Blob([csvContent], { type: 'text/csv' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `phonics-history-${new Date().toISOString().slice(0,10)}.csv`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+            
+            alert(`Exported ${wordHistory.length} attempts to CSV file.`);
+        }
+        
+        // Update all stats
+        function updateStats() {
+            scoreEl.textContent = score;
+            streakEl.textContent = streak;
+            correctCountEl.textContent = correctCount;
+            totalQuestionsEl.textContent = totalQuestions;
+            
+            const accuracy = totalQuestions > 0 ? Math.round((correctCount / totalQuestions) * 100) : 0;
+            accuracyEl.textContent = `${accuracy}%`;
+            
+            const totalPatterns = currentCategory === 'all' 
+                ? wordBuilderData.length 
+                : wordBuilderData.filter(p => p.category === currentCategory).length;
+            
+            const progress = totalPatterns > 0 ? (patternsMastered.size / totalPatterns) * 100 : 0;
+            progressFill.style.width = `${progress}%`;
+            progressText.textContent = `${patternsMastered.size}/${totalPatterns} patterns (${Math.round(progress)}%)`;
+        }
+        
+        // Utility: Shuffle array
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array;
+        }
+        
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', initGame);
+    </script>
+</body>
+</html>