{"id":1106,"date":"2024-09-17T09:54:46","date_gmt":"2024-09-17T04:24:46","guid":{"rendered":"https:\/\/sahnewal.in\/?page_id=1106"},"modified":"2024-09-18T09:55:18","modified_gmt":"2024-09-18T04:25:18","slug":"elementor-1106","status":"publish","type":"page","link":"https:\/\/sahnewal.in\/index.php\/elementor-1106\/","title":{"rendered":"kidszone"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\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 Kids Zone - Fun and Educational Games<\/title>\r\n <meta name=\"description\" content=\"Welcome to the Kids Zone! Enjoy fun and educational games including math challenges, word jumbles, drawing activities, and memory card games.\">\r\n <meta name=\"keywords\" content=\"kids games, educational games, math games, word jumble, drawing game, memory card game, fun activities for kids\">\r\n <meta name=\"author\" content=\"R.S.Randy\">\r\n \r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n background-color: #f0f8ff;\r\n text-align: center;\r\n padding: 20px;\r\n margin: 0;\r\n }\r\n\r\n header {\r\n background-color: #ffcc00;\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(24px, 5vw, 48px);\r\n margin: 0;\r\n }\r\n\r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 20px;\r\n }\r\n\r\n section {\r\n background-color: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n max-width: 500px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n input {\r\n padding: 10px;\r\n margin: 10px 0;\r\n border-radius: 5px;\r\n border: 1px solid #ccc;\r\n width: calc(100% - 22px);\r\n max-width: 300px;\r\n }\r\n\r\n button {\r\n padding: 10px 20px;\r\n background-color: #28a745;\r\n color: #fff;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n margin: 5px;\r\n transition: background-color 0.3s;\r\n }\r\n\r\n button:hover {\r\n background-color: #218838;\r\n }\r\n\r\n canvas {\r\n margin: 20px auto;\r\n display: block;\r\n max-width: 100%;\r\n height: auto;\r\n }\r\n\r\n #memory-game-board {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .memory-card {\r\n width: 80px;\r\n height: 80px;\r\n background-color: #ffcc00;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 24px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n transition: background-color 0.3s;\r\n }\r\n\r\n .memory-card.flipped {\r\n background-color: #fff;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n section {\r\n padding: 15px;\r\n }\r\n\r\n .memory-card {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 18px;\r\n }\r\n\r\n button {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <h1>Welcome to the Kids Zone!<\/h1>\r\n <\/header>\r\n <main>\r\n <section id=\"math-game\">\r\n <h2>Math Game<\/h2>\r\n <div>\r\n <button onclick=\"setLevel('easy')\">Easy<\/button>\r\n <button onclick=\"setLevel('intermediate')\">Intermediate<\/button>\r\n <button onclick=\"setLevel('hard')\">Hard<\/button>\r\n <\/div>\r\n <div id=\"math-question\"><\/div>\r\n <input type=\"number\" id=\"math-answer\" placeholder=\"Your answer\">\r\n <button onclick=\"checkMathAnswer()\">Submit<\/button>\r\n <div id=\"math-feedback\"><\/div>\r\n <\/section>\r\n <section id=\"word-jumble\">\r\n <h2>Word Jumble Game<\/h2>\r\n <div id=\"jumble-word\"><\/div>\r\n <input type=\"text\" id=\"jumble-answer\" placeholder=\"Your answer\">\r\n <button onclick=\"checkJumbleAnswer()\">Submit<\/button>\r\n <div id=\"jumble-feedback\"><\/div>\r\n <\/section>\r\n <section id=\"drawing-game\">\r\n <h2>Drawing Game<\/h2>\r\n <canvas id=\"drawing-canvas\" width=\"400\" height=\"400\"><\/canvas>\r\n <br>\r\n <button onclick=\"clearCanvas()\">Clear<\/button>\r\n <\/section>\r\n <section id=\"memory-game\">\r\n <h2>Memory Card Game<\/h2>\r\n <div id=\"memory-game-board\"><\/div>\r\n <\/section>\r\n <\/main>\r\n <script>\r\n \/\/ Math Game with Levels\r\n function generateMathQuestion(level) {\r\n let num1, num2;\r\n switch(level) {\r\n case 'easy':\r\n num1 = Math.floor(Math.random() * 10);\r\n num2 = Math.floor(Math.random() * 10);\r\n break;\r\n case 'intermediate':\r\n num1 = Math.floor(Math.random() * 50);\r\n num2 = Math.floor(Math.random() * 50);\r\n break;\r\n case 'hard':\r\n num1 = Math.floor(Math.random() * 100);\r\n num2 = Math.floor(Math.random() * 100);\r\n break;\r\n }\r\n document.getElementById('math-question').textContent = `${num1} + ${num2} = ?`;\r\n return num1 + num2;\r\n }\r\n\r\n let currentLevel = 'easy';\r\n let correctMathAnswer = generateMathQuestion(currentLevel);\r\n\r\n function setLevel(level) {\r\n currentLevel = level;\r\n correctMathAnswer = generateMathQuestion(currentLevel);\r\n }\r\n\r\n function checkMathAnswer() {\r\n const userAnswer = parseInt(document.getElementById('math-answer').value);\r\n const feedback = document.getElementById('math-feedback');\r\n if (userAnswer === correctMathAnswer) {\r\n feedback.textContent = 'Correct!';\r\n feedback.style.color = 'green';\r\n } else {\r\n feedback.textContent = 'Try again!';\r\n feedback.style.color = 'red';\r\n }\r\n correctMathAnswer = generateMathQuestion(currentLevel);\r\n }\r\n\r\n \/\/ Word Jumble Game\r\n const words = ['apple', 'banana', 'cherry', 'date', 'elderberry'];\r\n let currentWord = words[Math.floor(Math.random() * words.length)];\r\n let jumbledWord = currentWord.split('').sort(() => 0.5 - Math.random()).join('');\r\n\r\n document.getElementById('jumble-word').textContent = jumbledWord;\r\n\r\n function checkJumbleAnswer() {\r\n const userAnswer = document.getElementById('jumble-answer').value;\r\n const feedback = document.getElementById('jumble-feedback');\r\n if (userAnswer === currentWord) {\r\n feedback.textContent = 'Correct!';\r\n feedback.style.color = 'green';\r\n } else {\r\n feedback.textContent = 'Try again!';\r\n feedback.style.color = 'red';\r\n }\r\n currentWord = words[Math.floor(Math.random() * words.length)];\r\n jumbledWord = currentWord.split('').sort(() => 0.5 - Math.random()).join('');\r\n document.getElementById('jumble-word').textContent = jumbledWord;\r\n }\r\n\r\n \/\/ Drawing Game\r\n const canvas = document.getElementById('drawing-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let drawing = false;\r\n\r\n function resizeCanvas() {\r\n const containerWidth = canvas.parentElement.clientWidth;\r\n const scale = containerWidth \/ canvas.width;\r\n canvas.style.width = `${containerWidth}px`;\r\n canvas.style.height = `${canvas.height * scale}px`;\r\n }\r\n\r\n window.addEventListener('resize', resizeCanvas);\r\n resizeCanvas();\r\n\r\n canvas.addEventListener('mousedown', startDrawing);\r\n canvas.addEventListener('mouseup', stopDrawing);\r\n canvas.addEventListener('mousemove', draw);\r\n canvas.addEventListener('touchstart', handleTouch);\r\n canvas.addEventListener('touchmove', handleTouch);\r\n canvas.addEventListener('touchend', stopDrawing);\r\n\r\n function startDrawing(event) {\r\n drawing = true;\r\n draw(event);\r\n }\r\n\r\n function stopDrawing() {\r\n drawing = false;\r\n ctx.beginPath();\r\n }\r\n\r\n function draw(event) {\r\n if (!drawing) return;\r\n ctx.lineWidth = 5;\r\n ctx.lineCap = 'round';\r\n ctx.strokeStyle = '#000';\r\n\r\n const rect = canvas.getBoundingClientRect();\r\n const scaleX = canvas.width \/ rect.width;\r\n const scaleY = canvas.height \/ rect.height;\r\n const x = (event.clientX - rect.left) * scaleX;\r\n const y = (event.clientY - rect.top) * scaleY;\r\n\r\n ctx.lineTo(x, y);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(x, y);\r\n }\r\n\r\n function handleTouch(event) {\r\n event.preventDefault();\r\n const touch = event.touches[0];\r\n const mouseEvent = new MouseEvent(\"mousemove\", {\r\n clientX: touch.clientX,\r\n clientY: touch.clientY\r\n });\r\n draw(mouseEvent);\r\n }\r\n\r\n function clearCanvas() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n\r\n \/\/ Memory Card Game\r\n const memoryGameBoard = document.getElementById('memory-game-board');\r\n const cards = ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D'];\r\n let flippedCards = [];\r\n let matchedPairs = 0;\r\n\r\n function shuffle(array) {\r\n for (let i = array.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [array[i], array[j]] = [array[j], array[i]];\r\n }\r\n }\r\n\r\n function createMemoryCard(content) {\r\n const card = document.createElement('div');\r\n card.classList.add('memory-card');\r\n card.textContent = content;\r\n card.addEventListener('click', () => flipCard(card));\r\n return card;\r\n }\r\n\r\n function flipCard(card) {\r\n if (flippedCards.length < 2 && !card.classList.contains('flipped')) {\r\n card.classList.add('flipped');\r\n flippedCards.push(card);\r\n if (flippedCards.length === 2) {\r\n checkForMatch();\r\n }\r\n }\r\n }\r\n\r\n function checkForMatch() {\r\n const [card1, card2] = flippedCards;\r\n if (card1.textContent === card2.textContent) {\r\n matchedPairs++;\r\n flippedCards = [];\r\n if (matchedPairs === cards.length \/ 2) {\r\n alert('You found all pairs!');\r\n }\r\n } else {\r\n setTimeout(() => {\r\n card1.classList.remove('flipped');\r\n card2.classList.remove('flipped');\r\n flippedCards = [];\r\n }, 1000);\r\n }\r\n }\r\n\r\n function setupMemoryGame() {\r\n shuffle(cards);\r\n cards.forEach(content => {\r\n const card = createMemoryCard(content);\r\n memoryGameBoard.appendChild(card);\r\n });\r\n }\r\n\r\n setupMemoryGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kids Zone – Fun and Educational Games Welcome to the Kids Zone! Math Game Easy Intermediate Hard Submit Word Jumble Game Submit Drawing Game Clear Memory Card Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1106","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/pages\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":26,"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions\/1134"}],"wp:attachment":[{"href":"https:\/\/sahnewal.in\/index.php\/wp-json\/wp\/v2\/media?parent=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}