{"id":15150,"date":"2025-09-01T16:29:08","date_gmt":"2025-09-01T14:29:08","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15150"},"modified":"2025-09-01T16:36:49","modified_gmt":"2025-09-01T14:36:49","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%aa%d8%b1%d8%aa%d9%8a%d8%a8-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%aa%d8%b1%d8%aa%d9%8a%d8%a8-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa\/","title":{"rendered":"Word sorting game"},"content":{"rendered":"
\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 order<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n \r\n }\r\n\r\n .game-container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n background: white;\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .game-header {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .game-title {\r\n color: #8220A5;\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .game-info {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n margin-bottom: 20px;\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 15px;\r\n }\r\n\r\n .timer {\r\n font-size: 18px;\r\n color: #e74c3c;\r\n font-weight: bold;\r\n background: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n }\r\n\r\n .score {\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: #8220A5;\r\n background: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n }\r\n\r\n .level {\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n background: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n }\r\n\r\n .instructions {\r\n background: #e8f4fd;\r\n padding: 15px;\r\n border-radius: 12px;\r\n margin-bottom: 25px;\r\n color: #2c3e50;\r\n font-size: 16px;\r\n }\r\n\r\n .word-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-bottom: 30px;\r\n min-height: 80px;\r\n padding: 20px;\r\n background: #f0f8ff;\r\n border-radius: 15px;\r\n }\r\n\r\n .word {\r\n background: #8220A5;\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n font-size: 16px;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3);\r\n transition: all 0.3s ease;\r\n user-select: none;\r\n border: 2px solid transparent;\r\n }\r\n\r\n .word:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4);\r\n background: #6b1a85;\r\n }\r\n\r\n .word.used {\r\n background: #95a5a6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n .word.used:hover {\r\n transform: none;\r\n background: #95a5a6;\r\n }\r\n\r\n .sentence-area {\r\n min-height: 120px;\r\n background: white;\r\n border: 3px dashed #8220A5;\r\n border-radius: 15px;\r\n padding: 20px;\r\n margin-bottom: 30px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n }\r\n\r\n .sentence-area.empty {\r\n background: #f8f9fa;\r\n }\r\n\r\n .sentence-word {\r\n background: #27ae60;\r\n color: white;\r\n padding: 10px 16px;\r\n border-radius: 20px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3);\r\n }\r\n\r\n .sentence-word:hover {\r\n background: #229954;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .placeholder-text {\r\n color: #7f8c8d;\r\n font-style: italic;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n .controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n margin: 25px 0;\r\n }\r\n\r\n .btn {\r\n background: #8220A5 !important;\r\n color: white !important;\r\n border: none !important;\r\n padding: 12px 24px !important;\r\n font-size: 16px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3);\r\n }\r\n\r\n .btn:hover {\r\n background: #6b1a85;\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4);\r\n }\r\n\r\n .btn:disabled {\r\n background: #bdc3c7 !important;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .btn.secondary {\r\n background: #34495e ;\r\n }\r\n\r\n .btn.secondary:hover {\r\n background: #2c3e50;\r\n }\r\n\r\n .btn.success {\r\n background: #27ae60 ;\r\n }\r\n\r\n .btn.success:hover {\r\n background: #229954;\r\n }\r\n\r\n .feedback {\r\n padding: 15px;\r\n border-radius: 12px;\r\n margin: 20px 0;\r\n font-weight: bold;\r\n font-size: 16px;\r\n display: none;\r\n }\r\n\r\n .feedback.correct {\r\n background: #d4edda;\r\n color: #155724;\r\n border: 2px solid #c3e6cb;\r\n }\r\n\r\n .feedback.incorrect {\r\n background: #f8d7da;\r\n color: #721c24;\r\n border: 2px solid #f5c6cb;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: #ecf0f1;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n margin: 15px 0;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #8220A5, #b794c7);\r\n border-radius: 10px;\r\n transition: width 0.5s ease;\r\n width: 0%;\r\n }\r\n\r\n .celebration {\r\n display: none;\r\n font-size: 48px;\r\n animation: bounce 0.6s ease-in-out;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 20%, 60%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-20px); }\r\n 80% { transform: translateY(-10px); }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .game-container {\r\n padding: 20px;\r\n margin: 10px;\r\n }\r\n\r\n .game-title {\r\n font-size: 24px;\r\n }\r\n\r\n .game-info {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .word {\r\n font-size: 14px;\r\n padding: 10px 16px;\r\n }\r\n\r\n .controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .btn {\r\n width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"game-container\">\r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">\ud83c\udfaf Arabic word order game<\/h1>\r\n \r\n <div class=\"game-info\">\r\n <div class=\"timer\">\r\n \u23f0 Time remaining: <span id=\"time\">60<\/span> second\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"instructions\" id=\"instructions\">\r\n Click on the words in the correct order to form the required sentence.\r\n <\/div>\r\n\r\n <div class=\"word-container\" id=\"word-container\">\r\n <!-- \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0633\u062a\u0636\u0627\u0641 \u0647\u0646\u0627 \u0628\u0627\u0644\u062c\u0627\u0641\u0627\u0633\u0643\u0631\u064a\u0628\u062a -->\r\n <\/div>\r\n\r\n <div class=\"sentence-area empty\" id=\"sentence-area\">\r\n <div class=\"placeholder-text\">Click on the words to form the sentence here.<\/div>\r\n <\/div>\r\n\r\n <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n <div class=\"celebration\" id=\"celebration\">\ud83c\udf89<\/div>\r\n\r\n <div class=\"controls\">\r\n <button class=\"btn\" id=\"check-btn\" disabled>\u2705 Check the sentence<\/button>\r\n <button class=\"btn secondary\" id=\"clear-btn\">\ud83d\udd04 Clear sentence<\/button>\r\n <button class=\"btn secondary\" id=\"hint-btn\">\ud83d\udca1 Hint<\/button>\r\n <button class=\"btn success\" id=\"next-btn\" style=\"display: none;\">\u23ed\ufe0f The next sentence<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n class ArabicWordGame {\r\n constructor() {\r\n this.sentences = [\r\n \"\u0627\u0644\u0637\u0627\u0644\u0628 \u0627\u0644\u0645\u062c\u062a\u0647\u062f \u064a\u0630\u0627\u0643\u0631 \u062f\u0631\u0648\u0633\u0647 \u0628\u0627\u0646\u062a\u0638\u0627\u0645\",\r\n \"\u0627\u0644\u0634\u0645\u0633 \u062a\u0634\u0631\u0642 \u0645\u0646 \u0627\u0644\u0645\u0634\u0631\u0642 \u0643\u0644 \u0635\u0628\u0627\u062d\",\r\n \"\u0627\u0644\u0642\u0637\u0629 \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u062a\u0644\u0639\u0628 \u0641\u064a \u0627\u0644\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u062c\u0645\u064a\u0644\u0629\",\r\n \"\u0627\u0644\u0637\u064a\u0648\u0631 \u062a\u063a\u0631\u062f \u0639\u0644\u0649 \u0623\u063a\u0635\u0627\u0646 \u0627\u0644\u0623\u0634\u062c\u0627\u0631\",\r\n \"\u0627\u0644\u0645\u0639\u0644\u0645 \u0627\u0644\u0641\u0627\u0636\u0644 \u064a\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 \u0644\u0644\u0637\u0644\u0627\u0628\",\r\n \"\u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u064a\u0644\u0639\u0628\u0648\u0646 \u0641\u064a \u0627\u0644\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u0639\u0627\u0645\u0629\",\r\n \"\u0627\u0644\u0645\u0637\u0631 \u064a\u0646\u0632\u0644 \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636 \u0627\u0644\u0639\u0637\u0634\u0649\",\r\n \"\u0627\u0644\u0641\u0644\u0627\u062d \u064a\u0632\u0631\u0639 \u0627\u0644\u0642\u0645\u062d \u0641\u064a \u0627\u0644\u062d\u0642\u0644\",\r\n \"\u0627\u0644\u0628\u062d\u0631 \u0627\u0644\u0647\u0627\u062f\u0626 \u064a\u0639\u0643\u0633 \u0636\u0648\u0621 \u0627\u0644\u0642\u0645\u0631\",\r\n \"\u0627\u0644\u0643\u062a\u0627\u0628 \u0627\u0644\u0645\u0641\u064a\u062f \u064a\u0646\u0645\u064a \u0627\u0644\u0639\u0642\u0644 \u0648\u0627\u0644\u062b\u0642\u0627\u0641\u0629\"\r\n ];\r\n\r\n this.currentSentence = \"\";\r\n this.currentWords = [];\r\n this.selectedWords = [];\r\n this.timeLeft = 60;\r\n this.timer = null;\r\n this.currentSentenceIndex = 0;\r\n\r\n this.initializeElements();\r\n this.setupEventListeners();\r\n this.startNewGame();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n wordContainer: document.getElementById('word-container'),\r\n sentenceArea: document.getElementById('sentence-area'),\r\n timeDisplay: document.getElementById('time'),\r\n progressFill: document.getElementById('progress-fill'),\r\n feedback: document.getElementById('feedback'),\r\n celebration: document.getElementById('celebration'),\r\n checkBtn: document.getElementById('check-btn'),\r\n clearBtn: document.getElementById('clear-btn'),\r\n hintBtn: document.getElementById('hint-btn'),\r\n nextBtn: document.getElementById('next-btn'),\r\n instructions: document.getElementById('instructions')\r\n };\r\n }\r\n\r\n setupEventListeners() {\r\n this.elements.checkBtn.addEventListener('click', () => this.checkSentence());\r\n this.elements.clearBtn.addEventListener('click', () => this.clearSentence());\r\n this.elements.hintBtn.addEventListener('click', () => this.showHint());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextSentence());\r\n }\r\n\r\n startNewGame() {\r\n this.loadSentence();\r\n this.startTimer();\r\n this.updateProgress();\r\n }\r\n\r\n loadSentence() {\r\n this.currentSentence = this.sentences[this.currentSentenceIndex % this.sentences.length];\r\n this.currentWords = this.currentSentence.split(\" \");\r\n this.selectedWords = [];\r\n \r\n this.displayWords();\r\n this.clearSentence();\r\n this.updateInstructions();\r\n }\r\n\r\n displayWords() {\r\n \/\/ \u062e\u0644\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0639\u0634\u0648\u0627\u0626\u064a\u0627\u064b\r\n const shuffledWords = [...this.currentWords].sort(() => Math.random() - 0.5);\r\n \r\n this.elements.wordContainer.innerHTML = '';\r\n shuffledWords.forEach((word, index) => {\r\n const wordElement = document.createElement('div');\r\n wordElement.className = 'word';\r\n wordElement.textContent = word;\r\n wordElement.dataset.originalWord = word;\r\n wordElement.addEventListener('click', () => this.selectWord(wordElement));\r\n this.elements.wordContainer.appendChild(wordElement);\r\n });\r\n }\r\n\r\n selectWord(wordElement) {\r\n if (wordElement.classList.contains('used')) return;\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0643\u0644\u0645\u0629 \u0644\u0644\u062c\u0645\u0644\u0629\r\n this.selectedWords.push(wordElement.dataset.originalWord);\r\n wordElement.classList.add('used');\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0643\u0644\u0645\u0629 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u0645\u0644\u0629\r\n const sentenceWord = document.createElement('div');\r\n sentenceWord.className = 'sentence-word';\r\n sentenceWord.textContent = wordElement.dataset.originalWord;\r\n sentenceWord.addEventListener('click', () => this.removeWordFromSentence(sentenceWord, wordElement));\r\n\r\n this.elements.sentenceArea.appendChild(sentenceWord);\r\n this.updateSentenceArea();\r\n this.elements.checkBtn.disabled = this.selectedWords.length === 0;\r\n }\r\n\r\n removeWordFromSentence(sentenceWord, originalWordElement) {\r\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0643\u0644\u0645\u0629 \u0645\u0646 \u0627\u0644\u062c\u0645\u0644\u0629\r\n const wordText = sentenceWord.textContent;\r\n const index = this.selectedWords.indexOf(wordText);\r\n if (index > -1) {\r\n this.selectedWords.splice(index, 1);\r\n }\r\n\r\n sentenceWord.remove();\r\n originalWordElement.classList.remove('used');\r\n this.updateSentenceArea();\r\n this.elements.checkBtn.disabled = this.selectedWords.length === 0;\r\n }\r\n\r\n updateSentenceArea() {\r\n const isEmpty = this.selectedWords.length === 0;\r\n this.elements.sentenceArea.classList.toggle('empty', isEmpty);\r\n \r\n const placeholder = this.elements.sentenceArea.querySelector('.placeholder-text');\r\n if (placeholder) {\r\n placeholder.style.display = isEmpty ? 'block' : 'none';\r\n }\r\n }\r\n\r\n clearSentence() {\r\n this.selectedWords = [];\r\n this.elements.sentenceArea.innerHTML = '<div class=\"placeholder-text\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u062c\u0645\u0644\u0629 \u0647\u0646\u0627<\/div>';\r\n this.elements.sentenceArea.classList.add('empty');\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0641\u0639\u064a\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\r\n const words = this.elements.wordContainer.querySelectorAll('.word');\r\n words.forEach(word => word.classList.remove('used'));\r\n\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n }\r\n\r\n checkSentence() {\r\n const userSentence = this.selectedWords.join(\" \");\r\n const isCorrect = userSentence === this.currentSentence;\r\n\r\n this.showFeedback(isCorrect, userSentence);\r\n\r\n if (isCorrect) {\r\n this.handleCorrectAnswer();\r\n } else {\r\n this.handleIncorrectAnswer();\r\n }\r\n }\r\n\r\n showFeedback(isCorrect, userSentence) {\r\n const feedback = this.elements.feedback;\r\n feedback.style.display = 'block';\r\n\r\n if (isCorrect) {\r\n feedback.className = 'feedback correct';\r\n feedback.innerHTML = `\r\n <div>\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! \u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629<\/div>\r\n <div>\u0627\u0644\u062c\u0645\u0644\u0629: \"${this.currentSentence}\"<\/div>\r\n `;\r\n this.showCelebration();\r\n } else {\r\n feedback.className = 'feedback incorrect';\r\n feedback.innerHTML = `\r\n <div>\u274c \u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629<\/div>\r\n <div>\u062c\u0645\u0644\u062a\u0643: \"${userSentence}\"<\/div>\r\n <div>\u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: \"${this.currentSentence}\"<\/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 handleCorrectAnswer() {\r\n this.elements.checkBtn.style.display = 'none';\r\n this.elements.nextBtn.style.display = 'inline-block';\r\n \r\n \/\/ \u062a\u0639\u0637\u064a\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\r\n const words = this.elements.wordContainer.querySelectorAll('.word');\r\n words.forEach(word => word.style.pointerEvents = 'none');\r\n }\r\n\r\n handleIncorrectAnswer() {\r\n \/\/ \u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 \u0623\u064a \u062a\u0623\u062b\u064a\u0631 \u0644\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u062e\u0627\u0637\u0626\u0629 \u0647\u0646\u0627\r\n }\r\n\r\n showHint() {\r\n if (this.selectedWords.length < this.currentWords.length) {\r\n const nextWordIndex = this.selectedWords.length;\r\n const nextWord = this.currentWords[nextWordIndex];\r\n \r\n \/\/ \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0643\u0644\u0645\u0629 \u0648\u062a\u0645\u064a\u064a\u0632\u0647\u0627\r\n const words = this.elements.wordContainer.querySelectorAll('.word');\r\n words.forEach(word => {\r\n if (word.dataset.originalWord === nextWord && !word.classList.contains('used')) {\r\n word.style.border = '3px solid #f39c12';\r\n word.style.animation = 'bounce 1s infinite';\r\n \r\n setTimeout(() => {\r\n word.style.border = '2px solid transparent';\r\n word.style.animation = 'none';\r\n }, 3000);\r\n \r\n return;\r\n }\r\n });\r\n }\r\n }\r\n\r\n nextSentence() {\r\n this.currentSentenceIndex++;\r\n \r\n this.elements.checkBtn.style.display = 'inline-block';\r\n this.elements.nextBtn.style.display = 'none';\r\n this.elements.checkBtn.disabled = true;\r\n\r\n this.hideFeedback();\r\n this.loadSentence();\r\n this.resetTimer();\r\n }\r\n\r\n startTimer() {\r\n this.timer = setInterval(() => {\r\n this.timeLeft--;\r\n this.updateTimer();\r\n\r\n if (this.timeLeft <= 0) {\r\n this.handleTimeUp();\r\n }\r\n }, 1000);\r\n }\r\n\r\n resetTimer() {\r\n clearInterval(this.timer);\r\n this.timeLeft = 60;\r\n this.startTimer();\r\n }\r\n\r\n updateTimer() {\r\n this.elements.timeDisplay.textContent = this.timeLeft;\r\n \r\n \/\/ \u062a\u063a\u064a\u064a\u0631 \u0644\u0648\u0646 \u0627\u0644\u0645\u0624\u0642\u062a \u0639\u0646\u062f \u0627\u0642\u062a\u0631\u0627\u0628 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0648\u0642\u062a\r\n const timerElement = this.elements.timeDisplay.parentElement;\r\n if (this.timeLeft <= 10) {\r\n timerElement.style.color = '#e74c3c';\r\n timerElement.style.animation = 'bounce 1s infinite';\r\n } else if (this.timeLeft <= 20) {\r\n timerElement.style.color = '#f39c12';\r\n } else {\r\n timerElement.style.color = '#e74c3c';\r\n timerElement.style.animation = 'none';\r\n }\r\n }\r\n\r\n handleTimeUp() {\r\n clearInterval(this.timer);\r\n this.showFeedback(false, this.selectedWords.join(\" \"));\r\n \r\n \/\/ \u062a\u0639\u0637\u064a\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\r\n const words = this.elements.wordContainer.querySelectorAll('.word');\r\n words.forEach(word => word.style.pointerEvents = 'none');\r\n \r\n this.elements.checkBtn.disabled = true;\r\n setTimeout(() => {\r\n this.nextSentence();\r\n }, 3000);\r\n }\r\n\r\n\r\n\r\n updateProgress() {\r\n const progress = ((this.currentSentenceIndex % 3) \/ 3) * 100;\r\n this.elements.progressFill.style.width = `${progress}%`;\r\n }\r\n\r\n updateInstructions() {\r\n this.elements.instructions.innerHTML = `\r\n <strong>\u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 ${this.currentWords.length} \u0643\u0644\u0645\u0627\u062a<\/strong><br>\r\n \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0628\u0627\u0644\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0635\u062d\u064a\u062d \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u062c\u0645\u0644\u0629\r\n `;\r\n }\r\n\r\n showCelebration() {\r\n this.elements.celebration.style.display = 'block';\r\n setTimeout(() => {\r\n this.elements.celebration.style.display = 'none';\r\n }, 1500);\r\n }\r\n }\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u0644\u0639\u0628\u0629 \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n document.addEventListener('DOMContentLoaded', () => {\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>\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \ud83c\udfaf \u0644\u0639\u0628\u0629 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u23f0 \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062a\u0628\u0642\u064a: 60 \u062b\u0627\u0646\u064a\u0629 \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0628\u0627\u0644\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0635\u062d\u064a\u062d \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u062c\u0645\u0644\u0629 \u0647\u0646\u0627 \ud83c\udf89 \u2705 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062c\u0645\u0644\u0629 \ud83d\udd04 \u0645\u0633\u062d \u0627\u0644\u062c\u0645\u0644\u0629 \ud83d\udca1 \u062a\u0644\u0645\u064a\u062d \u23ed\ufe0f \u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629<\/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-15150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15150","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=15150"}],"version-history":[{"count":5,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15150\/revisions"}],"predecessor-version":[{"id":15155,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15150\/revisions\/15155"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}