Fun Word Learning

Let's Learn Words!

Score: 0

body { font-family: 'Comic Sans MS', cursive, sans-serif; background-color: #f0f8ff; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .game-container { background-color: white; border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 30px; text-align: center; max-width: 800px; width: 90%; } h1 { color: #ff6b6b; margin-bottom: 20px; } .score { font-size: 24px; color: #4ecdc4; margin-bottom: 20px; } .word-display { font-size: 48px; margin: 20px 0; color: #333; min-height: 60px; } .options-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px 0; } .option { background-color: #ffd166; border: none; border-radius: 15px; padding: 15px; font-size: 24px; color: white; cursor: pointer; transition: all 0.3s; } .option:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .feedback { font-size: 28px; margin-top: 20px; min-height: 40px; color: #06d6a0; } .correct { background-color: #06d6a0 !important; } .wrong { background-color: #ef476f !important; } const words = [ { word: "cat", image: "🐱" }, { word: "dog", image: "🐶" }, { word: "apple", image: "🍎" }, { word: "ball", image: "⚽" }, { word: "sun", image: "☀️" }, { word: "car", image: "🚗" }, { word: "tree", image: "🌳" }, { word: "book", image: "📖" }, { word: "fish", image: "🐟" }, { word: "house", image: "🏠" } ]; let currentWord = null; let score = 0; let usedWords = []; const wordDisplay = document.getElementById('word-display'); const optionsContainer = document.getElementById('options-container'); const feedbackElement = document.getElementById('feedback'); const scoreElement = document.getElementById('score'); const correctSound = document.getElementById('correct-sound'); const wrongSound = document.getElementById('wrong-sound'); function getRandomWord() { const availableWords = words.filter(word => !usedWords.includes(word.word)); if (availableWords.length === 0) { usedWords = []; return getRandomWord(); } const randomIndex = Math.floor(Math.random() * availableWords.length); return availableWords[randomIndex]; } function getRandomOptions(correctWord) { const otherWords = words.filter(word => word.word !== correctWord); const shuffled = [...otherWords].sort(() => 0.5 - Math.random()); return shuffled.slice(0, 3).map(word => word.word).concat(correctWord).sort(() => 0.5 - Math.random()); } function displayWord() { currentWord = getRandomWord(); usedWords.push(currentWord.word); wordDisplay.textContent = currentWord.image; wordDisplay.style.fontSize = "72px"; const options = getRandomOptions(currentWord.word); optionsContainer.innerHTML = ''; options.forEach(option => { const button = document.createElement('button'); button.className = 'option'; button.textContent = option; button.addEventListener('click', () => checkAnswer(option)); optionsContainer.appendChild(button); }); feedbackElement.textContent = ''; } function checkAnswer(selectedWord) { if (selectedWord === currentWord.word) { feedbackElement.textContent = "Correct! 🎉"; feedbackElement.style.color = "#06d6a0"; score += 10; scoreElement.textContent = score; correctSound.play(); const correctButton = Array.from(optionsContainer.children).find( button => button.textContent === currentWord.word ); correctButton.classList.add('correct'); setTimeout(displayWord, 1500); } else { feedbackElement.textContent = "Oops! Try again!"; feedbackElement.style.color = "#ef476f"; wrongSound.play(); const wrongButton = Array.from(optionsContainer.children).find( button => button.textContent === selectedWord ); wrongButton.classList.add('wrong'); } } // Start the game displayWord();