Arabic Word Game<\/title>\r\n <style>\r\n \/* Scoped styles for the game widget - will not affect page body or other elements *\/\r\n .arabic-game-widget {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #f8f5ff 0%, #ffffff 100%);\r\n border-radius: 20px;\r\n box-shadow: 0 8px 32px rgba(130, 32, 165, 0.15);\r\n padding: 24px;\r\n max-width: 900px;\r\n margin: 20px auto;\r\n direction: rtl;\r\n border: 2px solid #e5d9f2;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .arabic-game-widget * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .arabic-game-widget::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(45deg, rgba(130, 32, 165, 0.03) 25%, transparent 25%),\r\n linear-gradient(-45deg, rgba(130, 32, 165, 0.03) 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, rgba(130, 32, 165, 0.03) 75%),\r\n linear-gradient(-45deg, transparent 75%, rgba(130, 32, 165, 0.03) 75%);\r\n background-size: 20px 20px;\r\n background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n .arabic-game-widget > * {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .arabic-game-widget .game-header {\r\n text-align: center;\r\n margin-bottom: 28px;\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n padding: 20px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 20px rgba(130, 32, 165, 0.3);\r\n }\r\n\r\n .arabic-game-widget .game-title {\r\n font-size: 28px;\r\n font-weight: bold;\r\n color: white;\r\n margin: 0;\r\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .arabic-game-widget .word-counter {\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n\r\n .arabic-game-widget .word-counter span {\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 16px;\r\n box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2);\r\n display: inline-block;\r\n }\r\n\r\n .arabic-game-widget .image-container {\r\n text-align: center;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .arabic-game-widget .image-box {\r\n display: inline-block;\r\n background: linear-gradient(135deg, #f8f5ff, #ffffff);\r\n padding: 40px;\r\n border-radius: 20px;\r\n border: 3px solid #e5d9f2;\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.1);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .image-box:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .arabic-game-widget .emoji {\r\n font-size: 90px;\r\n margin-bottom: 12px;\r\n display: block;\r\n filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));\r\n }\r\n\r\n .arabic-game-widget .meaning {\r\n color: #6b46c1;\r\n font-size: 20px;\r\n margin: 0;\r\n font-weight: 600;\r\n }\r\n\r\n .arabic-game-widget .path-container {\r\n background: linear-gradient(135deg, #f8f5ff, #ffffff);\r\n border-radius: 20px;\r\n padding: 32px;\r\n margin-bottom: 28px;\r\n border: 2px solid #e5d9f2;\r\n box-shadow: inset 0 2px 10px rgba(130, 32, 165, 0.05);\r\n }\r\n\r\n .arabic-game-widget .path-svg {\r\n width: 100%;\r\n height: 400px;\r\n }\r\n\r\n .arabic-game-widget .input-container {\r\n background: linear-gradient(135deg, #ffffff, #fefbff);\r\n border: 3px solid #e5d9f2;\r\n border-radius: 20px;\r\n padding: 28px;\r\n text-align: center;\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.1);\r\n }\r\n\r\n .arabic-game-widget .input-label {\r\n display: block;\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #8220A5;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .arabic-game-widget .word-input {\r\n width: 250px;\r\n padding: 16px 20px;\r\n font-size: 24px;\r\n text-align: center;\r\n border: 3px solid #e5d9f2;\r\n border-radius: 12px;\r\n direction: rtl;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ffffff, #fefbff);\r\n color: #8220A5;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .word-input:focus {\r\n outline: none;\r\n border-color: #8220A5;\r\n box-shadow: 0 0 20px rgba(130, 32, 165, 0.2);\r\n transform: scale(1.02);\r\n }\r\n\r\n .arabic-game-widget .feedback {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n padding: 16px;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .feedback.correct {\r\n background: linear-gradient(135deg, #dcfce7, #f0fdf4);\r\n color: #166534;\r\n border: 2px solid #bbf7d0;\r\n box-shadow: 0 4px 15px rgba(22, 101, 52, 0.1);\r\n }\r\n\r\n .arabic-game-widget .feedback.incorrect {\r\n background: linear-gradient(135deg, #fef2f2, #fefefe);\r\n color: #dc2626;\r\n border: 2px solid #fecaca;\r\n box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);\r\n }\r\n\r\n .arabic-game-widget .correct-word {\r\n font-size: 16px;\r\n margin-top: 6px;\r\n opacity: 0.9;\r\n }\r\n\r\n .arabic-game-widget .button-container {\r\n display: flex;\r\n justify-content: center;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .arabic-game-widget .game-button {\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n color: white;\r\n padding: 16px 32px;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(130, 32, 165, 0.3);\r\n min-width: 140px;\r\n }\r\n\r\n .arabic-game-widget .game-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.4);\r\n background: linear-gradient(135deg, #6b1a85, #8220A5);\r\n }\r\n\r\n .arabic-game-widget .game-button:disabled {\r\n background: linear-gradient(135deg, #d1d5db, #e5e7eb);\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .arabic-game-widget .game-button.secondary {\r\n background: linear-gradient(135deg, #6b7280, #9ca3af);\r\n }\r\n\r\n .arabic-game-widget .game-button.secondary:hover {\r\n background: linear-gradient(135deg, #4b5563, #6b7280);\r\n }\r\n\r\n .arabic-game-widget .instructions {\r\n margin-top: 24px;\r\n text-align: center;\r\n color: #8220A5;\r\n font-size: 16px;\r\n font-weight: 500;\r\n background: rgba(130, 32, 165, 0.05);\r\n padding: 16px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(130, 32, 165, 0.1);\r\n }\r\n\r\n \/* Responsive design *\/\r\n @media (max-width: 768px) {\r\n .arabic-game-widget {\r\n padding: 20px;\r\n margin: 10px;\r\n }\r\n \r\n .arabic-game-widget .game-title {\r\n font-size: 24px;\r\n }\r\n \r\n .arabic-game-widget .emoji {\r\n font-size: 70px;\r\n }\r\n \r\n .arabic-game-widget .word-input {\r\n width: 200px;\r\n font-size: 20px;\r\n }\r\n \r\n .arabic-game-widget .button-container {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .arabic-game-widget .game-button {\r\n width: 200px;\r\n }\r\n\r\n .arabic-game-widget .path-svg {\r\n height: 350px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"arabic-game-widget\" id=\"arabicGameWidget\">\r\n \r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">Learn Arabic Words - The Tough Challenge!<\/h1>\r\n <\/div>\r\n\r\n \r\n <div class=\"game-content\">\r\n \r\n <div class=\"word-counter\">\r\n <span id=\"wordCounter\">Word 1 of 10<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-container\">\r\n <div class=\"image-box\">\r\n <div class=\"emoji\" id=\"wordEmoji\">\ud83d\udc31<\/div>\r\n <div class=\"meaning\" id=\"wordMeaning\">Cat<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"path-container\">\r\n <svg class=\"path-svg\" viewbox=\"0 0 700 400\" id=\"pathSvg\">\r\n \r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <div class=\"input-container\">\r\n <label class=\"input-label\">Type the word here:<\/label>\r\n <input\r\n type=\"text\"\r\n id=\"wordInput\"\r\n class=\"word-input\"\r\n placeholder=\"Write the word\"\r\n \/>\r\n\r\n \r\n <div id=\"feedback\" class=\"feedback\" style=\"display: none;\"><\/div>\r\n\r\n \r\n <div class=\"button-container\">\r\n <button id=\"checkBtn\" class=\"game-button\">Check the answer<\/button>\r\n <button id=\"nextBtn\" class=\"game-button secondary\">The next word<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"instructions\">\r\n <p>Start at the beginning and follow the winding path through the obstacles, matching the letters in order to form the correct word. Beware of the stones and obstacles along the way!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game logic\r\n class ArabicWordGame {\r\n constructor() {\r\n this.currentWord = 0;\r\n this.userInput = '';\r\n this.feedback = '';\r\n this.isCorrect = null;\r\n\r\n \/\/ Extended game data with 10 words\r\n this.words = [\r\n {\r\n image: '\ud83d\udc31',\r\n word: '\u0642\u0637\u0629',\r\n letters: ['\u0629', '\u0637', '\u0642'],\r\n meaning: 'Cat'\r\n },\r\n {\r\n image: '\ud83c\udf33',\r\n word: '\u0634\u062c\u0631\u0629',\r\n letters: ['\u0629', '\u0631', '\u062c', '\u0634'],\r\n meaning: 'Tree'\r\n },\r\n {\r\n image: '\ud83c\udfe0',\r\n word: '\u0628\u064a\u062a',\r\n letters: ['\u062a', '\u064a', '\u0628'],\r\n meaning: 'House'\r\n },\r\n {\r\n image: '\ud83d\udcda',\r\n word: '\u0643\u062a\u0627\u0628',\r\n letters: ['\u0628', '\u0627', '\u062a', '\u0643'],\r\n meaning: 'Book'\r\n },\r\n {\r\n image: '\ud83c\udf19',\r\n word: '\u0642\u0645\u0631',\r\n letters: ['\u0631', '\u0645', '\u0642'],\r\n meaning: 'Moon'\r\n },\r\n {\r\n image: '\ud83c\udf0a',\r\n word: '\u0628\u062d\u0631',\r\n letters: ['\u0631', '\u062d', '\u0628'],\r\n meaning: 'Sea'\r\n },\r\n {\r\n image: '\ud83c\udf38',\r\n word: '\u0648\u0631\u062f\u0629',\r\n letters: ['\u0629', '\u062f', '\u0631', '\u0648'],\r\n meaning: 'Flower'\r\n },\r\n {\r\n image: '\u2b50',\r\n word: '\u0646\u062c\u0645',\r\n letters: ['\u0645', '\u062c', '\u0646'],\r\n meaning: 'Star'\r\n },\r\n {\r\n image: '\ud83d\udd25',\r\n word: '\u0646\u0627\u0631',\r\n letters: ['\u0631', '\u0627', '\u0646'],\r\n meaning: 'Fire'\r\n },\r\n {\r\n image: '\ud83d\udc8e',\r\n word: '\u062c\u0648\u0647\u0631\u0629',\r\n letters: ['\u0629', '\u0631', '\u0647', '\u0648', '\u062c'],\r\n meaning: 'Gem'\r\n }\r\n ];\r\n\r\n this.initializeElements();\r\n this.setupEventListeners();\r\n this.updateDisplay();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n wordCounter: document.getElementById('wordCounter'),\r\n wordEmoji: document.getElementById('wordEmoji'),\r\n wordMeaning: document.getElementById('wordMeaning'),\r\n pathSvg: document.getElementById('pathSvg'),\r\n wordInput: document.getElementById('wordInput'),\r\n feedback: document.getElementById('feedback'),\r\n checkBtn: document.getElementById('checkBtn'),\r\n nextBtn: document.getElementById('nextBtn')\r\n };\r\n }\r\n\r\n setupEventListeners() {\r\n this.elements.checkBtn.addEventListener('click', () => this.checkAnswer());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextWord());\r\n \r\n this.elements.wordInput.addEventListener('input', (e) => {\r\n this.userInput = e.target.value;\r\n this.elements.checkBtn.disabled = !this.userInput.trim();\r\n this.hideFeedback();\r\n });\r\n\r\n this.elements.wordInput.addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter' && this.userInput.trim()) {\r\n this.checkAnswer();\r\n }\r\n });\r\n }\r\n\r\n checkAnswer() {\r\n const correct = this.userInput.trim() === this.words[this.currentWord].word;\r\n this.isCorrect = correct;\r\n this.showFeedback(correct);\r\n }\r\n\r\n showFeedback(correct) {\r\n const feedback = this.elements.feedback;\r\n feedback.style.display = 'block';\r\n \r\n if (correct) {\r\n feedback.className = 'feedback correct';\r\n feedback.innerHTML = `\r\n <div>\ud83c\udf89 \u0635\u062d\u064a\u062d! \u0625\u062c\u0627\u0628\u0629 \u0645\u0645\u062a\u0627\u0632\u0629<\/div>\r\n <div class=\"correct-word\">\u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${this.words[this.currentWord].word}<\/div>\r\n `;\r\n } else {\r\n feedback.className = 'feedback incorrect';\r\n feedback.innerHTML = `\r\n <div>\u274c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649<\/div>\r\n <div class=\"correct-word\">\u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${this.words[this.currentWord].word}<\/div>\r\n `;\r\n }\r\n }\r\n\r\n hideFeedback() {\r\n this.elements.feedback.style.display = 'none';\r\n }\r\n\r\n nextWord() {\r\n this.currentWord = (this.currentWord + 1) % this.words.length;\r\n this.userInput = '';\r\n this.elements.wordInput.value = '';\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.updateDisplay();\r\n this.elements.wordInput.focus();\r\n }\r\n\r\n updateDisplay() {\r\n const currentWordData = this.words[this.currentWord];\r\n \r\n \/\/ Update counter\r\n this.elements.wordCounter.textContent = `\u0627\u0644\u0643\u0644\u0645\u0629 ${this.currentWord + 1} \u0645\u0646 ${this.words.length}`;\r\n \r\n \/\/ Update image and meaning\r\n this.elements.wordEmoji.textContent = currentWordData.image;\r\n this.elements.wordMeaning.textContent = currentWordData.meaning;\r\n \r\n \/\/ Update path\r\n this.updatePath(currentWordData.letters);\r\n }\r\n\r\n generatePath(letters) {\r\n const pathSegments = [];\r\n const startX = 80;\r\n const startY = 200;\r\n const baseSegmentLength = Math.min(500 \/ letters.length, 80);\r\n \r\n pathSegments.push(`M ${startX} ${startY}`);\r\n \r\n for (let i = 0; i < letters.length; i++) {\r\n const progress = (i + 1) \/ letters.length;\r\n const x = startX + progress * 520;\r\n \r\n \/\/ Create much more dramatic and challenging curves\r\n const primaryWave = Math.sin(i * 2.5) * 80; \/\/ Increased amplitude\r\n const secondaryWave = Math.cos(i * 1.8) * 60; \/\/ Increased amplitude\r\n const tertiaryWave = Math.sin(i * 3.2) * 45; \/\/ Increased amplitude\r\n const quaternaryWave = Math.cos(i * 0.7) * 35; \/\/ Added fourth wave\r\n \r\n const y = 200 + primaryWave + secondaryWave + tertiaryWave + quaternaryWave;\r\n \r\n if (i === 0) {\r\n \/\/ First curve - very dramatic\r\n const controlX = startX + baseSegmentLength * 0.8;\r\n const controlY = startY + (Math.random() - 0.5) * 120;\r\n pathSegments.push(`Q ${controlX} ${controlY} ${x} ${y}`);\r\n } else {\r\n \/\/ Subsequent curves with extreme variations\r\n const prevX = startX + (i \/ letters.length) * 520;\r\n const prevIndex = i - 1;\r\n const prevPrimary = Math.sin(prevIndex * 2.5) * 80;\r\n const prevSecondary = Math.cos(prevIndex * 1.8) * 60;\r\n const prevTertiary = Math.sin(prevIndex * 3.2) * 45;\r\n const prevQuaternary = Math.cos(prevIndex * 0.7) * 35;\r\n const prevY = 200 + prevPrimary + prevSecondary + prevTertiary + prevQuaternary;\r\n \r\n const controlX1 = prevX + (x - prevX) * 0.25;\r\n const controlY1 = prevY + (Math.sin(i * 2.7) * 80);\r\n const controlX2 = prevX + (x - prevX) * 0.75;\r\n const controlY2 = y + (Math.cos(i * 2.3) * 70);\r\n \r\n pathSegments.push(`C ${controlX1} ${controlY1} ${controlX2} ${controlY2} ${x} ${y}`);\r\n }\r\n }\r\n \r\n return pathSegments.join(' ');\r\n }\r\n\r\n getLetterPositions(letters) {\r\n const positions = [];\r\n const startX = 80;\r\n \r\n for (let i = 0; i < letters.length; i++) {\r\n const progress = (i + 1) \/ letters.length;\r\n const x = startX + progress * 520;\r\n \r\n \/\/ Match the path generation logic exactly\r\n const primaryWave = Math.sin(i * 2.5) * 80;\r\n const secondaryWave = Math.cos(i * 1.8) * 60;\r\n const tertiaryWave = Math.sin(i * 3.2) * 45;\r\n const quaternaryWave = Math.cos(i * 0.7) * 35;\r\n \r\n const y = 200 + primaryWave + secondaryWave + tertiaryWave + quaternaryWave;\r\n \r\n positions.push({ x, y, letter: letters[i] });\r\n }\r\n \r\n return positions;\r\n }\r\n\r\n generateObstacles(letters) {\r\n const obstacles = [];\r\n const totalWidth = 600;\r\n const numObstacles = Math.floor(Math.random() * 8) + 5; \/\/ 5-12 obstacles\r\n \r\n for (let i = 0; i < numObstacles; i++) {\r\n const x = 120 + Math.random() * (totalWidth - 240);\r\n const y = 80 + Math.random() * 240; \/\/ Random Y position\r\n \r\n \/\/ Different obstacle types\r\n const obstacleTypes = [\r\n { emoji: '\ud83e\uddf1', size: 25 }, \/\/ Brick\r\n { emoji: '\ud83e\udea8', size: 22 }, \/\/ Rock \r\n { emoji: '\u26a1', size: 20 }, \/\/ Lightning\r\n { emoji: '\ud83c\udf35', size: 28 }, \/\/ Cactus\r\n { emoji: '\ud83d\udd73\ufe0f', size: 30 }, \/\/ Hole\r\n { emoji: '\ud83d\udd25', size: 22 }, \/\/ Fire\r\n { emoji: '\ud83d\udca5', size: 26 }, \/\/ Explosion\r\n ];\r\n \r\n const obstacleType = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];\r\n \r\n obstacles.push({\r\n x: x,\r\n y: y,\r\n emoji: obstacleType.emoji,\r\n size: obstacleType.size\r\n });\r\n }\r\n \r\n return obstacles;\r\n }\r\n\r\n updatePath(letters) {\r\n const pathD = this.generatePath(letters);\r\n const letterPositions = this.getLetterPositions(letters);\r\n const obstacles = this.generateObstacles(letters);\r\n \r\n this.elements.pathSvg.innerHTML = `\r\n \r\n ${obstacles.map(obstacle => `\r\n <g>\r\n <circle cx=\"${obstacle.x}\" cy=\"${obstacle.y}\" r=\"${obstacle.size + 8}\" fill=\"rgba(220, 38, 38, 0.1)\" stroke=\"none\"\/>\r\n <text x=\"${obstacle.x}\" y=\"${obstacle.y + obstacle.size\/3}\" text-anchor=\"middle\" font-size=\"${obstacle.size}\" filter=\"drop-shadow(2px 2px 4px rgba(0,0,0,0.3))\">\r\n ${obstacle.emoji}\r\n <\/text>\r\n <\/g>\r\n `).join('')}\r\n\r\n \r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.2)\" stroke-width=\"60\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(4, 4)\"\/>\r\n \r\n \r\n <path d=\"${pathD}\" stroke=\"#8220A5\" stroke-width=\"55\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n \r\n \r\n <defs>\r\n <linearGradient id=\"pathGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" style=\"stop-color:#ffffff;stop-opacity:1\" \/>\r\n <stop offset=\"50%\" style=\"stop-color:#f8f5ff;stop-opacity:1\" \/>\r\n <stop offset=\"100%\" style=\"stop-color:#e5d9f2;stop-opacity:1\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <path d=\"${pathD}\" stroke=\"url(#pathGradient)\" stroke-width=\"45\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n\r\n \r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.4)\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"10,5\"\/>\r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.2)\" stroke-width=\"1\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n\r\n \r\n ${letterPositions.map((pos, index) => `\r\n <g>\r\n \r\n <circle cx=\"${pos.x + 3}\" cy=\"${pos.y + 3}\" r=\"35\" fill=\"rgba(0, 0, 0, 0.2)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"38\" fill=\"rgba(130, 32, 165, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"32\" fill=\"#8220A5\" stroke=\"#ffffff\" stroke-width=\"5\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"28\" fill=\"rgba(255, 255, 255, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <text x=\"${pos.x}\" y=\"${pos.y + 12}\" text-anchor=\"middle\" fill=\"white\" font-weight=\"bold\" font-size=\"28\" font-family=\"Arial, sans-serif\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.3))\">\r\n ${pos.letter}\r\n <\/text>\r\n <\/g>\r\n `).join('')}\r\n\r\n \r\n <g>\r\n \r\n <circle cx=\"83\" cy=\"203\" r=\"38\" fill=\"rgba(0, 0, 0, 0.2)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"42\" fill=\"rgba(34, 197, 94, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"35\" fill=\"#22c55e\" stroke=\"#ffffff\" stroke-width=\"5\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"30\" fill=\"rgba(255, 255, 255, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <text x=\"80\" y=\"200 + 8\" text-anchor=\"middle\" fill=\"white\" font-weight=\"bold\" font-size=\"20\" font-family=\"Arial, sans-serif\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.3))\">\ud83c\udfc1<\/text>\r\n \r\n \r\n <text x=\"80\" y=\"200 + 65\" text-anchor=\"middle\" fill=\"#22c55e\" font-weight=\"bold\" font-size=\"18\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.2))\">\u0627\u0644\u0628\u062f\u0627\u064a\u0629<\/text>\r\n <\/g>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ Initialize the game when the page loads\r\n document.addEventListener('DOMContentLoaded', function() {\r\n new ArabicWordGame();\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 Word Game \u062a\u0639\u0644\u0645 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 – \u0627\u0644\u062a\u062d\u062f\u064a \u0627\u0644\u0635\u0639\u0628! \u0627\u0644\u0643\u0644\u0645\u0629 1 \u0645\u0646 10 \ud83d\udc31 Cat \u0627\u0643\u062a\u0628 \u0627\u0644\u0643\u0644\u0645\u0629 \u0647\u0646\u0627: \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629 \u0627\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0648\u0627\u062a\u0628\u0639 \u0627\u0644\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u062a\u0639\u0631\u062c \u0639\u0628\u0631 \u0627\u0644\u0639\u0648\u0627\u0626\u0642 \u0648\u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0628\u0627\u0644\u062a\u0631\u062a\u064a\u0628 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629. \u0627\u062d\u0630\u0631 \u0645\u0646 \u0627\u0644\u062d\u062c\u0627\u0631\u0629 \u0648\u0627\u0644\u0639\u0648\u0627\u0626\u0642 \u0641\u064a \u0627\u0644\u0637\u0631\u064a\u0642!<\/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-15263","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263","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=15263"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263\/revisions"}],"predecessor-version":[{"id":15267,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263\/revisions\/15267"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Arabic Word Game<\/title>\r\n <style>\r\n \/* Scoped styles for the game widget - will not affect page body or other elements *\/\r\n .arabic-game-widget {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #f8f5ff 0%, #ffffff 100%);\r\n border-radius: 20px;\r\n box-shadow: 0 8px 32px rgba(130, 32, 165, 0.15);\r\n padding: 24px;\r\n max-width: 900px;\r\n margin: 20px auto;\r\n direction: rtl;\r\n border: 2px solid #e5d9f2;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .arabic-game-widget * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .arabic-game-widget::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(45deg, rgba(130, 32, 165, 0.03) 25%, transparent 25%),\r\n linear-gradient(-45deg, rgba(130, 32, 165, 0.03) 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, rgba(130, 32, 165, 0.03) 75%),\r\n linear-gradient(-45deg, transparent 75%, rgba(130, 32, 165, 0.03) 75%);\r\n background-size: 20px 20px;\r\n background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n .arabic-game-widget > * {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .arabic-game-widget .game-header {\r\n text-align: center;\r\n margin-bottom: 28px;\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n padding: 20px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 20px rgba(130, 32, 165, 0.3);\r\n }\r\n\r\n .arabic-game-widget .game-title {\r\n font-size: 28px;\r\n font-weight: bold;\r\n color: white;\r\n margin: 0;\r\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .arabic-game-widget .word-counter {\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n\r\n .arabic-game-widget .word-counter span {\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 16px;\r\n box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2);\r\n display: inline-block;\r\n }\r\n\r\n .arabic-game-widget .image-container {\r\n text-align: center;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .arabic-game-widget .image-box {\r\n display: inline-block;\r\n background: linear-gradient(135deg, #f8f5ff, #ffffff);\r\n padding: 40px;\r\n border-radius: 20px;\r\n border: 3px solid #e5d9f2;\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.1);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .image-box:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .arabic-game-widget .emoji {\r\n font-size: 90px;\r\n margin-bottom: 12px;\r\n display: block;\r\n filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));\r\n }\r\n\r\n .arabic-game-widget .meaning {\r\n color: #6b46c1;\r\n font-size: 20px;\r\n margin: 0;\r\n font-weight: 600;\r\n }\r\n\r\n .arabic-game-widget .path-container {\r\n background: linear-gradient(135deg, #f8f5ff, #ffffff);\r\n border-radius: 20px;\r\n padding: 32px;\r\n margin-bottom: 28px;\r\n border: 2px solid #e5d9f2;\r\n box-shadow: inset 0 2px 10px rgba(130, 32, 165, 0.05);\r\n }\r\n\r\n .arabic-game-widget .path-svg {\r\n width: 100%;\r\n height: 400px;\r\n }\r\n\r\n .arabic-game-widget .input-container {\r\n background: linear-gradient(135deg, #ffffff, #fefbff);\r\n border: 3px solid #e5d9f2;\r\n border-radius: 20px;\r\n padding: 28px;\r\n text-align: center;\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.1);\r\n }\r\n\r\n .arabic-game-widget .input-label {\r\n display: block;\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #8220A5;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .arabic-game-widget .word-input {\r\n width: 250px;\r\n padding: 16px 20px;\r\n font-size: 24px;\r\n text-align: center;\r\n border: 3px solid #e5d9f2;\r\n border-radius: 12px;\r\n direction: rtl;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ffffff, #fefbff);\r\n color: #8220A5;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .word-input:focus {\r\n outline: none;\r\n border-color: #8220A5;\r\n box-shadow: 0 0 20px rgba(130, 32, 165, 0.2);\r\n transform: scale(1.02);\r\n }\r\n\r\n .arabic-game-widget .feedback {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n padding: 16px;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .arabic-game-widget .feedback.correct {\r\n background: linear-gradient(135deg, #dcfce7, #f0fdf4);\r\n color: #166534;\r\n border: 2px solid #bbf7d0;\r\n box-shadow: 0 4px 15px rgba(22, 101, 52, 0.1);\r\n }\r\n\r\n .arabic-game-widget .feedback.incorrect {\r\n background: linear-gradient(135deg, #fef2f2, #fefefe);\r\n color: #dc2626;\r\n border: 2px solid #fecaca;\r\n box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);\r\n }\r\n\r\n .arabic-game-widget .correct-word {\r\n font-size: 16px;\r\n margin-top: 6px;\r\n opacity: 0.9;\r\n }\r\n\r\n .arabic-game-widget .button-container {\r\n display: flex;\r\n justify-content: center;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .arabic-game-widget .game-button {\r\n background: linear-gradient(135deg, #8220A5, #9f2abb);\r\n color: white;\r\n padding: 16px 32px;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(130, 32, 165, 0.3);\r\n min-width: 140px;\r\n }\r\n\r\n .arabic-game-widget .game-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 25px rgba(130, 32, 165, 0.4);\r\n background: linear-gradient(135deg, #6b1a85, #8220A5);\r\n }\r\n\r\n .arabic-game-widget .game-button:disabled {\r\n background: linear-gradient(135deg, #d1d5db, #e5e7eb);\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .arabic-game-widget .game-button.secondary {\r\n background: linear-gradient(135deg, #6b7280, #9ca3af);\r\n }\r\n\r\n .arabic-game-widget .game-button.secondary:hover {\r\n background: linear-gradient(135deg, #4b5563, #6b7280);\r\n }\r\n\r\n .arabic-game-widget .instructions {\r\n margin-top: 24px;\r\n text-align: center;\r\n color: #8220A5;\r\n font-size: 16px;\r\n font-weight: 500;\r\n background: rgba(130, 32, 165, 0.05);\r\n padding: 16px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(130, 32, 165, 0.1);\r\n }\r\n\r\n \/* Responsive design *\/\r\n @media (max-width: 768px) {\r\n .arabic-game-widget {\r\n padding: 20px;\r\n margin: 10px;\r\n }\r\n \r\n .arabic-game-widget .game-title {\r\n font-size: 24px;\r\n }\r\n \r\n .arabic-game-widget .emoji {\r\n font-size: 70px;\r\n }\r\n \r\n .arabic-game-widget .word-input {\r\n width: 200px;\r\n font-size: 20px;\r\n }\r\n \r\n .arabic-game-widget .button-container {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .arabic-game-widget .game-button {\r\n width: 200px;\r\n }\r\n\r\n .arabic-game-widget .path-svg {\r\n height: 350px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"arabic-game-widget\" id=\"arabicGameWidget\">\r\n \r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">Learn Arabic Words - The Tough Challenge!<\/h1>\r\n <\/div>\r\n\r\n \r\n <div class=\"game-content\">\r\n \r\n <div class=\"word-counter\">\r\n <span id=\"wordCounter\">Word 1 of 10<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"image-container\">\r\n <div class=\"image-box\">\r\n <div class=\"emoji\" id=\"wordEmoji\">\ud83d\udc31<\/div>\r\n <div class=\"meaning\" id=\"wordMeaning\">Cat<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"path-container\">\r\n <svg class=\"path-svg\" viewbox=\"0 0 700 400\" id=\"pathSvg\">\r\n \r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <div class=\"input-container\">\r\n <label class=\"input-label\">Type the word here:<\/label>\r\n <input\r\n type=\"text\"\r\n id=\"wordInput\"\r\n class=\"word-input\"\r\n placeholder=\"Write the word\"\r\n \/>\r\n\r\n \r\n <div id=\"feedback\" class=\"feedback\" style=\"display: none;\"><\/div>\r\n\r\n \r\n <div class=\"button-container\">\r\n <button id=\"checkBtn\" class=\"game-button\">Check the answer<\/button>\r\n <button id=\"nextBtn\" class=\"game-button secondary\">The next word<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"instructions\">\r\n <p>Start at the beginning and follow the winding path through the obstacles, matching the letters in order to form the correct word. Beware of the stones and obstacles along the way!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game logic\r\n class ArabicWordGame {\r\n constructor() {\r\n this.currentWord = 0;\r\n this.userInput = '';\r\n this.feedback = '';\r\n this.isCorrect = null;\r\n\r\n \/\/ Extended game data with 10 words\r\n this.words = [\r\n {\r\n image: '\ud83d\udc31',\r\n word: '\u0642\u0637\u0629',\r\n letters: ['\u0629', '\u0637', '\u0642'],\r\n meaning: 'Cat'\r\n },\r\n {\r\n image: '\ud83c\udf33',\r\n word: '\u0634\u062c\u0631\u0629',\r\n letters: ['\u0629', '\u0631', '\u062c', '\u0634'],\r\n meaning: 'Tree'\r\n },\r\n {\r\n image: '\ud83c\udfe0',\r\n word: '\u0628\u064a\u062a',\r\n letters: ['\u062a', '\u064a', '\u0628'],\r\n meaning: 'House'\r\n },\r\n {\r\n image: '\ud83d\udcda',\r\n word: '\u0643\u062a\u0627\u0628',\r\n letters: ['\u0628', '\u0627', '\u062a', '\u0643'],\r\n meaning: 'Book'\r\n },\r\n {\r\n image: '\ud83c\udf19',\r\n word: '\u0642\u0645\u0631',\r\n letters: ['\u0631', '\u0645', '\u0642'],\r\n meaning: 'Moon'\r\n },\r\n {\r\n image: '\ud83c\udf0a',\r\n word: '\u0628\u062d\u0631',\r\n letters: ['\u0631', '\u062d', '\u0628'],\r\n meaning: 'Sea'\r\n },\r\n {\r\n image: '\ud83c\udf38',\r\n word: '\u0648\u0631\u062f\u0629',\r\n letters: ['\u0629', '\u062f', '\u0631', '\u0648'],\r\n meaning: 'Flower'\r\n },\r\n {\r\n image: '\u2b50',\r\n word: '\u0646\u062c\u0645',\r\n letters: ['\u0645', '\u062c', '\u0646'],\r\n meaning: 'Star'\r\n },\r\n {\r\n image: '\ud83d\udd25',\r\n word: '\u0646\u0627\u0631',\r\n letters: ['\u0631', '\u0627', '\u0646'],\r\n meaning: 'Fire'\r\n },\r\n {\r\n image: '\ud83d\udc8e',\r\n word: '\u062c\u0648\u0647\u0631\u0629',\r\n letters: ['\u0629', '\u0631', '\u0647', '\u0648', '\u062c'],\r\n meaning: 'Gem'\r\n }\r\n ];\r\n\r\n this.initializeElements();\r\n this.setupEventListeners();\r\n this.updateDisplay();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n wordCounter: document.getElementById('wordCounter'),\r\n wordEmoji: document.getElementById('wordEmoji'),\r\n wordMeaning: document.getElementById('wordMeaning'),\r\n pathSvg: document.getElementById('pathSvg'),\r\n wordInput: document.getElementById('wordInput'),\r\n feedback: document.getElementById('feedback'),\r\n checkBtn: document.getElementById('checkBtn'),\r\n nextBtn: document.getElementById('nextBtn')\r\n };\r\n }\r\n\r\n setupEventListeners() {\r\n this.elements.checkBtn.addEventListener('click', () => this.checkAnswer());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextWord());\r\n \r\n this.elements.wordInput.addEventListener('input', (e) => {\r\n this.userInput = e.target.value;\r\n this.elements.checkBtn.disabled = !this.userInput.trim();\r\n this.hideFeedback();\r\n });\r\n\r\n this.elements.wordInput.addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter' && this.userInput.trim()) {\r\n this.checkAnswer();\r\n }\r\n });\r\n }\r\n\r\n checkAnswer() {\r\n const correct = this.userInput.trim() === this.words[this.currentWord].word;\r\n this.isCorrect = correct;\r\n this.showFeedback(correct);\r\n }\r\n\r\n showFeedback(correct) {\r\n const feedback = this.elements.feedback;\r\n feedback.style.display = 'block';\r\n \r\n if (correct) {\r\n feedback.className = 'feedback correct';\r\n feedback.innerHTML = `\r\n <div>\ud83c\udf89 \u0635\u062d\u064a\u062d! \u0625\u062c\u0627\u0628\u0629 \u0645\u0645\u062a\u0627\u0632\u0629<\/div>\r\n <div class=\"correct-word\">\u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${this.words[this.currentWord].word}<\/div>\r\n `;\r\n } else {\r\n feedback.className = 'feedback incorrect';\r\n feedback.innerHTML = `\r\n <div>\u274c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649<\/div>\r\n <div class=\"correct-word\">\u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${this.words[this.currentWord].word}<\/div>\r\n `;\r\n }\r\n }\r\n\r\n hideFeedback() {\r\n this.elements.feedback.style.display = 'none';\r\n }\r\n\r\n nextWord() {\r\n this.currentWord = (this.currentWord + 1) % this.words.length;\r\n this.userInput = '';\r\n this.elements.wordInput.value = '';\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.updateDisplay();\r\n this.elements.wordInput.focus();\r\n }\r\n\r\n updateDisplay() {\r\n const currentWordData = this.words[this.currentWord];\r\n \r\n \/\/ Update counter\r\n this.elements.wordCounter.textContent = `\u0627\u0644\u0643\u0644\u0645\u0629 ${this.currentWord + 1} \u0645\u0646 ${this.words.length}`;\r\n \r\n \/\/ Update image and meaning\r\n this.elements.wordEmoji.textContent = currentWordData.image;\r\n this.elements.wordMeaning.textContent = currentWordData.meaning;\r\n \r\n \/\/ Update path\r\n this.updatePath(currentWordData.letters);\r\n }\r\n\r\n generatePath(letters) {\r\n const pathSegments = [];\r\n const startX = 80;\r\n const startY = 200;\r\n const baseSegmentLength = Math.min(500 \/ letters.length, 80);\r\n \r\n pathSegments.push(`M ${startX} ${startY}`);\r\n \r\n for (let i = 0; i < letters.length; i++) {\r\n const progress = (i + 1) \/ letters.length;\r\n const x = startX + progress * 520;\r\n \r\n \/\/ Create much more dramatic and challenging curves\r\n const primaryWave = Math.sin(i * 2.5) * 80; \/\/ Increased amplitude\r\n const secondaryWave = Math.cos(i * 1.8) * 60; \/\/ Increased amplitude\r\n const tertiaryWave = Math.sin(i * 3.2) * 45; \/\/ Increased amplitude\r\n const quaternaryWave = Math.cos(i * 0.7) * 35; \/\/ Added fourth wave\r\n \r\n const y = 200 + primaryWave + secondaryWave + tertiaryWave + quaternaryWave;\r\n \r\n if (i === 0) {\r\n \/\/ First curve - very dramatic\r\n const controlX = startX + baseSegmentLength * 0.8;\r\n const controlY = startY + (Math.random() - 0.5) * 120;\r\n pathSegments.push(`Q ${controlX} ${controlY} ${x} ${y}`);\r\n } else {\r\n \/\/ Subsequent curves with extreme variations\r\n const prevX = startX + (i \/ letters.length) * 520;\r\n const prevIndex = i - 1;\r\n const prevPrimary = Math.sin(prevIndex * 2.5) * 80;\r\n const prevSecondary = Math.cos(prevIndex * 1.8) * 60;\r\n const prevTertiary = Math.sin(prevIndex * 3.2) * 45;\r\n const prevQuaternary = Math.cos(prevIndex * 0.7) * 35;\r\n const prevY = 200 + prevPrimary + prevSecondary + prevTertiary + prevQuaternary;\r\n \r\n const controlX1 = prevX + (x - prevX) * 0.25;\r\n const controlY1 = prevY + (Math.sin(i * 2.7) * 80);\r\n const controlX2 = prevX + (x - prevX) * 0.75;\r\n const controlY2 = y + (Math.cos(i * 2.3) * 70);\r\n \r\n pathSegments.push(`C ${controlX1} ${controlY1} ${controlX2} ${controlY2} ${x} ${y}`);\r\n }\r\n }\r\n \r\n return pathSegments.join(' ');\r\n }\r\n\r\n getLetterPositions(letters) {\r\n const positions = [];\r\n const startX = 80;\r\n \r\n for (let i = 0; i < letters.length; i++) {\r\n const progress = (i + 1) \/ letters.length;\r\n const x = startX + progress * 520;\r\n \r\n \/\/ Match the path generation logic exactly\r\n const primaryWave = Math.sin(i * 2.5) * 80;\r\n const secondaryWave = Math.cos(i * 1.8) * 60;\r\n const tertiaryWave = Math.sin(i * 3.2) * 45;\r\n const quaternaryWave = Math.cos(i * 0.7) * 35;\r\n \r\n const y = 200 + primaryWave + secondaryWave + tertiaryWave + quaternaryWave;\r\n \r\n positions.push({ x, y, letter: letters[i] });\r\n }\r\n \r\n return positions;\r\n }\r\n\r\n generateObstacles(letters) {\r\n const obstacles = [];\r\n const totalWidth = 600;\r\n const numObstacles = Math.floor(Math.random() * 8) + 5; \/\/ 5-12 obstacles\r\n \r\n for (let i = 0; i < numObstacles; i++) {\r\n const x = 120 + Math.random() * (totalWidth - 240);\r\n const y = 80 + Math.random() * 240; \/\/ Random Y position\r\n \r\n \/\/ Different obstacle types\r\n const obstacleTypes = [\r\n { emoji: '\ud83e\uddf1', size: 25 }, \/\/ Brick\r\n { emoji: '\ud83e\udea8', size: 22 }, \/\/ Rock \r\n { emoji: '\u26a1', size: 20 }, \/\/ Lightning\r\n { emoji: '\ud83c\udf35', size: 28 }, \/\/ Cactus\r\n { emoji: '\ud83d\udd73\ufe0f', size: 30 }, \/\/ Hole\r\n { emoji: '\ud83d\udd25', size: 22 }, \/\/ Fire\r\n { emoji: '\ud83d\udca5', size: 26 }, \/\/ Explosion\r\n ];\r\n \r\n const obstacleType = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];\r\n \r\n obstacles.push({\r\n x: x,\r\n y: y,\r\n emoji: obstacleType.emoji,\r\n size: obstacleType.size\r\n });\r\n }\r\n \r\n return obstacles;\r\n }\r\n\r\n updatePath(letters) {\r\n const pathD = this.generatePath(letters);\r\n const letterPositions = this.getLetterPositions(letters);\r\n const obstacles = this.generateObstacles(letters);\r\n \r\n this.elements.pathSvg.innerHTML = `\r\n \r\n ${obstacles.map(obstacle => `\r\n <g>\r\n <circle cx=\"${obstacle.x}\" cy=\"${obstacle.y}\" r=\"${obstacle.size + 8}\" fill=\"rgba(220, 38, 38, 0.1)\" stroke=\"none\"\/>\r\n <text x=\"${obstacle.x}\" y=\"${obstacle.y + obstacle.size\/3}\" text-anchor=\"middle\" font-size=\"${obstacle.size}\" filter=\"drop-shadow(2px 2px 4px rgba(0,0,0,0.3))\">\r\n ${obstacle.emoji}\r\n <\/text>\r\n <\/g>\r\n `).join('')}\r\n\r\n \r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.2)\" stroke-width=\"60\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(4, 4)\"\/>\r\n \r\n \r\n <path d=\"${pathD}\" stroke=\"#8220A5\" stroke-width=\"55\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n \r\n \r\n <defs>\r\n <linearGradient id=\"pathGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" style=\"stop-color:#ffffff;stop-opacity:1\" \/>\r\n <stop offset=\"50%\" style=\"stop-color:#f8f5ff;stop-opacity:1\" \/>\r\n <stop offset=\"100%\" style=\"stop-color:#e5d9f2;stop-opacity:1\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <path d=\"${pathD}\" stroke=\"url(#pathGradient)\" stroke-width=\"45\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n\r\n \r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.4)\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"10,5\"\/>\r\n <path d=\"${pathD}\" stroke=\"rgba(130, 32, 165, 0.2)\" stroke-width=\"1\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n\r\n \r\n ${letterPositions.map((pos, index) => `\r\n <g>\r\n \r\n <circle cx=\"${pos.x + 3}\" cy=\"${pos.y + 3}\" r=\"35\" fill=\"rgba(0, 0, 0, 0.2)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"38\" fill=\"rgba(130, 32, 165, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"32\" fill=\"#8220A5\" stroke=\"#ffffff\" stroke-width=\"5\"\/>\r\n \r\n \r\n <circle cx=\"${pos.x}\" cy=\"${pos.y}\" r=\"28\" fill=\"rgba(255, 255, 255, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <text x=\"${pos.x}\" y=\"${pos.y + 12}\" text-anchor=\"middle\" fill=\"white\" font-weight=\"bold\" font-size=\"28\" font-family=\"Arial, sans-serif\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.3))\">\r\n ${pos.letter}\r\n <\/text>\r\n <\/g>\r\n `).join('')}\r\n\r\n \r\n <g>\r\n \r\n <circle cx=\"83\" cy=\"203\" r=\"38\" fill=\"rgba(0, 0, 0, 0.2)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"42\" fill=\"rgba(34, 197, 94, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"35\" fill=\"#22c55e\" stroke=\"#ffffff\" stroke-width=\"5\"\/>\r\n \r\n \r\n <circle cx=\"80\" cy=\"200\" r=\"30\" fill=\"rgba(255, 255, 255, 0.1)\" stroke=\"none\"\/>\r\n \r\n \r\n <text x=\"80\" y=\"200 + 8\" text-anchor=\"middle\" fill=\"white\" font-weight=\"bold\" font-size=\"20\" font-family=\"Arial, sans-serif\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.3))\">\ud83c\udfc1<\/text>\r\n \r\n \r\n <text x=\"80\" y=\"200 + 65\" text-anchor=\"middle\" fill=\"#22c55e\" font-weight=\"bold\" font-size=\"18\" filter=\"drop-shadow(1px 1px 2px rgba(0,0,0,0.2))\">\u0627\u0644\u0628\u062f\u0627\u064a\u0629<\/text>\r\n <\/g>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ Initialize the game when the page loads\r\n document.addEventListener('DOMContentLoaded', function() {\r\n new ArabicWordGame();\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 Word Game \u062a\u0639\u0644\u0645 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 – \u0627\u0644\u062a\u062d\u062f\u064a \u0627\u0644\u0635\u0639\u0628! \u0627\u0644\u0643\u0644\u0645\u0629 1 \u0645\u0646 10 \ud83d\udc31 Cat \u0627\u0643\u062a\u0628 \u0627\u0644\u0643\u0644\u0645\u0629 \u0647\u0646\u0627: \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629 \u0627\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0648\u0627\u062a\u0628\u0639 \u0627\u0644\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u062a\u0639\u0631\u062c \u0639\u0628\u0631 \u0627\u0644\u0639\u0648\u0627\u0626\u0642 \u0648\u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0628\u0627\u0644\u062a\u0631\u062a\u064a\u0628 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629. \u0627\u062d\u0630\u0631 \u0645\u0646 \u0627\u0644\u062d\u062c\u0627\u0631\u0629 \u0648\u0627\u0644\u0639\u0648\u0627\u0626\u0642 \u0641\u064a \u0627\u0644\u0637\u0631\u064a\u0642!<\/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-15263","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263","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=15263"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263\/revisions"}],"predecessor-version":[{"id":15267,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15263\/revisions\/15267"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}