Update index.html

index.html

@@ -560,19 +560,19 @@
     <div id="sidebar" class="sidebar">
         <a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">&times;</a>
         <ul class="sidebar-links">
-            <li><a href="#" onclick="setPage('tifinagh'); closeSidebar();">تعلم الحروف</a></li>
-            <li><a href="#" onclick="setPage('numbers'); closeSidebar();">تعلم الأرقام</a></li>
-            <li><a href="#" onclick="setPage('animals'); closeSidebar();">الحيوانات</a></li>
-            <li><a href="#" onclick="setPage('schoolSupplies'); closeSidebar();">أدوات مدرسية</a></li>
-            <li><a href="#" onclick="setPage('colors'); closeSidebar();">الألوان</a></li>
-            <li><a href="#" onclick="setPage('family'); closeSidebar();">العائلة</a></li>
-            <li><a href="#" onclick="setPage('bodyParts'); closeSidebar();">أجزاء الجسم</a></li>
-            <li><a href="#" onclick="setPage('seasons'); closeSidebar();">فصول السنة</a></li>
-            <li><a href="#" onclick="setPage('fruits'); closeSidebar();">الفواكه</a></li>
-            <li><a href="#" onclick="setPage('vegetables'); closeSidebar();">الخضروات</a></li>
-            <li><a href="#" onclick="setPage('months'); closeSidebar();">الشهور</a></li>
-            <li><a href="#" onclick="setPage('days'); closeSidebar();">أيام الأسبوع</a></li>
-            <li><a href="#" onclick="setPage('gameMenu'); closeSidebar();">ألعاب تعليمية</a></li>
+            <li><a href="#" onclick="setPage('tifinagh'); playSound('audio/tifinagh_category.mp3'); closeSidebar();">تعلم الحروف</a></li>
+            <li><a href="#" onclick="setPage('numbers'); playSound('audio/numbers_category.mp3'); closeSidebar();">تعلم الأرقام</a></li>
+            <li><a href="#" onclick="setPage('animals'); playSound('audio/animals_category.mp3'); closeSidebar();">الحيوانات</a></li>
+            <li><a href="#" onclick="setPage('schoolSupplies'); playSound('audio/school_supplies_category.mp3'); closeSidebar();">أدوات مدرسية</a></li>
+            <li><a href="#" onclick="setPage('colors'); playSound('audio/colors_category.mp3'); closeSidebar();">الألوان</a></li>
+            <li><a href="#" onclick="setPage('family'); playSound('audio/family_category.mp3'); closeSidebar();">العائلة</a></li>
+            <li><a href="#" onclick="setPage('bodyParts'); playSound('audio/body_parts_category.mp3'); closeSidebar();">أجزاء الجسم</a></li>
+            <li><a href="#" onclick="setPage('seasons'); playSound('audio/seasons_category.mp3'); closeSidebar();">فصول السنة</a></li>
+            <li><a href="#" onclick="setPage('fruits'); playSound('audio/fruits_category.mp3'); closeSidebar();">الفواكه</a></li>
+            <li><a href="#" onclick="setPage('vegetables'); playSound('audio/vegetables_category.mp3'); closeSidebar();">الخضروات</a></li>
+            <li><a href="#" onclick="setPage('months'); playSound('audio/months_category.mp3'); closeSidebar();">الشهور</a></li>
+            <li><a href="#" onclick="setPage('days'); playSound('audio/days_category.mp3'); closeSidebar();">أيام الأسبوع</a></li>
+            <li><a href="#" onclick="setPage('gameMenu'); playSound('audio/games_category.mp3'); closeSidebar();">ألعاب تعليمية</a></li>
             <li><a href="#" onclick="showAboutInfo(); closeSidebar();">حول التطبيق</a></li>
             <li><a href="#" onclick="showContactInfo(); closeSidebar();">تواصل معنا</a></li>
         </ul>
