make it allow to practice words

index.html

@@ -56,7 +56,7 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> To provide lodging or space for someone.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Remember it has two Cs and two Ms.</p>
                         </div>
-                        <button onclick="practiceWord('Accommodate', '/əˈkɒmədeɪt/')" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Accommodate" data-pronunciation="/əˈkɒmədeɪt/">
                             Practice This Word
                         </button>
 </div>
@@ -71,7 +71,7 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> To cause someone to feel self-conscious.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Double R and double S - it's embarrassing to forget!</p>
                         </div>
-                        <button onclick="practiceWord('Embarrass', '/ɪmˈbærəs/')" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <button class="practice-word-btn w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Embarrass" data-pronunciation="/ɪmˈbærəs/">
                             Practice This Word
                         </button>
 </div>
@@ -86,7 +86,7 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> The process of maintaining something.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Contains "ten" in the middle.</p>
                         </div>
-                        <button onclick="practiceWord('Maintenance', '/ˈmeɪntənəns/')" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Maintenance" data-pronunciation="/ˈmeɪntənəns/">
                             Practice This Word
                         </button>
 </div>
@@ -101,7 +101,7 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> An inner feeling of right and wrong.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Remember "science" is in "conscience".</p>
                         </div>
-                        <button onclick="practiceWord('Conscience', '/ˈkɒnʃəns/')" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <button class="practice-word-btn w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Conscience" data-pronunciation="/ˈkɒnʃəns/">
                             Practice This Word
                         </button>
 </div>
@@ -116,7 +116,7 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> A strong, regular repeated pattern.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> No vowels except the Y!</p>
                         </div>
-                        <button onclick="practiceWord('Rhythm', '/ˈrɪðəm/')" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Rhythm" data-pronunciation="/ˈrɪðəm/">
                             Practice This Word
                         </button>
 </div>
@@ -134,16 +134,15 @@
                     </div>
                 </div>
             </div>
-
             <!-- Practice Area -->
             <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
                 <div class="p-8">
                     <h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Practice Zone</h2>
+                    <div class="text-center mb-6">
+                        <div id="current-word" class="text-3xl font-bold text-indigo-700 mb-2"></div>
+                        <div id="current-pronunciation" class="text-gray-500 mb-4"></div>
+                    </div>
                     <div class="mb-6">
-                        <div class="text-center mb-4">
-                            <div id="current-word" class="text-2xl font-bold text-indigo-700"></div>
-                            <div id="current-pronunciation" class="text-gray-500 mt-1"></div>
-                        </div>
                         <label for="practice-word" class="block text-sm font-medium text-gray-700 mb-2">Type the word you hear:</label>
                         <div class="flex items-center space-x-2 mb-4">
                             <input type="text" id="practice-word" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Spell the word...">
@@ -156,13 +155,13 @@
                     <div class="flex justify-center space-x-4">
                         <button id="check-spelling" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
                         Check Spelling
-                    </button>
-                    <button id="new-word" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
-                        New Word
-                    </button>
+                        </button>
+                        <button id="new-word" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
+                            Random Word
+                        </button>
+                    </div>
                 </div>
             </div>
-        </div>
 </main>
 
         <!-- Footer -->
@@ -210,66 +209,74 @@
             feather.replace();
         });
         // Practice functionality
