Crosswords for children<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n \r\n padding: 20px;\r\n direction: rtl;\r\n }\r\n\r\n .container {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n overflow: hidden;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8, #8220A5);\r\n color: white;\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 28px;\r\n font-weight: bold;\r\n }\r\n\r\n .game-area {\r\n display: flex;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n\r\n .crossword-grid {\r\n flex: 1;\r\n display: grid;\r\n grid-template-columns: repeat(8, 50px);\r\n grid-template-rows: repeat(8, 50px);\r\n gap: 2px;\r\n justify-content: center;\r\n background: #f0f0f0;\r\n padding: 20px;\r\n border-radius: 15px;\r\n }\r\n\r\n .cell {\r\n width: 50px;\r\n height: 50px;\r\n border: 2px solid #ddd;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n font-weight: bold;\r\n background: white;\r\n position: relative;\r\n }\r\n\r\n .cell.black {\r\n background: #333;\r\n border-color: #333;\r\n }\r\n\r\n .cell.active {\r\n background: #FFE4B5;\r\n border-color: #FF8C00;\r\n }\r\n\r\n .cell.correct {\r\n background: #90EE90;\r\n border-color: #32CD32;\r\n }\r\n\r\n .cell input {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n background: transparent;\r\n text-align: center;\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n .cell input:focus {\r\n outline: none;\r\n background: #FFE4B5;\r\n }\r\n\r\n .number {\r\n position: absolute;\r\n top: 2px;\r\n right: 2px;\r\n font-size: 12px;\r\n color: #666;\r\n font-weight: bold;\r\n }\r\n\r\n .clues-panel {\r\n flex: 0 0 350px;\r\n background: #f8f9fa;\r\n padding: 20px;\r\n border-radius: 15px;\r\n overflow-y: auto;\r\n max-height: 600px;\r\n }\r\n\r\n .clue-section {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .clue-title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: #333;\r\n margin-bottom: 15px;\r\n text-align: center;\r\n padding: 10px;\r\n background: linear-gradient(45deg, #FF6B6B, #4ECDC4);\r\n color: white;\r\n border-radius: 10px;\r\n }\r\n\r\n .clue-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n padding: 10px;\r\n background: white;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n cursor: pointer;\r\n transition: transform 0.2s;\r\n }\r\n .header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n\r\n}\r\n\r\n\r\n\r\n .clue-item:hover {\r\n transform: translateX(-5px);\r\n background: #f0f8ff;\r\n }\r\n\r\n .clue-item.active {\r\n background: #e6f7ff;\r\n border-left: 4px solid #4ECDC4;\r\n }\r\n\r\n .clue-number {\r\n width: 30px;\r\n height: 30px;\r\n background: #4ECDC4;\r\n color: white;\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 margin-left: 10px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .clue-text {\r\n flex: 1;\r\n font-size: 16px;\r\n color: #333;\r\n }\r\n\r\n .controls {\r\n text-align: center;\r\n padding: 20px;\r\n background: #f8f9fa;\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n height: 60px;\r\n background: linear-gradient(45deg, #FF6B6B, #4ECDC4);\r\n color: white;\r\n border: none;\r\n padding: 12px 25px;\r\n font-size: 25px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n transition: transform 0.2s;\r\n min-width: 150px;\r\n }\r\n\r\n .btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n }\r\n\r\n .btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .btn-secondary {\r\n background: linear-gradient(45deg, #6b8cff, #4e9dc4);\r\n }\r\n\r\n .message {\r\n text-align: center;\r\n padding: 15px;\r\n margin: 20px;\r\n border-radius: 10px;\r\n font-weight: bold;\r\n display: none;\r\n animation: fadeIn 0.5s;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .message.success {\r\n background: #d4edda;\r\n color: #155724;\r\n border: 1px solid #c3e6cb;\r\n }\r\n\r\n .message.error {\r\n background: #f8d7da;\r\n color: #721c24;\r\n border: 1px solid #f5c6cb;\r\n }\r\n\r\n .confetti {\r\n position: fixed;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #f00;\r\n border-radius: 50%;\r\n animation: fall 5s linear forwards;\r\n z-index: 1000;\r\n }\r\n\r\n @keyframes fall {\r\n to {\r\n transform: translateY(100vh) rotate(720deg);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .game-area {\r\n flex-direction: column;\r\n }\r\n \r\n .crossword-grid {\r\n grid-template-columns: repeat(8, 40px);\r\n grid-template-rows: repeat(8, 40px);\r\n }\r\n \r\n .cell {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 20px;\r\n }\r\n \r\n .clues-panel {\r\n flex: 1;\r\n max-height: none;\r\n }\r\n \r\n .controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .btn {\r\n width: 100%;\r\n max-width: 250px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n\r\n <span>Crosswords for children<\/span>\r\n<\/div>\r\n\r\n \r\n <div class=\"message\" id=\"message\"><\/div>\r\n \r\n <div class=\"game-area\">\r\n <div class=\"crossword-grid\" id=\"grid\"><\/div>\r\n \r\n <div class=\"clues-panel\">\r\n <div class=\"clue-section\">\r\n <div class=\"clue-title\">Horizontal \u2190<\/div>\r\n <div class=\"clue-item\" data-number=\"1\">\r\n <div class=\"clue-number\">1<\/div>\r\n <div class=\"clue-text\">A tool we use to write on paper<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"3\">\r\n <div class=\"clue-number\">3<\/div>\r\n <div class=\"clue-text\">a person who takes care of the land and produces crops<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"5\">\r\n <div class=\"clue-number\">5<\/div>\r\n <div class=\"clue-text\">Lights up the day and gives warmth<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"clue-section\">\r\n <div class=\"clue-title\">Vertical \u2193<\/div>\r\n <div class=\"clue-item\" data-number=\"2\">\r\n <div class=\"clue-number\">2<\/div>\r\n <div class=\"clue-text\">A rural animal that works in transportation<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"4\">\r\n <div class=\"clue-number\">4<\/div>\r\n <div class=\"clue-text\">Fun activity for kids<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"6\">\r\n <div class=\"clue-number\">6<\/div>\r\n <div class=\"clue-text\">Delicious red fruit<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"controls\">\r\n <button class=\"btn\" onclick=\"checkAnswers()\">Check answers<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"clearGrid()\">Clear all<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showHint()\">help<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game configuration\r\n const GRID_SIZE = 8;\r\n const answers = {\r\n 1: { word: '\u0642\u0644\u0645', row: 1, col: 2, direction: 'horizontal', clue: '\u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642' },\r\n 2: { word: '\u062d\u0645\u0627\u0631', row: 0, col: 4, direction: 'vertical', clue: '\u062d\u064a\u0648\u0627\u0646 \u0631\u064a\u0641\u064a \u064a\u0639\u0645\u0644 \u0641\u064a \u0627\u0644\u0646\u0642\u0644' },\r\n 3: { word: '\u0645\u0632\u0627\u0631\u0639', row: 3, col: 1, direction: 'horizontal', clue: '\u0634\u062e\u0635 \u064a\u0639\u062a\u0646\u064a \u0628\u0627\u0644\u0623\u0631\u0636 \u0648\u064a\u0646\u062a\u062c \u0627\u0644\u0645\u062d\u0627\u0635\u064a\u0644' },\r\n 4: { word: '\u0644\u0639\u0628', row: 2, col: 5, direction: 'vertical', clue: '\u0646\u0634\u0627\u0637 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0644\u0644\u0645\u0631\u062d' },\r\n 5: { word: '\u0634\u0645\u0633', row: 5, col: 0, direction: 'horizontal', clue: '\u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642' },\r\n 6: { word: '\u062a\u0641\u0627\u062d', row: 4, col: 6, direction: 'vertical', clue: '\u0641\u0627\u0643\u0647\u0629 \u062d\u0645\u0631\u0627\u0621 \u0644\u0630\u064a\u0630\u0629' }\r\n };\r\n\r\n let grid = [];\r\n let currentInput = null;\r\n let currentDirection = 'horizontal';\r\n let currentActiveClue = null;\r\n\r\n function initializeGrid() {\r\n const gridElement = document.getElementById('grid');\r\n gridElement.innerHTML = '';\r\n grid = [];\r\n\r\n \/\/ Initialize empty grid\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n grid[i] = [];\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n grid[i][j] = { type: 'black', value: '', element: null, wordNumber: null };\r\n }\r\n }\r\n\r\n \/\/ Set active cells based on answers\r\n Object.entries(answers).forEach(([num, answer]) => {\r\n const { row, col, direction, word } = answer;\r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n if (r < GRID_SIZE && c < GRID_SIZE) {\r\n grid[r][c].type = 'active';\r\n \/\/ Store which word this cell belongs to\r\n if (!grid[r][c].wordNumbers) {\r\n grid[r][c].wordNumbers = [];\r\n }\r\n grid[r][c].wordNumbers = grid[r][c].wordNumbers || [];\r\n grid[r][c].wordNumbers.push(num);\r\n }\r\n }\r\n });\r\n\r\n \/\/ Create DOM elements\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n const cell = document.createElement('div');\r\n cell.className = `cell ${grid[i][j].type}`;\r\n \r\n if (grid[i][j].type === 'active') {\r\n const input = document.createElement('input');\r\n input.type = 'text';\r\n input.maxLength = 1;\r\n input.addEventListener('input', (e) => handleInput(e, i, j));\r\n input.addEventListener('keydown', (e) => handleKeydown(e, i, j));\r\n input.addEventListener('focus', () => {\r\n currentInput = {row: i, col: j};\r\n highlightClueForCell(i, j);\r\n });\r\n \r\n cell.appendChild(input);\r\n grid[i][j].element = input;\r\n\r\n \/\/ Add numbers for word starts\r\n Object.entries(answers).forEach(([num, answer]) => {\r\n if (answer.row === i && answer.col === j) {\r\n const numberDiv = document.createElement('div');\r\n numberDiv.className = 'number';\r\n numberDiv.textContent = num;\r\n cell.appendChild(numberDiv);\r\n }\r\n });\r\n }\r\n \r\n gridElement.appendChild(cell);\r\n }\r\n }\r\n\r\n \/\/ Set up clue click handlers\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.addEventListener('click', function() {\r\n const clueNum = this.getAttribute('data-number');\r\n highlightClue(clueNum);\r\n });\r\n });\r\n }\r\n\r\n function handleInput(e, row, col) {\r\n const value = e.target.value;\r\n if (value && \/[\\u0600-\\u06FF]\/.test(value)) {\r\n grid[row][col].value = value;\r\n e.target.value = value;\r\n moveToNextCell(row, col);\r\n } else {\r\n e.target.value = '';\r\n grid[row][col].value = '';\r\n }\r\n }\r\n\r\n function handleKeydown(e, row, col) {\r\n switch(e.key) {\r\n case 'ArrowRight':\r\n e.preventDefault();\r\n moveInDirection(row, col, 0, -1); \/\/ Left in RTL\r\n break;\r\n case 'ArrowLeft':\r\n e.preventDefault();\r\n moveInDirection(row, col, 0, 1); \/\/ Right in RTL\r\n break;\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n moveInDirection(row, col, 1, 0); \/\/ Down\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n moveInDirection(row, col, -1, 0); \/\/ Up\r\n break;\r\n case 'Backspace':\r\n if (!e.target.value) {\r\n e.preventDefault();\r\n moveToPrevious(row, col);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n function moveInDirection(row, col, rowDelta, colDelta) {\r\n let newRow = row + rowDelta;\r\n let newCol = col + colDelta;\r\n \r\n \/\/ Find next active cell in the specified direction\r\n while (newRow >= 0 && newRow < GRID_SIZE && newCol >= 0 && newCol < GRID_SIZE) {\r\n if (grid[newRow][newCol].type === 'active') {\r\n grid[newRow][newCol].element.focus();\r\n return;\r\n }\r\n newRow += rowDelta;\r\n newCol += colDelta;\r\n }\r\n }\r\n\r\n function moveToNextCell(row, col) {\r\n if (!currentActiveClue) {\r\n \/\/ Default movement: right then down\r\n moveInDirection(row, col, 0, 1);\r\n return;\r\n }\r\n\r\n const answer = answers[currentActiveClue];\r\n if (answer.direction === 'horizontal') {\r\n \/\/ Move right within the word\r\n const nextCol = col + 1;\r\n const maxCol = answer.col + answer.word.length - 1;\r\n if (nextCol <= maxCol && nextCol < GRID_SIZE && grid[row][nextCol].type === 'active') {\r\n grid[row][nextCol].element.focus();\r\n } else {\r\n \/\/ End of word, move to next word or general navigation\r\n moveInDirection(row, col, 0, 1);\r\n }\r\n } else {\r\n \/\/ Move down within the word\r\n const nextRow = row + 1;\r\n const maxRow = answer.row + answer.word.length - 1;\r\n if (nextRow <= maxRow && nextRow < GRID_SIZE && grid[nextRow][col].type === 'active') {\r\n grid[nextRow][col].element.focus();\r\n } else {\r\n \/\/ End of word, move to next word or general navigation\r\n moveInDirection(row, col, 1, 0);\r\n }\r\n }\r\n }\r\n\r\n function moveToPrevious(row, col) {\r\n if (!currentActiveClue) {\r\n \/\/ Default movement: left then up\r\n moveInDirection(row, col, 0, -1);\r\n return;\r\n }\r\n\r\n const answer = answers[currentActiveClue];\r\n if (answer.direction === 'horizontal') {\r\n \/\/ Move left within the word\r\n const prevCol = col - 1;\r\n if (prevCol >= answer.col && prevCol >= 0 && grid[row][prevCol].type === 'active') {\r\n grid[row][prevCol].element.focus();\r\n } else {\r\n \/\/ Beginning of word, move to previous word or general navigation\r\n moveInDirection(row, col, 0, -1);\r\n }\r\n } else {\r\n \/\/ Move up within the word\r\n const prevRow = row - 1;\r\n if (prevRow >= answer.row && prevRow >= 0 && grid[prevRow][col].type === 'active') {\r\n grid[prevRow][col].element.focus();\r\n } else {\r\n \/\/ Beginning of word, move to previous word or general navigation\r\n moveInDirection(row, col, -1, 0);\r\n }\r\n }\r\n }\r\n\r\n function highlightClue(clueNum) {\r\n \/\/ Remove active class from all clues\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n \r\n \/\/ Add active class to selected clue\r\n const clueItem = document.querySelector(`.clue-item[data-number=\"${clueNum}\"]`);\r\n if (clueItem) {\r\n clueItem.classList.add('active');\r\n currentActiveClue = clueNum;\r\n \r\n \/\/ Focus on the first cell of the clue\r\n const answer = answers[clueNum];\r\n grid[answer.row][answer.col].element.focus();\r\n }\r\n }\r\n\r\n function highlightClueForCell(row, col) {\r\n const cellWordNumbers = grid[row][col].wordNumbers;\r\n if (cellWordNumbers && cellWordNumbers.length > 0) {\r\n \/\/ If no current active clue or current clue doesn't include this cell\r\n if (!currentActiveClue || !cellWordNumbers.includes(currentActiveClue)) {\r\n \/\/ Prefer horizontal clues if available\r\n const horizontalClue = cellWordNumbers.find(num => answers[num].direction === 'horizontal');\r\n if (horizontalClue) {\r\n currentActiveClue = horizontalClue;\r\n } else {\r\n currentActiveClue = cellWordNumbers[0];\r\n }\r\n \r\n \/\/ Update UI\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n const clueItem = document.querySelector(`.clue-item[data-number=\"${currentActiveClue}\"]`);\r\n if (clueItem) {\r\n clueItem.classList.add('active');\r\n }\r\n }\r\n }\r\n }\r\n\r\n function checkAnswers() {\r\n let correctCount = 0;\r\n let totalWords = Object.keys(answers).length;\r\n \r\n \/\/ First remove all correct classes\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n if (grid[i][j].element) {\r\n grid[i][j].element.parentElement.classList.remove('correct');\r\n }\r\n }\r\n }\r\n \r\n Object.entries(answers).forEach(([num, answer]) => {\r\n const { word, row, col, direction } = answer;\r\n let userWord = '';\r\n let allCells = [];\r\n \r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n userWord += grid[r][c].value || '';\r\n allCells.push({row: r, col: c});\r\n }\r\n \r\n if (userWord === word) {\r\n correctCount++;\r\n \/\/ Mark cells as correct\r\n allCells.forEach(cell => {\r\n if (grid[cell.row][cell.col].element) {\r\n grid[cell.row][cell.col].element.parentElement.classList.add('correct');\r\n }\r\n });\r\n }\r\n });\r\n \r\n showMessage(correctCount, totalWords);\r\n \r\n if (correctCount === totalWords) {\r\n celebrate();\r\n }\r\n }\r\n\r\n function showMessage(correct, total) {\r\n const messageElement = document.getElementById('message');\r\n messageElement.style.display = 'block';\r\n \r\n if (correct === total) {\r\n messageElement.className = 'message success';\r\n messageElement.textContent = '\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! \u0644\u0642\u062f \u062d\u0644\u0644\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d!';\r\n } else {\r\n messageElement.className = 'message error';\r\n messageElement.textContent = `\u0644\u062f\u064a\u0643 ${correct} \u0645\u0646 ${total} \u0643\u0644\u0645\u0627\u062a \u0635\u062d\u064a\u062d\u0629. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649!`;\r\n }\r\n \r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n function clearGrid() {\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n if (grid[i][j].type === 'active') {\r\n grid[i][j].value = '';\r\n if (grid[i][j].element) {\r\n grid[i][j].element.value = '';\r\n grid[i][j].element.parentElement.classList.remove('correct');\r\n }\r\n }\r\n }\r\n }\r\n document.getElementById('message').style.display = 'none';\r\n \/\/ Focus on first word\r\n const firstAnswer = Object.values(answers)[0];\r\n grid[firstAnswer.row][firstAnswer.col].element.focus();\r\n }\r\n\r\n function showHint() {\r\n if (!currentActiveClue) {\r\n const messageElement = document.getElementById('message');\r\n messageElement.className = 'message error';\r\n messageElement.textContent = '\u064a\u0631\u062c\u0649 \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0625\u062d\u062f\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0623\u0648\u0644\u0627\u064b';\r\n messageElement.style.display = 'block';\r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 3000);\r\n return;\r\n }\r\n \r\n const answer = answers[currentActiveClue];\r\n const { word, row, col, direction } = answer;\r\n \r\n \/\/ Find first empty cell in this word\r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n \r\n if (!grid[r][c].value) {\r\n grid[r][c].value = word[i];\r\n grid[r][c].element.value = word[i];\r\n grid[r][c].element.focus();\r\n return;\r\n }\r\n }\r\n \r\n \/\/ If all cells are filled\r\n const messageElement = document.getElementById('message');\r\n messageElement.className = 'message error';\r\n messageElement.textContent = '\u0647\u0630\u0647 \u0627\u0644\u0643\u0644\u0645\u0629 \u0645\u0643\u062a\u0645\u0644\u0629 \u0628\u0627\u0644\u0641\u0639\u0644!';\r\n messageElement.style.display = 'block';\r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 3000);\r\n }\r\n\r\n function celebrate() {\r\n \/\/ Create confetti effect\r\n for (let i = 0; i < 100; i++) {\r\n createConfetti();\r\n }\r\n }\r\n\r\n function createConfetti() {\r\n const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\r\n confetti.style.width = (Math.random() * 10 + 5) + 'px';\r\n confetti.style.height = (Math.random() * 10 + 5) + 'px';\r\n confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n document.body.appendChild(confetti);\r\n \r\n \/\/ Remove confetti after animation\r\n setTimeout(() => {\r\n confetti.remove();\r\n }, 5000);\r\n }\r\n\r\n \/\/ Initialize the game when page loads\r\n window.addEventListener('DOMContentLoaded', () => {\r\n initializeGrid();\r\n \/\/ Focus on first word\r\n setTimeout(() => {\r\n const firstAnswer = Object.values(answers)[0];\r\n grid[firstAnswer.row][firstAnswer.col].element.focus();\r\n }, 100);\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>\u0643\u0644\u0645\u0627\u062a \u0645\u062a\u0642\u0627\u0637\u0639\u0629 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0643\u0644\u0645\u0627\u062a \u0645\u062a\u0642\u0627\u0637\u0639\u0629 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0623\u0641\u0642\u064a \u2190 1 \u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642 3 \u0634\u062e\u0635 \u064a\u0639\u062a\u0646\u064a \u0628\u0627\u0644\u0623\u0631\u0636 \u0648\u064a\u0646\u062a\u062c \u0627\u0644\u0645\u062d\u0627\u0635\u064a\u0644 5 \u062a\u0636\u064a\u0621 \u0627\u0644\u0646\u0647\u0627\u0631 \u0648\u062a\u0639\u0637\u064a \u0627\u0644\u062f\u0641\u0621 \u0639\u0645\u0648\u062f\u064a \u2193 2 \u062d\u064a\u0648\u0627\u0646 \u0631\u064a\u0641\u064a \u064a\u0639\u0645\u0644 \u0641\u064a \u0627\u0644\u0646\u0642\u0644 4 \u0646\u0634\u0627\u0637 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0644\u0644\u0645\u0631\u062d 6 \u0641\u0627\u0643\u0647\u0629 \u062d\u0645\u0631\u0627\u0621 \u0644\u0630\u064a\u0630\u0629 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0627\u062a \u0645\u0633\u062d \u0627\u0644\u0643\u0644 \u0645\u0633\u0627\u0639\u062f\u0629<\/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-15288","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288","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=15288"}],"version-history":[{"count":7,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288\/revisions"}],"predecessor-version":[{"id":15299,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288\/revisions\/15299"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Crosswords for children<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n \r\n padding: 20px;\r\n direction: rtl;\r\n }\r\n\r\n .container {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n overflow: hidden;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #8220A5, #9c3db8, #8220A5);\r\n color: white;\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 28px;\r\n font-weight: bold;\r\n }\r\n\r\n .game-area {\r\n display: flex;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n\r\n .crossword-grid {\r\n flex: 1;\r\n display: grid;\r\n grid-template-columns: repeat(8, 50px);\r\n grid-template-rows: repeat(8, 50px);\r\n gap: 2px;\r\n justify-content: center;\r\n background: #f0f0f0;\r\n padding: 20px;\r\n border-radius: 15px;\r\n }\r\n\r\n .cell {\r\n width: 50px;\r\n height: 50px;\r\n border: 2px solid #ddd;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n font-weight: bold;\r\n background: white;\r\n position: relative;\r\n }\r\n\r\n .cell.black {\r\n background: #333;\r\n border-color: #333;\r\n }\r\n\r\n .cell.active {\r\n background: #FFE4B5;\r\n border-color: #FF8C00;\r\n }\r\n\r\n .cell.correct {\r\n background: #90EE90;\r\n border-color: #32CD32;\r\n }\r\n\r\n .cell input {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n background: transparent;\r\n text-align: center;\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n .cell input:focus {\r\n outline: none;\r\n background: #FFE4B5;\r\n }\r\n\r\n .number {\r\n position: absolute;\r\n top: 2px;\r\n right: 2px;\r\n font-size: 12px;\r\n color: #666;\r\n font-weight: bold;\r\n }\r\n\r\n .clues-panel {\r\n flex: 0 0 350px;\r\n background: #f8f9fa;\r\n padding: 20px;\r\n border-radius: 15px;\r\n overflow-y: auto;\r\n max-height: 600px;\r\n }\r\n\r\n .clue-section {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .clue-title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: #333;\r\n margin-bottom: 15px;\r\n text-align: center;\r\n padding: 10px;\r\n background: linear-gradient(45deg, #FF6B6B, #4ECDC4);\r\n color: white;\r\n border-radius: 10px;\r\n }\r\n\r\n .clue-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n padding: 10px;\r\n background: white;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n cursor: pointer;\r\n transition: transform 0.2s;\r\n }\r\n .header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n\r\n}\r\n\r\n\r\n\r\n .clue-item:hover {\r\n transform: translateX(-5px);\r\n background: #f0f8ff;\r\n }\r\n\r\n .clue-item.active {\r\n background: #e6f7ff;\r\n border-left: 4px solid #4ECDC4;\r\n }\r\n\r\n .clue-number {\r\n width: 30px;\r\n height: 30px;\r\n background: #4ECDC4;\r\n color: white;\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 margin-left: 10px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .clue-text {\r\n flex: 1;\r\n font-size: 16px;\r\n color: #333;\r\n }\r\n\r\n .controls {\r\n text-align: center;\r\n padding: 20px;\r\n background: #f8f9fa;\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n height: 60px;\r\n background: linear-gradient(45deg, #FF6B6B, #4ECDC4);\r\n color: white;\r\n border: none;\r\n padding: 12px 25px;\r\n font-size: 25px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n transition: transform 0.2s;\r\n min-width: 150px;\r\n }\r\n\r\n .btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n }\r\n\r\n .btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .btn-secondary {\r\n background: linear-gradient(45deg, #6b8cff, #4e9dc4);\r\n }\r\n\r\n .message {\r\n text-align: center;\r\n padding: 15px;\r\n margin: 20px;\r\n border-radius: 10px;\r\n font-weight: bold;\r\n display: none;\r\n animation: fadeIn 0.5s;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .message.success {\r\n background: #d4edda;\r\n color: #155724;\r\n border: 1px solid #c3e6cb;\r\n }\r\n\r\n .message.error {\r\n background: #f8d7da;\r\n color: #721c24;\r\n border: 1px solid #f5c6cb;\r\n }\r\n\r\n .confetti {\r\n position: fixed;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #f00;\r\n border-radius: 50%;\r\n animation: fall 5s linear forwards;\r\n z-index: 1000;\r\n }\r\n\r\n @keyframes fall {\r\n to {\r\n transform: translateY(100vh) rotate(720deg);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .game-area {\r\n flex-direction: column;\r\n }\r\n \r\n .crossword-grid {\r\n grid-template-columns: repeat(8, 40px);\r\n grid-template-rows: repeat(8, 40px);\r\n }\r\n \r\n .cell {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 20px;\r\n }\r\n \r\n .clues-panel {\r\n flex: 1;\r\n max-height: none;\r\n }\r\n \r\n .controls {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .btn {\r\n width: 100%;\r\n max-width: 250px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n\r\n <span>Crosswords for children<\/span>\r\n<\/div>\r\n\r\n \r\n <div class=\"message\" id=\"message\"><\/div>\r\n \r\n <div class=\"game-area\">\r\n <div class=\"crossword-grid\" id=\"grid\"><\/div>\r\n \r\n <div class=\"clues-panel\">\r\n <div class=\"clue-section\">\r\n <div class=\"clue-title\">Horizontal \u2190<\/div>\r\n <div class=\"clue-item\" data-number=\"1\">\r\n <div class=\"clue-number\">1<\/div>\r\n <div class=\"clue-text\">A tool we use to write on paper<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"3\">\r\n <div class=\"clue-number\">3<\/div>\r\n <div class=\"clue-text\">a person who takes care of the land and produces crops<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"5\">\r\n <div class=\"clue-number\">5<\/div>\r\n <div class=\"clue-text\">Lights up the day and gives warmth<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"clue-section\">\r\n <div class=\"clue-title\">Vertical \u2193<\/div>\r\n <div class=\"clue-item\" data-number=\"2\">\r\n <div class=\"clue-number\">2<\/div>\r\n <div class=\"clue-text\">A rural animal that works in transportation<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"4\">\r\n <div class=\"clue-number\">4<\/div>\r\n <div class=\"clue-text\">Fun activity for kids<\/div>\r\n <\/div>\r\n <div class=\"clue-item\" data-number=\"6\">\r\n <div class=\"clue-number\">6<\/div>\r\n <div class=\"clue-text\">Delicious red fruit<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"controls\">\r\n <button class=\"btn\" onclick=\"checkAnswers()\">Check answers<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"clearGrid()\">Clear all<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showHint()\">help<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Game configuration\r\n const GRID_SIZE = 8;\r\n const answers = {\r\n 1: { word: '\u0642\u0644\u0645', row: 1, col: 2, direction: 'horizontal', clue: '\u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642' },\r\n 2: { word: '\u062d\u0645\u0627\u0631', row: 0, col: 4, direction: 'vertical', clue: '\u062d\u064a\u0648\u0627\u0646 \u0631\u064a\u0641\u064a \u064a\u0639\u0645\u0644 \u0641\u064a \u0627\u0644\u0646\u0642\u0644' },\r\n 3: { word: '\u0645\u0632\u0627\u0631\u0639', row: 3, col: 1, direction: 'horizontal', clue: '\u0634\u062e\u0635 \u064a\u0639\u062a\u0646\u064a \u0628\u0627\u0644\u0623\u0631\u0636 \u0648\u064a\u0646\u062a\u062c \u0627\u0644\u0645\u062d\u0627\u0635\u064a\u0644' },\r\n 4: { word: '\u0644\u0639\u0628', row: 2, col: 5, direction: 'vertical', clue: '\u0646\u0634\u0627\u0637 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0644\u0644\u0645\u0631\u062d' },\r\n 5: { word: '\u0634\u0645\u0633', row: 5, col: 0, direction: 'horizontal', clue: '\u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642' },\r\n 6: { word: '\u062a\u0641\u0627\u062d', row: 4, col: 6, direction: 'vertical', clue: '\u0641\u0627\u0643\u0647\u0629 \u062d\u0645\u0631\u0627\u0621 \u0644\u0630\u064a\u0630\u0629' }\r\n };\r\n\r\n let grid = [];\r\n let currentInput = null;\r\n let currentDirection = 'horizontal';\r\n let currentActiveClue = null;\r\n\r\n function initializeGrid() {\r\n const gridElement = document.getElementById('grid');\r\n gridElement.innerHTML = '';\r\n grid = [];\r\n\r\n \/\/ Initialize empty grid\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n grid[i] = [];\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n grid[i][j] = { type: 'black', value: '', element: null, wordNumber: null };\r\n }\r\n }\r\n\r\n \/\/ Set active cells based on answers\r\n Object.entries(answers).forEach(([num, answer]) => {\r\n const { row, col, direction, word } = answer;\r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n if (r < GRID_SIZE && c < GRID_SIZE) {\r\n grid[r][c].type = 'active';\r\n \/\/ Store which word this cell belongs to\r\n if (!grid[r][c].wordNumbers) {\r\n grid[r][c].wordNumbers = [];\r\n }\r\n grid[r][c].wordNumbers = grid[r][c].wordNumbers || [];\r\n grid[r][c].wordNumbers.push(num);\r\n }\r\n }\r\n });\r\n\r\n \/\/ Create DOM elements\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n const cell = document.createElement('div');\r\n cell.className = `cell ${grid[i][j].type}`;\r\n \r\n if (grid[i][j].type === 'active') {\r\n const input = document.createElement('input');\r\n input.type = 'text';\r\n input.maxLength = 1;\r\n input.addEventListener('input', (e) => handleInput(e, i, j));\r\n input.addEventListener('keydown', (e) => handleKeydown(e, i, j));\r\n input.addEventListener('focus', () => {\r\n currentInput = {row: i, col: j};\r\n highlightClueForCell(i, j);\r\n });\r\n \r\n cell.appendChild(input);\r\n grid[i][j].element = input;\r\n\r\n \/\/ Add numbers for word starts\r\n Object.entries(answers).forEach(([num, answer]) => {\r\n if (answer.row === i && answer.col === j) {\r\n const numberDiv = document.createElement('div');\r\n numberDiv.className = 'number';\r\n numberDiv.textContent = num;\r\n cell.appendChild(numberDiv);\r\n }\r\n });\r\n }\r\n \r\n gridElement.appendChild(cell);\r\n }\r\n }\r\n\r\n \/\/ Set up clue click handlers\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.addEventListener('click', function() {\r\n const clueNum = this.getAttribute('data-number');\r\n highlightClue(clueNum);\r\n });\r\n });\r\n }\r\n\r\n function handleInput(e, row, col) {\r\n const value = e.target.value;\r\n if (value && \/[\\u0600-\\u06FF]\/.test(value)) {\r\n grid[row][col].value = value;\r\n e.target.value = value;\r\n moveToNextCell(row, col);\r\n } else {\r\n e.target.value = '';\r\n grid[row][col].value = '';\r\n }\r\n }\r\n\r\n function handleKeydown(e, row, col) {\r\n switch(e.key) {\r\n case 'ArrowRight':\r\n e.preventDefault();\r\n moveInDirection(row, col, 0, -1); \/\/ Left in RTL\r\n break;\r\n case 'ArrowLeft':\r\n e.preventDefault();\r\n moveInDirection(row, col, 0, 1); \/\/ Right in RTL\r\n break;\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n moveInDirection(row, col, 1, 0); \/\/ Down\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n moveInDirection(row, col, -1, 0); \/\/ Up\r\n break;\r\n case 'Backspace':\r\n if (!e.target.value) {\r\n e.preventDefault();\r\n moveToPrevious(row, col);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n function moveInDirection(row, col, rowDelta, colDelta) {\r\n let newRow = row + rowDelta;\r\n let newCol = col + colDelta;\r\n \r\n \/\/ Find next active cell in the specified direction\r\n while (newRow >= 0 && newRow < GRID_SIZE && newCol >= 0 && newCol < GRID_SIZE) {\r\n if (grid[newRow][newCol].type === 'active') {\r\n grid[newRow][newCol].element.focus();\r\n return;\r\n }\r\n newRow += rowDelta;\r\n newCol += colDelta;\r\n }\r\n }\r\n\r\n function moveToNextCell(row, col) {\r\n if (!currentActiveClue) {\r\n \/\/ Default movement: right then down\r\n moveInDirection(row, col, 0, 1);\r\n return;\r\n }\r\n\r\n const answer = answers[currentActiveClue];\r\n if (answer.direction === 'horizontal') {\r\n \/\/ Move right within the word\r\n const nextCol = col + 1;\r\n const maxCol = answer.col + answer.word.length - 1;\r\n if (nextCol <= maxCol && nextCol < GRID_SIZE && grid[row][nextCol].type === 'active') {\r\n grid[row][nextCol].element.focus();\r\n } else {\r\n \/\/ End of word, move to next word or general navigation\r\n moveInDirection(row, col, 0, 1);\r\n }\r\n } else {\r\n \/\/ Move down within the word\r\n const nextRow = row + 1;\r\n const maxRow = answer.row + answer.word.length - 1;\r\n if (nextRow <= maxRow && nextRow < GRID_SIZE && grid[nextRow][col].type === 'active') {\r\n grid[nextRow][col].element.focus();\r\n } else {\r\n \/\/ End of word, move to next word or general navigation\r\n moveInDirection(row, col, 1, 0);\r\n }\r\n }\r\n }\r\n\r\n function moveToPrevious(row, col) {\r\n if (!currentActiveClue) {\r\n \/\/ Default movement: left then up\r\n moveInDirection(row, col, 0, -1);\r\n return;\r\n }\r\n\r\n const answer = answers[currentActiveClue];\r\n if (answer.direction === 'horizontal') {\r\n \/\/ Move left within the word\r\n const prevCol = col - 1;\r\n if (prevCol >= answer.col && prevCol >= 0 && grid[row][prevCol].type === 'active') {\r\n grid[row][prevCol].element.focus();\r\n } else {\r\n \/\/ Beginning of word, move to previous word or general navigation\r\n moveInDirection(row, col, 0, -1);\r\n }\r\n } else {\r\n \/\/ Move up within the word\r\n const prevRow = row - 1;\r\n if (prevRow >= answer.row && prevRow >= 0 && grid[prevRow][col].type === 'active') {\r\n grid[prevRow][col].element.focus();\r\n } else {\r\n \/\/ Beginning of word, move to previous word or general navigation\r\n moveInDirection(row, col, -1, 0);\r\n }\r\n }\r\n }\r\n\r\n function highlightClue(clueNum) {\r\n \/\/ Remove active class from all clues\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n \r\n \/\/ Add active class to selected clue\r\n const clueItem = document.querySelector(`.clue-item[data-number=\"${clueNum}\"]`);\r\n if (clueItem) {\r\n clueItem.classList.add('active');\r\n currentActiveClue = clueNum;\r\n \r\n \/\/ Focus on the first cell of the clue\r\n const answer = answers[clueNum];\r\n grid[answer.row][answer.col].element.focus();\r\n }\r\n }\r\n\r\n function highlightClueForCell(row, col) {\r\n const cellWordNumbers = grid[row][col].wordNumbers;\r\n if (cellWordNumbers && cellWordNumbers.length > 0) {\r\n \/\/ If no current active clue or current clue doesn't include this cell\r\n if (!currentActiveClue || !cellWordNumbers.includes(currentActiveClue)) {\r\n \/\/ Prefer horizontal clues if available\r\n const horizontalClue = cellWordNumbers.find(num => answers[num].direction === 'horizontal');\r\n if (horizontalClue) {\r\n currentActiveClue = horizontalClue;\r\n } else {\r\n currentActiveClue = cellWordNumbers[0];\r\n }\r\n \r\n \/\/ Update UI\r\n document.querySelectorAll('.clue-item').forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n const clueItem = document.querySelector(`.clue-item[data-number=\"${currentActiveClue}\"]`);\r\n if (clueItem) {\r\n clueItem.classList.add('active');\r\n }\r\n }\r\n }\r\n }\r\n\r\n function checkAnswers() {\r\n let correctCount = 0;\r\n let totalWords = Object.keys(answers).length;\r\n \r\n \/\/ First remove all correct classes\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n if (grid[i][j].element) {\r\n grid[i][j].element.parentElement.classList.remove('correct');\r\n }\r\n }\r\n }\r\n \r\n Object.entries(answers).forEach(([num, answer]) => {\r\n const { word, row, col, direction } = answer;\r\n let userWord = '';\r\n let allCells = [];\r\n \r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n userWord += grid[r][c].value || '';\r\n allCells.push({row: r, col: c});\r\n }\r\n \r\n if (userWord === word) {\r\n correctCount++;\r\n \/\/ Mark cells as correct\r\n allCells.forEach(cell => {\r\n if (grid[cell.row][cell.col].element) {\r\n grid[cell.row][cell.col].element.parentElement.classList.add('correct');\r\n }\r\n });\r\n }\r\n });\r\n \r\n showMessage(correctCount, totalWords);\r\n \r\n if (correctCount === totalWords) {\r\n celebrate();\r\n }\r\n }\r\n\r\n function showMessage(correct, total) {\r\n const messageElement = document.getElementById('message');\r\n messageElement.style.display = 'block';\r\n \r\n if (correct === total) {\r\n messageElement.className = 'message success';\r\n messageElement.textContent = '\ud83c\udf89 \u0645\u0645\u062a\u0627\u0632! \u0644\u0642\u062f \u062d\u0644\u0644\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d!';\r\n } else {\r\n messageElement.className = 'message error';\r\n messageElement.textContent = `\u0644\u062f\u064a\u0643 ${correct} \u0645\u0646 ${total} \u0643\u0644\u0645\u0627\u062a \u0635\u062d\u064a\u062d\u0629. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649!`;\r\n }\r\n \r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n function clearGrid() {\r\n for (let i = 0; i < GRID_SIZE; i++) {\r\n for (let j = 0; j < GRID_SIZE; j++) {\r\n if (grid[i][j].type === 'active') {\r\n grid[i][j].value = '';\r\n if (grid[i][j].element) {\r\n grid[i][j].element.value = '';\r\n grid[i][j].element.parentElement.classList.remove('correct');\r\n }\r\n }\r\n }\r\n }\r\n document.getElementById('message').style.display = 'none';\r\n \/\/ Focus on first word\r\n const firstAnswer = Object.values(answers)[0];\r\n grid[firstAnswer.row][firstAnswer.col].element.focus();\r\n }\r\n\r\n function showHint() {\r\n if (!currentActiveClue) {\r\n const messageElement = document.getElementById('message');\r\n messageElement.className = 'message error';\r\n messageElement.textContent = '\u064a\u0631\u062c\u0649 \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0625\u062d\u062f\u0649 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0623\u0648\u0644\u0627\u064b';\r\n messageElement.style.display = 'block';\r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 3000);\r\n return;\r\n }\r\n \r\n const answer = answers[currentActiveClue];\r\n const { word, row, col, direction } = answer;\r\n \r\n \/\/ Find first empty cell in this word\r\n for (let i = 0; i < word.length; i++) {\r\n const r = direction === 'horizontal' ? row : row + i;\r\n const c = direction === 'horizontal' ? col + i : col;\r\n \r\n if (!grid[r][c].value) {\r\n grid[r][c].value = word[i];\r\n grid[r][c].element.value = word[i];\r\n grid[r][c].element.focus();\r\n return;\r\n }\r\n }\r\n \r\n \/\/ If all cells are filled\r\n const messageElement = document.getElementById('message');\r\n messageElement.className = 'message error';\r\n messageElement.textContent = '\u0647\u0630\u0647 \u0627\u0644\u0643\u0644\u0645\u0629 \u0645\u0643\u062a\u0645\u0644\u0629 \u0628\u0627\u0644\u0641\u0639\u0644!';\r\n messageElement.style.display = 'block';\r\n setTimeout(() => {\r\n messageElement.style.display = 'none';\r\n }, 3000);\r\n }\r\n\r\n function celebrate() {\r\n \/\/ Create confetti effect\r\n for (let i = 0; i < 100; i++) {\r\n createConfetti();\r\n }\r\n }\r\n\r\n function createConfetti() {\r\n const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\r\n confetti.style.width = (Math.random() * 10 + 5) + 'px';\r\n confetti.style.height = (Math.random() * 10 + 5) + 'px';\r\n confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n document.body.appendChild(confetti);\r\n \r\n \/\/ Remove confetti after animation\r\n setTimeout(() => {\r\n confetti.remove();\r\n }, 5000);\r\n }\r\n\r\n \/\/ Initialize the game when page loads\r\n window.addEventListener('DOMContentLoaded', () => {\r\n initializeGrid();\r\n \/\/ Focus on first word\r\n setTimeout(() => {\r\n const firstAnswer = Object.values(answers)[0];\r\n grid[firstAnswer.row][firstAnswer.col].element.focus();\r\n }, 100);\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>\u0643\u0644\u0645\u0627\u062a \u0645\u062a\u0642\u0627\u0637\u0639\u0629 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0643\u0644\u0645\u0627\u062a \u0645\u062a\u0642\u0627\u0637\u0639\u0629 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0623\u0641\u0642\u064a \u2190 1 \u0623\u062f\u0627\u0629 \u0646\u0643\u062a\u0628 \u0628\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642 3 \u0634\u062e\u0635 \u064a\u0639\u062a\u0646\u064a \u0628\u0627\u0644\u0623\u0631\u0636 \u0648\u064a\u0646\u062a\u062c \u0627\u0644\u0645\u062d\u0627\u0635\u064a\u0644 5 \u062a\u0636\u064a\u0621 \u0627\u0644\u0646\u0647\u0627\u0631 \u0648\u062a\u0639\u0637\u064a \u0627\u0644\u062f\u0641\u0621 \u0639\u0645\u0648\u062f\u064a \u2193 2 \u062d\u064a\u0648\u0627\u0646 \u0631\u064a\u0641\u064a \u064a\u0639\u0645\u0644 \u0641\u064a \u0627\u0644\u0646\u0642\u0644 4 \u0646\u0634\u0627\u0637 \u0644\u0644\u0623\u0637\u0641\u0627\u0644 \u0644\u0644\u0645\u0631\u062d 6 \u0641\u0627\u0643\u0647\u0629 \u062d\u0645\u0631\u0627\u0621 \u0644\u0630\u064a\u0630\u0629 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0625\u062c\u0627\u0628\u0627\u062a \u0645\u0633\u062d \u0627\u0644\u0643\u0644 \u0645\u0633\u0627\u0639\u062f\u0629<\/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-15288","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288","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=15288"}],"version-history":[{"count":7,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288\/revisions"}],"predecessor-version":[{"id":15299,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15288\/revisions\/15299"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}