Arabic blank completion game<\/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 .fill-blanks-widget {\r\n font-family: 'Arial', sans-serif;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n padding: 30px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n direction: rtl;\r\n }\r\n\r\n .fill-blanks-widget * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .game-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n background: linear-gradient(135deg, #8220A5, #b794c7);\r\n color: white;\r\n padding: 20px;\r\n border-radius: 16px;\r\n }\r\n\r\n .game-title {\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .game-subtitle {\r\n font-size: 16px;\r\n opacity: 0.9;\r\n }\r\n\r\n .progress-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n\r\n .question-counter {\r\n background: #f8f9fa;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n color: #8220A5;\r\n font-weight: bold;\r\n border: 2px solid #e9ecef;\r\n }\r\n\r\n .timer {\r\n background: #fff5f5;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n color: #dc3545;\r\n font-weight: bold;\r\n border: 2px solid #f5c6cb;\r\n }\r\n\r\n .timer.warning {\r\n background: #fff3cd;\r\n color: #856404;\r\n border-color: #ffeaa7;\r\n animation: pulse 1s infinite;\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 .sentence-container {\r\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\r\n border-radius: 16px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n border: 3px solid #8220A5;\r\n }\r\n\r\n .sentence-text {\r\n font-size: 24px;\r\n line-height: 1.8;\r\n color: #2c3e50;\r\n font-weight: 500;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .blank-space {\r\n display: inline-block;\r\n min-width: 120px;\r\n height: 50px;\r\n background: white;\r\n border: 3px dashed #8220A5;\r\n border-radius: 12px;\r\n margin: 0 10px;\r\n vertical-align: middle;\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .blank-space:hover {\r\n background: #f8f9fa;\r\n border-color: #6b1a85;\r\n }\r\n\r\n .blank-space.filled {\r\n background: #d4edda;\r\n border: 3px solid #28a745;\r\n border-style: solid;\r\n }\r\n\r\n .blank-space.correct {\r\n background: #d4edda;\r\n border-color: #28a745;\r\n animation: correctAnswer 0.6s ease-in-out;\r\n }\r\n\r\n .blank-space.incorrect {\r\n background: #f8d7da;\r\n border-color: #dc3545;\r\n animation: shake 0.6s ease-in-out;\r\n }\r\n\r\n @keyframes correctAnswer {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-5px); }\r\n 75% { transform: translateX(5px); }\r\n }\r\n\r\n .selected-word {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n }\r\n\r\n .word-options {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 15px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .word-option {\r\n background: #8220A5 !important;\r\n color: white !important;\r\n padding: 15px 25px !important;\r\n border-radius: 25px !important;\r\n cursor: pointer !important;\r\n font-size: 18px !important;\r\n font-weight: bold;\r\n border: none;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3) !important;\r\n user-select: none;\r\n }\r\n\r\n .word-option:hover {\r\n background: #6b1a85 !important;\r\n transform: translateY(-3px) !important;\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4) !important;\r\n }\r\n\r\n .word-option.selected {\r\n background: #28a745 !important;\r\n transform: scale(0.95) !important;\r\n }\r\n\r\n .word-option.used {\r\n background: #6c757d !important;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n .word-option.used:hover {\r\n transform: none;\r\n background: #6c757d;\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-bottom: 25px;\r\n }\r\n\r\n .game-btn {\r\n background: #8220A5 !important;\r\n color: white !important;\r\n border: none !important; \r\n padding: 12px 30px !important;\r\n font-size: 16px !important;\r\n font-weight: bold !important;\r\n border-radius: 25px !important;\r\n cursor: pointer;\r\n transition: all 0.3s ease !important;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3) !important;\r\n }\r\n\r\n .game-btn:hover {\r\n background: #6b1a85 !important;\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4);\r\n }\r\n\r\n .game-btn:disabled {\r\n background: #6c757d !important;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .game-btn.secondary {\r\n background: #6c757d ;\r\n }\r\n\r\n .game-btn.secondary:hover {\r\n background: #545b62;\r\n }\r\n\r\n .game-btn.success {\r\n background: #28a745;\r\n }\r\n\r\n .game-btn.success:hover {\r\n background: #218838;\r\n }\r\n\r\n .feedback {\r\n text-align: center;\r\n padding: 20px;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n font-size: 18px;\r\n font-weight: bold;\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 .feedback.timeout {\r\n background: #fff3cd;\r\n color: #856404;\r\n border: 2px solid #ffeaa7;\r\n }\r\n\r\n .celebration {\r\n text-align: center;\r\n font-size: 48px;\r\n margin: 20px 0;\r\n display: none;\r\n animation: bounce 1s 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 .instructions {\r\n background: #e8f4fd;\r\n padding: 15px;\r\n border-radius: 12px;\r\n margin-bottom: 25px;\r\n text-align: center;\r\n color: #2c3e50;\r\n font-size: 16px;\r\n }\r\n\r\n .hint-section {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hint-btn {\r\n background: #ffc107 !important;\r\n color: #212529 !important;\r\n }\r\n\r\n .hint-btn:hover {\r\n background: #e0a800 !important;\r\n }\r\n\r\n .hint-text {\r\n background: #fff3cd !important;\r\n color: #856404 !important;\r\n padding: 10px 15px;\r\n border-radius: 8px;\r\n margin-top: 10px;\r\n font-style: italic;\r\n display: none;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .fill-blanks-widget {\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 .sentence-text {\r\n font-size: 20px;\r\n }\r\n\r\n .blank-space {\r\n min-width: 100px;\r\n height: 45px;\r\n }\r\n\r\n .word-option {\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n }\r\n\r\n .progress-section {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .game-btn {\r\n width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"fill-blanks-widget\" id=\"fillBlanksGame\">\r\n \r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">\ud83c\udfaf Arabic blank completion game<\/h1>\r\n <p class=\"game-subtitle\">Choose the correct word to complete the sentence.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"progress-section\">\r\n <div class=\"question-counter\">\r\n The question <span id=\"currentQuestion\">1<\/span> from <span id=\"totalQuestions\">10<\/span>\r\n <\/div>\r\n <div class=\"timer\" id=\"timer\">\r\n \u23f0 Time remaining: <span id=\"timeLeft\">30<\/span> second\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"instructions\">\r\n Read the sentence and choose the appropriate word to fill in the blank.\r\n <\/div>\r\n\r\n \r\n <div class=\"sentence-container\">\r\n <div class=\"sentence-text\" id=\"sentenceText\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"word-options\" id=\"wordOptions\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"hint-section\">\r\n <button class=\"game-btn hint-btn\" id=\"hintBtn\">\ud83d\udca1 Hint<\/button>\r\n <div class=\"hint-text\" id=\"hintText\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"feedback\" id=\"feedback\"><\/div>\r\n \r\n \r\n <div class=\"celebration\" id=\"celebration\">\ud83c\udf89<\/div>\r\n\r\n \r\n <div class=\"controls\">\r\n <button class=\"game-btn\" id=\"checkBtn\" disabled>\u2705 Check the answer<\/button>\r\n <button class=\"game-btn secondary\" id=\"clearBtn\">\ud83d\udd04 Clear answer<\/button>\r\n <button class=\"game-btn success\" id=\"nextBtn\" style=\"display: none;\">\u23ed\ufe0f Next question<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n class ArabicFillBlanksGame {\r\n constructor() {\r\n this.questions = [\r\n {\r\n sentence: \"_____ \u064a\u0644\u0639\u0628 \u0641\u064a \u0627\u0644\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u062c\u0645\u064a\u0644\u0629\",\r\n options: [\"\u0623\u062d\u0645\u062f\", \"\u0643\u062a\u0627\u0628\", \"\u0633\u064a\u0627\u0631\u0629\", \"\u062c\u0628\u0644\"],\r\n correct: \"\u0623\u062d\u0645\u062f\",\r\n hint: \"\u0645\u0646 \u064a\u0633\u062a\u0637\u064a\u0639 \u0623\u0646 \u064a\u0644\u0639\u0628\u061f \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0637\u064a\u0648\u0631 \u062a\u0637\u064a\u0631 \u0641\u064a _____ \u0627\u0644\u0632\u0631\u0642\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0628\u062d\u0631\", \"\u0627\u0644\u0633\u0645\u0627\u0621\", \"\u0627\u0644\u0623\u0631\u0636\", \"\u0627\u0644\u063a\u0627\u0628\u0629\"],\r\n correct: \"\u0627\u0644\u0633\u0645\u0627\u0621\",\r\n hint: \"\u0623\u064a\u0646 \u0646\u0631\u0649 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0632\u0631\u0642 \u0641\u0648\u0642 \u0631\u0624\u0648\u0633\u0646\u0627\u061f\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0636\u064a\u0621 \u0627\u0644\u0644\u064a\u0644 \u0627\u0644\u0645\u0638\u0644\u0645\",\r\n options: [\"\u0627\u0644\u0634\u0645\u0633\", \"\u0627\u0644\u0646\u062c\u0648\u0645\", \"\u0627\u0644\u0623\u0634\u062c\u0627\u0631\", \"\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\"],\r\n correct: \"\u0627\u0644\u0646\u062c\u0648\u0645\",\r\n hint: \"\u0645\u0627 \u0627\u0644\u0630\u064a \u0646\u0631\u0627\u0647 \u0641\u064a \u0627\u0644\u0633\u0645\u0627\u0621 \u0644\u064a\u0644\u0627\u064b\u061f\"\r\n },\r\n {\r\n sentence: \"\u064a\u0634\u0631\u0628 \u0627\u0644\u0637\u0641\u0644 _____ \u0627\u0644\u0637\u0627\u0632\u062c \u0643\u0644 \u0635\u0628\u0627\u062d\",\r\n options: [\"\u0627\u0644\u062d\u0644\u064a\u0628\", \"\u0627\u0644\u062d\u062c\u0631\", \"\u0627\u0644\u0648\u0631\u0642\", \"\u0627\u0644\u062d\u062f\u064a\u062f\"],\r\n correct: \"\u0627\u0644\u062d\u0644\u064a\u0628\",\r\n hint: \"\u0645\u0634\u0631\u0648\u0628 \u0623\u0628\u064a\u0636 \u0645\u0641\u064a\u062f \u0644\u0644\u0623\u0637\u0641\u0627\u0644\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0633\u0628\u062d \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f\",\r\n options: [\"\u0627\u0644\u0637\u0627\u0626\u0631\u0629\", \"\u0627\u0644\u0633\u0645\u0643\u0629\", \"\u0627\u0644\u0634\u062c\u0631\u0629\", \"\u0627\u0644\u0645\u0646\u0632\u0644\"],\r\n correct: \"\u0627\u0644\u0633\u0645\u0643\u0629\",\r\n hint: \"\u062d\u064a\u0648\u0627\u0646 \u064a\u0639\u064a\u0634 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0645\u0639\u0644\u0645 \u064a\u0643\u062a\u0628 \u0639\u0644\u0649 _____ \u0628\u0627\u0644\u0637\u0628\u0627\u0634\u064a\u0631\",\r\n options: [\"\u0627\u0644\u0633\u0628\u0648\u0631\u0629\", \"\u0627\u0644\u0637\u0627\u0648\u0644\u0629\", \"\u0627\u0644\u062d\u0627\u0626\u0637\", \"\u0627\u0644\u0643\u062a\u0627\u0628\"],\r\n correct: \"\u0627\u0644\u0633\u0628\u0648\u0631\u0629\",\r\n hint: \"\u0633\u0637\u062d \u0623\u0633\u0648\u062f \u0623\u0648 \u0623\u062e\u0636\u0631 \u0641\u064a \u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u062f\u0631\u0627\u0633\u064a\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0646\u0628\u062a \u0645\u0646 \u0627\u0644\u0623\u0631\u0636 \u0648\u062a\u062d\u062a\u0627\u062c \u0644\u0644\u0645\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0633\u064a\u0627\u0631\u0629\", \"\u0627\u0644\u0646\u0628\u0627\u062a\u0627\u062a\", \"\u0627\u0644\u062d\u0627\u0633\u0648\u0628\", \"\u0627\u0644\u0637\u0639\u0627\u0645\"],\r\n correct: \"\u0627\u0644\u0646\u0628\u0627\u062a\u0627\u062a\",\r\n hint: \"\u0643\u0627\u0626\u0646\u0627\u062a \u062d\u064a\u0629 \u062e\u0636\u0631\u0627\u0621 \u062a\u062d\u062a\u0627\u062c \u0644\u0644\u0634\u0645\u0633 \u0648\u0627\u0644\u0645\u0627\u0621\"\r\n },\r\n {\r\n sentence: \"\u0646\u0633\u062a\u062e\u062f\u0645 _____ \u0644\u0646\u0631\u0649 \u0641\u064a \u0627\u0644\u0638\u0644\u0627\u0645\",\r\n options: [\"\u0627\u0644\u0645\u0635\u0628\u0627\u062d\", \"\u0627\u0644\u0643\u0631\u0633\u064a\", \"\u0627\u0644\u0645\u0644\u0639\u0642\u0629\", \"\u0627\u0644\u0642\u0644\u0645\"],\r\n correct: \"\u0627\u0644\u0645\u0635\u0628\u0627\u062d\",\r\n hint: \"\u062c\u0647\u0627\u0632 \u064a\u0646\u062a\u062c \u0627\u0644\u0636\u0648\u0621\"\r\n },\r\n {\r\n sentence: \"_____ \u064a\u0633\u0642\u0637 \u0645\u0646 \u0627\u0644\u0633\u0645\u0627\u0621 \u0641\u064a \u0627\u0644\u0634\u062a\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0645\u0637\u0631\", \"\u0627\u0644\u0631\u0645\u0644\", \"\u0627\u0644\u062d\u062c\u0627\u0631\u0629\", \"\u0627\u0644\u0623\u0648\u0631\u0627\u0642\"],\r\n correct: \"\u0627\u0644\u0645\u0637\u0631\",\r\n hint: \"\u0642\u0637\u0631\u0627\u062a \u0645\u0627\u0621 \u062a\u0646\u0632\u0644 \u0645\u0646 \u0627\u0644\u0633\u062d\u0628\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u064a\u0630\u0647\u0628\u0648\u0646 \u0625\u0644\u0649 _____ \u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0639\u0644\u0648\u0645\",\r\n options: [\"\u0627\u0644\u0645\u062f\u0631\u0633\u0629\", \"\u0627\u0644\u0633\u0648\u0642\", \"\u0627\u0644\u0645\u0637\u0628\u062e\", \"\u0627\u0644\u062d\u0645\u0627\u0645\"],\r\n correct: \"\u0627\u0644\u0645\u062f\u0631\u0633\u0629\",\r\n hint: \"\u0645\u0643\u0627\u0646 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0639\u0644\u0645\"\r\n }\r\n ];\r\n\r\n this.currentQuestionIndex = 0;\r\n this.selectedWord = null;\r\n this.timeLeft = 30;\r\n this.timer = null;\r\n this.gameStarted = false;\r\n\r\n this.initializeElements();\r\n this.setupEventListeners();\r\n this.loadQuestion();\r\n this.startTimer();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n sentenceText: document.getElementById('sentenceText'),\r\n wordOptions: document.getElementById('wordOptions'),\r\n currentQuestion: document.getElementById('currentQuestion'),\r\n totalQuestions: document.getElementById('totalQuestions'),\r\n timeLeft: document.getElementById('timeLeft'),\r\n timer: document.getElementById('timer'),\r\n feedback: document.getElementById('feedback'),\r\n celebration: document.getElementById('celebration'),\r\n checkBtn: document.getElementById('checkBtn'),\r\n clearBtn: document.getElementById('clearBtn'),\r\n nextBtn: document.getElementById('nextBtn'),\r\n hintBtn: document.getElementById('hintBtn'),\r\n hintText: document.getElementById('hintText')\r\n };\r\n\r\n this.elements.totalQuestions.textContent = this.questions.length;\r\n }\r\n\r\n setupEventListeners() {\r\n this.elements.checkBtn.addEventListener('click', () => this.checkAnswer());\r\n this.elements.clearBtn.addEventListener('click', () => this.clearAnswer());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextQuestion());\r\n this.elements.hintBtn.addEventListener('click', () => this.showHint());\r\n }\r\n\r\n loadQuestion() {\r\n const question = this.questions[this.currentQuestionIndex];\r\n \r\n \/\/ Update question counter\r\n this.elements.currentQuestion.textContent = this.currentQuestionIndex + 1;\r\n\r\n \/\/ Create sentence with blank space\r\n this.createSentenceWithBlank(question.sentence);\r\n\r\n \/\/ Create word options\r\n this.createWordOptions(question.options);\r\n\r\n \/\/ Reset states\r\n this.selectedWord = null;\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.hideHint();\r\n }\r\n\r\n createSentenceWithBlank(sentence) {\r\n const parts = sentence.split('_____');\r\n this.elements.sentenceText.innerHTML = '';\r\n\r\n \/\/ Add first part\r\n if (parts[0]) {\r\n const span1 = document.createElement('span');\r\n span1.textContent = parts[0];\r\n this.elements.sentenceText.appendChild(span1);\r\n }\r\n\r\n \/\/ Add blank space\r\n const blankSpace = document.createElement('div');\r\n blankSpace.className = 'blank-space';\r\n blankSpace.id = 'blankSpace';\r\n this.elements.sentenceText.appendChild(blankSpace);\r\n\r\n \/\/ Add second part\r\n if (parts[1]) {\r\n const span2 = document.createElement('span');\r\n span2.textContent = parts[1];\r\n this.elements.sentenceText.appendChild(span2);\r\n }\r\n }\r\n\r\n createWordOptions(options) {\r\n this.elements.wordOptions.innerHTML = '';\r\n \r\n \/\/ Shuffle options for variety\r\n const shuffledOptions = [...options].sort(() => Math.random() - 0.5);\r\n\r\n shuffledOptions.forEach(option => {\r\n const button = document.createElement('button');\r\n button.className = 'word-option';\r\n button.textContent = option;\r\n button.addEventListener('click', () => this.selectWord(button, option));\r\n this.elements.wordOptions.appendChild(button);\r\n });\r\n }\r\n\r\n selectWord(buttonElement, word) {\r\n if (buttonElement.classList.contains('used')) return;\r\n\r\n \/\/ Clear previous selection\r\n this.clearSelection();\r\n\r\n \/\/ Set new selection\r\n this.selectedWord = word;\r\n buttonElement.classList.add('selected');\r\n\r\n \/\/ Fill blank space\r\n const blankSpace = document.getElementById('blankSpace');\r\n blankSpace.classList.add('filled');\r\n blankSpace.innerHTML = `<span class=\"selected-word\">${word}<\/span>`;\r\n\r\n \/\/ Enable check button\r\n this.elements.checkBtn.disabled = false;\r\n }\r\n\r\n clearSelection() {\r\n \/\/ Clear word options\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.remove('selected');\r\n });\r\n\r\n \/\/ Clear blank space\r\n const blankSpace = document.getElementById('blankSpace');\r\n blankSpace.classList.remove('filled', 'correct', 'incorrect');\r\n blankSpace.innerHTML = '';\r\n }\r\n\r\n clearAnswer() {\r\n this.clearSelection();\r\n this.selectedWord = null;\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.hideHint();\r\n }\r\n\r\n checkAnswer() {\r\n if (!this.selectedWord) return;\r\n\r\n const question = this.questions[this.currentQuestionIndex];\r\n const isCorrect = this.selectedWord === question.correct;\r\n const blankSpace = document.getElementById('blankSpace');\r\n\r\n if (isCorrect) {\r\n \/\/ Correct answer\r\n blankSpace.classList.add('correct');\r\n this.showFeedback('correct', `\ud83c\udf89 \u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629! \"${question.correct}\" \u0647\u064a \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629`);\r\n this.showCelebration();\r\n this.handleCorrectAnswer();\r\n } else {\r\n \/\/ Incorrect answer\r\n blankSpace.classList.add('incorrect');\r\n this.showFeedback('incorrect', `\u274c \u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a \"${question.correct}\"`);\r\n this.handleIncorrectAnswer();\r\n }\r\n\r\n \/\/ Disable word options\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.add('used');\r\n });\r\n\r\n this.pauseTimer();\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\r\n handleIncorrectAnswer() {\r\n \/\/ Allow retry or move to next question after a delay\r\n setTimeout(() => {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.elements.checkBtn.style.display = 'none';\r\n this.elements.nextBtn.style.display = 'inline-block';\r\n } else {\r\n this.endGame();\r\n }\r\n }, 2000);\r\n }\r\n\r\n nextQuestion() {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.currentQuestionIndex++;\r\n this.loadQuestion();\r\n this.resetTimer();\r\n \r\n \/\/ Reset buttons\r\n this.elements.checkBtn.style.display = 'inline-block';\r\n this.elements.nextBtn.style.display = 'none';\r\n } else {\r\n this.endGame();\r\n }\r\n }\r\n\r\n showHint() {\r\n const question = this.questions[this.currentQuestionIndex];\r\n this.elements.hintText.textContent = question.hint;\r\n this.elements.hintText.style.display = 'block';\r\n this.elements.hintBtn.disabled = true;\r\n }\r\n\r\n hideHint() {\r\n this.elements.hintText.style.display = 'none';\r\n this.elements.hintBtn.disabled = false;\r\n }\r\n\r\n showFeedback(type, message) {\r\n this.elements.feedback.className = `feedback ${type}`;\r\n this.elements.feedback.textContent = message;\r\n this.elements.feedback.style.display = 'block';\r\n }\r\n\r\n hideFeedback() {\r\n this.elements.feedback.style.display = 'none';\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 startTimer() {\r\n this.timer = setInterval(() => {\r\n this.timeLeft--;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n\r\n \/\/ Visual warning when time is running out\r\n if (this.timeLeft <= 10) {\r\n this.elements.timer.classList.add('warning');\r\n }\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 this.pauseTimer();\r\n this.timeLeft = 30;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n this.elements.timer.classList.remove('warning');\r\n this.startTimer();\r\n }\r\n\r\n pauseTimer() {\r\n clearInterval(this.timer);\r\n }\r\n\r\n handleTimeUp() {\r\n this.pauseTimer();\r\n const question = this.questions[this.currentQuestionIndex];\r\n this.showFeedback('timeout', `\u23f0 \u0627\u0646\u062a\u0647\u0649 \u0627\u0644\u0648\u0642\u062a! \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a \"${question.correct}\"`);\r\n \r\n \/\/ Disable all interactions\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.add('used');\r\n });\r\n\r\n this.elements.checkBtn.disabled = true;\r\n\r\n \/\/ Auto move to next question\r\n setTimeout(() => {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.nextQuestion();\r\n } else {\r\n this.endGame();\r\n }\r\n }, 3000);\r\n }\r\n\r\n endGame() {\r\n this.pauseTimer();\r\n this.showFeedback('correct', '\ud83c\udf8a \u062a\u0647\u0627\u0646\u064a\u0646\u0627! \u0644\u0642\u062f \u0623\u0646\u0647\u064a\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0633\u0626\u0644\u0629');\r\n this.elements.checkBtn.style.display = 'none';\r\n this.elements.nextBtn.style.display = 'none';\r\n \r\n \/\/ Show restart option\r\n setTimeout(() => {\r\n if (confirm('\u0647\u0644 \u062a\u0631\u064a\u062f \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0644\u0639\u0628 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629\u061f')) {\r\n location.reload();\r\n }\r\n }, 2000);\r\n }\r\n }\r\n\r\n \/\/ Start the game when page loads\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new ArabicFillBlanksGame();\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>\u0644\u0639\u0628\u0629 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0641\u0631\u0627\u063a\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \ud83c\udfaf \u0644\u0639\u0628\u0629 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0641\u0631\u0627\u063a\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u062e\u062a\u0631 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0644\u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u0633\u0624\u0627\u0644 1 \u0645\u0646 10 \u23f0 \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062a\u0628\u0642\u064a: 30 \u062b\u0627\u0646\u064a\u0629 \u0627\u0642\u0631\u0623 \u0627\u0644\u062c\u0645\u0644\u0629 \u0648\u0627\u062e\u062a\u0631 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0644\u0621 \u0627\u0644\u0641\u0631\u0627\u063a \ud83d\udca1 \u062a\u0644\u0645\u064a\u062d \ud83c\udf89 \u2705 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \ud83d\udd04 \u0645\u0633\u062d \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u23ed\ufe0f \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a<\/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-15176","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176","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=15176"}],"version-history":[{"count":10,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176\/revisions"}],"predecessor-version":[{"id":15189,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176\/revisions\/15189"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15176"}],"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 blank completion game<\/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 .fill-blanks-widget {\r\n font-family: 'Arial', sans-serif;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n padding: 30px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n direction: rtl;\r\n }\r\n\r\n .fill-blanks-widget * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .game-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n background: linear-gradient(135deg, #8220A5, #b794c7);\r\n color: white;\r\n padding: 20px;\r\n border-radius: 16px;\r\n }\r\n\r\n .game-title {\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .game-subtitle {\r\n font-size: 16px;\r\n opacity: 0.9;\r\n }\r\n\r\n .progress-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n\r\n .question-counter {\r\n background: #f8f9fa;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n color: #8220A5;\r\n font-weight: bold;\r\n border: 2px solid #e9ecef;\r\n }\r\n\r\n .timer {\r\n background: #fff5f5;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n color: #dc3545;\r\n font-weight: bold;\r\n border: 2px solid #f5c6cb;\r\n }\r\n\r\n .timer.warning {\r\n background: #fff3cd;\r\n color: #856404;\r\n border-color: #ffeaa7;\r\n animation: pulse 1s infinite;\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 .sentence-container {\r\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\r\n border-radius: 16px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n border: 3px solid #8220A5;\r\n }\r\n\r\n .sentence-text {\r\n font-size: 24px;\r\n line-height: 1.8;\r\n color: #2c3e50;\r\n font-weight: 500;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .blank-space {\r\n display: inline-block;\r\n min-width: 120px;\r\n height: 50px;\r\n background: white;\r\n border: 3px dashed #8220A5;\r\n border-radius: 12px;\r\n margin: 0 10px;\r\n vertical-align: middle;\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .blank-space:hover {\r\n background: #f8f9fa;\r\n border-color: #6b1a85;\r\n }\r\n\r\n .blank-space.filled {\r\n background: #d4edda;\r\n border: 3px solid #28a745;\r\n border-style: solid;\r\n }\r\n\r\n .blank-space.correct {\r\n background: #d4edda;\r\n border-color: #28a745;\r\n animation: correctAnswer 0.6s ease-in-out;\r\n }\r\n\r\n .blank-space.incorrect {\r\n background: #f8d7da;\r\n border-color: #dc3545;\r\n animation: shake 0.6s ease-in-out;\r\n }\r\n\r\n @keyframes correctAnswer {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-5px); }\r\n 75% { transform: translateX(5px); }\r\n }\r\n\r\n .selected-word {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n }\r\n\r\n .word-options {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 15px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .word-option {\r\n background: #8220A5 !important;\r\n color: white !important;\r\n padding: 15px 25px !important;\r\n border-radius: 25px !important;\r\n cursor: pointer !important;\r\n font-size: 18px !important;\r\n font-weight: bold;\r\n border: none;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3) !important;\r\n user-select: none;\r\n }\r\n\r\n .word-option:hover {\r\n background: #6b1a85 !important;\r\n transform: translateY(-3px) !important;\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4) !important;\r\n }\r\n\r\n .word-option.selected {\r\n background: #28a745 !important;\r\n transform: scale(0.95) !important;\r\n }\r\n\r\n .word-option.used {\r\n background: #6c757d !important;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n .word-option.used:hover {\r\n transform: none;\r\n background: #6c757d;\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-bottom: 25px;\r\n }\r\n\r\n .game-btn {\r\n background: #8220A5 !important;\r\n color: white !important;\r\n border: none !important; \r\n padding: 12px 30px !important;\r\n font-size: 16px !important;\r\n font-weight: bold !important;\r\n border-radius: 25px !important;\r\n cursor: pointer;\r\n transition: all 0.3s ease !important;\r\n box-shadow: 0 4px 8px rgba(130, 32, 165, 0.3) !important;\r\n }\r\n\r\n .game-btn:hover {\r\n background: #6b1a85 !important;\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 6px 12px rgba(130, 32, 165, 0.4);\r\n }\r\n\r\n .game-btn:disabled {\r\n background: #6c757d !important;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .game-btn.secondary {\r\n background: #6c757d ;\r\n }\r\n\r\n .game-btn.secondary:hover {\r\n background: #545b62;\r\n }\r\n\r\n .game-btn.success {\r\n background: #28a745;\r\n }\r\n\r\n .game-btn.success:hover {\r\n background: #218838;\r\n }\r\n\r\n .feedback {\r\n text-align: center;\r\n padding: 20px;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n font-size: 18px;\r\n font-weight: bold;\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 .feedback.timeout {\r\n background: #fff3cd;\r\n color: #856404;\r\n border: 2px solid #ffeaa7;\r\n }\r\n\r\n .celebration {\r\n text-align: center;\r\n font-size: 48px;\r\n margin: 20px 0;\r\n display: none;\r\n animation: bounce 1s 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 .instructions {\r\n background: #e8f4fd;\r\n padding: 15px;\r\n border-radius: 12px;\r\n margin-bottom: 25px;\r\n text-align: center;\r\n color: #2c3e50;\r\n font-size: 16px;\r\n }\r\n\r\n .hint-section {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hint-btn {\r\n background: #ffc107 !important;\r\n color: #212529 !important;\r\n }\r\n\r\n .hint-btn:hover {\r\n background: #e0a800 !important;\r\n }\r\n\r\n .hint-text {\r\n background: #fff3cd !important;\r\n color: #856404 !important;\r\n padding: 10px 15px;\r\n border-radius: 8px;\r\n margin-top: 10px;\r\n font-style: italic;\r\n display: none;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .fill-blanks-widget {\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 .sentence-text {\r\n font-size: 20px;\r\n }\r\n\r\n .blank-space {\r\n min-width: 100px;\r\n height: 45px;\r\n }\r\n\r\n .word-option {\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n }\r\n\r\n .progress-section {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .game-btn {\r\n width: 200px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"fill-blanks-widget\" id=\"fillBlanksGame\">\r\n \r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">\ud83c\udfaf Arabic blank completion game<\/h1>\r\n <p class=\"game-subtitle\">Choose the correct word to complete the sentence.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"progress-section\">\r\n <div class=\"question-counter\">\r\n The question <span id=\"currentQuestion\">1<\/span> from <span id=\"totalQuestions\">10<\/span>\r\n <\/div>\r\n <div class=\"timer\" id=\"timer\">\r\n \u23f0 Time remaining: <span id=\"timeLeft\">30<\/span> second\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"instructions\">\r\n Read the sentence and choose the appropriate word to fill in the blank.\r\n <\/div>\r\n\r\n \r\n <div class=\"sentence-container\">\r\n <div class=\"sentence-text\" id=\"sentenceText\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"word-options\" id=\"wordOptions\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"hint-section\">\r\n <button class=\"game-btn hint-btn\" id=\"hintBtn\">\ud83d\udca1 Hint<\/button>\r\n <div class=\"hint-text\" id=\"hintText\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"feedback\" id=\"feedback\"><\/div>\r\n \r\n \r\n <div class=\"celebration\" id=\"celebration\">\ud83c\udf89<\/div>\r\n\r\n \r\n <div class=\"controls\">\r\n <button class=\"game-btn\" id=\"checkBtn\" disabled>\u2705 Check the answer<\/button>\r\n <button class=\"game-btn secondary\" id=\"clearBtn\">\ud83d\udd04 Clear answer<\/button>\r\n <button class=\"game-btn success\" id=\"nextBtn\" style=\"display: none;\">\u23ed\ufe0f Next question<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n class ArabicFillBlanksGame {\r\n constructor() {\r\n this.questions = [\r\n {\r\n sentence: \"_____ \u064a\u0644\u0639\u0628 \u0641\u064a \u0627\u0644\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u062c\u0645\u064a\u0644\u0629\",\r\n options: [\"\u0623\u062d\u0645\u062f\", \"\u0643\u062a\u0627\u0628\", \"\u0633\u064a\u0627\u0631\u0629\", \"\u062c\u0628\u0644\"],\r\n correct: \"\u0623\u062d\u0645\u062f\",\r\n hint: \"\u0645\u0646 \u064a\u0633\u062a\u0637\u064a\u0639 \u0623\u0646 \u064a\u0644\u0639\u0628\u061f \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0637\u064a\u0648\u0631 \u062a\u0637\u064a\u0631 \u0641\u064a _____ \u0627\u0644\u0632\u0631\u0642\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0628\u062d\u0631\", \"\u0627\u0644\u0633\u0645\u0627\u0621\", \"\u0627\u0644\u0623\u0631\u0636\", \"\u0627\u0644\u063a\u0627\u0628\u0629\"],\r\n correct: \"\u0627\u0644\u0633\u0645\u0627\u0621\",\r\n hint: \"\u0623\u064a\u0646 \u0646\u0631\u0649 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0632\u0631\u0642 \u0641\u0648\u0642 \u0631\u0624\u0648\u0633\u0646\u0627\u061f\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0636\u064a\u0621 \u0627\u0644\u0644\u064a\u0644 \u0627\u0644\u0645\u0638\u0644\u0645\",\r\n options: [\"\u0627\u0644\u0634\u0645\u0633\", \"\u0627\u0644\u0646\u062c\u0648\u0645\", \"\u0627\u0644\u0623\u0634\u062c\u0627\u0631\", \"\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\"],\r\n correct: \"\u0627\u0644\u0646\u062c\u0648\u0645\",\r\n hint: \"\u0645\u0627 \u0627\u0644\u0630\u064a \u0646\u0631\u0627\u0647 \u0641\u064a \u0627\u0644\u0633\u0645\u0627\u0621 \u0644\u064a\u0644\u0627\u064b\u061f\"\r\n },\r\n {\r\n sentence: \"\u064a\u0634\u0631\u0628 \u0627\u0644\u0637\u0641\u0644 _____ \u0627\u0644\u0637\u0627\u0632\u062c \u0643\u0644 \u0635\u0628\u0627\u062d\",\r\n options: [\"\u0627\u0644\u062d\u0644\u064a\u0628\", \"\u0627\u0644\u062d\u062c\u0631\", \"\u0627\u0644\u0648\u0631\u0642\", \"\u0627\u0644\u062d\u062f\u064a\u062f\"],\r\n correct: \"\u0627\u0644\u062d\u0644\u064a\u0628\",\r\n hint: \"\u0645\u0634\u0631\u0648\u0628 \u0623\u0628\u064a\u0636 \u0645\u0641\u064a\u062f \u0644\u0644\u0623\u0637\u0641\u0627\u0644\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0633\u0628\u062d \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f\",\r\n options: [\"\u0627\u0644\u0637\u0627\u0626\u0631\u0629\", \"\u0627\u0644\u0633\u0645\u0643\u0629\", \"\u0627\u0644\u0634\u062c\u0631\u0629\", \"\u0627\u0644\u0645\u0646\u0632\u0644\"],\r\n correct: \"\u0627\u0644\u0633\u0645\u0643\u0629\",\r\n hint: \"\u062d\u064a\u0648\u0627\u0646 \u064a\u0639\u064a\u0634 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0645\u0639\u0644\u0645 \u064a\u0643\u062a\u0628 \u0639\u0644\u0649 _____ \u0628\u0627\u0644\u0637\u0628\u0627\u0634\u064a\u0631\",\r\n options: [\"\u0627\u0644\u0633\u0628\u0648\u0631\u0629\", \"\u0627\u0644\u0637\u0627\u0648\u0644\u0629\", \"\u0627\u0644\u062d\u0627\u0626\u0637\", \"\u0627\u0644\u0643\u062a\u0627\u0628\"],\r\n correct: \"\u0627\u0644\u0633\u0628\u0648\u0631\u0629\",\r\n hint: \"\u0633\u0637\u062d \u0623\u0633\u0648\u062f \u0623\u0648 \u0623\u062e\u0636\u0631 \u0641\u064a \u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u062f\u0631\u0627\u0633\u064a\"\r\n },\r\n {\r\n sentence: \"_____ \u062a\u0646\u0628\u062a \u0645\u0646 \u0627\u0644\u0623\u0631\u0636 \u0648\u062a\u062d\u062a\u0627\u062c \u0644\u0644\u0645\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0633\u064a\u0627\u0631\u0629\", \"\u0627\u0644\u0646\u0628\u0627\u062a\u0627\u062a\", \"\u0627\u0644\u062d\u0627\u0633\u0648\u0628\", \"\u0627\u0644\u0637\u0639\u0627\u0645\"],\r\n correct: \"\u0627\u0644\u0646\u0628\u0627\u062a\u0627\u062a\",\r\n hint: \"\u0643\u0627\u0626\u0646\u0627\u062a \u062d\u064a\u0629 \u062e\u0636\u0631\u0627\u0621 \u062a\u062d\u062a\u0627\u062c \u0644\u0644\u0634\u0645\u0633 \u0648\u0627\u0644\u0645\u0627\u0621\"\r\n },\r\n {\r\n sentence: \"\u0646\u0633\u062a\u062e\u062f\u0645 _____ \u0644\u0646\u0631\u0649 \u0641\u064a \u0627\u0644\u0638\u0644\u0627\u0645\",\r\n options: [\"\u0627\u0644\u0645\u0635\u0628\u0627\u062d\", \"\u0627\u0644\u0643\u0631\u0633\u064a\", \"\u0627\u0644\u0645\u0644\u0639\u0642\u0629\", \"\u0627\u0644\u0642\u0644\u0645\"],\r\n correct: \"\u0627\u0644\u0645\u0635\u0628\u0627\u062d\",\r\n hint: \"\u062c\u0647\u0627\u0632 \u064a\u0646\u062a\u062c \u0627\u0644\u0636\u0648\u0621\"\r\n },\r\n {\r\n sentence: \"_____ \u064a\u0633\u0642\u0637 \u0645\u0646 \u0627\u0644\u0633\u0645\u0627\u0621 \u0641\u064a \u0627\u0644\u0634\u062a\u0627\u0621\",\r\n options: [\"\u0627\u0644\u0645\u0637\u0631\", \"\u0627\u0644\u0631\u0645\u0644\", \"\u0627\u0644\u062d\u062c\u0627\u0631\u0629\", \"\u0627\u0644\u0623\u0648\u0631\u0627\u0642\"],\r\n correct: \"\u0627\u0644\u0645\u0637\u0631\",\r\n hint: \"\u0642\u0637\u0631\u0627\u062a \u0645\u0627\u0621 \u062a\u0646\u0632\u0644 \u0645\u0646 \u0627\u0644\u0633\u062d\u0628\"\r\n },\r\n {\r\n sentence: \"\u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u064a\u0630\u0647\u0628\u0648\u0646 \u0625\u0644\u0649 _____ \u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0639\u0644\u0648\u0645\",\r\n options: [\"\u0627\u0644\u0645\u062f\u0631\u0633\u0629\", \"\u0627\u0644\u0633\u0648\u0642\", \"\u0627\u0644\u0645\u0637\u0628\u062e\", \"\u0627\u0644\u062d\u0645\u0627\u0645\"],\r\n correct: \"\u0627\u0644\u0645\u062f\u0631\u0633\u0629\",\r\n hint: \"\u0645\u0643\u0627\u0646 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0639\u0644\u0645\"\r\n }\r\n ];\r\n\r\n this.currentQuestionIndex = 0;\r\n this.selectedWord = null;\r\n this.timeLeft = 30;\r\n this.timer = null;\r\n this.gameStarted = false;\r\n\r\n this.initializeElements();\r\n this.setupEventListeners();\r\n this.loadQuestion();\r\n this.startTimer();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n sentenceText: document.getElementById('sentenceText'),\r\n wordOptions: document.getElementById('wordOptions'),\r\n currentQuestion: document.getElementById('currentQuestion'),\r\n totalQuestions: document.getElementById('totalQuestions'),\r\n timeLeft: document.getElementById('timeLeft'),\r\n timer: document.getElementById('timer'),\r\n feedback: document.getElementById('feedback'),\r\n celebration: document.getElementById('celebration'),\r\n checkBtn: document.getElementById('checkBtn'),\r\n clearBtn: document.getElementById('clearBtn'),\r\n nextBtn: document.getElementById('nextBtn'),\r\n hintBtn: document.getElementById('hintBtn'),\r\n hintText: document.getElementById('hintText')\r\n };\r\n\r\n this.elements.totalQuestions.textContent = this.questions.length;\r\n }\r\n\r\n setupEventListeners() {\r\n this.elements.checkBtn.addEventListener('click', () => this.checkAnswer());\r\n this.elements.clearBtn.addEventListener('click', () => this.clearAnswer());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextQuestion());\r\n this.elements.hintBtn.addEventListener('click', () => this.showHint());\r\n }\r\n\r\n loadQuestion() {\r\n const question = this.questions[this.currentQuestionIndex];\r\n \r\n \/\/ Update question counter\r\n this.elements.currentQuestion.textContent = this.currentQuestionIndex + 1;\r\n\r\n \/\/ Create sentence with blank space\r\n this.createSentenceWithBlank(question.sentence);\r\n\r\n \/\/ Create word options\r\n this.createWordOptions(question.options);\r\n\r\n \/\/ Reset states\r\n this.selectedWord = null;\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.hideHint();\r\n }\r\n\r\n createSentenceWithBlank(sentence) {\r\n const parts = sentence.split('_____');\r\n this.elements.sentenceText.innerHTML = '';\r\n\r\n \/\/ Add first part\r\n if (parts[0]) {\r\n const span1 = document.createElement('span');\r\n span1.textContent = parts[0];\r\n this.elements.sentenceText.appendChild(span1);\r\n }\r\n\r\n \/\/ Add blank space\r\n const blankSpace = document.createElement('div');\r\n blankSpace.className = 'blank-space';\r\n blankSpace.id = 'blankSpace';\r\n this.elements.sentenceText.appendChild(blankSpace);\r\n\r\n \/\/ Add second part\r\n if (parts[1]) {\r\n const span2 = document.createElement('span');\r\n span2.textContent = parts[1];\r\n this.elements.sentenceText.appendChild(span2);\r\n }\r\n }\r\n\r\n createWordOptions(options) {\r\n this.elements.wordOptions.innerHTML = '';\r\n \r\n \/\/ Shuffle options for variety\r\n const shuffledOptions = [...options].sort(() => Math.random() - 0.5);\r\n\r\n shuffledOptions.forEach(option => {\r\n const button = document.createElement('button');\r\n button.className = 'word-option';\r\n button.textContent = option;\r\n button.addEventListener('click', () => this.selectWord(button, option));\r\n this.elements.wordOptions.appendChild(button);\r\n });\r\n }\r\n\r\n selectWord(buttonElement, word) {\r\n if (buttonElement.classList.contains('used')) return;\r\n\r\n \/\/ Clear previous selection\r\n this.clearSelection();\r\n\r\n \/\/ Set new selection\r\n this.selectedWord = word;\r\n buttonElement.classList.add('selected');\r\n\r\n \/\/ Fill blank space\r\n const blankSpace = document.getElementById('blankSpace');\r\n blankSpace.classList.add('filled');\r\n blankSpace.innerHTML = `<span class=\"selected-word\">${word}<\/span>`;\r\n\r\n \/\/ Enable check button\r\n this.elements.checkBtn.disabled = false;\r\n }\r\n\r\n clearSelection() {\r\n \/\/ Clear word options\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.remove('selected');\r\n });\r\n\r\n \/\/ Clear blank space\r\n const blankSpace = document.getElementById('blankSpace');\r\n blankSpace.classList.remove('filled', 'correct', 'incorrect');\r\n blankSpace.innerHTML = '';\r\n }\r\n\r\n clearAnswer() {\r\n this.clearSelection();\r\n this.selectedWord = null;\r\n this.elements.checkBtn.disabled = true;\r\n this.hideFeedback();\r\n this.hideHint();\r\n }\r\n\r\n checkAnswer() {\r\n if (!this.selectedWord) return;\r\n\r\n const question = this.questions[this.currentQuestionIndex];\r\n const isCorrect = this.selectedWord === question.correct;\r\n const blankSpace = document.getElementById('blankSpace');\r\n\r\n if (isCorrect) {\r\n \/\/ Correct answer\r\n blankSpace.classList.add('correct');\r\n this.showFeedback('correct', `\ud83c\udf89 \u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629! \"${question.correct}\" \u0647\u064a \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629`);\r\n this.showCelebration();\r\n this.handleCorrectAnswer();\r\n } else {\r\n \/\/ Incorrect answer\r\n blankSpace.classList.add('incorrect');\r\n this.showFeedback('incorrect', `\u274c \u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a \"${question.correct}\"`);\r\n this.handleIncorrectAnswer();\r\n }\r\n\r\n \/\/ Disable word options\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.add('used');\r\n });\r\n\r\n this.pauseTimer();\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\r\n handleIncorrectAnswer() {\r\n \/\/ Allow retry or move to next question after a delay\r\n setTimeout(() => {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.elements.checkBtn.style.display = 'none';\r\n this.elements.nextBtn.style.display = 'inline-block';\r\n } else {\r\n this.endGame();\r\n }\r\n }, 2000);\r\n }\r\n\r\n nextQuestion() {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.currentQuestionIndex++;\r\n this.loadQuestion();\r\n this.resetTimer();\r\n \r\n \/\/ Reset buttons\r\n this.elements.checkBtn.style.display = 'inline-block';\r\n this.elements.nextBtn.style.display = 'none';\r\n } else {\r\n this.endGame();\r\n }\r\n }\r\n\r\n showHint() {\r\n const question = this.questions[this.currentQuestionIndex];\r\n this.elements.hintText.textContent = question.hint;\r\n this.elements.hintText.style.display = 'block';\r\n this.elements.hintBtn.disabled = true;\r\n }\r\n\r\n hideHint() {\r\n this.elements.hintText.style.display = 'none';\r\n this.elements.hintBtn.disabled = false;\r\n }\r\n\r\n showFeedback(type, message) {\r\n this.elements.feedback.className = `feedback ${type}`;\r\n this.elements.feedback.textContent = message;\r\n this.elements.feedback.style.display = 'block';\r\n }\r\n\r\n hideFeedback() {\r\n this.elements.feedback.style.display = 'none';\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 startTimer() {\r\n this.timer = setInterval(() => {\r\n this.timeLeft--;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n\r\n \/\/ Visual warning when time is running out\r\n if (this.timeLeft <= 10) {\r\n this.elements.timer.classList.add('warning');\r\n }\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 this.pauseTimer();\r\n this.timeLeft = 30;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n this.elements.timer.classList.remove('warning');\r\n this.startTimer();\r\n }\r\n\r\n pauseTimer() {\r\n clearInterval(this.timer);\r\n }\r\n\r\n handleTimeUp() {\r\n this.pauseTimer();\r\n const question = this.questions[this.currentQuestionIndex];\r\n this.showFeedback('timeout', `\u23f0 \u0627\u0646\u062a\u0647\u0649 \u0627\u0644\u0648\u0642\u062a! \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a \"${question.correct}\"`);\r\n \r\n \/\/ Disable all interactions\r\n const options = this.elements.wordOptions.querySelectorAll('.word-option');\r\n options.forEach(option => {\r\n option.classList.add('used');\r\n });\r\n\r\n this.elements.checkBtn.disabled = true;\r\n\r\n \/\/ Auto move to next question\r\n setTimeout(() => {\r\n if (this.currentQuestionIndex < this.questions.length - 1) {\r\n this.nextQuestion();\r\n } else {\r\n this.endGame();\r\n }\r\n }, 3000);\r\n }\r\n\r\n endGame() {\r\n this.pauseTimer();\r\n this.showFeedback('correct', '\ud83c\udf8a \u062a\u0647\u0627\u0646\u064a\u0646\u0627! \u0644\u0642\u062f \u0623\u0646\u0647\u064a\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0633\u0626\u0644\u0629');\r\n this.elements.checkBtn.style.display = 'none';\r\n this.elements.nextBtn.style.display = 'none';\r\n \r\n \/\/ Show restart option\r\n setTimeout(() => {\r\n if (confirm('\u0647\u0644 \u062a\u0631\u064a\u062f \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0644\u0639\u0628 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629\u061f')) {\r\n location.reload();\r\n }\r\n }, 2000);\r\n }\r\n }\r\n\r\n \/\/ Start the game when page loads\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new ArabicFillBlanksGame();\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>\u0644\u0639\u0628\u0629 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0641\u0631\u0627\u063a\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \ud83c\udfaf \u0644\u0639\u0628\u0629 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0641\u0631\u0627\u063a\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u062e\u062a\u0631 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0644\u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u062c\u0645\u0644\u0629 \u0627\u0644\u0633\u0624\u0627\u0644 1 \u0645\u0646 10 \u23f0 \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062a\u0628\u0642\u064a: 30 \u062b\u0627\u0646\u064a\u0629 \u0627\u0642\u0631\u0623 \u0627\u0644\u062c\u0645\u0644\u0629 \u0648\u0627\u062e\u062a\u0631 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0644\u0621 \u0627\u0644\u0641\u0631\u0627\u063a \ud83d\udca1 \u062a\u0644\u0645\u064a\u062d \ud83c\udf89 \u2705 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \ud83d\udd04 \u0645\u0633\u062d \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u23ed\ufe0f \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a<\/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-15176","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176","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=15176"}],"version-history":[{"count":10,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176\/revisions"}],"predecessor-version":[{"id":15189,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15176\/revisions\/15189"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}