{"id":794,"date":"2026-06-02T00:30:50","date_gmt":"2026-06-02T00:30:50","guid":{"rendered":"https:\/\/lana.client-demo-websites.com\/?page_id=794"},"modified":"2026-06-02T00:36:38","modified_gmt":"2026-06-02T00:36:38","slug":"coloring","status":"publish","type":"page","link":"https:\/\/lana.client-demo-websites.com\/index.php\/coloring\/","title":{"rendered":"Coloring"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"794\" class=\"elementor elementor-794\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15b4f33 e-flex e-con-boxed e-con e-parent\" data-id=\"15b4f33\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc6e9bf elementor-widget elementor-widget-heading\" data-id=\"fc6e9bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\n<span style=\"color: #90d2cb !important\">\n  Coloring\n<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c344c2e e-con-full e-flex e-con e-parent\" data-id=\"c344c2e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d80dac2 elementor-absolute elementor-widget elementor-widget-image\" data-id=\"d80dac2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"550\" src=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459.png\" class=\"attachment-full size-full wp-image-642\" alt=\"\" srcset=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459.png 1920w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459-300x86.png 300w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459-1024x293.png 1024w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459-768x220.png 768w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008777-1-1-e1779826448459-1536x440.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-daaad57 animated-slow e-flex e-con-boxed e-con e-child\" data-id=\"daaad57\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;none&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-13718c5 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"13718c5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a833efd elementor-widget elementor-widget-heading\" data-id=\"a833efd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Fun\n<span style=\"color: #90d2cb !important\">\n  Activities\n<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96bbd3f e-con-full e-flex e-con e-child\" data-id=\"96bbd3f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a3b4087 e-con-full e-flex e-con e-child\" data-id=\"a3b4087\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-bc77232 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"bc77232\" data-element_type=\"container\" data-e-type=\"container\" id=\"coloring-box\" data-settings=\"{&quot;animation&quot;:&quot;zoomIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10e8de0 elementor-widget elementor-widget-heading\" data-id=\"10e8de0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\n<span style=\"color: #90d2cb !important\">\n  Coloring\n<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d480d90 elementor-widget elementor-widget-image\" data-id=\"d480d90\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"398\" height=\"344\" src=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008776.png\" class=\"attachment-full size-full wp-image-639\" alt=\"\" srcset=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008776.png 398w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008776-300x259.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c6c093 elementor-widget elementor-widget-html\" data-id=\"4c6c093\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Open Button -->\r\n<img decoding=\"async\" id=\"newgameOpenBtn\"\r\n     src=\"\/wp-content\/uploads\/2026\/05\/A\u2018AA\u00aeA\u00a9_1-2-1.png\"\r\n     style=\"cursor:pointer;\">\r\n\r\n<!-- Modal -->\r\n<div id=\"newgameModal\" class=\"newgame-modal\">\r\n\r\n    <div class=\"newgame-modal-content\">\r\n\r\n        <span id=\"newgameCloseBtn\" class=\"newgame-close\">&times;<\/span>\r\n\r\n        <div id=\"newgameContainer\" class=\"newgame-container\">\r\n\r\n            <div class=\"newgame-toolbar\">\r\n\r\n                <input type=\"color\"\r\n                       id=\"newgameColorPicker\"\r\n                       value=\"#ff0000\">\r\n\r\n                <button id=\"newgameBrushBtn\">\ud83d\udd8c Brush<\/button>\r\n                <button id=\"newgameEraserBtn\">\ud83e\uddfd Eraser<\/button>\r\n                <button id=\"newgameClearBtn\">\ud83d\uddd1 Clear<\/button>\r\n                <button id=\"newgameDownloadBtn\">\u2b07 Download<\/button>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"newgame-canvas-wrapper\">\r\n\r\n                <img decoding=\"async\"\r\n                    id=\"newgameBaseImage\"\r\n                    src=\"\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-1-2026-11_43_24-PM-1.png\"\r\n                    crossorigin=\"anonymous\"\r\n                >\r\n\r\n                <canvas id=\"newgameCanvas\"><\/canvas>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\r\n.newgame-modal{\r\n    display:none;\r\n    position:fixed;\r\n    z-index:9999;\r\n    left:0;\r\n    top:0;\r\n    width:100%;\r\n    height:100%;\r\n    background:rgba(0,0,0,.7);\r\n    justify-content:center;\r\n    align-items:center;\r\n}\r\n\r\n.newgame-modal-content{\r\n    position:relative;\r\n    width:40vw;\r\n    height:80vh;\r\n\r\n    background:#fff;\r\n    border-radius:10px;\r\n    padding:15px;\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.newgame-close{\r\n    position:absolute;\r\n    right:15px;\r\n    top:10px;\r\n    font-size:30px;\r\n    cursor:pointer;\r\n    z-index:100;\r\n}\r\n\r\n.newgame-container{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n}\r\n\r\n.newgame-toolbar{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    justify-content:center;\r\n    gap:10px;\r\n\r\n    width:100%;\r\n    margin-bottom:10px;\r\n\r\n    flex-shrink:0;\r\n}\r\n\r\n.newgame-toolbar button{\r\n    padding:10px 15px;\r\n    border:none;\r\n    cursor:pointer;\r\n    border-radius:5px;\r\n    font-size:14px;\r\n}\r\n\r\n.newgame-canvas-wrapper{\r\n    position:relative;\r\n\r\n    flex:1;\r\n    width:100%;\r\n\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n#newgameBaseImage{\r\n    display:block;\r\n\r\n    max-width:100%;\r\n    max-height:100%;\r\n\r\n    width:auto;\r\n    height:auto;\r\n}\r\n\r\n#newgameCanvas{\r\n    position:absolute;\r\n    touch-action:none;\r\n    cursor:crosshair;\r\n}\r\n\r\n@media(max-width:768px){\r\n\r\n    .newgame-modal-content{\r\n        width:95vw;\r\n        height:85vh;\r\n        padding:15px;\r\n    }\r\n\r\n    .newgame-toolbar{\r\n        gap:6px;\r\n    }\r\n\r\n    .newgame-toolbar button{\r\n        font-size:12px;\r\n        padding:8px 12px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\nconst modal = document.getElementById(\"newgameModal\");\r\nconst openBtn = document.getElementById(\"newgameOpenBtn\");\r\nconst closeBtn = document.getElementById(\"newgameCloseBtn\");\r\n\r\nconst image = document.getElementById(\"newgameBaseImage\");\r\nconst canvas = document.getElementById(\"newgameCanvas\");\r\n\r\nif (!modal || !openBtn || !closeBtn || !image || !canvas) {\r\n    console.error(\"One or more elements were not found.\");\r\n} else {\r\n\r\n    const ctx = canvas.getContext(\"2d\");\r\n\r\n    const colorPicker = document.getElementById(\"newgameColorPicker\");\r\n    const brushBtn = document.getElementById(\"newgameBrushBtn\");\r\n    const eraserBtn = document.getElementById(\"newgameEraserBtn\");\r\n    const clearBtn = document.getElementById(\"newgameClearBtn\");\r\n    const downloadBtn = document.getElementById(\"newgameDownloadBtn\");\r\n\r\n    let drawing = false;\r\n    let eraserMode = false;\r\n\r\n    \/\/ OPEN MODAL\r\n    openBtn.onclick = function () {\r\n        modal.style.display = \"flex\";\r\n\r\n        setTimeout(() => {\r\n            resizeCanvas();\r\n        }, 100);\r\n    };\r\n\r\n    \/\/ CLOSE MODAL\r\n    closeBtn.onclick = function () {\r\n        modal.style.display = \"none\";\r\n    };\r\n\r\n    \r\n\r\n    function resizeCanvas() {\r\n        canvas.width = image.clientWidth;\r\n        canvas.height = image.clientHeight;\r\n\r\n        canvas.style.width = image.clientWidth + \"px\";\r\n        canvas.style.height = image.clientHeight + \"px\";\r\n    }\r\n\r\n    if (image.complete) {\r\n        resizeCanvas();\r\n    } else {\r\n        image.onload = resizeCanvas;\r\n    }\r\n\r\n    window.addEventListener(\"resize\", resizeCanvas);\r\n\r\n    function getPos(e) {\r\n        const rect = canvas.getBoundingClientRect();\r\n\r\n        if (e.touches) {\r\n            return {\r\n                x: e.touches[0].clientX - rect.left,\r\n                y: e.touches[0].clientY - rect.top\r\n            };\r\n        }\r\n\r\n        return {\r\n            x: e.clientX - rect.left,\r\n            y: e.clientY - rect.top\r\n        };\r\n    }\r\n\r\n    function startDraw(e) {\r\n        drawing = true;\r\n\r\n        const pos = getPos(e);\r\n\r\n        ctx.beginPath();\r\n        ctx.moveTo(pos.x, pos.y);\r\n    }\r\n\r\n    function draw(e) {\r\n        if (!drawing) return;\r\n\r\n        e.preventDefault();\r\n\r\n        const pos = getPos(e);\r\n\r\n        ctx.lineWidth = 18;\r\n        ctx.lineCap = \"round\";\r\n        ctx.lineJoin = \"round\";\r\n\r\n        if (eraserMode) {\r\n            ctx.globalCompositeOperation = \"destination-out\";\r\n        } else {\r\n            ctx.globalCompositeOperation = \"source-over\";\r\n            ctx.strokeStyle = colorPicker.value;\r\n        }\r\n\r\n        ctx.lineTo(pos.x, pos.y);\r\n        ctx.stroke();\r\n    }\r\n\r\n    function stopDraw() {\r\n        drawing = false;\r\n        ctx.beginPath();\r\n    }\r\n\r\n    canvas.addEventListener(\"mousedown\", startDraw);\r\n    canvas.addEventListener(\"mousemove\", draw);\r\n    canvas.addEventListener(\"mouseup\", stopDraw);\r\n    canvas.addEventListener(\"mouseleave\", stopDraw);\r\n\r\n    canvas.addEventListener(\"touchstart\", startDraw, { passive: false });\r\n    canvas.addEventListener(\"touchmove\", draw, { passive: false });\r\n    canvas.addEventListener(\"touchend\", stopDraw);\r\n\r\n    brushBtn.onclick = function () {\r\n        eraserMode = false;\r\n    };\r\n\r\n    eraserBtn.onclick = function () {\r\n        eraserMode = true;\r\n    };\r\n\r\n    clearBtn.onclick = function () {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    };\r\n\r\n    downloadBtn.onclick = function () {\r\n\r\n        const exportCanvas = document.createElement(\"canvas\");\r\n        const exportCtx = exportCanvas.getContext(\"2d\");\r\n\r\n        exportCanvas.width = image.naturalWidth;\r\n        exportCanvas.height = image.naturalHeight;\r\n\r\n        exportCtx.drawImage(\r\n            image,\r\n            0,\r\n            0,\r\n            exportCanvas.width,\r\n            exportCanvas.height\r\n        );\r\n\r\n        exportCtx.drawImage(\r\n            canvas,\r\n            0,\r\n            0,\r\n            exportCanvas.width,\r\n            exportCanvas.height\r\n        );\r\n\r\n        const link = document.createElement(\"a\");\r\n        link.download = \"colored-image.png\";\r\n        link.href = exportCanvas.toDataURL(\"image\/png\");\r\n        link.click();\r\n    };\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cbad56a e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"cbad56a\" data-element_type=\"container\" data-e-type=\"container\" id=\"maze-box\" data-settings=\"{&quot;animation&quot;:&quot;zoomIn&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8681a01 elementor-widget elementor-widget-heading\" data-id=\"8681a01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\n<span style=\"color: #90d2cb !important\">\n  Maze Game\n<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b0e3a4 elementor-widget elementor-widget-image\" data-id=\"9b0e3a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"398\" height=\"344\" src=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008778-1.png\" class=\"attachment-full size-full wp-image-646\" alt=\"\" srcset=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008778-1.png 398w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-1000008778-1-300x259.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4736f22 elementor-widget elementor-widget-html\" data-id=\"4736f22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<img decoding=\"async\" id=\"maze-game-btn\" src=\"\/wp-content\/uploads\/2026\/05\/A\u2018AA\u00aeA\u00a9_1-2-1.png\" style=\"cursor:pointer;\">\r\n\r\n<div id=\"maze-modal\">\r\n  <div class=\"maze-modal-content\">\r\n    <span id=\"close-maze\">&times;<\/span>\r\n\r\n    <div id=\"game-wrapper\">\r\n      <div id=\"maze-frame\">\r\n        <div id=\"maze\"><\/div>\r\n\r\n        <!-- \ud83d\udd25 POPUP -->\r\n        <div id=\"mazePopup\" class=\"maze-popup\">\r\n          <div class=\"popup-box\">\r\n            <p id=\"mazePopupMsg\"><\/p>\r\n            <button id=\"mazePopupBtn\">OK<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div id=\"controls\">\r\n        <button onclick=\"move(0,-1)\">\u2b06<\/button><br>\r\n        <button onclick=\"move(-1,0)\">\u2b05<\/button>\r\n        <button onclick=\"move(1,0)\">\u27a1<\/button><br>\r\n        <button onclick=\"move(0,1)\">\u2b07<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#maze-modal {\r\n  display:none; position:fixed; z-index:9999; left:0; top:0;\r\n  width:100%; height:100%; background:rgba(0,0,0,0.7);\r\n  justify-content:center; align-items:center;\r\n}\r\n\r\n.maze-modal-content {\r\n  background:#fff; padding:30px; border-radius:15px; position:relative;\r\n}\r\n\r\n#close-maze {\r\n  position:absolute; top:10px; right:15px; font-size:28px; cursor:pointer;\r\n}\r\n\r\n#game-wrapper { width:380px; text-align:center; }\r\n\r\n#maze-frame {\r\n  padding:15px;\r\n  border-radius:20px;\r\n  background:#7a4e2d;\r\n  position:relative;\r\n}\r\n\r\n#maze {\r\n  width:350px; height:350px;\r\n  display:grid;\r\n  grid-template-columns:repeat(10,1fr);\r\n}\r\n\r\n.cell { width:100%; height:100%; }\r\n.wall { background:transparent; }\r\n.path { border:2px solid #caa76c; }\r\n\r\n.goal {\r\n  background:url('https:\/\/cdn-icons-png.flaticon.com\/512\/190\/190411.png') center\/contain no-repeat;\r\n}\r\n\r\n#controls button {\r\n  padding:8px 12px; margin:5px;\r\n  border:none; border-radius:8px;\r\n  background:#2ecc71; color:#fff; cursor:pointer;\r\n}\r\n\r\n\/* \ud83d\udd25 POPUP *\/\r\n.maze-popup {\r\n  position:absolute;\r\n  width:100%; height:100%;\r\n  top:0; left:0;\r\n  display:none;\r\n  justify-content:center;\r\n  align-items:center;\r\n  background:rgba(0,0,0,0.6);\r\n  z-index:10;\r\n}\r\n\r\n.popup-box {\r\n  background:#fff;\r\n  padding:20px 25px;\r\n  border-radius:10px;\r\n  text-align:center;\r\n  animation:fade .3s;\r\n}\r\n\r\n.popup-box button {\r\n  margin-top:10px;\r\n  padding:6px 14px;\r\n  border:none;\r\n  background:#2ecc71;\r\n  color:#fff;\r\n  border-radius:6px;\r\n  cursor:pointer;\r\n}\r\n\r\n@keyframes fade {\r\n  from {opacity:0; transform:scale(.8);}\r\n  to {opacity:1; transform:scale(1);}\r\n}\r\n\r\n\r\n\r\n@media (max-width: 576px) {\r\n .maze-modal-content {\r\n    width: 90%  !important;\r\n}\r\n\r\n#game-wrapper {\r\n    width: 100%  !important;\r\n}\r\n\r\n#maze {\r\n    width: 100%  !important;\r\n    height: 300px  !important;\r\n}\r\n\r\n#maze-frame {\r\n    padding: 5px  !important;\r\n}\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n\r\n\/\/ ================= PLAYER IMAGE =================\r\nconst playerImage = \"\/wp-content\/uploads\/2026\/05\/lizerd--e1777677073768.png\";\r\n\r\n\/\/ ================= MAZE =================\r\nconst mazeLayout = [\r\n  [1,1,1,1,1,1,1,1,1,1],\r\n  [1,0,0,0,1,0,0,0,0,1],\r\n  [1,0,1,0,1,0,1,1,0,1],\r\n  [1,0,1,0,0,0,1,0,0,1],\r\n  [1,0,1,1,1,0,1,0,1,1],\r\n  [1,0,0,0,0,0,0,0,0,1],\r\n  [1,0,1,0,1,1,1,1,0,1],\r\n  [1,0,1,0,0,0,0,1,0,1],\r\n  [1,0,0,0,1,0,0,0,0,1],\r\n  [1,1,1,1,1,1,1,1,1,1]\r\n];\r\n\r\nlet player = { x:1, y:1 };\r\nlet goal = { x:8, y:8 };\r\n\r\nconst maze = document.getElementById(\"maze\");\r\n\r\n\/\/ ================= POPUP =================\r\nconst popup = document.getElementById(\"mazePopup\");\r\nconst popupMsg = document.getElementById(\"mazePopupMsg\");\r\nconst popupBtn = document.getElementById(\"mazePopupBtn\");\r\n\r\nif (popupBtn) {\r\n  popupBtn.addEventListener(\"click\", function () {\r\n    popup.style.display = \"none\";\r\n    player = { x:1, y:1 };\r\n    drawMaze();\r\n  });\r\n}\r\n\r\nfunction showPopup(msg){\r\n  popupMsg.textContent = msg;\r\n  popup.style.display = \"flex\";\r\n}\r\n\r\n\/\/ ================= DRAW MAZE =================\r\nfunction drawMaze() {\r\n  if (!maze) return;\r\n\r\n  maze.innerHTML = \"\";\r\n\r\n  for (let y = 0; y < 10; y++) {\r\n    for (let x = 0; x < 10; x++) {\r\n\r\n      const cell = document.createElement(\"div\");\r\n      cell.classList.add(\"cell\");\r\n      cell.classList.add(mazeLayout[y][x] === 0 ? \"path\" : \"wall\");\r\n\r\n      if (x === player.x && y === player.y) {\r\n        cell.style.background = `url('${playerImage}') center\/contain no-repeat`;\r\n      }\r\n\r\n      if (x === goal.x && y === goal.y) {\r\n        cell.classList.add(\"goal\");\r\n      }\r\n\r\n      maze.appendChild(cell);\r\n    }\r\n  }\r\n}\r\n\r\n\/\/ ================= MOVE =================\r\nfunction move(dx, dy) {\r\n  const nx = player.x + dx;\r\n  const ny = player.y + dy;\r\n\r\n  if (mazeLayout[ny] && mazeLayout[ny][nx] === 0) {\r\n\r\n    player.x = nx;\r\n    player.y = ny;\r\n\r\n    if (player.x === goal.x && player.y === goal.y) {\r\n      setTimeout(() => showPopup(\"\ud83c\udf89 You Won!\"), 200);\r\n    }\r\n\r\n    drawMaze();\r\n  }\r\n}\r\n\r\n\/\/ expose for inline buttons\r\nwindow.move = move;\r\n\r\n\/\/ ================= MODAL =================\r\n(() => {\r\n\r\n  const modal = document.getElementById(\"maze-modal\");\r\n  const openBtn = document.getElementById(\"maze-game-btn\");\r\n  const closeBtn = document.getElementById(\"close-maze\");\r\n\r\n  if (!modal || !openBtn || !closeBtn) {\r\n    console.error(\"Maze modal elements not found\");\r\n    return;\r\n  }\r\n\r\n  openBtn.addEventListener(\"click\", function () {\r\n    modal.style.display = \"flex\";\r\n    drawMaze();\r\n  });\r\n\r\n  closeBtn.addEventListener(\"click\", function () {\r\n    modal.style.display = \"none\";\r\n  });\r\n\r\n \r\n\r\n})();\r\n\r\n\/\/ ================= KEYBOARD =================\r\ndocument.addEventListener(\"keydown\", function(e){\r\n\r\n  const modal = document.getElementById(\"maze-modal\");\r\n  const modalOpen = modal && modal.style.display === \"flex\";\r\n\r\n  if (!modalOpen) return;\r\n\r\n  if (e.key === \"ArrowUp\") move(0,-1);\r\n  if (e.key === \"ArrowDown\") move(0,1);\r\n  if (e.key === \"ArrowLeft\") move(-1,0);\r\n  if (e.key === \"ArrowRight\") move(1,0);\r\n});\r\n\r\n\/\/ INIT\r\ndrawMaze();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c02a1c e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"4c02a1c\" data-element_type=\"container\" data-e-type=\"container\" id=\"spot-box\" data-settings=\"{&quot;animation&quot;:&quot;zoomIn&quot;,&quot;animation_delay&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fbc73d elementor-widget elementor-widget-heading\" data-id=\"8fbc73d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\n<span style=\"color: #90d2cb !important\">\n  Listen &amp; play\n<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e702dd3 elementor-widget elementor-widget-image\" data-id=\"e702dd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"344\" src=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/06\/Group-1000008777-3.png\" class=\"attachment-full size-full wp-image-790\" alt=\"\" srcset=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/06\/Group-1000008777-3.png 398w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/06\/Group-1000008777-3-300x259.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb8346d elementor-widget elementor-widget-html\" data-id=\"cb8346d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n\r\n\r\n<div id=\"spot-game-container\">\r\n<img decoding=\"async\" id=\"spot-game-open-btn\" src=\"\/wp-content\/uploads\/2026\/05\/A\u2018AA\u00aeA\u00a9_1-2-1.png\" style=\"cursor: pointer;\">\r\n<\/div>\r\n\r\n\r\n<div id=\"spot-game-modal\" class=\"spot-game-modal\">\r\n  <div class=\"spot-game-modal-content\">\r\n    <span class=\"spot-game-close\">&times;<\/span>\r\n    <h3>Listen for the Sound<\/h3>\r\n    <div id=\"spot-game-animal-options\" style=\"margin-top:20px; display:flex; justify-content:center; gap:20px;\">\r\n     \r\n    <\/div>\r\n    <p id=\"spot-game-message\" style=\"font-weight:bold; margin-top:15px;\"><\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n.spot-game-modal {\r\n  display:none;\r\n  position:fixed;\r\n  top:0; left:0;\r\n  width:100%; height:100%;\r\n  background-color: rgba(0,0,0,0.5);\r\n  justify-content:center; align-items:center;\r\n}\r\n\r\n.spot-game-modal-content {\r\n  background-color: #fff;\r\n    padding: 50px;\r\n    border-radius: 10px;\r\n    position: relative;\r\n    width: fit-content;\r\n    text-align: center;\r\n}\r\n.spot-game-modal-content h3 {\r\n    font-family: Qilka;\r\n    font-size: 32px;\r\n    margin-bottom: 30px;\r\n}\r\n.spot-game-close {\r\n  position:absolute;\r\n  top:10px;\r\n  right:15px;\r\n  font-size:24px;\r\n  cursor:pointer;\r\n}\r\n\r\n\r\n#spot-game-animal-options img {\r\n  width: 150px;\r\n    height: 150px;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n    object-fit: contain;\r\n    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\r\n}\r\n\r\n#spot-game-animal-options img:hover { border-color:blue; }\r\n\r\n@media (max-width: 576px) {\r\n  .spot-game-modal-content {\r\n    width: 90% !important;\r\npadding: 20px  !important;\r\n}\r\n\r\n\r\n.spot-game-modal-content h3 {\r\n    font-size: 26px  !important;\r\n}\r\n\r\n#spot-game-animal-options img {\r\n    width: 80px !important;\r\n    height: 80px !important;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<script>\r\nconst spotGameOpenBtn = document.getElementById('spot-game-open-btn');\r\nconst spotGameModal = document.getElementById('spot-game-modal');\r\nconst spotGameClose = document.querySelector('.spot-game-close');\r\nconst spotGameAnimalOptions = document.getElementById('spot-game-animal-options');\r\nconst spotGameMessage = document.getElementById('spot-game-message');\r\n\r\n\/\/ \ud83d\udc3e Animals with sounds\r\nconst animals = [\r\n  { \r\n    name: 'Racoon', \r\n    img: '\/wp-content\/uploads\/2026\/05\/racoon-e1777680140616.png',\r\n    sound: '\/wp-content\/uploads\/2026\/06\/videoplayback-2.mp3'\r\n  },\r\n  { \r\n    name: 'Monkey', \r\n    img: '\/wp-content\/uploads\/2026\/05\/amry-llis-e1777680892659.png',\r\n    sound: '\/wp-content\/uploads\/2026\/06\/videoplayback-1.mp3'\r\n  },\r\n  { \r\n    name: 'Rabbit', \r\n    img: '\/wp-content\/uploads\/2026\/05\/bun-bun-e1777679361991.png',\r\n    sound: '\/wp-content\/uploads\/2026\/06\/videoplayback.mp3'\r\n  }\r\n];\r\n\r\nlet correctAnimal;\r\nlet lastCorrectAnimal = null;\r\nlet currentAudio = null;\r\n\r\n\/\/ \ud83d\udd0a Play looping sound\r\nfunction playLoopSound(src) {\r\n  if (currentAudio) {\r\n    currentAudio.pause();\r\n    currentAudio.currentTime = 0;\r\n  }\r\n  currentAudio = new Audio(src);\r\n  currentAudio.loop = true; \/\/ \ud83d\udd01 LOOP ENABLED\r\n  currentAudio.play();\r\n}\r\n\r\n\/\/ \ud83d\uded1 Stop sound\r\nfunction stopSound() {\r\n  if (currentAudio) {\r\n    currentAudio.pause();\r\n    currentAudio.currentTime = 0;\r\n  }\r\n}\r\n\r\n\/\/ \ud83c\udfb2 Shuffle\r\nfunction shuffleArray(array) {\r\n  const newArray = [...array];\r\n  for (let i = newArray.length - 1; i > 0; i--) {\r\n    const j = Math.floor(Math.random() * (i + 1));\r\n    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\r\n  }\r\n  return newArray;\r\n}\r\n\r\n\/\/ \ud83c\udfae Start game\r\nfunction startSpotGame() {\r\n  spotGameMessage.textContent = '\ud83d\udd0a Listen carefully and click the correct animal';\r\n  spotGameAnimalOptions.innerHTML = '';\r\n\r\n  const shuffled = shuffleArray(animals);\r\n\r\n  shuffled.forEach(animal => {\r\n    const img = document.createElement('img');\r\n    img.src = animal.img;\r\n    img.dataset.name = animal.name;\r\n    img.dataset.sound = animal.sound;\r\n    spotGameAnimalOptions.appendChild(img);\r\n  });\r\n\r\n  \/\/ \ud83c\udfaf Pick new correct animal\r\n  do {\r\n    correctAnimal = shuffled[Math.floor(Math.random() * shuffled.length)];\r\n  } while (lastCorrectAnimal && correctAnimal.name === lastCorrectAnimal.name);\r\n\r\n  lastCorrectAnimal = correctAnimal;\r\n\r\n  \/\/ \ud83d\udd0a Play looping sound\r\n  playLoopSound(correctAnimal.sound);\r\n}\r\n\r\n\/\/ \u25b6\ufe0f Open modal\r\nspotGameOpenBtn.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'flex';\r\n  startSpotGame();\r\n});\r\n\r\n\/\/ \u274c Close modal\r\nspotGameClose.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'none';\r\n  stopSound();\r\n});\r\n\r\n\/\/ \ud83d\uddb1\ufe0f Click handler\r\nspotGameAnimalOptions.addEventListener('click', (e) => {\r\n  if (e.target.tagName === 'IMG') {\r\n    const chosen = e.target.dataset.name;\r\n\r\n    if (chosen === correctAnimal.name) {\r\n      spotGameMessage.textContent = '\ud83c\udf89 Correct! Next sound...';\r\n\r\n      stopSound(); \/\/ \ud83d\uded1 stop loop\r\n\r\n      setTimeout(() => {\r\n        startSpotGame();\r\n      }, 1200);\r\n\r\n    } else {\r\n      spotGameMessage.textContent = '\u274c Wrong! Try again.';\r\n      \/\/ \ud83d\udd01 DO NOTHING \u2192 sound keeps looping\r\n    }\r\n  }\r\n});\r\n\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc64dba elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"bc64dba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1560\" height=\"903\" src=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4.png\" class=\"attachment-full size-full wp-image-633\" alt=\"\" srcset=\"https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4.png 1560w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4-300x174.png 300w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4-1024x593.png 1024w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4-768x445.png 768w, https:\/\/lana.client-demo-websites.com\/wp-content\/uploads\/2026\/05\/Group-4-1536x889.png 1536w\" sizes=\"(max-width: 1560px) 100vw, 1560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Coloring Fun Activities Coloring &times; \ud83d\udd8c Brush \ud83e\uddfd Eraser \ud83d\uddd1 Clear \u2b07 Download Maze Game &times; OK \u2b06 \u2b05 \u27a1 \u2b07 Listen &amp; play &times; Listen for the Sound<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-794","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/comments?post=794"}],"version-history":[{"count":7,"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/794\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/794\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/lana.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/media?parent=794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}