{"id":15140,"date":"2025-09-01T15:44:21","date_gmt":"2025-09-01T13:44:21","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15140"},"modified":"2025-09-01T16:35:53","modified_gmt":"2025-09-01T14:35:53","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%aa%d8%b5%d9%86%d9%8a%d9%81-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%aa%d8%b5%d9%86%d9%8a%d9%81-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa\/","title":{"rendered":"Word Sort Game"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15140\" class=\"elementor elementor-15140\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-503cdf9 e-flex e-con-boxed e-con e-parent\" data-id=\"503cdf9\" 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-0f65596 elementor-widget elementor-widget-html\" data-id=\"0f65596\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Word Sort Game<\/title>\r\n    <style>\r\n        \/* === Scoped Styles - Only affects this widget === *\/\r\n        .classification-game {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            width: 800px;\r\n            max-width: 100%;\r\n            margin: 20px auto;\r\n            background: linear-gradient(145deg, #f8f4ff, #ffffff);\r\n            border-radius: 25px;\r\n            box-shadow: 0 20px 60px rgba(130, 32, 165, 0.15);\r\n            overflow: hidden;\r\n            position: relative;\r\n            direction: rtl;\r\n            border: 1px solid #e0e0e0;\r\n        }\r\n\r\n        .classification-game::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 6px;\r\n            background: linear-gradient(90deg, #8220A5, #b44bc7, #66bb6a, #42a5f5, #8220A5);\r\n            background-size: 300% 100%;\r\n            animation: rainbow 4s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes rainbow {\r\n            0%, 100% { background-position: 0% 0; }\r\n            50% { background-position: 100% 0; }\r\n        }\r\n\r\n        .game-header {\r\n            background: linear-gradient(135deg, #8220A5, #9c3db8);\r\n            padding: 40px 30px;\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .game-header::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n            animation: rotate 25s linear infinite;\r\n        }\r\n\r\n        @keyframes rotate {\r\n            from { transform: rotate(0deg); }\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        .game-title {\r\n            color: white;\r\n            font-size: 36px;\r\n            font-weight: 800;\r\n            margin-bottom: 15px;\r\n            text-shadow: 2px 2px 8px rgba(0,0,0,0.3);\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .game-subtitle {\r\n            color: rgba(255,255,255,0.95);\r\n            font-size: 18px;\r\n            font-weight: 500;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .game-area {\r\n            padding: 0 40px 40px;\r\n        }\r\n\r\n        .game-stats {\r\n            display: grid;\r\n            grid-template-columns: 1fr auto 1fr;\r\n            gap: 25px;\r\n            margin-bottom: 30px;\r\n            padding: 25px;\r\n            background: linear-gradient(135deg, #8220A5, #9c3db8);\r\n            border-radius: 20px;\r\n            color: white;\r\n            align-items: center;\r\n        }\r\n\r\n        .stat-item {\r\n            text-align: center;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .stat-value {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            display: block;\r\n            margin-top: 6px;\r\n        }\r\n\r\n        .current-word {\r\n            background: white;\r\n            border-radius: 25px;\r\n            padding: 40px;\r\n            margin-bottom: 30px;\r\n            text-align: center;\r\n            box-shadow: 0 15px 35px rgba(130, 32, 165, 0.12);\r\n            border: 2px solid rgba(130, 32, 165, 0.1);\r\n            position: relative;\r\n        }\r\n\r\n        .current-word::before {\r\n            content: '\ud83d\udcdd';\r\n            position: absolute;\r\n            top: -18px;\r\n            right: 30px;\r\n            font-size: 36px;\r\n            background: white;\r\n            padding: 10px;\r\n            border-radius: 50%;\r\n            box-shadow: 0 6px 18px rgba(130, 32, 165, 0.25);\r\n        }\r\n\r\n        .word-display {\r\n            font-size: 42px;\r\n            font-weight: 800;\r\n            color: #8220A5;\r\n            margin-bottom: 0;\r\n            text-shadow: 0 2px 6px rgba(130, 32, 165, 0.15);\r\n        }\r\n\r\n        .categories {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 20px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .category-btn {\r\n            background: white;\r\n            border: 4px solid transparent;\r\n            border-radius: 25px;\r\n            padding: 30px 20px;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .category-btn.animals {\r\n            border-color: #ff6b6b;\r\n            color: #d32f2f;\r\n        }\r\n\r\n        .category-btn.plants {\r\n            border-color: #51cf66;\r\n            color: #2e7d32;\r\n        }\r\n\r\n        .category-btn.objects {\r\n            border-color: #74c0fc;\r\n            color: #1976d2;\r\n        }\r\n\r\n        .category-btn:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 30px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .category-btn.animals:hover, .category-btn.animals.correct {\r\n            background: linear-gradient(135deg, #ff6b6b, #e53935);\r\n            color: white;\r\n        }\r\n\r\n        .category-btn.plants:hover, .category-btn.plants.correct {\r\n            background: linear-gradient(135deg, #51cf66, #43a047);\r\n            color: white;\r\n        }\r\n\r\n        .category-btn.objects:hover, .category-btn.objects.correct {\r\n            background: linear-gradient(135deg, #74c0fc, #1e88e5);\r\n            color: white;\r\n        }\r\n\r\n        .category-btn.wrong {\r\n            background: linear-gradient(135deg, #ffcdd2, #ef9a9a);\r\n            animation: shake 0.6s ease-in-out;\r\n            color: #c62828;\r\n        }\r\n\r\n        @keyframes shake {\r\n            0%, 100% { transform: translateX(0); }\r\n            25% { transform: translateX(-6px); }\r\n            75% { transform: translateX(6px); }\r\n        }\r\n\r\n        .category-icon {\r\n            font-size: 40px;\r\n            margin-bottom: 12px;\r\n            display: block;\r\n        }\r\n\r\n        .category-name {\r\n            font-size: 20px;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .progress-section {\r\n            margin: 30px 0;\r\n        }\r\n\r\n        .progress-bar {\r\n            width: 100%;\r\n            height: 14px;\r\n            background: rgba(130, 32, 165, 0.15);\r\n            border-radius: 20px;\r\n            overflow: hidden;\r\n            position: relative;\r\n        }\r\n\r\n        .progress-fill {\r\n            height: 100%;\r\n            background: linear-gradient(90deg, #8220A5, #b44bc7);\r\n            border-radius: 20px;\r\n            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n        }\r\n\r\n        .progress-fill::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);\r\n            animation: progress-shine 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes progress-shine {\r\n            0% { left: -100%; }\r\n            100% { left: 100%; }\r\n        }\r\n\r\n        .message {\r\n            margin: 25px 0;\r\n            padding: 25px;\r\n            border-radius: 20px;\r\n            font-weight: 600;\r\n            text-align: center;\r\n            transition: all 0.4s ease;\r\n            font-size: 18px;\r\n        }\r\n\r\n        .message.success {\r\n            background: linear-gradient(135deg, #d4edda, #c3e6cb);\r\n            color: #155724;\r\n            border: 2px solid #4caf50;\r\n        }\r\n\r\n        .message.error {\r\n            background: linear-gradient(135deg, #f8d7da, #f5c6cb);\r\n            color: #721c24;\r\n            border: 2px solid #f44336;\r\n        }\r\n\r\n        .game-btn {\r\n            background: linear-gradient(135deg, #8220A5, #9c3db8);\r\n            color: white;\r\n            border: none;\r\n            padding: 18px 40px;\r\n            font-size: 18px;\r\n            border-radius: 30px;\r\n            cursor: pointer;\r\n            margin: 10px;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            font-weight: 700;\r\n            min-width: 160px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: 0 6px 15px rgba(130, 32, 165, 0.2);\r\n        }\r\n\r\n        .game-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        .game-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .game-btn:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 14px 30px rgba(130, 32, 165, 0.35);\r\n        }\r\n\r\n        .final-results {\r\n            background: linear-gradient(135deg, #8220A5, #9c3db8);\r\n            color: white;\r\n            padding: 40px;\r\n            border-radius: 25px;\r\n            margin: 30px 0;\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .final-results::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n            animation: rotate 20s linear infinite;\r\n        }\r\n\r\n        .results-title {\r\n            font-size: 32px;\r\n            margin-bottom: 25px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .results-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 20px;\r\n            margin: 25px 0;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .result-item {\r\n            background: rgba(255,255,255,0.25);\r\n            padding: 20px;\r\n            border-radius: 18px;\r\n            backdrop-filter: blur(6px);\r\n            font-weight: 700;\r\n        }\r\n\r\n        .result-value {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            margin-bottom: 6px;\r\n        }\r\n\r\n        .result-label {\r\n            font-size: 16px;\r\n            opacity: 0.95;\r\n        }\r\n\r\n        .hidden {\r\n            display: none !important;\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 800px) {\r\n            .classification-game {\r\n                margin: 10px;\r\n                border-radius: 20px;\r\n            }\r\n\r\n            .game-title {\r\n                font-size: 30px;\r\n            }\r\n\r\n            .word-display {\r\n                font-size: 32px;\r\n            }\r\n\r\n            .categories {\r\n                grid-template-columns: 1fr;\r\n                gap: 15px;\r\n            }\r\n\r\n            .game-stats {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n\r\n            .results-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"classification-game\">\r\n        <div class=\"game-header\">\r\n            <h1 class=\"game-title\">\ud83c\udfaf Word Sort Game<\/h1>\r\n            <p class=\"game-subtitle\">Classify the words according to their type: animals, plants, or inanimate objects.<\/p>\r\n        <\/div>\r\n\r\n        <div id=\"gameArea\" class=\"game-area\">\r\n            <div class=\"game-stats\">\r\n                <div class=\"stat-item\">\r\n                    <span>The question<\/span>\r\n                    <span class=\"stat-value\"><span id=\"currentQ\">1<\/span>\/<span id=\"totalQ\">10<\/span><\/span>\r\n                <\/div>\r\n                <div class=\"stat-item\">\r\n                    <span>points<\/span>\r\n                    <span class=\"stat-value\" id=\"score\">0<\/span>\r\n                <\/div>\r\n                <div class=\"stat-item\">\r\n                    <span>Correct<\/span>\r\n                    <span class=\"stat-value\" id=\"correct\">0<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"progress-section\">\r\n                <div class=\"progress-bar\">\r\n                    <div id=\"progressFill\" class=\"progress-fill\" style=\"width: 0%\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"current-word\">\r\n                <div id=\"wordDisplay\" class=\"word-display\">ready?<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"categories\">\r\n                <div class=\"category-btn animals\" data-category=\"animals\">\r\n                    <span class=\"category-icon\">\ud83d\udc3e<\/span>\r\n                    <div class=\"category-name\">animals<\/div>\r\n                <\/div>\r\n                <div class=\"category-btn plants\" data-category=\"plants\">\r\n                    <span class=\"category-icon\">\ud83c\udf31<\/span>\r\n                    <div class=\"category-name\">plants<\/div>\r\n                <\/div>\r\n                <div class=\"category-btn objects\" data-category=\"objects\">\r\n                    <span class=\"category-icon\">\ud83d\udce6<\/span>\r\n                    <div class=\"category-name\">inanimate objects<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"message\" class=\"message hidden\"><\/div>\r\n\r\n            <div style=\"text-align: center; margin-top: 20px;\">\r\n                <button id=\"nextBtn\" class=\"game-btn hidden\">Next \u27a1\ufe0f<\/button>\r\n                <button id=\"restartBtn\" class=\"game-btn hidden\">\ud83d\udd04 New game<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"finalResults\" class=\"final-results hidden\">\r\n            <h2 class=\"results-title\">\ud83c\udf89 Game Over!<\/h2>\r\n            <div class=\"results-grid\">\r\n                <div class=\"result-item\">\r\n                    <div class=\"result-value\" id=\"finalScore\">0<\/div>\r\n                    <div class=\"result-label\">Final points<\/div>\r\n                <\/div>\r\n                <div class=\"result-item\">\r\n                    <div class=\"result-value\" id=\"finalCorrect\">0<\/div>\r\n                    <div class=\"result-label\">Correct answers<\/div>\r\n                <\/div>\r\n                <div class=\"result-item\">\r\n                    <div class=\"result-value\" id=\"successRate\">0%<\/div>\r\n                    <div class=\"result-label\">Success rate<\/div>\r\n                <\/div>\r\n                <div class=\"result-item\">\r\n                    <div class=\"result-value\" id=\"levelCompleted\">complete<\/div>\r\n                    <div class=\"result-label\">the condition<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <button id=\"playAgainBtn\" class=\"game-btn\">\ud83c\udfae Play again<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        class WordClassificationGame {\r\n            constructor() {\r\n                \/\/ Word list (no hints)\r\n                this.words = [\r\n                    { word: \"\u0642\u0637\u0629\", category: \"animals\" },\r\n                    { word: \"\u0648\u0631\u062f\u0629\", category: \"plants\" },\r\n                    { word: \"\u0643\u062a\u0627\u0628\", category: \"objects\" },\r\n                    { word: \"\u0643\u0644\u0628\", category: \"animals\" },\r\n                    { word: \"\u0634\u062c\u0631\u0629\", category: \"plants\" },\r\n                    { word: \"\u0643\u0631\u0629\", category: \"objects\" },\r\n                    { word: \"\u0633\u0645\u0643\u0629\", category: \"animals\" },\r\n                    { word: \"\u0632\u0647\u0631\u0629\", category: \"plants\" },\r\n                    { word: \"\u0642\u0644\u0645\", category: \"objects\" },\r\n                    { word: \"\u0639\u0635\u0641\u0648\u0631\", category: \"animals\" }\r\n                ];\r\n\r\n                this.shuffleArray(this.words);\r\n                this.currentWordIndex = 0;\r\n                this.score = 0;\r\n                this.correctAnswers = 0;\r\n                this.gameActive = true;\r\n\r\n                this.initializeElements();\r\n                this.attachEventListeners();\r\n                this.startGame();\r\n            }\r\n\r\n            initializeElements() {\r\n                this.elements = {\r\n                    gameArea: document.getElementById('gameArea'),\r\n                    finalResults: document.getElementById('finalResults'),\r\n                    currentQ: document.getElementById('currentQ'),\r\n                    totalQ: document.getElementById('totalQ'),\r\n                    score: document.getElementById('score'),\r\n                    correct: document.getElementById('correct'),\r\n                    progressFill: document.getElementById('progressFill'),\r\n                    wordDisplay: document.getElementById('wordDisplay'),\r\n                    categoryBtns: document.querySelectorAll('.category-btn'),\r\n                    message: document.getElementById('message'),\r\n                    nextBtn: document.getElementById('nextBtn'),\r\n                    restartBtn: document.getElementById('restartBtn'),\r\n                    finalScore: document.getElementById('finalScore'),\r\n                    finalCorrect: document.getElementById('finalCorrect'),\r\n                    successRate: document.getElementById('successRate'),\r\n                    levelCompleted: document.getElementById('levelCompleted'),\r\n                    playAgainBtn: document.getElementById('playAgainBtn')\r\n                };\r\n            }\r\n\r\n            attachEventListeners() {\r\n                this.elements.categoryBtns.forEach(btn => {\r\n                    btn.addEventListener('click', () => this.selectCategory(btn));\r\n                });\r\n\r\n                this.elements.nextBtn.addEventListener('click', () => this.nextQuestion());\r\n                this.elements.restartBtn.addEventListener('click', () => this.restartGame());\r\n                this.elements.playAgainBtn.addEventListener('click', () => this.restartGame());\r\n            }\r\n\r\n            startGame() {\r\n                this.elements.totalQ.textContent = this.words.length;\r\n                this.loadQuestion();\r\n            }\r\n\r\n            loadQuestion() {\r\n                if (this.currentWordIndex >= this.words.length) {\r\n                    this.endGame();\r\n                    return;\r\n                }\r\n\r\n                const currentWord = this.words[this.currentWordIndex];\r\n                this.elements.wordDisplay.textContent = currentWord.word;\r\n                this.elements.currentQ.textContent = this.currentWordIndex + 1;\r\n\r\n                const progress = ((this.currentWordIndex + 1) \/ this.words.length) * 100;\r\n                this.elements.progressFill.style.width = progress + '%';\r\n\r\n                this.elements.categoryBtns.forEach(btn => {\r\n                    btn.classList.remove('correct', 'wrong');\r\n                });\r\n\r\n                this.hideMessage();\r\n                this.elements.nextBtn.classList.add('hidden');\r\n                this.gameActive = true;\r\n            }\r\n\r\n            selectCategory(selectedBtn) {\r\n                if (!this.gameActive) return;\r\n\r\n                const selectedCategory = selectedBtn.dataset.category;\r\n                const currentWord = this.words[this.currentWordIndex];\r\n                const isCorrect = selectedCategory === currentWord.category;\r\n\r\n                this.gameActive = false;\r\n\r\n                if (isCorrect) {\r\n                    selectedBtn.classList.add('correct');\r\n                    this.score += 10;\r\n                    this.correctAnswers++;\r\n                    this.showMessage(`\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! \"${currentWord.word}\" \u0645\u0646 \u0641\u0626\u0629 \u0627\u0644\u0640${this.getCategoryName(selectedCategory)}`, 'success');\r\n                } else {\r\n                    selectedBtn.classList.add('wrong');\r\n                    const correctBtn = document.querySelector(`[data-category=\"${currentWord.category}\"]`);\r\n                    correctBtn.classList.add('correct');\r\n                    this.showMessage(`\u274c \u062e\u0637\u0623! \"${currentWord.word}\" \u0645\u0646 \u0641\u0626\u0629 \u0627\u0644\u0640${this.getCategoryName(currentWord.category)}`, 'error');\r\n                }\r\n\r\n                this.elements.score.textContent = this.score;\r\n                this.elements.correct.textContent = this.correctAnswers;\r\n                this.elements.nextBtn.classList.remove('hidden');\r\n            }\r\n\r\n            getCategoryName(category) {\r\n                const names = { 'animals': '\u062d\u064a\u0648\u0627\u0646\u0627\u062a', 'plants': '\u0646\u0628\u0627\u062a\u0627\u062a', 'objects': '\u062c\u0645\u0627\u062f\u0627\u062a' };\r\n                return names[category] || category;\r\n            }\r\n\r\n            nextQuestion() {\r\n                this.currentWordIndex++;\r\n                this.loadQuestion();\r\n            }\r\n\r\n            endGame() {\r\n                this.elements.gameArea.classList.add('hidden');\r\n                this.elements.finalResults.classList.remove('hidden');\r\n\r\n                const successRate = Math.round((this.correctAnswers \/ this.words.length) * 100);\r\n\r\n                this.elements.finalScore.textContent = this.score;\r\n                this.elements.finalCorrect.textContent = `${this.correctAnswers}\/${this.words.length}`;\r\n                this.elements.successRate.textContent = successRate + '%';\r\n                this.elements.levelCompleted.textContent = \"\u0645\u0643\u062a\u0645\u0644\";\r\n            }\r\n\r\n            restartGame() {\r\n                this.shuffleArray(this.words);\r\n                this.currentWordIndex = 0;\r\n                this.score = 0;\r\n                this.correctAnswers = 0;\r\n                this.gameActive = true;\r\n\r\n                this.elements.score.textContent = '0';\r\n                this.elements.correct.textContent = '0';\r\n                this.elements.progressFill.style.width = '0%';\r\n                this.elements.finalResults.classList.add('hidden');\r\n                this.elements.gameArea.classList.remove('hidden');\r\n\r\n                this.loadQuestion();\r\n            }\r\n\r\n            shuffleArray(array) {\r\n                for (let i = array.length - 1; i > 0; i--) {\r\n                    const j = Math.floor(Math.random() * (i + 1));\r\n                    [array[i], array[j]] = [array[j], array[i]];\r\n                }\r\n            }\r\n\r\n            showMessage(text, type) {\r\n                this.elements.message.textContent = text;\r\n                this.elements.message.className = `message ${type}`;\r\n                this.elements.message.classList.remove('hidden');\r\n            }\r\n\r\n            hideMessage() {\r\n                this.elements.message.classList.add('hidden');\r\n            }\r\n        }\r\n\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            new WordClassificationGame();\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 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \ud83c\udfaf \u0644\u0639\u0628\u0629 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0635\u0646\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u062d\u0633\u0628 \u0646\u0648\u0639\u0647\u0627: \u062d\u064a\u0648\u0627\u0646\u0627\u062a\u060c \u0646\u0628\u0627\u062a\u0627\u062a\u060c \u0623\u0648 \u062c\u0645\u0627\u062f\u0627\u062a \u0627\u0644\u0633\u0624\u0627\u0644 1\/10 \u0627\u0644\u0646\u0642\u0627\u0637 0 \u0627\u0644\u0635\u062d\u064a\u062d 0 \u062c\u0627\u0647\u0632\u061f \ud83d\udc3e \u062d\u064a\u0648\u0627\u0646\u0627\u062a \ud83c\udf31 \u0646\u0628\u0627\u062a\u0627\u062a \ud83d\udce6 \u062c\u0645\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0627\u0644\u064a \u27a1\ufe0f \ud83d\udd04 \u0644\u0639\u0628\u0629 \u062c\u062f\u064a\u062f\u0629 \ud83c\udf89 \u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629! 0 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 0 \u0625\u062c\u0627\u0628\u0627\u062a \u0635\u062d\u064a\u062d\u0629 0% \u0645\u0639\u062f\u0644 \u0627\u0644\u0646\u062c\u0627\u062d \u0645\u0643\u062a\u0645\u0644 \u0627\u0644\u062d\u0627\u0644\u0629 \ud83c\udfae \u0627\u0644\u0639\u0628 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649<\/p>","protected":false},"author":389,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15140","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15140","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=15140"}],"version-history":[{"count":7,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15140\/revisions"}],"predecessor-version":[{"id":15149,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15140\/revisions\/15149"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}