{"id":15035,"date":"2025-08-13T09:56:21","date_gmt":"2025-08-13T07:56:21","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15035"},"modified":"2025-09-01T15:35:47","modified_gmt":"2025-09-01T13:35:47","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d8%b3%d9%85%d8%a7%d8%a1-%d8%a7%d9%84%d8%a7%d8%b4%d8%a7%d8%b1%d8%a9","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d8%b3%d9%85%d8%a7%d8%a1-%d8%a7%d9%84%d8%a7%d8%b4%d8%a7%d8%b1%d8%a9\/","title":{"rendered":"Demonstrative pronouns game"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"15035\" class=\"elementor elementor-15035\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aaed8b1 e-flex e-con-boxed e-con e-parent\" data-id=\"aaed8b1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c55117 elementor-widget elementor-widget-html\" data-id=\"1c55117\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <style>\r\n        .arabic-pronouns-widget {\r\n            box-sizing: border-box;\r\n            font-family: 'Arial', sans-serif;\r\n            background: linear-gradient(135deg, #f8f4ff 0%, #ede7ff 100%);\r\n            border-radius: 20px;\r\n            box-shadow: 0 15px 40px rgba(130, 32, 165, 0.15);\r\n            overflow: hidden;\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n            direction: rtl;\r\n            position: relative;\r\n        }\r\n\r\n        .arabic-pronouns-widget * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .arabic-pronouns-widget .widget-header {\r\n            background: linear-gradient(135deg, #8220A5, #6b1a85);\r\n            color: white;\r\n            padding: 25px;\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .arabic-pronouns-widget .widget-header::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: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\") repeat;\r\n            opacity: 0.3;\r\n        }\r\n\r\n        .arabic-pronouns-widget .widget-title {\r\n            font-size: 2.2em;\r\n            font-weight: bold;\r\n            margin: 0 0 10px 0;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .arabic-pronouns-widget .level-info {\r\n            font-size: 1.3em;\r\n            position: relative;\r\n            z-index: 1;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        .arabic-pronouns-widget .progress-bar {\r\n            background: rgba(255,255,255,0.2);\r\n            height: 8px;\r\n            border-radius: 4px;\r\n            margin: 15px 0 0 0;\r\n            overflow: hidden;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .arabic-pronouns-widget .progress-fill {\r\n            background: rgba(255,255,255,0.8);\r\n            height: 100%;\r\n            border-radius: 4px;\r\n            transition: width 0.5s ease;\r\n            width: 0%;\r\n        }\r\n\r\n        .arabic-pronouns-widget .game-area {\r\n            padding: 30px;\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronouns-bank {\r\n            background: rgba(255,255,255,0.9);\r\n            border: 3px solid #e5d5f0;\r\n            border-radius: 15px;\r\n            padding: 25px;\r\n            margin-bottom: 30px;\r\n            backdrop-filter: blur(10px);\r\n            box-shadow: 0 8px 20px rgba(130, 32, 165, 0.08);\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronouns-bank h2 {\r\n            color: #8220A5;\r\n            margin: 0 0 20px 0;\r\n            text-align: center;\r\n            font-size: 1.3em;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronouns-container {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronoun {\r\n            background: linear-gradient(135deg, #8220A5, #6b1a85);\r\n            color: white;\r\n            padding: 15px 25px;\r\n            border-radius: 30px;\r\n            cursor: grab;\r\n            user-select: none;\r\n            font-weight: bold;\r\n            font-size: 1.3em;\r\n            transition: all 0.4s ease;\r\n            border: 3px solid transparent;\r\n            box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2);\r\n            transform: scale(1);\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronoun:hover {\r\n            background: linear-gradient(135deg, #6b1a85, #4c1370);\r\n            transform: translateY(-3px) scale(1.05);\r\n            box-shadow: 0 8px 25px rgba(130, 32, 165, 0.4);\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronoun:active {\r\n            cursor: grabbing;\r\n            transform: translateY(-1px) scale(0.98);\r\n        }\r\n\r\n        .arabic-pronouns-widget .pronoun.used {\r\n            background: linear-gradient(135deg, #94a3b8, #64748b);\r\n            cursor: not-allowed;\r\n            opacity: 0.6;\r\n            transform: scale(0.95);\r\n        }\r\n\r\n        .arabic-pronouns-widget .sentences {\r\n            display: grid;\r\n            gap: 15px;\r\n        }\r\n\r\n        .arabic-pronouns-widget .sentence {\r\n            background: rgba(255,255,255,0.95);\r\n            border: 3px solid #e5d5f0;\r\n            border-radius: 15px;\r\n            padding: 20px;\r\n            font-size: 1.6em;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            transition: all 0.4s ease;\r\n            flex-wrap: wrap;\r\n            box-shadow: 0 4px 15px rgba(130, 32, 165, 0.08);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .arabic-pronouns-widget .sentence.correct {\r\n            background: linear-gradient(135deg, #dcfce7, #bbf7d0);\r\n            border-color: #22c55e;\r\n            color: #14532d;\r\n            animation: correctPulse 0.6s ease;\r\n        }\r\n\r\n        .arabic-pronouns-widget .sentence.incorrect {\r\n            background: linear-gradient(135deg, #fef2f2, #fecaca);\r\n            border-color: #ef4444;\r\n            color: #991b1b;\r\n            animation: incorrectShake 0.6s ease;\r\n        }\r\n\r\n        @keyframes correctPulse {\r\n            0%, 100% { transform: scale(1); }\r\n            50% { transform: scale(1.02); }\r\n        }\r\n\r\n        @keyframes incorrectShake {\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        .arabic-pronouns-widget .sentence-number {\r\n            background: linear-gradient(135deg, #8220A5, #6b1a85);\r\n            color: white;\r\n            width: 35px;\r\n            height: 35px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            flex-shrink: 0;\r\n            font-size: 1.1em;\r\n            box-shadow: 0 3px 10px rgba(130, 32, 165, 0.3);\r\n        }\r\n\r\n        .arabic-pronouns-widget .drop-zone {\r\n            min-width: 100px;\r\n            min-height: 45px;\r\n            border: 3px dashed #c9b3db;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background: rgba(248, 244, 255, 0.8);\r\n            transition: all 0.4s ease;\r\n            font-weight: bold;\r\n            color: #8220A5;\r\n            font-size: 1.1em;\r\n            padding: 8px 12px;\r\n        }\r\n\r\n        .arabic-pronouns-widget .drop-zone.drag-over {\r\n            border-color: #8220A5;\r\n            background: rgba(240, 249, 255, 0.9);\r\n            color: #8220A5;\r\n            transform: scale(1.05);\r\n            box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2);\r\n        }\r\n\r\n        .arabic-pronouns-widget .drop-zone.filled {\r\n            background: linear-gradient(135deg, #8220A5, #6b1a85);\r\n            color: white;\r\n            border-color: #8220A5;\r\n            border-style: solid;\r\n        }\r\n\r\n        .arabic-pronouns-widget .controls {\r\n            text-align: center;\r\n            margin-top: 30px;\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn {\r\n            background: linear-gradient(135deg, #8220A5, #6b1a85);\r\n            color: white;\r\n            border: none;\r\n            padding: 15px 25px;\r\n            border-radius: 12px;\r\n            cursor: pointer;\r\n            font-size: 1.1em;\r\n            font-weight: bold;\r\n            transition: all 0.3s ease;\r\n            margin: 0 10px 10px 0;\r\n            box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn:hover {\r\n            background: linear-gradient(135deg, #6b1a85, #4c1370);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(130, 32, 165, 0.3);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn.secondary {\r\n            background: linear-gradient(135deg, #64748b, #475569);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn.secondary:hover {\r\n            background: linear-gradient(135deg, #475569, #334155);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn.success {\r\n            background: linear-gradient(135deg, #22c55e, #16a34a);\r\n        }\r\n\r\n        .arabic-pronouns-widget .btn.success:hover {\r\n            background: linear-gradient(135deg, #16a34a, #15803d);\r\n        }\r\n\r\n        .arabic-pronouns-widget .score {\r\n            text-align: center;\r\n            margin-top: 25px;\r\n            font-size: 1.3em;\r\n            color: #8220A5;\r\n            font-weight: bold;\r\n            padding: 15px;\r\n            background: rgba(255,255,255,0.7);\r\n            border-radius: 12px;\r\n            box-shadow: 0 4px 15px rgba(130, 32, 165, 0.1);\r\n        }\r\n\r\n        .arabic-pronouns-widget .level-complete {\r\n            background: linear-gradient(135deg, #22c55e, #16a34a);\r\n            color: white;\r\n            padding: 20px;\r\n            border-radius: 15px;\r\n            text-align: center;\r\n            margin-top: 20px;\r\n            font-size: 1.2em;\r\n            box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2);\r\n        }\r\n\r\n        .arabic-pronouns-widget .celebration {\r\n            animation: celebrate 0.8s ease-in-out;\r\n        }\r\n\r\n        @keyframes celebrate {\r\n            0%, 100% { transform: scale(1) rotate(0deg); }\r\n            25% { transform: scale(1.1) rotate(2deg); }\r\n            75% { transform: scale(1.1) rotate(-2deg); }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .arabic-pronouns-widget .sentence {\r\n                font-size: 1.1em;\r\n                padding: 15px;\r\n            }\r\n            \r\n            .arabic-pronouns-widget .pronoun {\r\n                font-size: 1.1em;\r\n                padding: 12px 20px;\r\n            }\r\n            \r\n            .arabic-pronouns-widget .drop-zone {\r\n                min-width: 80px;\r\n                font-size: 1em;\r\n            }\r\n\r\n            .arabic-pronouns-widget .widget-title {\r\n                font-size: 1.8em;\r\n            }\r\n\r\n            .arabic-pronouns-widget .game-area {\r\n                padding: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"arabic-pronouns-widget\">\r\n        <div class=\"widget-header\">\r\n            <h1 class=\"widget-title\">Teaching demonstrative pronouns<\/h1>\r\n            <div class=\"level-info\" id=\"levelInfo\">Level 1: Basic Demonstrative Pronouns<\/div>\r\n            <div class=\"progress-bar\">\r\n                <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"game-area\">\r\n            <div class=\"pronouns-bank\">\r\n                <h2>Drag the appropriate word<\/h2>\r\n                <div class=\"pronouns-container\" id=\"pronounsContainer\">\r\n                    <!-- Pronouns will be populated by JavaScript -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sentences\" id=\"sentences\">\r\n                <!-- Sentences will be populated by JavaScript -->\r\n            <\/div>\r\n\r\n            <div class=\"controls\">\r\n                <button class=\"btn\" onclick=\"arabicPronouns.checkAnswers()\">Check answers<\/button>\r\n                <button class=\"btn secondary\" onclick=\"arabicPronouns.resetLevel()\">Re-level<\/button>\r\n                <button class=\"btn success\" id=\"nextLevelBtn\" onclick=\"arabicPronouns.nextLevel()\" style=\"display:none;\">Next Level<\/button>\r\n            <\/div>\r\n\r\n            <div class=\"score\" id=\"arabicPronounsScore\"><\/div>\r\n            <div id=\"levelComplete\" style=\"display:none;\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Enhanced Arabic Pronouns Game with Multiple Levels\r\n        window.arabicPronouns = (function() {\r\n            let draggedElement = null;\r\n            let gameState = {};\r\n            let currentLevel = 1;\r\n            let totalLevels = 4;\r\n\r\n            \/\/ Game levels data\r\n            const levels = {\r\n                1: {\r\n                    title: \"\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0661: \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\",\r\n                    pronouns: [\"\u0627\u0644\u0630\u064a\u0646\", \"\u0627\u0644\u0644\u0627\u0626\u064a\", \"\u0627\u0644\u0644\u0630\u0627\u0646\", \"\u0627\u0644\u0644\u062a\u0627\u0646\", \"\u0627\u0644\u0630\u064a\", \"\u0627\u0644\u062a\u064a\"],\r\n                    sentences: [\r\n                        { text: [\"\u0627\u0644\u0637\u0644\u0628\u0627\u0646\", \"\u0646\u062c\u062d\u0627 \u0641\u064a \u0627\u0644\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062c\u062a\u0647\u062f\u0627\u0646.\"], correct: \"\u0627\u0644\u0644\u0630\u0627\u0646\" },\r\n                        { text: [\"\u0641\u0627\u0637\u0645\u0629\", \"\u0642\u0631\u0623\u062a \u0627\u0644\u0642\u0635\u0629 \u0645\u0624\u062f\u0628\u0629.\"], correct: \"\u0627\u0644\u062a\u064a\" },\r\n                        { text: [\"\u0627\u0644\u0623\u0648\u0644\u0627\u062f\", \"\u0644\u0639\u0628\u0648\u0627 \u0641\u064a \u0627\u0644\u062d\u062f\u064a\u0642\u0629 \u0633\u0639\u062f\u0627\u0621.\"], correct: \"\u0627\u0644\u0630\u064a\u0646\" },\r\n                        { text: [\"\u0627\u0644\u0628\u0646\u0627\u062a\", \"\u0631\u0633\u0645\u0646 \u0627\u0644\u0644\u0648\u062d\u0629 \u0645\u0648\u0647\u0648\u0628\u0627\u062a.\"], correct: \"\u0627\u0644\u0644\u0627\u0626\u064a\" },\r\n                        { text: [\"\u0627\u0644\u0637\u0627\u0644\u0628\u062a\u0627\u0646\", \"\u062d\u0641\u0638\u062a\u0627 \u0627\u0644\u0642\u0631\u0622\u0646 \u0645\u062a\u0641\u0648\u0642\u062a\u0627\u0646.\"], correct: \"\u0627\u0644\u0644\u062a\u0627\u0646\" },\r\n                        { text: [\"\u0645\u062d\u0645\u062f\", \"\u0633\u0627\u0639\u062f \u0648\u0627\u0644\u062f\u0647 \u0645\u0647\u0630\u0628.\"], correct: \"\u0627\u0644\u0630\u064a\" }\r\n                    ]\r\n                },\r\n                2: {\r\n                    title: \"\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0662: \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629\",\r\n                    pronouns: [\"\u0647\u0630\u0627\", \"\u0647\u0630\u0647\", \"\u0647\u0624\u0644\u0627\u0621\", \"\u0623\u0648\u0644\u0626\u0643\", \"\u0630\u0644\u0643\", \"\u062a\u0644\u0643\"],\r\n                    sentences: [\r\n                        { text: [\"\u0627\u0644\u0643\u062a\u0627\u0628\", \"\u0639\u0644\u0649 \u0627\u0644\u0637\u0627\u0648\u0644\u0629 \u0645\u0641\u064a\u062f.\"], correct: \"\u0647\u0630\u0627\" },\r\n                        { text: [\"\u0627\u0644\u0642\u0635\u0629\", \"\u0642\u0631\u0623\u062a\u0647\u0627 \u062c\u0645\u064a\u0644\u0629.\"], correct: \"\u0647\u0630\u0647\" },\r\n                        { text: [\"\u0627\u0644\u0637\u0644\u0627\u0628\", \"\u0641\u064a \u0627\u0644\u0635\u0641 \u0645\u062c\u062a\u0647\u062f\u0648\u0646.\"], correct: \"\u0647\u0624\u0644\u0627\u0621\" },\r\n                        { text: [\"\u0627\u0644\u0645\u0639\u0644\u0645\u0648\u0646\", \"\u0641\u064a \u0627\u0644\u0645\u062f\u0631\u0633\u0629 \u0645\u062d\u062a\u0631\u0645\u0648\u0646.\"], correct: \"\u0623\u0648\u0644\u0626\u0643\" },\r\n                        { text: [\"\u0627\u0644\u0628\u064a\u062a\", \"\u0628\u0639\u064a\u062f \u0639\u0646\u0627 \u0643\u0628\u064a\u0631.\"], correct: \"\u0630\u0644\u0643\" },\r\n                        { text: [\"\u0627\u0644\u062d\u062f\u064a\u0642\u0629\", \"\u0623\u0645\u0627\u0645 \u0627\u0644\u0645\u0646\u0632\u0644 \u0648\u0627\u0633\u0639\u0629.\"], correct: \"\u062a\u0644\u0643\" }\r\n                    ]\r\n                },\r\n                3: {\r\n                    title: \"\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0663: \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u062e\u062a\u0644\u0637\u0629\",\r\n                    pronouns: [\"\u0647\u0630\u0627\u0646\", \"\u0647\u0627\u062a\u0627\u0646\", \"\u0647\u0646\u0627\", \"\u0647\u0646\u0627\u0643\", \"\u0647\u0646\u0627\u0644\u0643\", \"\u0647\u0647\u0646\u0627\"],\r\n                    sentences: [\r\n                        { text: [\"\u0627\u0644\u0648\u0644\u062f\u0627\u0646\", \"\u064a\u0644\u0639\u0628\u0627\u0646 \u0646\u0634\u064a\u0637\u0627\u0646.\"], correct: \"\u0647\u0630\u0627\u0646\" },\r\n                        { text: [\"\u0627\u0644\u0641\u062a\u0627\u062a\u0627\u0646\", \"\u062a\u062f\u0631\u0633\u0627\u0646 \u0630\u0643\u064a\u062a\u0627\u0646.\"], correct: \"\u0647\u0627\u062a\u0627\u0646\" },\r\n                        { text: [\"\u0627\u0644\u0645\u0643\u0627\u0646\", \"\u062c\u0645\u064a\u0644 \u0644\u0644\u0646\u0632\u0647\u0629.\"], correct: \"\u0647\u0646\u0627\" },\r\n                        { text: [\"\u0627\u0644\u0628\u064a\u062a\", \"\u0628\u0639\u064a\u062f \u0639\u0646\u0627.\"], correct: \"\u0647\u0646\u0627\u0643\" },\r\n                        { text: [\"\u0627\u0644\u062d\u062f\u064a\u0642\u0629\", \"\u0648\u0627\u0633\u0639\u0629 \u0648\u0646\u0638\u064a\u0641\u0629.\"], correct: \"\u0647\u0646\u0627\u0644\u0643\" },\r\n                        { text: [\"\u0627\u0644\u0645\u0643\u062a\u0628\u0629\", \"\u0647\u0627\u062f\u0626\u0629 \u0644\u0644\u0642\u0631\u0627\u0621\u0629.\"], correct: \"\u0647\u0647\u0646\u0627\" }\r\n                    ]\r\n                },\r\n                4: {\r\n                    title: \"\u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0664: \u0627\u0644\u062a\u062d\u062f\u064a \u0627\u0644\u0646\u0647\u0627\u0626\u064a\",\r\n                    pronouns: [\"\u0643\u0630\u0644\u0643\", \"\u0643\u0630\u0627\", \"\u0645\u062b\u0644 \u0647\u0630\u0627\", \"\u0643\u0647\u0630\u0627\", \"\u0623\u064a\", \"\u0623\u064a\u0629\"],\r\n                    sentences: [\r\n                        { text: [\"\u0627\u0644\u0639\u0645\u0644\", \"\u064a\u062c\u0628 \u0623\u0646 \u0646\u0642\u0648\u0645 \u0628\u0647.\"], correct: \"\u0643\u0630\u0644\u0643\" },\r\n                        { text: [\"\u0627\u0644\u0623\u0645\u0631\", \"\u0644\u0627 \u064a\u0645\u0643\u0646 \u0642\u0628\u0648\u0644\u0647.\"], correct: \"\u0643\u0630\u0627\" },\r\n                        { text: [\"\u0627\u0644\u0633\u0644\u0648\u0643\", \"\u063a\u064a\u0631 \u0645\u0642\u0628\u0648\u0644.\"], correct: \"\u0645\u062b\u0644 \u0647\u0630\u0627\" },\r\n                        { text: [\"\u0627\u0644\u062a\u0635\u0631\u0641\", \"\u064a\u062c\u0628 \u062a\u062c\u0646\u0628\u0647.\"], correct: \"\u0643\u0647\u0630\u0627\" },\r\n                        { text: [\"\u0643\u062a\u0627\u0628\", \"\u062a\u0631\u064a\u062f \u0623\u0646 \u062a\u0642\u0631\u0623\u061f\"], correct: \"\u0623\u064a\" },\r\n                        { text: [\"\u0642\u0635\u0629\", \"\u062a\u0641\u0636\u0644\u064a\u0646\u061f\"], correct: \"\u0623\u064a\u0629\" }\r\n                    ]\r\n                }\r\n            };\r\n\r\n            \/\/ Initialize the game\r\n            function initGame() {\r\n                const widget = document.querySelector('.arabic-pronouns-widget');\r\n                if (!widget) return;\r\n                \r\n                loadLevel(currentLevel);\r\n                setupEventListeners();\r\n            }\r\n\r\n            function loadLevel(level) {\r\n                const levelData = levels[level];\r\n                if (!levelData) return;\r\n\r\n                \/\/ Update header\r\n                document.getElementById('levelInfo').textContent = levelData.title;\r\n                updateProgress();\r\n\r\n                \/\/ Load pronouns\r\n                const pronounsContainer = document.getElementById('pronounsContainer');\r\n                pronounsContainer.innerHTML = '';\r\n                levelData.pronouns.forEach(pronoun => {\r\n                    const pronounElement = document.createElement('div');\r\n                    pronounElement.className = 'pronoun';\r\n                    pronounElement.draggable = true;\r\n                    pronounElement.setAttribute('data-pronoun', pronoun);\r\n                    pronounElement.textContent = pronoun;\r\n                    pronounsContainer.appendChild(pronounElement);\r\n                });\r\n\r\n                \/\/ Load sentences\r\n                const sentencesContainer = document.getElementById('sentences');\r\n                sentencesContainer.innerHTML = '';\r\n                levelData.sentences.forEach((sentence, index) => {\r\n                    const sentenceElement = document.createElement('div');\r\n                    sentenceElement.className = 'sentence';\r\n                    sentenceElement.setAttribute('data-correct', sentence.correct);\r\n                    \r\n                    sentenceElement.innerHTML = `\r\n                        <div class=\"sentence-number\">${toArabicNumerals(index + 1)}<\/div>\r\n                        <span>${sentence.text[0]}<\/span>\r\n                        <div class=\"drop-zone\" data-sentence=\"${index}\">\u0627\u0633\u062d\u0628 \u0647\u0646\u0627<\/div>\r\n                        <span>${sentence.text[1]}<\/span>\r\n                    `;\r\n                    sentencesContainer.appendChild(sentenceElement);\r\n                });\r\n\r\n                setupEventListeners();\r\n                resetGameState();\r\n            }\r\n\r\n            function setupEventListeners() {\r\n                const widget = document.querySelector('.arabic-pronouns-widget');\r\n                if (!widget) return;\r\n                \r\n                const pronouns = widget.querySelectorAll('.pronoun');\r\n                const dropZones = widget.querySelectorAll('.drop-zone');\r\n                \r\n                \/\/ Add drag event listeners to pronouns\r\n                pronouns.forEach(pronoun => {\r\n                    pronoun.removeEventListener('dragstart', handleDragStart);\r\n                    pronoun.removeEventListener('dragend', handleDragEnd);\r\n                    pronoun.addEventListener('dragstart', handleDragStart);\r\n                    pronoun.addEventListener('dragend', handleDragEnd);\r\n                });\r\n\r\n                \/\/ Add drop event listeners to drop zones\r\n                dropZones.forEach(zone => {\r\n                    zone.removeEventListener('dragover', handleDragOver);\r\n                    zone.removeEventListener('drop', handleDrop);\r\n                    zone.removeEventListener('dragenter', handleDragEnter);\r\n                    zone.removeEventListener('dragleave', handleDragLeave);\r\n                    zone.addEventListener('dragover', handleDragOver);\r\n                    zone.addEventListener('drop', handleDrop);\r\n                    zone.addEventListener('dragenter', handleDragEnter);\r\n                    zone.addEventListener('dragleave', handleDragLeave);\r\n                });\r\n            }\r\n\r\n            function updateProgress() {\r\n                const progressFill = document.getElementById('progressFill');\r\n                const progress = (currentLevel \/ totalLevels) * 100;\r\n                progressFill.style.width = progress + '%';\r\n            }\r\n\r\n            function toArabicNumerals(num) {\r\n                const arabicNums = ['\u0660', '\u0661', '\u0662', '\u0663', '\u0664', '\u0665', '\u0666', '\u0667', '\u0668', '\u0669'];\r\n                return num.toString().split('').map(digit => arabicNums[parseInt(digit)]).join('');\r\n            }\r\n\r\n            function resetGameState() {\r\n                const widget = document.querySelector('.arabic-pronouns-widget');\r\n                if (!widget) return;\r\n                \r\n                gameState = {};\r\n                widget.querySelectorAll('.sentence').forEach(sentence => {\r\n                    sentence.classList.remove('correct', 'incorrect');\r\n                });\r\n                widget.querySelectorAll('.drop-zone').forEach(zone => {\r\n                    zone.classList.remove('filled');\r\n                    zone.textContent = '\u0627\u0633\u062d\u0628 \u0647\u0646\u0627';\r\n                    zone.setAttribute('data-filled', '');\r\n                });\r\n                widget.querySelectorAll('.pronoun').forEach(pronoun => {\r\n                    pronoun.classList.remove('used');\r\n                    pronoun.style.display = 'block';\r\n                });\r\n                const scoreEl = document.getElementById('arabicPronounsScore');\r\n                if (scoreEl) scoreEl.textContent = '';\r\n                document.getElementById('nextLevelBtn').style.display = 'none';\r\n                document.getElementById('levelComplete').style.display = 'none';\r\n            }\r\n\r\n            function handleDragStart(e) {\r\n                if (e.target.classList.contains('used')) {\r\n                    e.preventDefault();\r\n                    return;\r\n                }\r\n                draggedElement = e.target;\r\n                e.target.style.opacity = '0.5';\r\n            }\r\n\r\n            function handleDragEnd(e) {\r\n                e.target.style.opacity = '1';\r\n            }\r\n\r\n            function handleDragOver(e) {\r\n                e.preventDefault();\r\n            }\r\n\r\n            function handleDragEnter(e) {\r\n                if (e.target.classList.contains('drop-zone') && !e.target.classList.contains('filled')) {\r\n                    e.target.classList.add('drag-over');\r\n                }\r\n            }\r\n\r\n            function handleDragLeave(e) {\r\n                e.target.classList.remove('drag-over');\r\n            }\r\n\r\n            function handleDrop(e) {\r\n                e.preventDefault();\r\n                e.target.classList.remove('drag-over');\r\n                \r\n                if (e.target.classList.contains('drop-zone') && !e.target.classList.contains('filled') && draggedElement) {\r\n                    const sentenceIndex = e.target.getAttribute('data-sentence');\r\n                    const pronounText = draggedElement.getAttribute('data-pronoun');\r\n                    \r\n                    \/\/ Fill the drop zone\r\n                    e.target.textContent = pronounText;\r\n                    e.target.classList.add('filled');\r\n                    e.target.setAttribute('data-filled', pronounText);\r\n                    \r\n                    \/\/ Mark pronoun as used\r\n                    draggedElement.classList.add('used');\r\n                    \r\n                    \/\/ Store the answer\r\n                    gameState[sentenceIndex] = pronounText;\r\n                    \r\n                    draggedElement = null;\r\n                }\r\n            }\r\n\r\n            function checkAnswers() {\r\n                const widget = document.querySelector('.arabic-pronouns-widget');\r\n                if (!widget) return;\r\n                \r\n                let correct = 0;\r\n                const sentences = widget.querySelectorAll('.sentence');\r\n                \r\n                sentences.forEach((sentence, index) => {\r\n                    const correctAnswer = sentence.getAttribute('data-correct');\r\n                    const userAnswer = gameState[index];\r\n                    \r\n                    sentence.classList.remove('correct', 'incorrect');\r\n                    \r\n                    if (userAnswer === correctAnswer) {\r\n                        sentence.classList.add('correct');\r\n                        correct++;\r\n                    } else if (userAnswer) {\r\n                        sentence.classList.add('incorrect');\r\n                    }\r\n                });\r\n\r\n                const total = sentences.length;\r\n                const percentage = Math.round((correct \/ total) * 100);\r\n                \r\n                const scoreEl = document.getElementById('arabicPronounsScore');\r\n                if (scoreEl) {\r\n                    scoreEl.textContent = `\u0627\u0644\u0646\u062a\u064a\u062c\u0629: ${toArabicNumerals(correct)} \u0645\u0646 ${toArabicNumerals(total)} (${toArabicNumerals(percentage)}%)`;\r\n                }\r\n                \r\n                if (correct === total) {\r\n                    setTimeout(() => {\r\n                        showLevelComplete();\r\n                    }, 1000);\r\n                }\r\n            }\r\n\r\n            function showLevelComplete() {\r\n                const widget = document.querySelector('.arabic-pronouns-widget');\r\n                widget.classList.add('celebration');\r\n                \r\n                const levelCompleteEl = document.getElementById('levelComplete');\r\n                levelCompleteEl.className = 'level-complete';\r\n                \r\n                if (currentLevel < totalLevels) {\r\n                    levelCompleteEl.innerHTML = `\r\n                        <h3>\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! \u0644\u0642\u062f \u0623\u0643\u0645\u0644\u062a \u0627\u0644\u0645\u0633\u062a\u0648\u0649 ${toArabicNumerals(currentLevel)}!<\/h3>\r\n                        <p>\u0623\u062d\u0633\u0646\u062a! \u0627\u0633\u062a\u0639\u062f \u0644\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0627\u0644\u064a<\/p>\r\n                    `;\r\n                    document.getElementById('nextLevelBtn').style.display = 'inline-block';\r\n                } else {\r\n                    levelCompleteEl.innerHTML = `\r\n                        <h3>\ud83c\udfc6 \u062a\u0647\u0627\u0646\u064a\u0646\u0627! \u0644\u0642\u062f \u0623\u0643\u0645\u0644\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0627\u062a!<\/h3>\r\n                        <p>\u0623\u0646\u062a \u0627\u0644\u0622\u0646 \u062e\u0628\u064a\u0631 \u0641\u064a \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629!<\/p>\r\n                    `;\r\n                }\r\n                \r\n                levelCompleteEl.style.display = 'block';\r\n                \r\n                setTimeout(() => {\r\n                    widget.classList.remove('celebration');\r\n                }, 800);\r\n            }\r\n\r\n            function nextLevel() {\r\n                if (currentLevel < totalLevels) {\r\n                    currentLevel++;\r\n                    loadLevel(currentLevel);\r\n                }\r\n            }\r\n\r\n            function resetLevel() {\r\n                loadLevel(currentLevel);\r\n            }\r\n\r\n            function resetGame() {\r\n                currentLevel = 1;\r\n                loadLevel(currentLevel);\r\n            }\r\n\r\n            \/\/ Initialize when DOM is ready\r\n            if (document.readyState === 'loading') {\r\n                document.addEventListener('DOMContentLoaded', initGame);\r\n            } else {\r\n                initGame();\r\n            }\r\n\r\n            \/\/ Public API\r\n            return {\r\n                checkAnswers: checkAnswers,\r\n                resetLevel: resetLevel,\r\n                resetGame: resetGame,\r\n                nextLevel: nextLevel,\r\n                init: initGame\r\n            };\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\u0639\u0644\u064a\u0645 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0661: \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0633\u062d\u0628 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0627\u062a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \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-15035","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15035","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=15035"}],"version-history":[{"count":8,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15035\/revisions"}],"predecessor-version":[{"id":15134,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15035\/revisions\/15134"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}