{"id":15225,"date":"2025-09-02T22:34:31","date_gmt":"2025-09-02T20:34:31","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15225"},"modified":"2025-09-02T22:35:31","modified_gmt":"2025-09-02T20:35:31","slug":"%f0%9f%8f%86-%d9%84%d8%b9%d8%a8%d8%a9-%d8%a8%d9%86%d8%a7%d8%a1-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%f0%9f%8f%86-%d9%84%d8%b9%d8%a8%d8%a9-%d8%a8%d9%86%d8%a7%d8%a1-%d8%a7%d9%84%d9%83%d9%84%d9%85%d8%a7%d8%aa\/","title":{"rendered":"\ud83c\udfc6 Word building game"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Word building game<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box !important;\r\n }\r\n\r\n .word-race-game {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;\r\n max-width: 520px !important;\r\n margin: 20px auto !important;\r\n padding: 0 !important;\r\n background: linear-gradient(145deg, #f8f4ff, #ffffff) !important;\r\n border-radius: 25px !important;\r\n box-shadow: 0 20px 60px rgba(130, 32, 165, 0.15), \r\n 0 0 0 1px rgba(130, 32, 165, 0.1) !important;\r\n text-align: center !important;\r\n direction: rtl !important;\r\n overflow: hidden !important;\r\n position: relative !important;\r\n }\r\n\r\n .word-race-game::before {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n height: 6px !important;\r\n background: linear-gradient(90deg, #8220A5, #b44bc7, #8220A5) !important;\r\n background-size: 200% 100% !important;\r\n animation: shimmer 3s ease-in-out infinite !important;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0%, 100% { background-position: -200% 0; }\r\n 50% { background-position: 200% 0; }\r\n }\r\n\r\n .game-header {\r\n padding: 30px 25px 20px !important;\r\n background: linear-gradient(135deg, #8220A5, #9c3db8, #8220A5) !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n }\r\n\r\n .game-header::after {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: -50% !important;\r\n left: -50% !important;\r\n width: 200% !important;\r\n height: 200% !important;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;\r\n animation: rotate 20s linear infinite !important;\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 !important;\r\n font-size: 28px !important;\r\n font-weight: 800 !important;\r\n margin: 0 0 20px !important;\r\n text-shadow: 2px 2px 8px rgba(0,0,0,0.3) !important;\r\n position: relative !important;\r\n z-index: 2 !important;\r\n letter-spacing: 0.5px !important;\r\n }\r\n\r\n .game-stats {\r\n display: grid !important;\r\n grid-template-columns: 1fr auto 1fr !important;\r\n gap: 15px !important;\r\n align-items: center !important;\r\n background: rgba(255,255,255,0.2) !important;\r\n border-radius: 20px !important;\r\n padding: 15px !important;\r\n backdrop-filter: blur(10px) !important;\r\n border: 1px solid rgba(255,255,255,0.3) !important;\r\n position: relative !important;\r\n z-index: 2 !important;\r\n }\r\n\r\n .stat-item {\r\n color: white !important;\r\n font-weight: 600 !important;\r\n font-size: 14px !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n gap: 5px !important;\r\n }\r\n\r\n .stat-value {\r\n font-size: 20px !important;\r\n font-weight: 800 !important;\r\n }\r\n\r\n .timer {\r\n font-size: 24px !important;\r\n color: white !important;\r\n font-weight: 800 !important;\r\n background: rgba(255,255,255,0.2) !important;\r\n border-radius: 50% !important;\r\n width: 70px !important;\r\n height: 70px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n border: 2px solid rgba(255,255,255,0.4) !important;\r\n animation: pulse 2s ease-in-out infinite !important;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { \r\n transform: scale(1);\r\n box-shadow: 0 0 0 0 rgba(255,255,255,0.7);\r\n }\r\n 50% { \r\n transform: scale(1.05);\r\n box-shadow: 0 0 0 10px rgba(255,255,255,0);\r\n }\r\n }\r\n\r\n .progress-container {\r\n padding: 0 25px 20px !important;\r\n background: linear-gradient(135deg, #8220A5, #9c3db8) !important;\r\n }\r\n\r\n .progress-bar {\r\n width: 100% !important;\r\n height: 12px !important;\r\n background: rgba(255,255,255,0.2) !important;\r\n border-radius: 20px !important;\r\n overflow: hidden !important;\r\n position: relative !important;\r\n }\r\n\r\n .progress-fill {\r\n height: 100% !important;\r\n background: linear-gradient(90deg, #ffffff, #f0f0f0) !important;\r\n border-radius: 20px !important;\r\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n }\r\n\r\n .progress-fill::after {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: -100% !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;\r\n animation: progress-shine 2s ease-in-out infinite !important;\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 .game-content {\r\n padding: 30px 25px !important;\r\n }\r\n\r\n .definition-area {\r\n background: white !important;\r\n border: none !important;\r\n border-radius: 20px !important;\r\n padding: 30px !important;\r\n margin: 20px 0 30px !important;\r\n min-height: 120px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n position: relative !important;\r\n box-shadow: 0 10px 30px rgba(130, 32, 165, 0.1),\r\n inset 0 1px 0 rgba(255,255,255,0.8) !important;\r\n border: 1px solid rgba(130, 32, 165, 0.1) !important;\r\n }\r\n\r\n .definition-area::before {\r\n content: '\u2728' !important;\r\n position: absolute !important;\r\n top: -10px !important;\r\n right: 20px !important;\r\n font-size: 24px !important;\r\n background: white !important;\r\n padding: 5px 10px !important;\r\n border-radius: 50% !important;\r\n box-shadow: 0 4px 15px rgba(130, 32, 165, 0.2) !important;\r\n }\r\n\r\n .word-display {\r\n font-size: 2.5rem !important;\r\n font-weight: bold !important;\r\n color: #333 !important;\r\n min-height: 80px !important;\r\n display: flex !important;\r\n justify-content: center !important;\r\n align-items: center !important;\r\n gap: 12px !important;\r\n margin: 15px 0 !important;\r\n }\r\n\r\n .letter-slot {\r\n width: 60px !important;\r\n height: 75px !important;\r\n background: white !important;\r\n border: 3px dashed rgba(130, 32, 165, 0.3) !important;\r\n border-radius: 12px !important;\r\n display: flex !important;\r\n justify-content: center !important;\r\n align-items: center !important;\r\n font-size: 2rem !important;\r\n font-weight: bold !important;\r\n transition: all 0.3s ease !important;\r\n }\r\n\r\n .letter-slot.filled {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8) !important;\r\n color: white !important;\r\n border-color: #8220A5 !important;\r\n transform: scale(1.05) !important;\r\n box-shadow: 0 5px 15px rgba(130, 32, 165, 0.3) !important;\r\n }\r\n\r\n .letter-slot.correct {\r\n background: linear-gradient(135deg, #28a745, #20c997) !important;\r\n border-color: #28a745 !important;\r\n animation: correctBounce 0.6s ease !important;\r\n }\r\n\r\n .letter-slot.incorrect {\r\n background: linear-gradient(135deg, #dc3545, #e74c3c) !important;\r\n border-color: #dc3545 !important;\r\n animation: shake 0.5s ease !important;\r\n }\r\n\r\n @keyframes correctBounce {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n 100% { transform: scale(1.05); }\r\n }\r\n\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 20%, 60% { transform: translateX(-8px); }\r\n 40%, 80% { transform: translateX(8px); }\r\n }\r\n\r\n .letter-bank {\r\n display: flex !important;\r\n flex-wrap: wrap !important;\r\n justify-content: center !important;\r\n gap: 12px !important;\r\n margin: 25px 0 !important;\r\n padding: 20px !important;\r\n background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;\r\n border-radius: 15px !important;\r\n border: 2px solid rgba(130, 32, 165, 0.1) !important;\r\n }\r\n\r\n .letter-tile {\r\n width: 55px !important;\r\n height: 70px !important;\r\n background: linear-gradient(135deg, #ffffff, #f8f9ff) !important;\r\n border: 2px solid rgba(130, 32, 165, 0.2) !important;\r\n border-radius: 12px !important;\r\n display: flex !important;\r\n justify-content: center !important;\r\n align-items: center !important;\r\n font-size: 1.8rem !important;\r\n font-weight: bold !important;\r\n cursor: pointer !important;\r\n transition: all 0.3s ease !important;\r\n user-select: none !important;\r\n color: #333 !important;\r\n }\r\n\r\n .letter-tile:hover {\r\n transform: translateY(-5px) scale(1.05) !important;\r\n box-shadow: 0 8px 20px rgba(130, 32, 165, 0.25) !important;\r\n border-color: #8220A5 !important;\r\n }\r\n\r\n .letter-tile.selected {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8) !important;\r\n color: white !important;\r\n transform: scale(0.9) !important;\r\n opacity: 0.7 !important;\r\n }\r\n\r\n .game-btn {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8) !important;\r\n color: white !important;\r\n border: none !important;\r\n padding: 16px 32px !important;\r\n font-size: 16px !important;\r\n border-radius: 25px !important;\r\n cursor: pointer !important;\r\n margin: 8px !important;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\r\n font-weight: 700 !important;\r\n letter-spacing: 0.5px !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n min-width: 140px !important;\r\n }\r\n\r\n .game-btn::before {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: -100% !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;\r\n transition: left 0.5s !important;\r\n }\r\n\r\n .game-btn:hover::before {\r\n left: 100% !important;\r\n }\r\n\r\n .game-btn:hover {\r\n transform: translateY(-3px) !important;\r\n box-shadow: 0 12px 25px rgba(130, 32, 165, 0.3) !important;\r\n }\r\n\r\n .game-btn:active {\r\n transform: translateY(-1px) !important;\r\n }\r\n\r\n .game-btn:disabled {\r\n background: linear-gradient(135deg, #ccc, #ddd) !important;\r\n cursor: not-allowed !important;\r\n transform: none !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .game-btn.check {\r\n background: linear-gradient(135deg, #28a745, #20c997) !important;\r\n }\r\n\r\n .game-btn.reset {\r\n background: linear-gradient(135deg, #fd7e14, #f39c12) !important;\r\n }\r\n\r\n .message {\r\n margin: 20px 0 !important;\r\n padding: 18px 25px !important;\r\n border-radius: 20px !important;\r\n font-weight: 600 !important;\r\n font-size: 16px !important;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n }\r\n\r\n .message::before {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 4px !important;\r\n height: 100% !important;\r\n background: currentColor !important;\r\n }\r\n\r\n .success {\r\n background: linear-gradient(135deg, #d4edda, #c3e6cb) !important;\r\n color: #155724 !important;\r\n border: 1px solid #c3e6cb !important;\r\n box-shadow: 0 8px 25px rgba(21, 87, 36, 0.1) !important;\r\n }\r\n\r\n .error {\r\n background: linear-gradient(135deg, #f8d7da, #f5c6cb) !important;\r\n color: #721c24 !important;\r\n border: 1px solid #f5c6cb !important;\r\n box-shadow: 0 8px 25px rgba(114, 28, 36, 0.1) !important;\r\n }\r\n\r\n .final-score {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8) !important;\r\n color: white !important;\r\n padding: 30px 25px !important;\r\n border-radius: 25px !important;\r\n margin: 20px !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n box-shadow: 0 20px 60px rgba(130, 32, 165, 0.3) !important;\r\n }\r\n\r\n .final-score::before {\r\n content: '' !important;\r\n position: absolute !important;\r\n top: -50% !important;\r\n left: -50% !important;\r\n width: 200% !important;\r\n height: 200% !important;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;\r\n animation: rotate 15s linear infinite !important;\r\n }\r\n\r\n .final-score h2 {\r\n font-size: 24px !important;\r\n margin: 0 0 20px !important;\r\n position: relative !important;\r\n z-index: 2 !important;\r\n }\r\n\r\n .score-detail {\r\n font-size: 18px !important;\r\n margin: 12px 0 !important;\r\n position: relative !important;\r\n z-index: 2 !important;\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n align-items: center !important;\r\n background: rgba(255,255,255,0.1) !important;\r\n padding: 12px 20px !important;\r\n border-radius: 15px !important;\r\n backdrop-filter: blur(5px) !important;\r\n }\r\n\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .word-race-game {\r\n margin: 10px !important;\r\n border-radius: 20px !important;\r\n }\r\n \r\n .game-header {\r\n padding: 25px 20px 15px !important;\r\n }\r\n \r\n .game-title {\r\n font-size: 24px !important;\r\n }\r\n \r\n .game-content {\r\n padding: 25px 20px !important;\r\n }\r\n \r\n .letter-slot, .letter-tile {\r\n width: 45px !important;\r\n height: 60px !important;\r\n font-size: 1.5rem !important;\r\n }\r\n\r\n .timer {\r\n width: 60px !important;\r\n height: 60px !important;\r\n font-size: 20px !important;\r\n }\r\n\r\n .word-display {\r\n font-size: 2rem !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"word-race-game\">\r\n <div class=\"game-header\">\r\n <h1 class=\"game-title\">\ud83c\udfc6 Word building game<\/h1>\r\n \r\n <div id=\"gameStats\" class=\"game-stats\">\r\n <div class=\"stat-item\">\r\n <span>Level<\/span>\r\n <span class=\"stat-value\"><span id=\"currentLevel\">1<\/span>\/15<\/span>\r\n <\/div>\r\n <div class=\"timer\">\r\n <span id=\"timeLeft\">25<\/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>\r\n <\/div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div id=\"progressFill\" class=\"progress-fill\" style=\"width: 6.67%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"game-content\">\r\n <div id=\"gameArea\">\r\n <div class=\"definition-area\">\r\n <div class=\"word-display\" id=\"word-display\">\r\n Get ready to start the game!\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"letter-bank\" id=\"letter-bank\">\r\n <!-- Letter tiles will be generated here -->\r\n <\/div>\r\n\r\n <div id=\"message\" class=\"message hidden\"><\/div>\r\n\r\n <div>\r\n <button id=\"startBtn\" class=\"game-btn\">\ud83d\ude80 Start the game<\/button>\r\n <button id=\"checkBtn\" class=\"game-btn check hidden\">verification<\/button>\r\n <button id=\"resetBtn\" class=\"game-btn reset hidden\">Reset<\/button>\r\n <button id=\"nextBtn\" class=\"game-btn hidden\">Next \u27a1\ufe0f<\/button>\r\n <button id=\"restartBtn\" class=\"game-btn hidden\">\ud83d\udd04 Restart<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"finalScore\" class=\"final-score hidden\">\r\n <h2>\ud83c\udf89 Game Over!<\/h2>\r\n <div class=\"score-detail\">\r\n <span>Final points:<\/span>\r\n <span id=\"finalPoints\">0<\/span>\r\n <\/div>\r\n <div class=\"score-detail\">\r\n <span>Correct answers:<\/span>\r\n <span><span id=\"correctAnswers\">0<\/span>\/15<\/span>\r\n <\/div>\r\n <div class=\"score-detail\">\r\n <span>Success rate:<\/span>\r\n <span><span id=\"successRate\">0<\/span>%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n class WordBuildingGame {\r\n constructor() {\r\n this.words = [\r\n \/\/ Level 1-3: Easy words (2-3 letters)\r\n { word: \"\u0628\u064a\u062a\", letters: [\"\u0628\", \"\u064a\", \"\u062a\"], difficulty: 1 },\r\n { word: \"\u0642\u0644\u0645\", letters: [\"\u0642\", \"\u0644\", \"\u0645\"], difficulty: 1 },\r\n { word: \"\u0634\u0645\u0633\", letters: [\"\u0634\", \"\u0645\", \"\u0633\"], difficulty: 1 },\r\n \r\n \/\/ Level 4-6: Medium words (4 letters)\r\n { word: \"\u0643\u062a\u0627\u0628\", letters: [\"\u0643\", \"\u062a\", \"\u0627\", \"\u0628\"], difficulty: 2 },\r\n { word: \"\u0648\u0631\u062f\u0629\", letters: [\"\u0648\", \"\u0631\", \"\u062f\", \"\u0629\"], difficulty: 2 },\r\n { word: \"\u0646\u0647\u0627\u0631\", letters: [\"\u0646\", \"\u0647\", \"\u0627\", \"\u0631\"], difficulty: 2 },\r\n \r\n \/\/ Level 7-9: Medium-hard words (5 letters)\r\n { word: \"\u0645\u062f\u0631\u0633\u0629\", letters: [\"\u0645\", \"\u062f\", \"\u0631\", \"\u0633\", \"\u0629\"], difficulty: 3 },\r\n { word: \"\u062a\u0641\u0627\u062d\u0629\", letters: [\"\u062a\", \"\u0641\", \"\u0627\", \"\u062d\", \"\u0629\"], difficulty: 3 },\r\n { word: \"\u0633\u064a\u0627\u0631\u0629\", letters: [\"\u0633\", \"\u064a\", \"\u0627\", \"\u0631\", \"\u0629\"], difficulty: 3 },\r\n \r\n \/\/ Level 10-12: Hard words (6 letters)\r\n { word: \"\u0637\u0627\u0626\u0631\u0629\", letters: [\"\u0637\", \"\u0627\", \"\u0626\", \"\u0631\", \"\u0629\"], difficulty: 4 },\r\n { word: \"\u0645\u0643\u062a\u0628\u0629\", letters: [\"\u0645\", \"\u0643\", \"\u062a\", \"\u0628\", \"\u0629\"], difficulty: 4 },\r\n { word: \"\u062d\u062f\u064a\u0642\u0629\", letters: [\"\u062d\", \"\u062f\", \"\u064a\", \"\u0642\", \"\u0629\"], difficulty: 4 },\r\n \r\n \/\/ Level 13-15: Very hard words (7+ letters)\r\n { word: \"\u0645\u0633\u062a\u0634\u0641\u0649\", letters: [\"\u0645\", \"\u0633\", \"\u062a\", \"\u0634\", \"\u0641\", \"\u0649\"], difficulty: 5 },\r\n { word: \"\u062c\u0627\u0645\u0639\u0629\", letters: [\"\u062c\", \"\u0627\", \"\u0645\", \"\u0639\", \"\u0629\"], difficulty: 5 },\r\n { word: \"\u0635\u064a\u062f\u0644\u064a\u0629\", letters: [\"\u0635\", \"\u064a\", \"\u062f\", \"\u0644\", \"\u064a\", \"\u0629\"], difficulty: 5 }\r\n ];\r\n \r\n this.currentLevel = 0;\r\n this.score = 0;\r\n this.correctCount = 0;\r\n this.timeLeft = 25;\r\n this.timer = null;\r\n this.gameActive = false;\r\n this.selectedLetters = [];\r\n this.currentWord = {};\r\n \r\n this.initializeElements();\r\n this.attachEventListeners();\r\n }\r\n\r\n initializeElements() {\r\n this.elements = {\r\n currentLevel: document.getElementById('currentLevel'),\r\n timeLeft: document.getElementById('timeLeft'),\r\n score: document.getElementById('score'),\r\n progressFill: document.getElementById('progressFill'),\r\n wordDisplay: document.getElementById('word-display'),\r\n letterBank: document.getElementById('letter-bank'),\r\n message: document.getElementById('message'),\r\n startBtn: document.getElementById('startBtn'),\r\n checkBtn: document.getElementById('checkBtn'),\r\n resetBtn: document.getElementById('resetBtn'),\r\n nextBtn: document.getElementById('nextBtn'),\r\n restartBtn: document.getElementById('restartBtn'),\r\n gameArea: document.getElementById('gameArea'),\r\n finalScore: document.getElementById('finalScore'),\r\n finalPoints: document.getElementById('finalPoints'),\r\n correctAnswers: document.getElementById('correctAnswers'),\r\n successRate: document.getElementById('successRate')\r\n };\r\n }\r\n\r\n attachEventListeners() {\r\n this.elements.startBtn.addEventListener('click', () => this.startGame());\r\n this.elements.checkBtn.addEventListener('click', () => this.checkAnswer());\r\n this.elements.resetBtn.addEventListener('click', () => this.resetSelection());\r\n this.elements.nextBtn.addEventListener('click', () => this.nextLevel());\r\n this.elements.restartBtn.addEventListener('click', () => this.restartGame());\r\n }\r\n\r\n startGame() {\r\n this.currentLevel = 0;\r\n this.score = 0;\r\n this.correctCount = 0;\r\n this.gameActive = true;\r\n \r\n this.elements.startBtn.classList.add('hidden');\r\n this.elements.checkBtn.classList.remove('hidden');\r\n this.elements.resetBtn.classList.remove('hidden');\r\n this.elements.finalScore.classList.add('hidden');\r\n this.elements.gameArea.classList.remove('hidden');\r\n \r\n this.loadLevel();\r\n }\r\n\r\n loadLevel() {\r\n if (this.currentLevel >= this.words.length) {\r\n this.endGame();\r\n return;\r\n }\r\n\r\n this.currentWord = this.words[this.currentLevel];\r\n this.selectedLetters = [];\r\n \r\n this.elements.currentLevel.textContent = this.currentLevel + 1;\r\n this.updateProgress();\r\n this.createWordDisplay();\r\n this.createLetterBank();\r\n this.hideMessage();\r\n \r\n this.startTimer();\r\n }\r\n\r\n createWordDisplay() {\r\n this.elements.wordDisplay.innerHTML = '';\r\n \r\n this.currentWord.word.split('').forEach((_, index) => {\r\n const slot = document.createElement('div');\r\n slot.className = 'letter-slot';\r\n slot.dataset.index = index;\r\n this.elements.wordDisplay.appendChild(slot);\r\n });\r\n }\r\n\r\n createLetterBank() {\r\n this.elements.letterBank.innerHTML = '';\r\n \r\n \/\/ Use only the letters from the current word\r\n let allLetters = [...this.currentWord.letters];\r\n \r\n \/\/ Shuffle letters\r\n allLetters = allLetters.sort(() => Math.random() - 0.5);\r\n \r\n allLetters.forEach((letter, index) => {\r\n const tile = document.createElement('div');\r\n tile.className = 'letter-tile';\r\n tile.textContent = letter;\r\n tile.dataset.letter = letter;\r\n tile.dataset.index = index;\r\n tile.addEventListener('click', (e) => this.selectLetter(e));\r\n this.elements.letterBank.appendChild(tile);\r\n });\r\n }\r\n\r\n selectLetter(e) {\r\n if (!this.gameActive) return;\r\n \r\n const tile = e.target;\r\n const letter = tile.dataset.letter;\r\n \r\n if (tile.classList.contains('selected')) {\r\n \/\/ Remove from selection\r\n tile.classList.remove('selected');\r\n this.selectedLetters = this.selectedLetters.filter(l => l.index !== tile.dataset.index);\r\n } else if (this.selectedLetters.length < this.currentWord.letters.length) {\r\n \/\/ Add to selection\r\n tile.classList.add('selected');\r\n this.selectedLetters.push({\r\n index: tile.dataset.index,\r\n letter: letter\r\n });\r\n }\r\n \r\n this.updateWordDisplay();\r\n \r\n \/\/ Auto-check if word is complete\r\n if (this.selectedLetters.length === this.currentWord.letters.length) {\r\n setTimeout(() => this.checkAnswer(), 500);\r\n }\r\n }\r\n\r\n updateWordDisplay() {\r\n const slots = this.elements.wordDisplay.querySelectorAll('.letter-slot');\r\n \r\n \/\/ Reset all slots\r\n slots.forEach(slot => {\r\n slot.textContent = '';\r\n slot.className = 'letter-slot';\r\n });\r\n \r\n \/\/ Fill in selected letters\r\n this.selectedLetters.forEach((selected, i) => {\r\n if (slots[i]) {\r\n slots[i].textContent = selected.letter;\r\n slots[i].classList.add('filled');\r\n }\r\n });\r\n }\r\n\r\n startTimer() {\r\n this.timeLeft = 25;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n \r\n this.timer = setInterval(() => {\r\n this.timeLeft--;\r\n this.elements.timeLeft.textContent = this.timeLeft;\r\n \r\n if (this.timeLeft <= 0) {\r\n this.timeUp();\r\n }\r\n }, 1000);\r\n }\r\n\r\n checkAnswer() {\r\n if (!this.gameActive) return;\r\n \r\n const userWord = this.selectedLetters.map(s => s.letter).join('');\r\n const slots = this.elements.wordDisplay.querySelectorAll('.letter-slot');\r\n \r\n if (userWord === this.currentWord.word) {\r\n \/\/ Correct answer\r\n this.gameActive = false;\r\n clearInterval(this.timer);\r\n \r\n const timeBonus = this.timeLeft * 10;\r\n const levelScore = 100 + timeBonus;\r\n this.score += levelScore;\r\n this.correctCount++;\r\n \r\n this.elements.score.textContent = this.score;\r\n \r\n \/\/ Mark letters as correct\r\n slots.forEach(slot => slot.classList.add('correct'));\r\n \r\n this.showMessage(`\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! +${levelScore} \u0646\u0642\u0637\u0629`, 'success');\r\n this.elements.nextBtn.classList.remove('hidden');\r\n this.elements.checkBtn.classList.add('hidden');\r\n this.elements.resetBtn.classList.add('hidden');\r\n \r\n } else {\r\n \/\/ Wrong answer\r\n this.showMessage('\u274c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649!', 'error');\r\n \r\n \/\/ Shake slots\r\n slots.forEach(slot => {\r\n slot.classList.add('incorrect');\r\n setTimeout(() => {\r\n slot.classList.remove('incorrect');\r\n }, 500);\r\n });\r\n \r\n \/\/ Reset selection\r\n this.resetSelection();\r\n }\r\n }\r\n\r\n timeUp() {\r\n this.gameActive = false;\r\n clearInterval(this.timer);\r\n \r\n const correctAnswer = this.currentWord.word;\r\n this.showMessage(`\u23f0 \u0627\u0646\u062a\u0647\u0649 \u0627\u0644\u0648\u0642\u062a! \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${correctAnswer}`, 'error');\r\n this.elements.nextBtn.classList.remove('hidden');\r\n this.elements.checkBtn.classList.add('hidden');\r\n this.elements.resetBtn.classList.add('hidden');\r\n }\r\n\r\n resetSelection() {\r\n \/\/ Clear all selected tiles\r\n this.elements.letterBank.querySelectorAll('.letter-tile').forEach(tile => {\r\n tile.classList.remove('selected');\r\n });\r\n \r\n this.selectedLetters = [];\r\n this.updateWordDisplay();\r\n }\r\n\r\n nextLevel() {\r\n this.currentLevel++;\r\n this.elements.nextBtn.classList.add('hidden');\r\n this.elements.checkBtn.classList.remove('hidden');\r\n this.elements.resetBtn.classList.remove('hidden');\r\n this.gameActive = true;\r\n this.loadLevel();\r\n }\r\n\r\n endGame() {\r\n this.elements.gameArea.classList.add('hidden');\r\n this.elements.finalScore.classList.remove('hidden');\r\n \r\n const successRate = Math.round((this.correctCount \/ this.words.length) * 100);\r\n \r\n this.elements.finalPoints.textContent = this.score;\r\n this.elements.correctAnswers.textContent = this.correctCount;\r\n this.elements.successRate.textContent = successRate;\r\n \r\n this.elements.restartBtn.classList.remove('hidden');\r\n }\r\n\r\n restartGame() {\r\n this.elements.restartBtn.classList.add('hidden');\r\n this.elements.finalScore.classList.add('hidden');\r\n this.elements.startBtn.classList.remove('hidden');\r\n this.elements.checkBtn.classList.add('hidden');\r\n this.elements.resetBtn.classList.add('hidden');\r\n \r\n \/\/ Reset display\r\n this.elements.wordDisplay.textContent = '\u0627\u0633\u062a\u0639\u062f \u0644\u0628\u062f\u0621 \u0627\u0644\u0644\u0639\u0628\u0629!';\r\n this.elements.letterBank.innerHTML = '';\r\n this.elements.score.textContent = '0';\r\n this.elements.currentLevel.textContent = '1';\r\n this.elements.timeLeft.textContent = '25';\r\n this.updateProgress();\r\n this.hideMessage();\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 updateProgress() {\r\n const progress = ((this.currentLevel + 1) \/ this.words.length) * 100;\r\n this.elements.progressFill.style.width = progress + '%';\r\n }\r\n }\r\n\r\n \/\/ Initialize the game when the page loads\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new WordBuildingGame();\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 \u0628\u0646\u0627\u0621 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \ud83c\udfc6 \u0644\u0639\u0628\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0648\u0649 1\/15 25 \u0627\u0644\u0646\u0642\u0627\u0637 0 \u0627\u0633\u062a\u0639\u062f \u0644\u0628\u062f\u0621 \u0627\u0644\u0644\u0639\u0628\u0629! \ud83d\ude80 \u0627\u0628\u062f\u0623 \u0627\u0644\u0644\u0639\u0628\u0629 \u062a\u062d\u0642\u0642 \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u062a\u0627\u0644\u064a \u27a1\ufe0f \ud83d\udd04 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \ud83c\udf89 \u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629! \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629: 0 \u0627\u0644\u0625\u062c\u0627\u0628\u0627\u062a \u0627\u0644\u0635\u062d\u064a\u062d\u0629: 0\/15 \u0645\u0639\u062f\u0644 \u0627\u0644\u0646\u062c\u0627\u062d: 0%<\/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-15225","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15225","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=15225"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15225\/revisions"}],"predecessor-version":[{"id":15229,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15225\/revisions\/15229"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}