{"id":15203,"date":"2025-09-02T13:34:28","date_gmt":"2025-09-02T11:34:28","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15203"},"modified":"2025-09-02T13:41:59","modified_gmt":"2025-09-02T11:41:59","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d9%85%d8%b0%d9%83%d8%b1-%d9%88%d8%a7%d9%84%d9%85%d8%a4%d9%86%d8%ab","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d9%85%d8%b0%d9%83%d8%b1-%d9%88%d8%a7%d9%84%d9%85%d8%a4%d9%86%d8%ab\/","title":{"rendered":"Masculine and feminine 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 Matching masculine and feminine<\/title>\r\n <style>\r\n .mf-game-widget {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #8220A5 0%, #9C4DC7 50%, #B366E8 100%);\r\n border-radius: 20px;\r\n padding: 25px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n box-shadow: 0 15px 35px rgba(130, 32, 165, 0.3);\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n\r\n .mf-game-widget * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .mf-game-widget::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) 1px, transparent 1px);\r\n background-size: 25px 25px;\r\n animation: mf-float 15s infinite linear;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n @keyframes mf-float {\r\n 0% { transform: translate(0, 0) rotate(0deg); }\r\n 100% { transform: translate(-25px, -25px) rotate(360deg); }\r\n }\r\n\r\n .mf-game-header {\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 25px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-game-title {\r\n font-size: 26px;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .mf-game-subtitle {\r\n font-size: 15px;\r\n opacity: 0.9;\r\n }\r\n\r\n .mf-score-bar {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n padding: 15px;\r\n margin-bottom: 20px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-score-item {\r\n color: #8220A5;\r\n font-weight: bold;\r\n font-size: 16px;\r\n }\r\n\r\n .mf-level-selector {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n .mf-level-btn {\r\n background: #8220A5;\r\n color: white;\r\n border: none;\r\n padding: 8px 15px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .mf-level-btn.mf-active {\r\n background: #2ecc71;\r\n transform: scale(1.05);\r\n }\r\n\r\n .mf-level-btn:hover:not(.mf-active) {\r\n background: #9C4DC7;\r\n }\r\n\r\n .mf-game-board {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 25px;\r\n margin-bottom: 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-column {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n padding: 20px;\r\n min-height: 350px;\r\n }\r\n\r\n .mf-column-header {\r\n text-align: center;\r\n margin-bottom: 15px;\r\n padding: 12px;\r\n border-radius: 10px;\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: white;\r\n }\r\n\r\n .mf-masculine-header {\r\n background: linear-gradient(135deg, #3498db, #2980b9);\r\n position: relative;\r\n }\r\n\r\n .mf-masculine-header::before {\r\n content: '\ud83d\udc68';\r\n font-size: 24px;\r\n margin-left: 10px;\r\n }\r\n\r\n .mf-feminine-header {\r\n background: linear-gradient(135deg, #e91e63, #c2185b);\r\n position: relative;\r\n }\r\n\r\n .mf-feminine-header::before {\r\n content: '\ud83d\udc69';\r\n font-size: 24px;\r\n margin-left: 10px;\r\n }\r\n\r\n .mf-words-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n min-height: 250px;\r\n }\r\n\r\n .mf-drop-zone {\r\n border: 2px dashed #8220A5;\r\n border-radius: 10px;\r\n min-height: 200px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .mf-drop-zone.mf-empty::after {\r\n content: attr(data-placeholder);\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: #8220A5;\r\n font-size: 16px;\r\n opacity: 0.7;\r\n text-align: center;\r\n pointer-events: none;\r\n line-height: 1.5;\r\n }\r\n\r\n .mf-masculine-zone.mf-empty::before {\r\n content: '\ud83d\udc68\u200d\ud83d\udcbc';\r\n font-size: 48px;\r\n position: absolute;\r\n top: 30%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n opacity: 0.3;\r\n pointer-events: none;\r\n }\r\n\r\n .mf-feminine-zone.mf-empty::before {\r\n content: '\ud83d\udc69\u200d\ud83d\udcbc';\r\n font-size: 48px;\r\n position: absolute;\r\n top: 30%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n opacity: 0.3;\r\n pointer-events: none;\r\n }\r\n\r\n .mf-drop-zone.mf-drag-over {\r\n background: rgba(130, 32, 165, 0.1);\r\n border-color: #2ecc71;\r\n transform: scale(1.02);\r\n }\r\n\r\n .mf-words-pool {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-pool-title {\r\n color: #8220A5;\r\n font-size: 18px;\r\n font-weight: bold;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .mf-words-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n gap: 12px;\r\n justify-items: center;\r\n }\r\n\r\n .mf-word-card {\r\n background: linear-gradient(135deg, #8220A5, #9C4DC7);\r\n color: white;\r\n padding: 12px 16px;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n cursor: grab;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 12px rgba(130, 32, 165, 0.3);\r\n user-select: none;\r\n text-align: center;\r\n min-width: 100px;\r\n }\r\n\r\n .mf-word-card:hover {\r\n transform: translateY(-3px) scale(1.05);\r\n box-shadow: 0 8px 20px rgba(130, 32, 165, 0.5);\r\n }\r\n\r\n .mf-word-card:active {\r\n cursor: grabbing;\r\n transform: scale(1.1);\r\n }\r\n\r\n .mf-word-card.mf-dragging {\r\n opacity: 0.7;\r\n transform: rotate(5deg) scale(1.1);\r\n z-index: 1000;\r\n }\r\n\r\n .mf-placed-word {\r\n background: linear-gradient(135deg, #8220A5, #9C4DC7);\r\n color: white;\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n font-size: 16px;\r\n text-align: center;\r\n box-shadow: 0 3px 8px rgba(130, 32, 165, 0.3);\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n\r\n .mf-placed-word.mf-correct {\r\n background: linear-gradient(135deg, #2ecc71, #27ae60);\r\n }\r\n\r\n .mf-placed-word.mf-incorrect {\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n animation: mf-shake 0.5s;\r\n }\r\n\r\n @keyframes mf-shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-5px); }\r\n 75% { transform: translateX(5px); }\r\n }\r\n\r\n .mf-remove-btn {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ff4757;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 22px;\r\n height: 22px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n display: none;\r\n line-height: 1;\r\n }\r\n\r\n .mf-placed-word:hover .mf-remove-btn {\r\n display: block;\r\n }\r\n\r\n .mf-controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-btn {\r\n padding: 12px 25px;\r\n border: none;\r\n border-radius: 25px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .mf-check-btn {\r\n background: linear-gradient(135deg, #2ecc71, #27ae60);\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);\r\n }\r\n\r\n .mf-check-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);\r\n }\r\n\r\n .mf-reset-btn {\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);\r\n }\r\n\r\n .mf-reset-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);\r\n }\r\n\r\n .mf-feedback {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n padding: 15px;\r\n margin-top: 15px;\r\n text-align: center;\r\n font-weight: bold;\r\n display: none;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .mf-feedback.mf-show {\r\n display: block;\r\n }\r\n\r\n .mf-feedback.mf-success {\r\n color: #27ae60;\r\n border: 2px solid #2ecc71;\r\n }\r\n\r\n .mf-feedback.mf-error {\r\n color: #c0392b;\r\n border: 2px solid #e74c3c;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .mf-game-board {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n \r\n .mf-score-bar {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n \r\n .mf-words-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\r\n }\r\n \r\n .mf-controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"mf-game-widget\">\r\n <div class=\"mf-game-header\">\r\n <h1 class=\"mf-game-title\">Matching masculine and feminine<\/h1>\r\n <p class=\"mf-game-subtitle\">Drag the words to the correct group.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mf-score-bar\">\r\n <div class=\"mf-level-selector\">\r\n <button class=\"mf-level-btn mf-active\" onclick=\"MFGame.setLevel(1)\">junior<\/button>\r\n <button class=\"mf-level-btn\" onclick=\"MFGame.setLevel(2)\">middle<\/button>\r\n <button class=\"mf-level-btn\" onclick=\"MFGame.setLevel(3)\">advanced<\/button>\r\n <\/div>\r\n <div class=\"mf-score-item\">Level: <span id=\"mf-current-level\">1<\/span><\/div>\r\n <div class=\"mf-score-item\">Points: <span id=\"mf-score\">0<\/span><\/div>\r\n <div class=\"mf-score-item\">Correct: <span id=\"mf-correct\">0<\/span>\/<span id=\"mf-total\">0<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"mf-words-pool\">\r\n <h3 class=\"mf-pool-title\">Words - Drag each word into its group.<\/h3>\r\n <div class=\"mf-words-grid\" id=\"mf-words-grid\">\r\n <!-- \u0633\u064a\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0647\u0646\u0627 -->\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mf-game-board\">\r\n <div class=\"mf-column\">\r\n <div class=\"mf-column-header mf-masculine-header\">masculine<\/div>\r\n <div class=\"mf-drop-zone mf-masculine-zone mf-empty\" id=\"mf-masculine-zone\" data-placeholder=\"\u0627\u0633\u062d\u0628 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0630\u0643\u0631\u0629 \u0647\u0646\u0627\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mf-column\">\r\n <div class=\"mf-column-header mf-feminine-header\">feminine<\/div>\r\n <div class=\"mf-drop-zone mf-feminine-zone mf-empty\" id=\"mf-feminine-zone\" data-placeholder=\"\u0627\u0633\u062d\u0628 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0624\u0646\u062b\u0629 \u0647\u0646\u0627\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mf-controls\">\r\n <button class=\"mf-btn mf-check-btn\" onclick=\"MFGame.checkAnswers()\">Check answers<\/button>\r\n <button class=\"mf-btn mf-reset-btn\" onclick=\"MFGame.resetLevel()\">Re-level<\/button>\r\n <\/div>\r\n\r\n <div class=\"mf-feedback\" id=\"mf-feedback\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const MFGame = {\r\n data: {\r\n 1: [ \/\/ \u0645\u0628\u062a\u062f\u0626\r\n { masculine: \"\u0637\u0627\u0644\u0628\", feminine: \"\u0637\u0627\u0644\u0628\u0629\" },\r\n { masculine: \"\u0645\u0639\u0644\u0645\", feminine: \"\u0645\u0639\u0644\u0645\u0629\" },\r\n { masculine: \"\u0637\u0628\u064a\u0628\", feminine: \"\u0637\u0628\u064a\u0628\u0629\" },\r\n { masculine: \"\u0645\u0647\u0646\u062f\u0633\", feminine: \"\u0645\u0647\u0646\u062f\u0633\u0629\" },\r\n { masculine: \"\u0643\u0627\u062a\u0628\", feminine: \"\u0643\u0627\u062a\u0628\u0629\" }\r\n ],\r\n 2: [ \/\/ \u0645\u062a\u0648\u0633\u0637\r\n { masculine: \"\u0639\u0627\u0645\u0644\", feminine: \"\u0639\u0627\u0645\u0644\u0629\" },\r\n { masculine: \"\u0628\u0627\u0626\u0639\", feminine: \"\u0628\u0627\u0626\u0639\u0629\" },\r\n { masculine: \"\u0631\u0627\u0643\u0628\", feminine: \"\u0631\u0627\u0643\u0628\u0629\" },\r\n { masculine: \"\u0633\u0627\u0626\u0642\", feminine: \"\u0633\u0627\u0626\u0642\u0629\" },\r\n { masculine: \"\u0637\u0628\u0627\u062e\", feminine: \"\u0637\u0628\u0627\u062e\u0629\" },\r\n { masculine: \"\u062e\u064a\u0627\u0637\", feminine: \"\u062e\u064a\u0627\u0637\u0629\" }\r\n ],\r\n 3: [ \/\/ \u0645\u062a\u0642\u062f\u0645\r\n { masculine: \"\u0645\u062d\u0627\u0645\u064a\", feminine: \"\u0645\u062d\u0627\u0645\u064a\u0629\" },\r\n { masculine: \"\u0635\u062d\u0641\u064a\", feminine: \"\u0635\u062d\u0641\u064a\u0629\" },\r\n { masculine: \"\u0645\u062a\u0631\u062c\u0645\", feminine: \"\u0645\u062a\u0631\u062c\u0645\u0629\" },\r\n { masculine: \"\u0645\u0645\u0631\u0636\", feminine: \"\u0645\u0645\u0631\u0636\u0629\" },\r\n { masculine: \"\u0631\u0633\u0627\u0645\", feminine: \"\u0631\u0633\u0627\u0645\u0629\" },\r\n { masculine: \"\u0645\u062f\u064a\u0631\", feminine: \"\u0645\u062f\u064a\u0631\u0629\" },\r\n { masculine: \"\u0623\u0633\u062a\u0627\u0630\", feminine: \"\u0623\u0633\u062a\u0627\u0630\u0629\" }\r\n ]\r\n },\r\n\r\n currentLevel: 1,\r\n score: 0,\r\n correctAnswers: 0,\r\n totalWords: 0,\r\n draggedElement: null,\r\n\r\n init() {\r\n this.setupEventListeners();\r\n this.resetLevel();\r\n },\r\n\r\n setupEventListeners() {\r\n const dropZones = document.querySelectorAll('.mf-drop-zone');\r\n dropZones.forEach(zone => {\r\n zone.addEventListener('dragover', this.handleDragOver.bind(this));\r\n zone.addEventListener('drop', this.handleDrop.bind(this));\r\n zone.addEventListener('dragleave', this.handleDragLeave.bind(this));\r\n });\r\n },\r\n\r\n setLevel(level) {\r\n this.currentLevel = level;\r\n document.querySelectorAll('.mf-level-btn').forEach(btn => btn.classList.remove('mf-active'));\r\n event.target.classList.add('mf-active');\r\n document.getElementById('mf-current-level').textContent = level;\r\n this.resetLevel();\r\n },\r\n\r\n resetLevel() {\r\n this.score = 0;\r\n this.correctAnswers = 0;\r\n this.clearDropZones();\r\n this.generateWords();\r\n this.updateScore();\r\n this.hideFeedback();\r\n },\r\n\r\n generateWords() {\r\n const wordsGrid = document.getElementById('mf-words-grid');\r\n wordsGrid.innerHTML = '';\r\n \r\n const levelData = this.data[this.currentLevel];\r\n const allWords = [];\r\n \r\n levelData.forEach(pair => {\r\n allWords.push({ word: pair.masculine, gender: 'masculine' });\r\n allWords.push({ word: pair.feminine, gender: 'feminine' });\r\n });\r\n\r\n \/\/ \u062e\u0644\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\r\n allWords.sort(() => Math.random() - 0.5);\r\n this.totalWords = allWords.length;\r\n\r\n allWords.forEach(item => {\r\n const wordCard = document.createElement('div');\r\n wordCard.className = 'mf-word-card';\r\n wordCard.textContent = item.word;\r\n wordCard.draggable = true;\r\n wordCard.dataset.gender = item.gender;\r\n wordCard.dataset.word = item.word;\r\n\r\n wordCard.addEventListener('dragstart', this.handleDragStart.bind(this));\r\n wordCard.addEventListener('dragend', this.handleDragEnd.bind(this));\r\n\r\n wordsGrid.appendChild(wordCard);\r\n });\r\n },\r\n\r\n handleDragStart(e) {\r\n this.draggedElement = e.target;\r\n e.target.classList.add('mf-dragging');\r\n },\r\n\r\n handleDragEnd(e) {\r\n e.target.classList.remove('mf-dragging');\r\n this.draggedElement = null;\r\n },\r\n\r\n handleDragOver(e) {\r\n e.preventDefault();\r\n e.currentTarget.classList.add('mf-drag-over');\r\n },\r\n\r\n handleDragLeave(e) {\r\n e.currentTarget.classList.remove('mf-drag-over');\r\n },\r\n\r\n handleDrop(e) {\r\n e.preventDefault();\r\n e.currentTarget.classList.remove('mf-drag-over');\r\n\r\n if (this.draggedElement) {\r\n const dropZone = e.currentTarget;\r\n const expectedGender = dropZone.id === 'mf-masculine-zone' ? 'masculine' : 'feminine';\r\n \r\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0641\u0627\u0631\u063a \u0648\u0627\u0644\u0640 classes\r\n dropZone.classList.remove('mf-empty', 'mf-masculine-zone', 'mf-feminine-zone');\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0648\u0636\u0648\u0639\u0629\r\n const placedWord = document.createElement('div');\r\n placedWord.className = 'mf-placed-word';\r\n placedWord.textContent = this.draggedElement.textContent;\r\n placedWord.dataset.gender = this.draggedElement.dataset.gender;\r\n placedWord.dataset.word = this.draggedElement.dataset.word;\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0632\u0631 \u0627\u0644\u0625\u0632\u0627\u0644\u0629\r\n const removeBtn = document.createElement('button');\r\n removeBtn.className = 'mf-remove-btn';\r\n removeBtn.innerHTML = '\u00d7';\r\n removeBtn.onclick = () => this.removeWord(placedWord, this.draggedElement);\r\n placedWord.appendChild(removeBtn);\r\n\r\n dropZone.appendChild(placedWord);\r\n\r\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0623\u0635\u0644\u064a\u0629\r\n this.draggedElement.style.display = 'none';\r\n }\r\n },\r\n\r\n removeWord(placedWord, originalWord) {\r\n const dropZone = placedWord.parentNode;\r\n placedWord.remove();\r\n\r\n \/\/ \u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0623\u0635\u0644\u064a\u0629\r\n originalWord.style.display = 'block';\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0641\u0627\u0631\u063a \u0625\u0630\u0627 \u0644\u0645 \u062a\u0639\u062f \u0647\u0646\u0627\u0643 \u0643\u0644\u0645\u0627\u062a\r\n if (dropZone.children.length === 0) {\r\n dropZone.classList.add('mf-empty');\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0640 classes \u0627\u0644\u0645\u062e\u0635\u0635\u0629\r\n if (dropZone.id === 'mf-masculine-zone') {\r\n dropZone.classList.add('mf-masculine-zone');\r\n } else if (dropZone.id === 'mf-feminine-zone') {\r\n dropZone.classList.add('mf-feminine-zone');\r\n }\r\n }\r\n },\r\n\r\n checkAnswers() {\r\n const masculineZone = document.getElementById('mf-masculine-zone');\r\n const feminineZone = document.getElementById('mf-feminine-zone');\r\n \r\n let correctCount = 0;\r\n let totalPlaced = 0;\r\n\r\n \/\/ \u0641\u062d\u0635 \u0627\u0644\u0645\u0630\u0643\u0631\r\n masculineZone.querySelectorAll('.mf-placed-word').forEach(word => {\r\n totalPlaced++;\r\n if (word.dataset.gender === 'masculine') {\r\n word.classList.add('mf-correct');\r\n correctCount++;\r\n } else {\r\n word.classList.add('mf-incorrect');\r\n }\r\n });\r\n\r\n \/\/ \u0641\u062d\u0635 \u0627\u0644\u0645\u0624\u0646\u062b\r\n feminineZone.querySelectorAll('.mf-placed-word').forEach(word => {\r\n totalPlaced++;\r\n if (word.dataset.gender === 'feminine') {\r\n word.classList.add('mf-correct');\r\n correctCount++;\r\n } else {\r\n word.classList.add('mf-incorrect');\r\n }\r\n });\r\n\r\n this.correctAnswers = correctCount;\r\n this.score = correctCount * 10;\r\n this.updateScore();\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u062a\u0639\u0644\u064a\u0642\r\n if (correctCount === totalPlaced && totalPlaced > 0) {\r\n this.showFeedback('\u0645\u0645\u062a\u0627\u0632! \u062c\u0645\u064a\u0639 \u0625\u062c\u0627\u0628\u0627\u062a\u0643 \u0635\u062d\u064a\u062d\u0629! \ud83c\udf89', 'success');\r\n } \r\n else if (correctCount > (totalPlaced - correctCount)) {\r\n this.showFeedback(`\u0623\u062d\u0633\u0646\u062a! ${correctCount} \u0645\u0646 ${totalPlaced} \u0625\u062c\u0627\u0628\u0627\u062a \u0635\u062d\u064a\u062d\u0629`, 'success');\r\n }\r\n else if (correctCount > 0) {\r\n this.showFeedback(`! ${correctCount} \u0645\u0646 ${totalPlaced} \u0625\u062c\u0627\u0628\u0627\u062a \u0635\u062d\u064a\u062d\u0629`, 'error');\r\n } else if (totalPlaced > 0) {\r\n this.showFeedback('\u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649! \ud83d\udcaa', 'error');\r\n } else {\r\n this.showFeedback('\u0636\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0641\u064a \u0645\u062c\u0645\u0648\u0639\u0627\u062a\u0647\u0627 \u0623\u0648\u0644\u0627\u064b!', 'error');\r\n }\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0628\u0639\u062f 3 \u062b\u0648\u0627\u0646\u064d\r\n setTimeout(() => {\r\n document.querySelectorAll('.mf-placed-word').forEach(word => {\r\n word.classList.remove('mf-correct', 'mf-incorrect');\r\n });\r\n }, 3000);\r\n },\r\n\r\n clearDropZones() {\r\n const zones = document.querySelectorAll('.mf-drop-zone');\r\n zones.forEach(zone => {\r\n zone.innerHTML = '';\r\n zone.classList.add('mf-empty');\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0640 classes \u0627\u0644\u0645\u062e\u0635\u0635\u0629\r\n if (zone.id === 'mf-masculine-zone') {\r\n zone.classList.add('mf-masculine-zone');\r\n } else if (zone.id === 'mf-feminine-zone') {\r\n zone.classList.add('mf-feminine-zone');\r\n }\r\n });\r\n\r\n \/\/ \u0625\u0638\u0647\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\r\n document.querySelectorAll('.mf-word-card').forEach(word => {\r\n word.style.display = 'block';\r\n });\r\n },\r\n\r\n updateScore() {\r\n document.getElementById('mf-score').textContent = this.score;\r\n document.getElementById('mf-correct').textContent = this.correctAnswers;\r\n document.getElementById('mf-total').textContent = this.totalWords;\r\n },\r\n\r\n showFeedback(message, type) {\r\n const feedback = document.getElementById('mf-feedback');\r\n feedback.textContent = message;\r\n feedback.className = `mf-feedback mf-show mf-${type}`;\r\n },\r\n\r\n hideFeedback() {\r\n document.getElementById('mf-feedback').classList.remove('mf-show');\r\n }\r\n };\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0644\u0639\u0628\u0629 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0645\u064a\u0644\r\n document.addEventListener('DOMContentLoaded', () => {\r\n MFGame.init();\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>\u0645\u0637\u0627\u0628\u0642\u0629 \u0627\u0644\u0645\u0630\u0643\u0631 \u0648\u0627\u0644\u0645\u0624\u0646\u062b \u0645\u0637\u0627\u0628\u0642\u0629 \u0627\u0644\u0645\u0630\u0643\u0631 \u0648\u0627\u0644\u0645\u0624\u0646\u062b \u0627\u0633\u062d\u0628 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0645\u0628\u062a\u062f\u0626 \u0645\u062a\u0648\u0633\u0637 \u0645\u062a\u0642\u062f\u0645 \u0627\u0644\u0645\u0633\u062a\u0648\u0649: 1 \u0627\u0644\u0646\u0642\u0627\u0637: 0 \u0627\u0644\u0635\u062d\u064a\u062d: 0\/0 \u0627\u0644\u0643\u0644\u0645\u0627\u062a – \u0627\u0633\u062d\u0628 \u0643\u0644 \u0643\u0644\u0645\u0629 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u062a\u0647\u0627 \u0627\u0644\u0645\u0630\u0643\u0631 \u0627\u0644\u0645\u0624\u0646\u062b \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<\/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-15203","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15203","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=15203"}],"version-history":[{"count":11,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15203\/revisions"}],"predecessor-version":[{"id":15214,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15203\/revisions\/15214"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}