@@ -717,62 +717,62 @@
             { letter: 'ⵟ', word: 'ⵡⴰ', image: 'images/18ba9148bea2d0c08b4eb17fa5bb4191.jpg', audio: 'audio/wa.mp3' },
             { letter: 'ⵡ', word: 'ⵢⴰ', image: 'images/7003fb876f05322043f933e3aa69b4b2.jpg', audio: 'audio/ya.mp3' },
             { letter: 'ⵢ', word: 'ⵣⴰ', image: 'images/d6fff0c6ae47f7a1975b0552f9a27ea3.jpg', audio: 'audio/za.mp3' },
-            { letter: 'ⵣ', word: 'ⵉⵣⵎ', image: 'images/16ed553e1340aff9c328037809f77630.jpg', audio: 'audio/zza.mp3' },
+            { letter: 'ⵣ', word: 'ⵥⴰ', image: 'images/16ed553e1340aff9c328037809f77630.jpg', audio: 'audio/zza.mp3' },
             { letter: 'ⵥ', word: 'ⵀⴰ', image: 'images/65b06b2cc59501fde624f2791ed29b7f.jpg', audio: 'audio/ha.mp3' },
         ];
         
         const animalsData = [
-            { word: 'قطة', image: 'images/cat.jpeg', audio: 'audio/animaux.ogg' },
-            { word: 'كلب', image: 'images/124419894dcfde81ffbca1e072804c71.jpg', audio: 'audio/dog.mp3' },
-            { word: 'أسد', image: 'images/16ed553e1340aff9c328037809f77630.jpg', audio: 'audio/lion.mp3' },
-            { word: 'فيل', image: 'images/9effc4c9c62ffca84b93c65bc298836f.jpg', audio: 'audio/elephant.mp3' },
-            { word: 'قرد', image: 'images/bd76426bddeb01a4d10e00630ecf1af4.jpg', audio: 'audio/monkey.mp3' },
-            { word: 'غزالة', image: 'images/962d3b8c713deb410ee5b8b50e4bd717.jpg', audio: 'audio/giraffe.mp3' },
-            { word: 'نمر', image: 'images/aafe42802b757cd64eacd46369c434e7.jpg', audio: 'audio/tiger.mp3' },
-            { word: 'دب', image: 'images/5b8ac2e52472946d311318ef526b6beb.jpg', audio: 'audio/bear.mp3' },
-            { word: 'سمكة', image: 'images/da8aec162d9a6d5d9fe43a74275ee101.jpg', audio: 'audio/fish.mp3' },
-            { word: 'حمامة', image: 'images/a84e9e05df41e5e0b719516010e98a4b.jpg', audio: 'audio/bird.mp3' },
-            { word: 'أرنب', image: 'images/a63049990b70e79ff55923e73c7e238e.jpg', audio: 'audio/rabbit.mp3' },
-            { word: 'خروف', image: 'images/e2c175ddc37997fd99ad5287e50e5377.jpg', audio: 'audio/sheep.mp3' },
-            { word: 'حصان', image: 'images/c7b9740d4a6a0a8b6a13f7f7b317af0d.jpg', audio: 'audio/horse.mp3' },
-            { word: 'سلحفاة', image: 'images/69ef8ef015eaee077cb590f45fa79f3d.jpg', audio: 'audio/fox.mp3' },
-            { word: 'بومة', image: 'images/b9b6d56ad9077190a9923a63bd78d8bc.jpg', audio: 'audio/owl.mp3' },
-            { word: 'ذئب', image: 'images/2241ff059ca5b87903f61f336a4aa430.jpg', audio: 'audio/wolf.mp3' },
-            { word: 'بطة', image: 'images/c93987d8f7f0baf0d29f9c20c83c97e3.jpg', audio: 'audio/duck.mp3' },
-            { word: 'زرافة', image: 'images/c0cc7605f98169dfc456eb36d3a0582a.jpg', audio: 'audio/deer.mp3' },
-            { word: 'جمل', image: 'images/897c6933dd87410c603aae4c04feb091.jpg', audio: 'audio/camel.mp3' },
-            { word: 'فراشة', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/butterfly.mp3' }
+            { word: 'قطة', image: 'images/cat.jpg', audio: 'audio/cat.mp3' },
+            { word: 'كلب', image: 'images/dog.jpg', audio: 'audio/dog.mp3' },
+            { word: 'أسد', image: 'images/lion.jpg', audio: 'audio/lion.mp3' },
+            { word: 'فيل', image: 'images/elephant.jpg', audio: 'audio/elephant.mp3' },
+            { word: 'قرد', image: 'images/monkey.jpg', audio: 'audio/monkey.mp3' },
+            { word: 'زرافة', image: 'images/giraffe.jpg', audio: 'audio/giraffe.mp3' },
+            { word: 'نمر', image: 'images/tiger.jpg', audio: 'audio/tiger.mp3' },
+            { word: 'دب', image: 'images/bear.jpg', audio: 'audio/bear.mp3' },
+            { word: 'سمكة', image: 'images/fish.jpg', audio: 'audio/fish.mp3' },
+            { word: 'طائر', image: 'images/bird.jpg', audio: 'audio/bird.mp3' },
+            { word: 'أرنب', image: 'images/rabbit.jpg', audio: 'audio/rabbit.mp3' },
+            { word: 'خروف', image: 'images/sheep.jpg', audio: 'audio/sheep.mp3' },
+            { word: 'حصان', image: 'images/horse.jpg', audio: 'audio/horse.mp3' },
+            { word: 'ثعلب', image: 'images/fox.jpg', audio: 'audio/fox.mp3' },
+            { word: 'بومة', image: 'images/owl.jpg', audio: 'audio/owl.mp3' },
+            { word: 'ذئب', image: 'images/wolf.jpg', audio: 'audio/wolf.mp3' },
+            { word: 'بطة', image: 'images/duck.jpg', audio: 'audio/duck.mp3' },
+            { word: 'غزال', image: 'images/deer.jpg', audio: 'audio/deer.mp3' },
+            { word: 'جمل', image: 'images/camel.jpg', audio: 'audio/camel.mp3' },
+            { word: 'فراشة', image: 'images/butterfly.jpg', audio: 'audio/butterfly.mp3' }
         ];
         
         const numbersData = [
-            { number: '1', word: 'واحد', image: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audio: 'audio/one.mp3' },
-            { number: '2', word: 'اثنان', image: 'images/c391d2e8b5081720ab58b167d96abd50.jpg', audio: 'audio/two.mp3' },
-            { number: '3', word: 'ثلاثة', image: 'images/8baf8accac02f718e274f7f0efe8e208.jpg', audio: 'audio/three.mp3' },
-            { number: '4', word: 'أربعة', image: 'images/5af82e7a87c9d7d1a93173d953e2c033.jpg', audio: 'audio/four.mp3' },
-            { number: '5', word: 'خمسة', image: 'images/569cc0c8af30f8116c776a21a230f9d0.jpg', audio: 'audio/five.mp3' },
-            { number: '6', word: 'ستة', image: 'images/8b693928c5447c7381948bd23fa0a94c.jpg', audio: 'audio/six.mp3' },
-            { number: '7', word: 'سبعة', image: 'images/17a897f15be1f2e5976f0eb51f4cdbc8.jpg', audio: 'audio/seven.mp3' },
-            { number: '8', word: 'ثمانية', image: 'images/bbf58163e3765676d6dadffbc94dd6fb.jpg', audio: 'audio/eight.mp3' },
-            { number: '9', word: 'تسعة', image: 'images/83e98be29b454d400cc1c78160a51207.jpg', audio: 'audio/nine.mp3' },
-            { number: '10', word: 'عشرة', image: 'images/a1b9f28aa43bda697d0bff6ae52bc06c.jpg', audio: 'audio/ten.mp3' },
-            { number: '11', word: 'أحد عشر', image: 'images/d4ef0ea2c17f056b7c67aa6553b27199.jpg', audio: 'audio/eleven.mp3' },
-            { number: '12', word: 'اثنا عشر', image: 'images/799c20391c8da09c7d215758ab073e37.jpg', audio: 'audio/twelve.mp3' },
-            { number: '13', word: 'ثلاثة عشر', image: 'images/6e399d0a8789755580e42baab5dc139c.jpg', audio: 'audio/thirteen.mp3' },
-            { number: '14', word: 'أربعة عشر', image: 'images/d343262b3b9442fcc9762211933606cc.jpg', audio: 'audio/fourteen.mp3' },
-            { number: '15', word: 'خمسة عشر', image: 'images/c15420b455196337d1bb3262c76e0205.jpg', audio: 'audio/fifteen.mp3' },
-            { number: '16', word: 'ستة عشر', image: 'images/f78e9d858b7d623189b5c92069e1bed6.jpg', audio: 'audio/sixteen.mp3' },
-            { number: '17', word: 'سبعة عشر', image: 'images/59521d81566c71406f14deae2109e398.jpg', audio: 'audio/seventeen.mp3' },
-            { number: '18', word: 'ثمانية عشر', image: 'images/941eca2038794392f5068e4ad4c26968 (1).jpg', audio: 'audio/eighteen.mp3' },
-            { number: '19', word: 'تسعة عشر', image: 'images/a45794b6674c50601ed941cf1779e659.jpg', audio: 'audio/nineteen.mp3' },
-            { number: '20', word: 'عشرون', image: 'images/e6129621d08c4d9d1d4ea409c25da4d0.jpg', audio: 'audio/twenty.mp3' },
-            { number: '30', word: 'ثلاثون', image: 'images/b36ee0ac2527f343cdc6901178d13f79.jpg', audio: 'audio/thirty.mp3' },
-            { number: '40', word: 'أربعون', image: 'images/0654ca9081b2713cfc7bbffeac57bbe0.jpg', audio: 'audio/forty.mp3' },
-            { number: '50', word: 'خمسون', image: 'images/3164ba91b5bb3ff493744e6c818a16d0.jpg', audio: 'audio/fifty.mp3' },
-            { number: '60', word: 'ستون', image: 'images/2246588b5c3c296bd437d680aba2215e.jpg', audio: 'audio/sixty.mp3' },
-            { number: '70', word: 'سبعون', image: 'images/99888182607727f778a54d7928e6c9da.jpg', audio: 'audio/seventy.mp3' },
-            { number: '80', word: 'ثمانون', image: 'images/06712963a5e7ec91b2a92f6e784f497f.jpg', audio: 'audio/eighty.mp3' },
-            { number: '90', word: 'تسعون', image: 'images/200b2d90f616135b9a370edc61a6352d.jpg', audio: 'audio/ninety.mp3' },
-            { number: '100', word: 'مئة', image: 'images/6c0d711f25cf417970f12ec5547e6b53.jpg', audio: 'audio/one_hundred.mp3' },
+            { number: '1', word: 'واحد', image: '', audio: 'audio/one.mp3' },
+            { number: '2', word: 'اثنان', image: '', audio: 'audio/two.mp3' },
+            { number: '3', word: 'ثلاثة', image: '', audio: 'audio/three.mp3' },
+            { number: '4', word: 'أربعة', image: '', audio: 'audio/four.mp3' },
+            { number: '5', word: 'خمسة', image: '', audio: 'audio/five.mp3' },
+            { number: '6', word: 'ستة', image: '', audio: 'audio/six.mp3' },
+            { number: '7', word: 'سبعة', image: '', audio: 'audio/seven.mp3' },
+            { number: '8', word: 'ثمانية', image: '', audio: 'audio/eight.mp3' },
+            { number: '9', word: 'تسعة', image: '', audio: 'audio/nine.mp3' },
+            { number: '10', word: 'عشرة', image: '', audio: 'audio/ten.mp3' },
+            { number: '11', word: 'أحد عشر', image: '', audio: 'audio/eleven.mp3' },
+            { number: '12', word: 'اثنا عشر', image: '', audio: 'audio/twelve.mp3' },
+            { number: '13', word: 'ثلاثة عشر', image: '', audio: 'audio/thirteen.mp3' },
+            { number: '14', word: 'أربعة عشر', image: '', audio: 'audio/fourteen.mp3' },
+            { number: '15', word: 'خمسة عشر', image: '', audio: 'audio/fifteen.mp3' },
+            { number: '16', word: 'ستة عشر', image: '', audio: 'audio/sixteen.mp3' },
+            { number: '17', word: 'سبعة عشر', image: '', audio: 'audio/seventeen.mp3' },
+            { number: '18', word: 'ثمانية عشر', image: '', audio: 'audio/eighteen.mp3' },
+            { number: '19', word: 'تسعة عشر', image: '', audio: 'audio/nineteen.mp3' },
+            { number: '20', word: 'عشرون', image: '', audio: 'audio/twenty.mp3' },
+            { number: '30', word: 'ثلاثون', image: '', audio: 'audio/thirty.mp3' },
+            { number: '40', word: 'أربعون', image: '', audio: 'audio/forty.mp3' },
+            { number: '50', word: 'خمسون', image: '', audio: 'audio/fifty.mp3' },
+            { number: '60', word: 'ستون', image: '', audio: 'audio/sixty.mp3' },
+            { number: '70', word: 'سبعون', image: '', audio: 'audio/seventy.mp3' },
+            { number: '80', word: 'ثمانون', image: '', audio: 'audio/eighty.mp3' },
+            { number: '90', word: 'تسعون', image: '', audio: 'audio/ninety.mp3' },
+            { number: '100', word: 'مئة', image: '', audio: 'audio/one_hundred.mp3' },
         ];
         const schoolSuppliesData = [
             { word: 'قلم رصاص', image: '', audio: 'audio/pencil.mp3' },
@@ -895,10 +895,16 @@
         ];
         
         // Data for memory game images
-        const memoryGameImages = [
-            'placeholder.png', 'placeholder.png', 'placeholder.png', 'placeholder.png',
-            'placeholder.png', 'placeholder.png', 'placeholder.png', 'placeholder.png',
-            'placeholder.png', 'placeholder.png', 'placeholder.png', 'placeholder.png'
+        // Using a subset of animalsData for the memory game
+        const memoryGameData = [
+            { word: 'قطة', image: 'images/cat.jpg', audio: 'audio/cat.mp3' },
+            { word: 'كلب', image: 'images/dog.jpg', audio: 'audio/dog.mp3' },
+            { word: 'أسد', image: 'images/lion.jpg', audio: 'audio/lion.mp3' },
+            { word: 'فيل', image: 'images/elephant.jpg', audio: 'audio/elephant.mp3' },
+            { word: 'قرد', image: 'images/monkey.jpg', audio: 'audio/monkey.mp3' },
+            { word: 'أرنب', image: 'images/rabbit.jpg', audio: 'audio/rabbit.mp3' },
+            { word: 'حصان', image: 'images/horse.jpg', audio: 'audio/horse.mp3' },
+            { word: 'بومة', image: 'images/owl.jpg', audio: 'audio/owl.mp3' },
         ];
 
         // Memory game levels with image pairs
@@ -917,15 +923,10 @@
 
         // Data for the new shadow matching game
         const shadowGameData = [
-            { animal: 'دب', image: '', shadow: '' },
-            { animal: 'أرنب', image: '', shadow: '' },
-            { animal: 'ثعلب', image: '', shadow: '' },
-            { animal: 'غزال', image: '', shadow: '' },
-            { animal: 'بومة', image: '', shadow: '' },
-            { animal: 'نمر', image: '', shadow: '' },
-            { animal: 'ذئب', image: '', audio: '' },
-            { animal: 'خنزير', image: '', audio: '' },
-            { animal: 'سنجاب', image: '', audio: '' },
+            { animal: 'دب', image: 'images/bear.jpg', shadow: 'images/bear-shadow.png', audio: 'audio/bear.mp3' },
+            { animal: 'أرنب', image: 'images/rabbit.jpg', shadow: 'images/rabbit-shadow.png', audio: 'audio/rabbit.mp3' },
+            { animal: 'ثعلب', image: 'images/fox.jpg', shadow: 'images/fox-shadow.png', audio: 'audio/fox.mp3' },
+            { animal: 'بومة', image: 'images/owl.jpg', shadow: 'images/owl-shadow.png', audio: 'audio/owl.mp3' },
         ];
         
         // New letter game data
@@ -1113,43 +1114,43 @@
             const mainContent = document.createElement('div');
             mainContent.className = 'grid-container';
             mainContent.innerHTML = `
-                <a class="card" onclick="setPage('tifinagh')" style="background-image: url('images/6e318d538a2d8f0b5ad685db558ffe4e.jpg');">
+                <a class="card" onclick="setPage('tifinagh'); playSound('audio/tifinagh_category.mp3')" style="background-image: url('images/6e318d538a2d8f0b5ad685db558ffe4e.jpg');">
                     <span class="card-text">تعلم الحروف</span>
                 </a>
-                <a class="card" onclick="setPage('numbers')" style="background-image: url('images/0751e273c2de27e4b04dfeb7ee99b448.jpg');">
+                <a class="card" onclick="setPage('numbers'); playSound('audio/numbers_category.mp3')" style="background-image: url('images/0751e273c2de27e4b04dfeb7ee99b448.jpg');">
                     <span class="card-text">تعلم الأرقام</span>
                 </a>
-                <a class="card" onclick="setPage('animals')" style="background-image: url('images/cc47a84c5a0bc2ca1dbcd62f10a55c87.jpg');">
+                <a class="card" onclick="setPage('animals'); playSound('audio/animals_category.mp3')" style="background-image: url('images/cc47a84c5a0bc2ca1dbcd62f10a55c87.jpg');">
                     <span class="card-text">الحيوانات</span>
                 </a>
-                <a class="card" onclick="setPage('schoolSupplies')" style="background-image: url('images/0c213d91ee39eb05ef6f72bd4bcba069.jpg');">
+                <a class="card" onclick="setPage('schoolSupplies'); playSound('audio/school_supplies_category.mp3')" style="background-image: url('images/0c213d91ee39eb05ef6f72bd4bcba069.jpg');">
                     <span class="card-text">أدوات مدرسية</span>
                 </a>
-                 <a class="card" onclick="setPage('colors')" style="background-image: url('images/006982c7d7140beec732267e28d68605.jpg');">
+                 <a class="card" onclick="setPage('colors'); playSound('audio/colors_category.mp3')" style="background-image: url('images/006982c7d7140beec732267e28d68605.jpg');">
                     <span class="card-text">الألوان</span>
                 </a>
-                <a class="card" onclick="setPage('family')" style="background-image: url('images/d79c9d03554cd6fee1d53198741968b7.jpg');">
+                <a class="card" onclick="setPage('family'); playSound('audio/family_category.mp3')" style="background-image: url('images/d79c9d03554cd6fee1d53198741968b7.jpg');">
                     <span class="card-text">العائلة</span>
                 </a>
-                <a class="card" onclick="setPage('bodyParts')" style="background-image: url('images/06e6590e35375b8ef3a2e74882661597.jpg');">
+                <a class="card" onclick="setPage('bodyParts'); playSound('audio/body_parts_category.mp3')" style="background-image: url('images/06e6590e35375b8ef3a2e74882661597.jpg');">
                     <span class="card-text">أجزاء الجسم</span>
                 </a>
-                <a class="card" onclick="setPage('seasons')" style="background-image: url('images/ea0c045a62c0ee0f966ab451c442a7bc.jpg');">
+                <a class="card" onclick="setPage('seasons'); playSound('audio/seasons_category.mp3')" style="background-image: url('images/ea0c045a62c0ee0f966ab451c442a7bc.jpg');">
                     <span class="card-text">فصول السنة</span>
                 </a>
-                <a class="card" onclick="setPage('fruits')" style="background-image: url('images/06373d4c110a73840102a0eb6369d686.jpg');">
+                <a class="card" onclick="setPage('fruits'); playSound('audio/fruits_category.mp3')" style="background-image: url('images/06373d4c110a73840102a0eb6369d686.jpg');">
                     <span class="card-text">الفواكه</span>
                 </a>
-                <a class="card" onclick="setPage('vegetables')" style="background-image: url('images/105d0617ac9684db8508f7f5997943d0.jpg');">
+                <a class="card" onclick="setPage('vegetables'); playSound('audio/vegetables_category.mp3')" style="background-image: url('images/105d0617ac9684db8508f7f5997943d0.jpg');">
                     <span class="card-text">الخضروات</span>
                 </a>
-                <a class="card" onclick="setPage('months')" style="background-image: url('images/490f057fea8b448d6ca63c1bcd2d1443.jpg');">
+                <a class="card" onclick="setPage('months'); playSound('audio/months_category.mp3')" style="background-image: url('images/490f057fea8b448d6ca63c1bcd2d1443.jpg');">
                     <span class="card-text">الشهور</span>
                 </a>
-                 <a class="card" onclick="setPage('days')" style="background-image: url('images/7b3d97b91460a3452340081ea39f81d1.jpg');">
+                 <a class="card" onclick="setPage('days'); playSound('audio/days_category.mp3')" style="background-image: url('images/7b3d97b91460a3452340081ea39f81d1.jpg');">
                     <span class="card-text">أيام الأسبوع</span>
                 </a>
-                <a class="card" onclick="setPage('gameMenu')" style="background-image: url('images/10718386fa98b751dd0ec58cfdb9b5c9.jpg');">
+                <a class="card" onclick="setPage('gameMenu'); playSound('audio/games_category.mp3')" style="background-image: url('images/10718386fa98b751dd0ec58cfdb9b5c9.jpg');">
                     <span class="card-text">ألعاب تعليمية</span>
                 </a>
             `;
@@ -1304,20 +1305,21 @@
             const info = document.getElementById('game-info');
             if (!board || !info) return;
 
-            totalPairs = memoryGameLevels[currentLevel].pairs;
-            const shuffledImages = shuffleArray([...memoryGameImages].slice(0, totalPairs));
-            const cardImages = [...shuffledImages, ...shuffledImages];
-            shuffleArray(cardImages);
+            const cardsToUse = shuffleArray(memoryGameData).slice(0, 8); // Use up to 8 unique animals
+            const cardData = [...cardsToUse, ...cardsToUse];
+            totalPairs = cardsToUse.length;
+            shuffleArray(cardData);
 
             board.innerHTML = '';
-            board.style.gridTemplateColumns = memoryGameLevels[currentLevel].grid;
+            board.style.gridTemplateColumns = 'repeat(4, 1fr)'; // Fixed grid for 8 pairs
             
-            cardImages.forEach((imgSrc, index) => {
+            cardData.forEach(item => {
                 const card = document.createElement('div');
                 card.className = 'game-card';
-                card.dataset.image = imgSrc;
+                card.dataset.image = item.image; 
+                card.dataset.audio = item.audio; 
                 card.innerHTML = `
-                    <div class="game-card-front" style="background-image: url('${imgSrc}');"></div>
+                    <div class="game-card-front" style="background-image: url('${item.image}');"></div>
                     <div class="game-card-back"></div>
                 `;
                 card.addEventListener('click', flipCard);
@@ -1352,6 +1354,7 @@
             secondCard.removeEventListener('click', flipCard);
             firstCard.classList.add('matched');
             secondCard.classList.add('matched');
+            playSound(firstCard.dataset.audio); // Play audio on match
             matchedPairs++;
             const matchedCount = document.getElementById('matched-count');
             if (matchedCount) matchedCount.innerText = matchedPairs;
@@ -1491,7 +1494,7 @@
                 const shadowBox = document.createElement('div');
                 shadowBox.className = 'shadow-box';
                 shadowBox.dataset.animal = item.animal;
-                shadowBox.innerHTML = `<img src="${item.image}" alt="${item.animal} shadow" class="shadow-image">`;
+                shadowBox.innerHTML = `<img src="${item.shadow}" alt="${item.animal} shadow" class="shadow-image">`;
                 shadowBox.addEventListener('dragover', e => e.preventDefault());
                 shadowBox.addEventListener('drop', handleDrop);
                 topContainer.appendChild(shadowBox);
@@ -1502,6 +1505,7 @@
                 const animalImg = document.createElement('div');
                 animalImg.className = 'draggable-animal';
                 animalImg.dataset.animal = item.animal;
+                animalImg.dataset.audio = item.audio;
                 animalImg.draggable = true;
                 animalImg.style.backgroundImage = `url('${item.image}')`;
                 animalImg.addEventListener('dragstart', handleDragStart);
@@ -1529,6 +1533,8 @@
                 targetElement.style.border = 'none';
                 targetElement.classList.add('matched-correctly');
                 
+                playSound(draggedItem.dataset.audio);
+                
                 draggedItem.remove();
                 draggedItem = null;
                 matchedShadows++;