{"id":311,"date":"2026-02-26T21:25:34","date_gmt":"2026-02-26T21:25:34","guid":{"rendered":"https:\/\/theresa-lockhart.client-demo-websites.com\/?page_id=311"},"modified":"2026-04-17T22:11:30","modified_gmt":"2026-04-17T22:11:30","slug":"fun-activities","status":"publish","type":"page","link":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/fun-activities\/","title":{"rendered":"Fun Activities"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"311\" class=\"elementor elementor-311\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e85d817 e-flex e-con-boxed e-con e-parent\" data-id=\"e85d817\" 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-5fbf7d4 elementor-widget elementor-widget-heading\" data-id=\"5fbf7d4\" 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 Activities<\/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-01bb8cb e-con-full e-flex e-con e-parent\" data-id=\"01bb8cb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-0752455 animated-slow e-flex e-con-boxed e-con e-child\" data-id=\"0752455\" 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-66af9cb e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"66af9cb\" 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-eb473ea elementor-widget elementor-widget-heading\" data-id=\"eb473ea\" 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 Activities \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2364fab elementor-widget elementor-widget-heading\" data-id=\"2364fab\" 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\">Play, learn, and explore<br> with Little T!\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32ea5ff elementor-widget elementor-widget-text-editor\" data-id=\"32ea5ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Frog Jump, puzzles, and magical forest sound games designed to make storytime even more fun.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b63c543 e-con-full e-flex e-con e-child\" data-id=\"b63c543\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-64b5207 e-con-full e-flex e-con e-child\" data-id=\"64b5207\" 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-c9975bc e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"c9975bc\" 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-1793729 elementor-widget elementor-widget-heading\" data-id=\"1793729\" 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\">Frog Jump<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96f2a79 elementor-widget elementor-widget-image\" data-id=\"96f2a79\" 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 fetchpriority=\"high\" decoding=\"async\" width=\"398\" height=\"344\" src=\"https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1000008777-1.png\" class=\"attachment-full size-full wp-image-870\" alt=\"\" srcset=\"https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1000008777-1.png 398w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1000008777-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-875d220 elementor-widget elementor-widget-html\" data-id=\"875d220\" 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=\"openCanvas\" src=\"\/wp-content\/uploads\/2026\/04\/A\u2018AA\u00aeA\u00a9_1.png\" style=\"cursor: pointer;\">\r\n\r\n<!-- Modal -->\r\n<div id=\"colorModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n\r\n    <span id=\"closeCanvas\" class=\"close\">&times;<\/span>\r\n\r\n    <div class=\"game-box\">\r\n\r\n      <!-- Frog -->\r\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/6-1-scaled-e1774570342203.png\" id=\"frog\">\r\n\r\n      <!-- GRID -->\r\n      <div class=\"lily-grid\">\r\n\r\n        <!-- Row 0 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"0\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"1\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"3\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"4\" data-y=\"0\">\r\n\r\n        <!-- Row 1 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"0\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"1\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"3\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"4\" data-y=\"1\">\r\n\r\n        <!-- Row 2 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"0\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"1\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"2\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"3\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"4\" data-y=\"2\">\r\n\r\n        <!-- Row 3 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"0\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"1\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"3\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"4\" data-y=\"3\">\r\n\r\n        <!-- Row 4 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ecabf2f092e87c2b39b74da88d75667b1.png\" class=\"lily\" data-x=\"0\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"1\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/cute-green-snake-cartoon-vector-37522787-1.png\" class=\"lily wrong\" data-x=\"3\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/190411.png\" class=\"lily\" data-x=\"4\" data-y=\"4\" id=\"final-path\">\r\n\r\n      <\/div>\r\n\r\n      <!-- \ud83d\udd25 POPUP -->\r\n      <div id=\"gamePopup\" class=\"game-popup\">\r\n        <div class=\"popup-box\">\r\n          <p id=\"popupMessage\"><\/p>\r\n          <button id=\"popupBtn\">OK<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Controls -->\r\n    <div class=\"controls\">\r\n      <button id=\"up\">\u2191<\/button><br>\r\n      <button id=\"left\">\u2190<\/button>\r\n      <button id=\"down\">\u2193<\/button>\r\n      <button id=\"right\">\u2192<\/button>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.modal {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: 9999;\r\n  left: 0; top: 0;\r\n  width: 100%; height: 100%;\r\n  background: rgba(0,0,0,0.6);\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.modal-content {\r\n  padding: 20px;\r\n  border-radius: 10px;\r\n  text-align: center;\r\n  position: relative;\r\n  background-image: url(https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/pngtree-aesthetic-blue-sea-water-surface-texture-image_13697188-1.png);\r\n  background-size: cover;\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 15px;\r\n  font-size: 25px;\r\n  cursor: pointer;\r\n}\r\n\r\n.game-box {\r\n  width: 420px;\r\n  height: 420px;\r\n  margin: 20px auto;\r\n  position: relative;\r\n}\r\n\r\n\/* Frog *\/\r\n#frog {\r\n  width: 80px;\r\n  position: absolute;\r\n  z-index: 10;\r\n  transition: .3s all;\r\n}\r\n\r\n\/* Jump *\/\r\n@keyframes frogJump {\r\n  0% {transform: translateY(0);}\r\n  30% {transform: translateY(-35px);}\r\n  100% {transform: translateY(0);}\r\n}\r\n.jump { animation: frogJump .35s; }\r\n\r\n\/* Grid *\/\r\n.lily-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(5,1fr);\r\n  grid-template-rows: repeat(5,1fr);\r\n  gap: 8px;\r\n  width: 100%; height: 100%;\r\n}\r\n.lily { width: 100%; height: 100%; object-fit: contain; }\r\n\r\n\/* Controls *\/\r\n.controls button {\r\n  font-size: 20px;\r\n    padding: 10px;\r\n    margin: 3px;\r\n    cursor: pointer;\r\n    background: white;\r\n    color: black;\r\n    border: unset;\r\n}\r\n\r\n\/* \ud83d\udd25 POPUP *\/\r\n.game-popup {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: rgba(0,0,0,0.5);\r\n  z-index: 20;\r\n  top: 0;\r\n}\r\n\r\n.popup-box {\r\n  background: white;\r\n    padding: 20px;\r\n    border-radius: 10px;\r\n    animation: fade .3s;\r\n    width: 90%;\r\n    height: 270px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\np#popupMessage {\r\n    font-size: 30px;\r\n    font-weight: 600;\r\n}\r\nbutton#popupBtn {\r\n    background: #9c4f1f;\r\n    color: white;\r\n    border: unset;\r\n    width: 170px;\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<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n  const modal = document.getElementById(\"colorModal\");\r\n  const frog = document.getElementById(\"frog\");\r\n  const popup = document.getElementById(\"gamePopup\");\r\n  const popupMsg = document.getElementById(\"popupMessage\");\r\n  const popupBtn = document.getElementById(\"popupBtn\");\r\n\r\n  let posX = 0, posY = 0;\r\n\r\n  document.getElementById(\"openCanvas\").onclick = () => {\r\n    modal.style.display = \"flex\";\r\n    resetFrog();\r\n  };\r\n\r\n  document.getElementById(\"closeCanvas\").onclick = () => modal.style.display = \"none\";\r\n\r\n  popupBtn.onclick = () => {\r\n    popup.style.display = \"none\";\r\n    resetFrog();\r\n  };\r\n\r\n  function showPopup(msg) {\r\n    popupMsg.textContent = msg;\r\n    popup.style.display = \"flex\";\r\n  }\r\n\r\n  function updateFrogPosition() {\r\n    const lily = document.querySelector(`.lily[data-x=\"${posX}\"][data-y=\"${posY}\"]`);\r\n    if (!lily) return;\r\n\r\n    const r = lily.getBoundingClientRect();\r\n    const pr = lily.parentElement.getBoundingClientRect();\r\n\r\n    frog.style.left = (r.left - pr.left) + \"px\";\r\n    frog.style.top = (r.top - pr.top) + \"px\";\r\n\r\n    frog.classList.remove(\"jump\");\r\n    void frog.offsetWidth;\r\n    frog.classList.add(\"jump\");\r\n\r\n    if (lily.classList.contains(\"wrong\")) {\r\n      setTimeout(() => showPopup(\"\u274c Wrong Path!\"), 200);\r\n      return;\r\n    }\r\n\r\n    if (lily.id === \"final-path\") {\r\n      setTimeout(() => showPopup(\"\ud83c\udf89 You Won!\"), 200);\r\n    }\r\n  }\r\n\r\n  function resetFrog() {\r\n    posX = 0; posY = 0;\r\n    setTimeout(updateFrogPosition, 50);\r\n  }\r\n\r\n  document.getElementById(\"up\").onclick = () => { if (posY>0) posY--; updateFrogPosition(); };\r\n  document.getElementById(\"down\").onclick = () => { if (posY<4) posY++; updateFrogPosition(); };\r\n  document.getElementById(\"left\").onclick = () => { if (posX>0) posX--; updateFrogPosition(); };\r\n  document.getElementById(\"right\").onclick = () => { if (posX<4) posX++; updateFrogPosition(); };\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-546396b e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"546396b\" 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-d16b3b8 elementor-widget elementor-widget-heading\" data-id=\"d16b3b8\" 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\">Maze Game<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c37302b elementor-widget elementor-widget-image\" data-id=\"c37302b\" 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:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-1000008777-2.png\" class=\"attachment-full size-full wp-image-228\" alt=\"\" srcset=\"https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-1000008777-2.png 398w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-1000008777-2-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-81efeef elementor-widget elementor-widget-html\" data-id=\"81efeef\" 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\/02\/A\u2018AA\u00aeA\u00a9_1-4.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<\/style>\r\n\r\n<script>\r\n\/\/ ================= PLAYER IMAGE ANIMATION =================\r\nlet moveCount = 0;\r\n\r\nconst playerImages = [\r\n  \"\/wp-content\/uploads\/2026\/03\/6-1-scaled-e1774570342203.png\",\r\n  \"\/wp-content\/uploads\/2026\/03\/3-1-1-scaled-e1774570394541.png\",\r\n  \"\/wp-content\/uploads\/2026\/03\/5-1-scaled-e1774570496221.png\",\r\n  \"\/wp-content\/uploads\/2026\/03\/1-1-1-scaled-e1774570533449.png\"\r\n];\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\/\/ \ud83d\udd25 POPUP ELEMENTS\r\nconst popup = document.getElementById(\"mazePopup\");\r\nconst popupMsg = document.getElementById(\"mazePopupMsg\");\r\nconst popupBtn = document.getElementById(\"mazePopupBtn\");\r\n\r\npopupBtn.onclick = () => {\r\n  popup.style.display = \"none\";\r\n  player = {x:1,y:1};\r\n  moveCount = 0;\r\n  drawMaze();\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 =================\r\nfunction drawMaze() {\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      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        const index = Math.min(playerImages.length-1, Math.floor(moveCount\/3));\r\n        cell.style.background = `url('${playerImages[index]}') 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][nx] === 0) {\r\n    player.x = nx;\r\n    player.y = ny;\r\n    moveCount++;\r\n\r\n    if (player.x===goal.x && player.y===goal.y){\r\n      setTimeout(() => {\r\n        showPopup(\"\ud83c\udf89 You Won!\");\r\n      }, 200);\r\n    }\r\n\r\n    drawMaze();\r\n  }\r\n}\r\n\r\n\/\/ ================= KEYBOARD =================\r\ndocument.addEventListener(\"keydown\",(e)=>{\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\/\/ ================= MODAL =================\r\nconst modal = document.getElementById(\"maze-modal\");\r\nconst openBtn = document.getElementById(\"maze-game-btn\");\r\nconst closeBtn = document.getElementById(\"close-maze\");\r\n\r\nopenBtn.onclick = () => { modal.style.display=\"flex\"; drawMaze(); }\r\ncloseBtn.onclick = () => { modal.style.display=\"none\"; }\r\nwindow.onclick = (e) => { if(e.target===modal) modal.style.display=\"none\"; }\r\n\r\n\/\/ INIT\r\ndrawMaze();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-936c091 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"936c091\" 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-211acb5 elementor-widget elementor-widget-heading\" data-id=\"211acb5\" 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\">Spot The Differnce<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d08af5 elementor-widget elementor-widget-image\" data-id=\"5d08af5\" 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:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-1000008778-1.png\" class=\"attachment-full size-full wp-image-227\" alt=\"\" srcset=\"https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-1000008778-1.png 398w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/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-8ca17b5 elementor-widget elementor-widget-html\" data-id=\"8ca17b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div id=\"spot-game-container\">\r\n<img decoding=\"async\" id=\"spot-game-open-btn\" src=\"\/wp-content\/uploads\/2026\/02\/A\u2018AA\u00aeA\u00a9_1-5.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>Click the correct animal!<\/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: cover;\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<\/style>\r\n\r\n<script>\r\n\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\r\nconst animals = [\r\n  { name: 'turtle', img: '\/wp-content\/uploads\/2026\/03\/1-1.jpg' },\r\n  { name: 'Squirrel', img: '\/wp-content\/uploads\/2026\/03\/8.jpg' },\r\n  { name: 'Frog', img: '\/wp-content\/uploads\/2026\/03\/6.jpg' }\r\n];\r\n\r\nlet correctAnimal;\r\n\r\n\r\nfunction speak(text) {\r\n  const msg = new SpeechSynthesisUtterance(text);\r\n  window.speechSynthesis.speak(msg);\r\n}\r\n\r\n\r\nfunction startSpotGame() {\r\n  spotGameMessage.textContent = '';\r\n  spotGameAnimalOptions.innerHTML = '';\r\n\r\n  const shuffled = animals.sort(() => 0.5 - Math.random());\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    spotGameAnimalOptions.appendChild(img);\r\n  });\r\n\r\n  correctAnimal = shuffled[Math.floor(Math.random() * shuffled.length)];\r\n  speak(`Click the ${correctAnimal.name}`);\r\n}\r\n\r\n\r\nspotGameOpenBtn.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'flex';\r\n  startSpotGame();\r\n});\r\n\r\n\r\nspotGameClose.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'none';\r\n});\r\n\r\n\r\nspotGameAnimalOptions.addEventListener('click', (e) => {\r\n  if(e.target.tagName === 'IMG') {\r\n    const chosen = e.target.dataset.name;\r\n    if(chosen === correctAnimal.name) {\r\n      spotGameMessage.textContent = '\ud83c\udf89 Correct! Restarting the game...';\r\n      speak('Correct! Well done!');\r\n      setTimeout(startSpotGame, 2000);\r\n    } else {\r\n      spotGameMessage.textContent = '\u274c Wrong! Try again.';\r\n      speak('Wrong! Try again!');\r\n    }\r\n  }\r\n});\r\n\r\n\r\nwindow.addEventListener('click', (e) => {\r\n  if(e.target === spotGameModal) {\r\n    spotGameModal.style.display = 'none';\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-4832d9d elementor-widget elementor-widget-image\" data-id=\"4832d9d\" 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:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-4.png\" class=\"attachment-full size-full wp-image-225\" alt=\"\" srcset=\"https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-4.png 1560w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-4-300x174.png 300w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-4-1024x593.png 1024w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/Group-4-768x445.png 768w, https:\/\/theresa-lockhart.client-demo-websites.com\/wp-content\/uploads\/2026\/02\/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>Fun Activities Fun Activities Play, learn, and explore with Little T! Frog Jump, puzzles, and magical forest sound games designed to make storytime even more fun. Frog Jump &times; OK \u2191 \u2190 \u2193 \u2192 Maze Game &times; OK \u2b06 \u2b05 \u27a1 \u2b07 Spot The Differnce &times; Click the correct animal!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-311","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":28,"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions\/893"}],"wp:attachment":[{"href":"https:\/\/theresa-lockhart.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/media?parent=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}