{"id":311,"date":"2026-02-26T21:25:34","date_gmt":"2026-02-26T21:25:34","guid":{"rendered":"https:\/\/tlockhart.com\/?page_id=311"},"modified":"2026-05-19T18:40:38","modified_gmt":"2026-05-19T18:40:38","slug":"fun-activities","status":"publish","type":"page","link":"https:\/\/tlockhart.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-6cd23b7 e-flex e-con-boxed e-con e-parent\" data-id=\"6cd23b7\" 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-8ad9830 elementor-widget elementor-widget-heading\" data-id=\"8ad9830\" 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-5db1fbf animated-slow e-flex e-con-boxed e-con e-child\" data-id=\"5db1fbf\" 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-e0f8b01 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"e0f8b01\" 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-090522f elementor-widget elementor-widget-heading\" data-id=\"090522f\" 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-e2b8016 elementor-widget elementor-widget-heading\" data-id=\"e2b8016\" 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-e7ee565 elementor-widget elementor-widget-text-editor\" data-id=\"e7ee565\" 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-98973f5 e-con-full e-flex e-con e-child\" data-id=\"98973f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-250cd9e e-con-full e-flex e-con e-child\" data-id=\"250cd9e\" data-element_type=\"container\" data-e-type=\"container\" id=\"games-main\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-f47d53d e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"f47d53d\" 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-d308a80 elementor-widget elementor-widget-heading\" data-id=\"d308a80\" 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-3fce983 elementor-widget elementor-widget-image\" data-id=\"3fce983\" 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:\/\/tlockhart.com\/wp-content\/uploads\/2026\/04\/Group-1000008777-1.png\" class=\"attachment-full size-full wp-image-870\" alt=\"\" srcset=\"https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/04\/Group-1000008777-1.png 398w, https:\/\/tlockhart.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-25db6a8 elementor-widget elementor-widget-html\" data-id=\"25db6a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- 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:\/\/tlockhart.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\r\n\r\n@media (max-width: 576px) {\r\n  .modal-content {\r\n    width: 90%  !important;\r\n}\r\n\r\n.game-box {\r\n    width: 300px  !important;\r\n    height: 330px  !important;\r\n}\r\n\r\n#frog {\r\n    width: 50px  !important;\r\n}\r\n}\r\n\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-6e0da8c e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"6e0da8c\" 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-b00802a elementor-widget elementor-widget-heading\" data-id=\"b00802a\" 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-8ed9b36 elementor-widget elementor-widget-image\" data-id=\"8ed9b36\" 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:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-1000008777-2.png\" class=\"attachment-full size-full wp-image-228\" alt=\"\" srcset=\"https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-1000008777-2.png 398w, https:\/\/tlockhart.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-3272b52 elementor-widget elementor-widget-html\" data-id=\"3272b52\" 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<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\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\/\/ ================= 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-ded80bd e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"ded80bd\" 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-7a25957 elementor-widget elementor-widget-heading\" data-id=\"7a25957\" 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\">Listen for the Sound<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5e4d29 elementor-widget elementor-widget-image\" data-id=\"e5e4d29\" 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:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-1000008778-1.png\" class=\"attachment-full size-full wp-image-227\" alt=\"\" srcset=\"https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-1000008778-1.png 398w, https:\/\/tlockhart.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-2087610 elementor-widget elementor-widget-html\" data-id=\"2087610\" 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\/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>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: 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\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: 'turtle', \r\n    img: '\/wp-content\/uploads\/2026\/03\/1-1.jpg',\r\n    sound: '\/wp-content\/uploads\/2026\/05\/Turtle-Sound-Effect_320k.mp3'\r\n  },\r\n  { \r\n    name: 'squirrel', \r\n    img: '\/wp-content\/uploads\/2026\/03\/8.jpg',\r\n    sound: '\/wp-content\/uploads\/2026\/05\/Squirrel-Sound-Effect-_-ProSounds_320k.mp3'\r\n  },\r\n  { \r\n    name: 'frog', \r\n    img: '\/wp-content\/uploads\/2026\/03\/6.jpg',\r\n    sound: '\/wp-content\/uploads\/2026\/05\/dragon-studio-frog-croaking-sound-effect-322956.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\/\/ \ud83e\ude9f Close on outside click\r\nwindow.addEventListener('click', (e) => {\r\n  if (e.target === spotGameModal) {\r\n    spotGameModal.style.display = 'none';\r\n    stopSound();\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-49a8d3d elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"49a8d3d\" 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:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-4.png\" class=\"attachment-full size-full wp-image-225\" alt=\"\" srcset=\"https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-4.png 1560w, https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-4-300x174.png 300w, https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-4-1024x593.png 1024w, https:\/\/tlockhart.com\/wp-content\/uploads\/2026\/02\/Group-4-768x445.png 768w, https:\/\/tlockhart.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 Listen for the Sound &times; Listen for the Sound<\/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:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/pages\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":43,"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions"}],"predecessor-version":[{"id":1137,"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions\/1137"}],"wp:attachment":[{"href":"https:\/\/tlockhart.com\/index.php\/wp-json\/wp\/v2\/media?parent=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}