{"id":15091,"date":"2025-08-21T10:35:26","date_gmt":"2025-08-21T08:35:26","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15091"},"modified":"2025-08-21T10:43:25","modified_gmt":"2025-08-21T08:43:25","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d8%b0%d8%a7%d9%83%d8%b1%d8%a9","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d8%b0%d8%a7%d9%83%d8%b1%d8%a9\/","title":{"rendered":"Memory game"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15091\" class=\"elementor elementor-15091\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d7536 e-flex e-con-boxed e-con e-parent\" data-id=\"d7d7536\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a5af10 elementor-widget elementor-widget-html\" data-id=\"2a5af10\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Arabic Memory Match | Word Memory<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;900&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* Scoped styles for the memory game widget *\/\r\n        .memory-game-widget {\r\n            --primary: #8220A5;\r\n            --secondary: #B855D4;\r\n            --success: #27ae60;\r\n            --danger: #e74c3c;\r\n            --warning: #f39c12;\r\n            --light: #ffffff;\r\n            --dark: #2c3e50;\r\n            --shadow: 0 15px 35px rgba(130, 32, 165, 0.1);\r\n            --card-shadow: 0 8px 25px rgba(130, 32, 165, 0.15);\r\n            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        \r\n        .memory-game-widget * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        .memory-game-widget {\r\n            font-family: 'Tajawal', sans-serif;\r\n            background: linear-gradient(135deg, #8220A5 0%, #B855D4 100%);\r\n            color: var(--dark);\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            box-shadow: var(--shadow);\r\n            max-width: 80%;\r\n            margin: 20px auto;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .memory-game-widget .container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n        }\r\n        \r\n        \/* Header *\/\r\n        .memory-game-widget .header {\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n            animation: fadeInDown 1s ease;\r\n        }\r\n        \r\n        .memory-game-widget h1 {\r\n            font-size: 2.8rem !important;\r\n            color: white !important;\r\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;\r\n            margin-bottom: 10px !important;\r\n            font-weight: 900 !important;\r\n            line-height: 1.2 !important;\r\n        }\r\n        \r\n        .memory-game-widget .subtitle {\r\n            font-size: 1.2rem !important;\r\n            color: rgba(255, 255, 255, 0.9) !important;\r\n            font-weight: 400 !important;\r\n            margin: 0 !important;\r\n        }\r\n        \r\n        \/* Game Controls *\/\r\n        .memory-game-widget .controls {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            gap: 20px;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            animation: fadeIn 1s ease 0.3s both;\r\n        }\r\n        \r\n        .memory-game-widget button {\r\n            background: linear-gradient(135deg, var(--success), #2ecc71) !important;\r\n            color: white !important;\r\n            border: none !important;\r\n            padding: 15px 30px !important;\r\n            font-size: 1.1rem !important;\r\n            font-weight: bold !important;\r\n            border-radius: 50px !important;\r\n            cursor: pointer !important;\r\n            transition: var(--transition) !important;\r\n            box-shadow: var(--card-shadow) !important;\r\n            position: relative !important;\r\n            overflow: hidden !important;\r\n            font-family: 'Tajawal', sans-serif !important;\r\n            text-decoration: none !important;\r\n            display: inline-block !important;\r\n            min-width: auto !important;\r\n            width: auto !important;\r\n            height: auto !important;\r\n            line-height: normal !important;\r\n            text-align: center !important;\r\n            vertical-align: baseline !important;\r\n        }\r\n        \r\n        .memory-game-widget button::before {\r\n            content: '' !important;\r\n            position: absolute !important;\r\n            top: 0 !important;\r\n            left: -100% !important;\r\n            width: 100% !important;\r\n            height: 100% !important;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;\r\n            transition: left 0.5s !important;\r\n        }\r\n        \r\n        .memory-game-widget button:hover::before {\r\n            left: 100% !important;\r\n        }\r\n        \r\n        .memory-game-widget button:hover {\r\n            transform: translateY(-3px) !important;\r\n            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;\r\n        }\r\n        \r\n        .memory-game-widget button:active {\r\n            transform: translateY(1px) !important;\r\n        }\r\n        \r\n        .memory-game-widget #new-game-btn {\r\n            background: linear-gradient(135deg, var(--primary), #B855D4) !important;\r\n        }\r\n        \r\n        .memory-game-widget #hint-btn {\r\n            background: linear-gradient(135deg, var(--warning), #e67e22) !important;\r\n        }\r\n        \r\n        \/* Stats *\/\r\n        .memory-game-widget .stats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 30px;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            animation: fadeIn 1s ease 0.5s both;\r\n        }\r\n        \r\n        .memory-game-widget .stat-card {\r\n            background: rgba(255, 255, 255, 0.95) !important;\r\n            padding: 20px !important;\r\n            border-radius: 20px !important;\r\n            text-align: center !important;\r\n            box-shadow: var(--card-shadow) !important;\r\n            backdrop-filter: blur(10px) !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2) !important;\r\n            min-width: 120px !important;\r\n        }\r\n        \r\n        .memory-game-widget .stat-number {\r\n            font-size: 2rem !important;\r\n            font-weight: bold !important;\r\n            color: var(--primary) !important;\r\n            display: block !important;\r\n        }\r\n        \r\n        .memory-game-widget .stat-label {\r\n            font-size: 0.9rem !important;\r\n            color: #666 !important;\r\n            margin-top: 5px !important;\r\n        }\r\n        \r\n        \/* Game Board *\/\r\n        .memory-game-widget .game-board {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 20px;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            animation: fadeInUp 1s ease 0.7s both;\r\n        }\r\n        \r\n        .memory-game-widget .card {\r\n            aspect-ratio: 1;\r\n            background: rgba(255, 255, 255, 0.95) !important;\r\n            border-radius: 20px !important;\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            justify-content: center !important;\r\n            align-items: center !important;\r\n            cursor: pointer !important;\r\n            transition: var(--transition) !important;\r\n            box-shadow: var(--card-shadow) !important;\r\n            backdrop-filter: blur(10px) !important;\r\n            border: 2px solid rgba(255, 255, 255, 0.2) !important;\r\n            position: relative !important;\r\n            overflow: hidden !important;\r\n        }\r\n        \r\n        .memory-game-widget .card::before {\r\n            content: '' !important;\r\n            position: absolute !important;\r\n            top: 0 !important;\r\n            left: 0 !important;\r\n            right: 0 !important;\r\n            bottom: 0 !important;\r\n            background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;\r\n            opacity: 0 !important;\r\n            transition: var(--transition) !important;\r\n            z-index: 1 !important;\r\n        }\r\n        \r\n        .memory-game-widget .card.flipped::before {\r\n            opacity: 0.1 !important;\r\n        }\r\n        \r\n        .memory-game-widget .card:hover {\r\n            transform: translateY(-10px) rotateY(5deg) !important;\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;\r\n        }\r\n        \r\n        .memory-game-widget .card.flipped {\r\n            background: linear-gradient(135deg, #fff, #f8f9fa) !important;\r\n            transform: rotateY(0deg) scale(1.05) !important;\r\n        }\r\n        \r\n        .memory-game-widget .card.matched {\r\n            background: linear-gradient(135deg, var(--success), #2ecc71) !important;\r\n            color: white !important;\r\n            transform: scale(0.95) !important;\r\n            animation: matchPulse 0.6s ease !important;\r\n        }\r\n        \r\n        .memory-game-widget .card.wrong {\r\n            animation: shake 0.5s ease !important;\r\n            background: linear-gradient(135deg, var(--danger), #c0392b) !important;\r\n            color: white !important;\r\n        }\r\n        \r\n        .memory-game-widget .card-content {\r\n            text-align: center !important;\r\n            z-index: 2 !important;\r\n            position: relative !important;\r\n        }\r\n        \r\n        .memory-game-widget .arabic-word {\r\n            font-size: 1.8rem !important;\r\n            font-weight: bold !important;\r\n            color: var(--dark) !important;\r\n            margin-bottom: 8px !important;\r\n        }\r\n        \r\n        .memory-game-widget .emoji-word {\r\n            font-size: 3.5rem !important;\r\n            line-height: 1 !important;\r\n        }\r\n        \r\n        .memory-game-widget .english-word {\r\n            font-size: 1rem !important;\r\n            color: #666 !important;\r\n            font-weight: 500 !important;\r\n        }\r\n        \r\n        .memory-game-widget .card.matched .arabic-word,\r\n        .memory-game-widget .card.matched .english-word {\r\n            color: white !important;\r\n        }\r\n        \r\n        .memory-game-widget .card-back {\r\n            font-size: 3rem !important;\r\n            color: var(--primary) !important;\r\n            opacity: 0.7 !important;\r\n        }\r\n        \r\n        \/* Completion Modal *\/\r\n        .memory-game-widget .modal {\r\n            display: none;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0, 0, 0, 0.8) !important;\r\n            justify-content: center;\r\n            align-items: center;\r\n            z-index: 1000;\r\n            backdrop-filter: blur(5px);\r\n        }\r\n        \r\n        .memory-game-widget .modal-content {\r\n            background: white !important;\r\n            padding: 40px !important;\r\n            border-radius: 20px !important;\r\n            text-align: center !important;\r\n            box-shadow: var(--shadow) !important;\r\n            animation: modalAppear 0.5s ease !important;\r\n            max-width: 400px !important;\r\n            margin: 20px !important;\r\n        }\r\n        \r\n        .memory-game-widget .modal h2 {\r\n            color: var(--success) !important;\r\n            font-size: 2.5rem !important;\r\n            margin-bottom: 20px !important;\r\n        }\r\n        \r\n        .memory-game-widget .modal p {\r\n            font-size: 1.2rem !important;\r\n            color: #666 !important;\r\n            margin-bottom: 30px !important;\r\n        }\r\n        \r\n        \/* Animations *\/\r\n        @keyframes fadeInDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-50px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n        \r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(50px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n        \r\n        @keyframes fadeIn {\r\n            from { opacity: 0; }\r\n            to { opacity: 1; }\r\n        }\r\n        \r\n        @keyframes pulse {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.05); }\r\n            100% { transform: scale(1); }\r\n        }\r\n        \r\n        @keyframes shake {\r\n            0%, 100% { transform: translateX(0); }\r\n            20%, 60% { transform: translateX(-10px); }\r\n            40%, 80% { transform: translateX(10px); }\r\n        }\r\n        \r\n        @keyframes matchPulse {\r\n            0% { transform: scale(0.95); }\r\n            50% { transform: scale(1.1); }\r\n            100% { transform: scale(0.95); }\r\n        }\r\n        \r\n        @keyframes modalAppear {\r\n            from {\r\n                opacity: 0;\r\n                transform: scale(0.7);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: scale(1);\r\n            }\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .memory-game-widget .game-board {\r\n                grid-template-columns: repeat(3, 1fr) !important;\r\n                gap: 15px !important;\r\n            }\r\n            \r\n            .memory-game-widget .arabic-word {\r\n                font-size: 1.5rem !important;\r\n            }\r\n            \r\n            .memory-game-widget .emoji-word {\r\n                font-size: 3rem !important;\r\n            }\r\n            \r\n            .memory-game-widget h1 {\r\n                font-size: 2.2rem !important;\r\n            }\r\n            \r\n            .memory-game-widget .stats {\r\n                gap: 15px !important;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .memory-game-widget .game-board {\r\n                grid-template-columns: repeat(2, 1fr) !important;\r\n                gap: 10px !important;\r\n            }\r\n            \r\n            .memory-game-widget .controls {\r\n                flex-direction: column !important;\r\n            }\r\n            \r\n            .memory-game-widget button {\r\n                width: 100% !important;\r\n                max-width: 200px !important;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"memory-game-widget\">\r\n        <div class=\"container\">\r\n            <div class=\"header\">\r\n                <h1>Word memory<\/h1>\r\n                <p class=\"subtitle\">Link Arabic words to emojis<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"controls\">\r\n                <button id=\"new-game-btn\">New game<\/button>\r\n                <button id=\"hint-btn\">Hint<\/button>\r\n            <\/div>\r\n            \r\n            <div class=\"stats\">\r\n                <div class=\"stat-card\">\r\n                    <span class=\"stat-number\" id=\"moves\">0<\/span>\r\n                    <div class=\"stat-label\">attempts<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <span class=\"stat-number\" id=\"matches\">0<\/span>\r\n                    <div class=\"stat-label\">Matches<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <span class=\"stat-number\" id=\"time\">00:00<\/span>\r\n                    <div class=\"stat-label\">the time<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"game-board\" id=\"game-board\">\r\n                <!-- Cards will be generated here -->\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Victory Modal -->\r\n        <div class=\"modal\" id=\"victory-modal\">\r\n            <div class=\"modal-content\">\r\n                <h2>\ud83c\udf89 Well done!<\/h2>\r\n                <p>You have successfully completed the game!<\/p>\r\n                <p>Attempts: <span id=\"final-moves\"><\/span><\/p>\r\n                <p>the time: <span id=\"final-time\"><\/span><\/p>\r\n                <button onclick=\"newGame()\">play again<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n        (function() {\r\n            \/\/ Scoped JavaScript for the memory game widget\r\n            const wordPairs = [\r\n                { arabic: \"\u0628\u064a\u062a\", emoji: \"\ud83c\udfe0\" },\r\n                { arabic: \"\u0634\u062c\u0631\u0629\", emoji: \"\ud83c\udf33\" },\r\n                { arabic: \"\u0643\u062a\u0627\u0628\", emoji: \"\ud83d\udcda\" },\r\n                { arabic: \"\u0642\u0637\u0629\", emoji: \"\ud83d\udc31\" },\r\n                { arabic: \"\u0634\u0645\u0633\", emoji: \"\u2600\ufe0f\" },\r\n                { arabic: \"\u0642\u0645\u0631\", emoji: \"\ud83c\udf19\" },\r\n                { arabic: \"\u0645\u0627\u0621\", emoji: \"\ud83d\udca7\" },\r\n                { arabic: \"\u0646\u0627\u0631\", emoji: \"\ud83d\udd25\" },\r\n                { arabic: \"\u0637\u0627\u0626\u0631\", emoji: \"\ud83d\udc26\" },\r\n                { arabic: \"\u0633\u0645\u0643\", emoji: \"\ud83d\udc1f\" },\r\n                { arabic: \"\u0648\u0631\u062f\u0629\", emoji: \"\ud83c\udf39\" },\r\n                { arabic: \"\u062c\u0628\u0644\", emoji: \"\u26f0\ufe0f\" }\r\n            ];\r\n            \r\n            let gameCards = [];\r\n            let flippedCards = [];\r\n            let matchedPairs = 0;\r\n            let moves = 0;\r\n            let gameTime = 0;\r\n            let gameTimer;\r\n            let isGameActive = false;\r\n            \r\n            function shuffleArray(array) {\r\n                const newArray = [...array];\r\n                for (let i = newArray.length - 1; i > 0; i--) {\r\n                    const j = Math.floor(Math.random() * (i + 1));\r\n                    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\r\n                }\r\n                return newArray;\r\n            }\r\n            \r\n            function createGameCards() {\r\n                \/\/ Select 6 random word pairs\r\n                const selectedPairs = shuffleArray(wordPairs).slice(0, 6);\r\n                \r\n                \/\/ Create card objects\r\n                const cards = [];\r\n                selectedPairs.forEach((pair, index) => {\r\n                    cards.push(\r\n                        { \r\n                            id: `arabic-${index}`, \r\n                            type: 'arabic', \r\n                            content: pair.arabic, \r\n                            pairId: index,\r\n                            isFlipped: false,\r\n                            isMatched: false\r\n                        },\r\n                        { \r\n                            id: `emoji-${index}`, \r\n                            type: 'emoji', \r\n                            content: pair.emoji, \r\n                            pairId: index,\r\n                            isFlipped: false,\r\n                            isMatched: false\r\n                        }\r\n                    );\r\n                });\r\n                \r\n                return shuffleArray(cards);\r\n            }\r\n            \r\n            function renderGameBoard() {\r\n                const gameBoard = document.getElementById('game-board');\r\n                gameBoard.innerHTML = '';\r\n                \r\n                gameCards.forEach(card => {\r\n                    const cardElement = document.createElement('div');\r\n                    cardElement.className = 'card';\r\n                    cardElement.dataset.id = card.id;\r\n                    cardElement.onclick = () => flipCard(card.id);\r\n                    \r\n                    if (card.isFlipped || card.isMatched) {\r\n                        cardElement.classList.add('flipped');\r\n                        if (card.type === 'arabic') {\r\n                            cardElement.innerHTML = `\r\n                                <div class=\"card-content\">\r\n                                    <div class=\"arabic-word\">${card.content}<\/div>\r\n                                <\/div>\r\n                            `;\r\n                        } else {\r\n                            cardElement.innerHTML = `\r\n                                <div class=\"card-content\">\r\n                                    <div class=\"emoji-word\">${card.content}<\/div>\r\n                                <\/div>\r\n                            `;\r\n                        }\r\n                    } else {\r\n                        cardElement.innerHTML = `\r\n                            <div class=\"card-back\">\ud83d\udd12<\/div>\r\n                        `;\r\n                    }\r\n                    \r\n                    if (card.isMatched) {\r\n                        cardElement.classList.add('matched');\r\n                    }\r\n                    \r\n                    gameBoard.appendChild(cardElement);\r\n                });\r\n            }\r\n            \r\n            function flipCard(cardId) {\r\n                if (!isGameActive) return;\r\n                \r\n                const card = gameCards.find(c => c.id === cardId);\r\n                if (!card || card.isFlipped || card.isMatched || flippedCards.length >= 2) return;\r\n                \r\n                card.isFlipped = true;\r\n                flippedCards.push(card);\r\n                \r\n                renderGameBoard();\r\n                \r\n                if (flippedCards.length === 2) {\r\n                    moves++;\r\n                    updateStats();\r\n                    checkMatch();\r\n                }\r\n            }\r\n            \r\n            function checkMatch() {\r\n                const [card1, card2] = flippedCards;\r\n                \r\n                if (card1.pairId === card2.pairId) {\r\n                    \/\/ Match found!\r\n                    setTimeout(() => {\r\n                        card1.isMatched = true;\r\n                        card2.isMatched = true;\r\n                        matchedPairs++;\r\n                        flippedCards = [];\r\n                        \r\n                        renderGameBoard();\r\n                        updateStats();\r\n                        \r\n                        \/\/ Check if game is complete\r\n                        if (matchedPairs === 6) {\r\n                            endGame();\r\n                        }\r\n                    }, 500);\r\n                } else {\r\n                    \/\/ No match\r\n                    setTimeout(() => {\r\n                        \/\/ Add wrong animation\r\n                        const cardElements = document.querySelectorAll(`[data-id=\"${card1.id}\"], [data-id=\"${card2.id}\"]`);\r\n                        cardElements.forEach(el => el.classList.add('wrong'));\r\n                        \r\n                        setTimeout(() => {\r\n                            card1.isFlipped = false;\r\n                            card2.isFlipped = false;\r\n                            flippedCards = [];\r\n                            renderGameBoard();\r\n                        }, 500);\r\n                    }, 1000);\r\n                }\r\n            }\r\n            \r\n            function updateStats() {\r\n                document.getElementById('moves').textContent = moves;\r\n                document.getElementById('matches').textContent = matchedPairs;\r\n            }\r\n            \r\n            function startTimer() {\r\n                gameTimer = setInterval(() => {\r\n                    gameTime++;\r\n                    const minutes = Math.floor(gameTime \/ 60);\r\n                    const seconds = gameTime % 60;\r\n                    document.getElementById('time').textContent = \r\n                        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\r\n                }, 1000);\r\n            }\r\n            \r\n            function stopTimer() {\r\n                clearInterval(gameTimer);\r\n            }\r\n            \r\n            function newGame() {\r\n                \/\/ Reset game state\r\n                gameCards = createGameCards();\r\n                flippedCards = [];\r\n                matchedPairs = 0;\r\n                moves = 0;\r\n                gameTime = 0;\r\n                isGameActive = true;\r\n                \r\n                \/\/ Reset UI\r\n                updateStats();\r\n                document.getElementById('time').textContent = '00:00';\r\n                document.getElementById('victory-modal').style.display = 'none';\r\n                \r\n                renderGameBoard();\r\n                stopTimer();\r\n                startTimer();\r\n            }\r\n            \r\n            function showHint() {\r\n                if (!isGameActive || flippedCards.length > 0) return;\r\n                \r\n                \/\/ Find first unmatched pair and briefly show them\r\n                const unmatchedCards = gameCards.filter(card => !card.isMatched);\r\n                if (unmatchedCards.length >= 2) {\r\n                    const firstPairId = unmatchedCards[0].pairId;\r\n                    const pairCards = unmatchedCards.filter(card => card.pairId === firstPairId);\r\n                    \r\n                    pairCards.forEach(card => {\r\n                        card.isFlipped = true;\r\n                    });\r\n                    \r\n                    renderGameBoard();\r\n                    \r\n                    setTimeout(() => {\r\n                        pairCards.forEach(card => {\r\n                            card.isFlipped = false;\r\n                        });\r\n                        renderGameBoard();\r\n                    }, 1500);\r\n                }\r\n            }\r\n            \r\n            function endGame() {\r\n                isGameActive = false;\r\n                stopTimer();\r\n                \r\n                \/\/ Show victory modal\r\n                document.getElementById('final-moves').textContent = moves;\r\n                const minutes = Math.floor(gameTime \/ 60);\r\n                const seconds = gameTime % 60;\r\n                document.getElementById('final-time').textContent = \r\n                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\r\n                \r\n                setTimeout(() => {\r\n                    document.getElementById('victory-modal').style.display = 'flex';\r\n                }, 1000);\r\n            }\r\n            \r\n            \/\/ Make functions available globally for onclick handlers\r\n            window.newGame = newGame;\r\n            window.showHint = showHint;\r\n            \r\n            \/\/ Event listeners\r\n            document.getElementById('new-game-btn').addEventListener('click', newGame);\r\n            document.getElementById('hint-btn').addEventListener('click', showHint);\r\n            \r\n            \/\/ Close modal when clicking outside\r\n            document.getElementById('victory-modal').addEventListener('click', (e) => {\r\n                if (e.target.id === 'victory-modal') {\r\n                    e.target.style.display = 'none';\r\n                }\r\n            });\r\n            \r\n            \/\/ Initialize game\r\n            newGame();\r\n        })();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Arabic Memory Match | \u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0631\u0628\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0628\u0627\u0644\u0631\u0645\u0648\u0632 \u0627\u0644\u062a\u0639\u0628\u064a\u0631\u064a\u0629 \u0644\u0639\u0628\u0629 \u062c\u062f\u064a\u062f\u0629 \u062a\u0644\u0645\u064a\u062d\u0629 0 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0627\u062a 0 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0627\u062a 00:00 \u0627\u0644\u0648\u0642\u062a \ud83c\udf89 \u0623\u062d\u0633\u0646\u062a! \u0644\u0642\u062f \u0623\u0643\u0645\u0644\u062a \u0627\u0644\u0644\u0639\u0628\u0629 \u0628\u0646\u062c\u0627\u062d! \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0627\u062a: \u0627\u0644\u0648\u0642\u062a: \u0644\u0639\u0628 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649<\/p>","protected":false},"author":389,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15091","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/comments?post=15091"}],"version-history":[{"count":3,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15091\/revisions"}],"predecessor-version":[{"id":15094,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15091\/revisions\/15094"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}