-        let currentPracticeWord = '';
-        let currentPracticePronunciation = '';
-
-        function practiceWord(word, pronunciation) {
-            currentPracticeWord = word;
-            currentPracticePronunciation = pronunciation;
+        document.addEventListener('DOMContentLoaded', function() {
+            const practiceWords = [
+                { word: 'Accommodate', pronunciation: '/əˈkɒmədeɪt/' },
+                { word: 'Embarrass', pronunciation: '/ɪmˈbærəs/' },
+                { word: 'Maintenance', pronunciation: '/ˈmeɪntənəns/' },
+                { word: 'Conscience', pronunciation: '/ˈkɒnʃəns/' },
+                { word: 'Rhythm', pronunciation: '/ˈrɪðəm/' }
+            ];
+            
+            let currentWord = null;
             
-            document.getElementById('current-word').textContent = word;
-            document.getElementById('current-pronunciation').textContent = pronunciation;
-            document.getElementById('practice-word').value = '';
-            document.getElementById('feedback').classList.add('hidden');
+            // Function to set a new practice word
+            function setPracticeWord(wordData) {
+                currentWord = wordData;
+                document.getElementById('current-word').textContent = '???';
+                document.getElementById('current-pronunciation').textContent = wordData.pronunciation;
+                document.getElementById('practice-word').value = '';
+                document.getElementById('feedback').classList.add('hidden');
+            }
             
-            // Scroll to practice area
-            document.querySelector('.mt-12').scrollIntoView({ 
-                behavior: 'smooth' 
+            // Function to get a random word
+            function getRandomWord() {
+                const randomIndex = Math.floor(Math.random() * practiceWords.length);
+                return practiceWords[randomIndex];
+            }
+            
+            // Initialize with a random word
+            setPracticeWord(getRandomWord());
+            
+            // Practice word button handlers
+            document.querySelectorAll('.practice-word-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    const word = this.getAttribute('data-word');
+                    const pronunciation = this.getAttribute('data-pronunciation');
+                    setPracticeWord({ word, pronunciation });
             });
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialize with first word
-            practiceWord('Accommodate', '/əˈkɒmədeɪt/');
             
+            // Check spelling
             document.getElementById('check-spelling').addEventListener('click', function() {
                 const input = document.getElementById('practice-word');
                 const feedback = document.getElementById('feedback');
                 
-                if (input.value.toLowerCase() === currentPracticeWord.toLowerCase()) {
+                if (currentWord && input.value.toLowerCase() === currentWord.word.toLowerCase()) {
                     feedback.className = 'bg-green-100 text-green-800 mt-2 p-3 rounded-md';
                     feedback.innerHTML = '<i data-feather="check-circle" class="w-5 h-5 inline mr-2"></i> Correct! Well done!';
+                    document.getElementById('current-word').textContent = currentWord.word;
                 } else {
                     feedback.className = 'bg-red-100 text-red-800 mt-2 p-3 rounded-md';
-                    feedback.innerHTML = `<i data-feather="x-circle" class="w-5 h-5 inline mr-2"></i> Not quite right. The correct spelling is: <strong>${currentPracticeWord}</strong>`;
+                    feedback.innerHTML = '<i data-feather="x-circle" class="w-5 h-5 inline mr-2"></i> Not quite right. Try again!';
                 }
                 
                 feedback.classList.remove('hidden');
                 feather.replace();
             });
             
+            // New random word
             document.getElementById('new-word').addEventListener('click', function() {
-                // Cycle through available words
-                const words = [
-                    { word: 'Accommodate', pronunciation: '/əˈkɒmədeɪt/' },
-                    { word: 'Embarrass', pronunciation: '/ɪmˈbærəs/' },
-                    { word: 'Maintenance', pronunciation: '/ˈmeɪntənəns/' },
-                    { word: 'Conscience', pronunciation: '/ˈkɒnʃəns/' },
-                    { word: 'Rhythm', pronunciation: '/ˈrɪðəm/' }
-                ];
-                
-                const currentIndex = words.findIndex(w => w.word === currentPracticeWord);
-                const nextIndex = (currentIndex + 1) % words.length;
-                
-                practiceWord(words[nextIndex].word, words[nextIndex].pronunciation);
+                setPracticeWord(getRandomWord());
             });
             
+            // Play word sound
             document.getElementById('play-word').addEventListener('click', function() {
-                // Use Web Speech API to speak the word
-                const utterance = new SpeechSynthesisUtterance(currentPracticeWord);
-                utterance.rate = 0.8;
-                utterance.pitch = 1;
-                speechSynthesis.speak(utterance);
+                if (currentWord) {
+                    const utterance = new SpeechSynthesisUtterance(currentWord.word);
+                    utterance.rate = 0.8;
+                    utterance.pitch = 1;
+                    speechSynthesis.speak(utterance);
+                }
             });
         });
 </script>