make it allow to practice words

index.html

@@ -56,10 +56,10 @@
                             <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 class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <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">
                             Practice This Word
                         </button>
-                    </div>
+</div>
                 </div>
 
                 <!-- Word Card 2 -->
@@ -71,10 +71,10 @@
                             <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 class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <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">
                             Practice This Word
                         </button>
-                    </div>
+</div>
                 </div>
 
                 <!-- Word Card 3 -->
@@ -86,10 +86,10 @@
                             <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 class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <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">
                             Practice This Word
                         </button>
-                    </div>
+</div>
                 </div>
 
                 <!-- Word Card 4 -->
@@ -101,10 +101,10 @@
                             <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 class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <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">
                             Practice This Word
                         </button>
-                    </div>
+</div>
                 </div>
 
                 <!-- Word Card 5 -->
@@ -116,10 +116,10 @@
                             <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 class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+                        <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">
                             Practice This Word
                         </button>
-                    </div>
+</div>
                 </div>
 
                 <!-- Add Your Own Card -->
@@ -140,26 +140,30 @@
                 <div class="p-8">
                     <h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Practice Zone</h2>
                     <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...">
                             <button id="play-word" class="p-2 bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200 transition-colors">
                                 <i data-feather="volume-2" class="w-5 h-5"></i>
                             </button>
-</div>
+                        </div>
                         <div id="feedback" class="hidden mt-2 p-3 rounded-md"></div>
                     </div>
                     <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>
-                    </div>
+                        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>
                 </div>
             </div>
-        </main>
+        </div>
+</main>
 
         <!-- Footer -->
         <footer class="mt-12 py-8 px-4 sm:px-6 lg:px-8 bg-indigo-800 text-white">
@@ -205,37 +209,69 @@
         document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
         });
+        // Practice functionality
+        let currentPracticeWord = '';
+        let currentPracticePronunciation = '';
+
+        function practiceWord(word, pronunciation) {
+            currentPracticeWord = word;
+            currentPracticePronunciation = pronunciation;
+            
+            document.getElementById('current-word').textContent = word;
+            document.getElementById('current-pronunciation').textContent = pronunciation;
+            document.getElementById('practice-word').value = '';
+            document.getElementById('feedback').classList.add('hidden');
+            
+            // Scroll to practice area
+            document.querySelector('.mt-12').scrollIntoView({ 
+                behavior: 'smooth' 
+            });
+        }
 
-        // Simple demo functionality
         document.addEventListener('DOMContentLoaded', function() {
+            // Initialize with first word
+            practiceWord('Accommodate', '/əˈkɒmədeɪt/');
+            
             document.getElementById('check-spelling').addEventListener('click', function() {
                 const input = document.getElementById('practice-word');
                 const feedback = document.getElementById('feedback');
                 
-                if (input.value.toLowerCase() === 'accommodate') {
+                if (input.value.toLowerCase() === currentPracticeWord.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!';
                 } 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. Try again!';
+                    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.classList.remove('hidden');
                 feather.replace();
             });
+            
             document.getElementById('new-word').addEventListener('click', function() {
-                document.getElementById('practice-word').value = '';
-                document.getElementById('feedback').classList.add('hidden');
+                // 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);
             });
+            
             document.getElementById('play-word').addEventListener('click', function() {
                 // Use Web Speech API to speak the word
-                const word = 'accommodate'; // Current practice word
-                const utterance = new SpeechSynthesisUtterance(word);
+                const utterance = new SpeechSynthesisUtterance(currentPracticeWord);
                 utterance.rate = 0.8;
                 utterance.pitch = 1;
                 speechSynthesis.speak(utterance);
             });
-});
-    </script>
+        });
+</script>
 </body>
 </html>