Kindness Kingdom \u2013 The Secret Whisper<\/title>\n <style>\n * {\n box-sizing: border-box;\n user-select: none;\n }\n body {\n font-family: 'Comic Neue', 'Segoe UI', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;\n background: linear-gradient(145deg, #b8e1fc 0%, #a0d2f0 100%);\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .game-container {\n max-width: 900px;\n width: 100%;\n background: #fffaf2;\n border-radius: 64px;\n box-shadow: 0 20px 35px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n .header {\n background: #f4a261;\n padding: 15px 25px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 5px solid #e76f51;\n }\n .title {\n font-size: 1.6rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 0 #c46d2b;\n }\n .badge-area {\n background: #fff0c0;\n padding: 6px 15px;\n border-radius: 40px;\n font-size: 0.9rem;\n font-weight: bold;\n color: #c46d2b;\n }\n .main-card {\n padding: 25px 30px;\n }\n .story-box {\n background: #feffdd;\n border-radius: 48px;\n padding: 20px;\n border: 3px solid #f4a261;\n margin-bottom: 25px;\n font-size: 1.2rem;\n line-height: 1.4;\n text-align: center;\n }\n .character {\n font-size: 3rem;\n margin-bottom: 8px;\n }\n .choices {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n margin: 20px 0;\n }\n .choice-btn {\n background: #f2d8b0;\n border: none;\n border-radius: 60px;\n padding: 12px 25px;\n font-family: inherit;\n font-weight: bold;\n font-size: 1rem;\n cursor: pointer;\n transition: 0.1s;\n box-shadow: 0 4px 0 #b48b5a;\n }\n .choice-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #b48b5a;\n }\n .tool-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n margin: 20px 0;\n }\n .tool-card {\n background: #ffe0b5;\n width: 140px;\n border-radius: 40px;\n padding: 12px 5px;\n text-align: center;\n cursor: pointer;\n transition: 0.1s;\n border: 2px solid #f4a261;\n }\n .tool-card.selected {\n background: #f4a261;\n color: white;\n border-color: white;\n transform: scale(1.02);\n }\n .next-btn {\n background: #2a9d8f;\n color: white;\n font-size: 1.2rem;\n padding: 12px 30px;\n border: none;\n border-radius: 60px;\n cursor: pointer;\n font-weight: bold;\n margin-top: 20px;\n width: 100%;\n }\n .reset-btn {\n background: #e76f51;\n margin-top: 10px;\n }\n .feedback {\n background: #e0f2fe;\n border-radius: 32px;\n padding: 12px;\n margin: 20px 0;\n text-align: center;\n font-weight: bold;\n }\n .garden {\n background: #e3f2cf;\n border-radius: 40px;\n padding: 15px;\n margin-top: 20px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .flower {\n font-size: 2rem;\n filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));\n }\n .hidden {\n display: none;\n }\n @media (max-width: 550px) {\n .game-container { border-radius: 32px; }\n .main-card { padding: 20px; }\n .choice-btn { font-size: 0.8rem; padding: 8px 16px; }\n .tool-card { width: 110px; font-size: 0.8rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"game-container\" id=\"gameApp\">\n <div class=\"header\">\n <div class=\"title\">\ud83c\udf38 Kindness Kingdom<\/div>\n <div class=\"badge-area\" id=\"badgeDisplay\">\ud83c\udf31 Garden: 0 flowers<\/div>\n <\/div>\n <div class=\"main-card\" id=\"mainContent\"><\/div>\n<\/div>\n\n<script>\n \/\/ Game state\n let gameState = {\n currentEpisode: 1,\n currentStep: \"examine\",\n completedEpisodes: [],\n earnedBadges: [],\n selectedPattern: null,\n selectedTool: null\n };\n\n \/\/ Episode 1 \u2013 The Secret Whisper\n const episodes = {\n 1: {\n title: \"The Secret Whisper\",\n story: \"\ud83e\udd8a Foxy the fox told a secret about Squirrel to Rabbit. 'Did you hear? Squirrel cheated in the race!' Rabbit felt uncomfortable but didn't say anything. Later, Squirrel found out and felt very sad and betrayed.\",\n characters: \"Foxy (fox), Rabbit, Squirrel\",\n examine: {\n question: \"What unrighteous pattern did Foxy show? (Choose the main one)\",\n options: [\n { text: \"\ud83d\udde3\ufe0f Gossip\", value: \"gossip\", correct: true },\n { text: \"\ud83d\ude36 Avoiding\", value: \"avoiding\", correct: false },\n { text: \"\ud83d\ude24 Blaming\", value: \"blaming\", correct: false }\n ],\n correctValues: [\"gossip\"]\n },\n equip: {\n description: \"Now choose a Righteous Tool to help Foxy make things right.\",\n tools: [\n { name: \"\ud83d\udcac Truth Whistle\", desc: \"Tell the truth and apologise to Squirrel\", effect: \"Foxy admits spreading the secret and says sorry.\" },\n { name: \"\ud83d\udee1\ufe0f Kindness Shield\", desc: \"Say something nice about Squirrel to everyone\", effect: \"Foxy compliments Squirrel's honest effort in the race.\" },\n { name: \"\ud83e\udd1d Bridge Builder\", desc: \"Help Foxy and Squirrel become friends again\", effect: \"They draw a picture together and share snacks.\" }\n ]\n },\n engage: {\n miniGameDescription: \"Help Foxy choose the right words to apologise. Drag the correct phrase into the sentence (click the best choice).\",\n sentenceStart: \"Foxy says: 'I was wrong to ______. Will you forgive me?'\",\n options: [\n { phrase: \"spread a secret about you\", correct: true },\n { phrase: \"run away\", correct: false },\n { phrase: \"blame you\", correct: false }\n ],\n correctPhrase: \"spread a secret about you\"\n },\n reward: {\n pattern: \"Gossip Guardian\",\n flower: \"\ud83c\udf38\",\n badge: \"Gossip Guardian\"\n }\n }\n };\n\n function loadGame() {\n const saved = localStorage.getItem(\"kindnessKingdom\");\n if (saved) {\n try {\n const data = JSON.parse(saved);\n gameState.completedEpisodes = data.completedEpisodes || [];\n gameState.earnedBadges = data.earnedBadges || [];\n updateBadgeDisplay();\n } catch(e) {}\n }\n gameState.currentEpisode = 1;\n gameState.currentStep = \"examine\";\n gameState.selectedPattern = null;\n gameState.selectedTool = null;\n render();\n }\n\n function saveGame() {\n const toSave = {\n completedEpisodes: gameState.completedEpisodes,\n earnedBadges: gameState.earnedBadges\n };\n localStorage.setItem(\"kindnessKingdom\", JSON.stringify(toSave));\n updateBadgeDisplay();\n }\n\n function updateBadgeDisplay() {\n const badgeDiv = document.getElementById(\"badgeDisplay\");\n if (badgeDiv) {\n badgeDiv.innerHTML = `\ud83c\udf38 Garden: ${gameState.earnedBadges.length} flower${gameState.earnedBadges.length !== 1 ? 's' : ''}`;\n }\n }\n\n function completeEpisode() {\n const ep = episodes[gameState.currentEpisode];\n if (!gameState.completedEpisodes.includes(gameState.currentEpisode)) {\n gameState.completedEpisodes.push(gameState.currentEpisode);\n if (ep.reward.badge && !gameState.earnedBadges.includes(ep.reward.badge)) {\n gameState.earnedBadges.push(ep.reward.badge);\n }\n saveGame();\n }\n gameState.currentStep = \"finished\";\n render();\n }\n\n function renderGarden() {\n const gardenDiv = document.createElement(\"div\");\n gardenDiv.className = \"garden\";\n gardenDiv.innerHTML = `<strong>\ud83c\udf3b Your Garden of Growth \ud83c\udf3b<\/strong><br>`;\n if (gameState.earnedBadges.length === 0) {\n gardenDiv.innerHTML += `<div>No flowers yet. Complete a mission to grow a flower!<\/div>`;\n } else {\n gameState.earnedBadges.forEach(badge => {\n gardenDiv.innerHTML += `<div class=\"flower\">\ud83c\udf38 ${badge}<\/div>`;\n });\n }\n return gardenDiv;\n }\n\n function render() {\n const container = document.getElementById(\"mainContent\");\n if (!container) return;\n const ep = episodes[gameState.currentEpisode];\n if (!ep) {\n container.innerHTML = `<div class=\"story-box\"><p>\ud83c\udf89 You've completed all missions! \ud83c\udf89<\/p><\/div>${renderGarden().outerHTML}<button class=\"next-btn reset-btn\" id=\"resetGameBtn\">Start Over<\/button>`;\n document.getElementById(\"resetGameBtn\")?.addEventListener(\"click\", () => {\n localStorage.removeItem(\"kindnessKingdom\");\n location.reload();\n });\n return;\n }\n\n if (gameState.currentStep === \"examine\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <div class=\"character\">\ud83e\udd8a\ud83d\udc30\ud83d\udc3f\ufe0f<\/div>\n <p><strong>\ud83d\udcd6 ${ep.title}<\/strong><br>${ep.story}<\/p>\n <p>${ep.examine.question}<\/p>\n <\/div>\n <div class=\"choices\" id=\"examineChoices\">\n ${ep.examine.options.map(opt => `<button class=\"choice-btn\" data-value=\"${opt.value}\">${opt.text}<\/button>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"examineNextBtn\" disabled>\u27a1\ufe0f Next: Choose Tool<\/button>\n <div class=\"feedback\" id=\"examineFeedback\"><\/div>\n `;\n const buttons = document.querySelectorAll(\"#examineChoices .choice-btn\");\n let selectedValue = null;\n buttons.forEach(btn => {\n btn.addEventListener(\"click\", () => {\n buttons.forEach(b => b.style.background = \"#f2d8b0\");\n btn.style.background = \"#f4a261\";\n selectedValue = btn.getAttribute(\"data-value\");\n const correctValues = ep.examine.correctValues || [\"gossip\"];\n const isCorrect = correctValues.includes(selectedValue);\n const feedbackDiv = document.getElementById(\"examineFeedback\");\n if (isCorrect) {\n feedbackDiv.innerHTML = \"\u2705 Correct! Spreading secrets (gossip) hurts friendships. Now let's equip a tool to fix it.\";\n document.getElementById(\"examineNextBtn\").disabled = false;\n gameState.selectedPattern = selectedValue;\n } else {\n feedbackDiv.innerHTML = \"\u274c Not quite. Gossip means sharing private or hurtful things about someone. Try again!\";\n document.getElementById(\"examineNextBtn\").disabled = true;\n }\n });\n });\n document.getElementById(\"examineNextBtn\").addEventListener(\"click\", () => {\n if (gameState.selectedPattern) {\n gameState.currentStep = \"equip\";\n render();\n }\n });\n }\n else if (gameState.currentStep === \"equip\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83d\udee0\ufe0f ${ep.equip.description}<\/p>\n <\/div>\n <div class=\"tool-grid\" id=\"toolGrid\">\n ${ep.equip.tools.map(tool => `<div class=\"tool-card\" data-tool=\"${tool.name}\"><strong>${tool.name}<\/strong><br><small>${tool.desc}<\/small><\/div>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"equipNextBtn\" disabled>\u2728 Use Tool & Move to Practice<\/button>\n <div class=\"feedback\" id=\"equipFeedback\"><\/div>\n `;\n const toolCards = document.querySelectorAll(\".tool-card\");\n let selectedTool = null;\n toolCards.forEach(card => {\n card.addEventListener(\"click\", () => {\n toolCards.forEach(c => c.classList.remove(\"selected\"));\n card.classList.add(\"selected\");\n selectedTool = card.getAttribute(\"data-tool\");\n gameState.selectedTool = selectedTool;\n document.getElementById(\"equipFeedback\").innerHTML = `\u2705 You chose ${selectedTool}! That's a wise choice.`;\n document.getElementById(\"equipNextBtn\").disabled = false;\n });\n });\n document.getElementById(\"equipNextBtn\").addEventListener(\"click\", () => {\n if (gameState.selectedTool) {\n gameState.currentStep = \"engage\";\n render();\n }\n });\n }\n else if (gameState.currentStep === \"engage\") {\n const engageData = ep.engage;\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83c\udfae ${engageData.miniGameDescription}<\/p>\n <p>Complete the sentence: <strong>\"${engageData.sentenceStart}\"<\/strong><\/p>\n <\/div>\n <div class=\"choices\" id=\"engageOptions\">\n ${engageData.options.map(opt => `<button class=\"choice-btn\" data-phrase=\"${opt.phrase}\">\"${opt.phrase}\"<\/button>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"engageCompleteBtn\" disabled>\ud83c\udf31 Complete Mission<\/button>\n <div class=\"feedback\" id=\"engageFeedback\"><\/div>\n `;\n const engageBtns = document.querySelectorAll(\"#engageOptions .choice-btn\");\n let correctChosen = false;\n engageBtns.forEach(btn => {\n btn.addEventListener(\"click\", () => {\n const phrase = btn.getAttribute(\"data-phrase\");\n const isCorrect = (phrase === engageData.correctPhrase);\n if (isCorrect) {\n document.getElementById(\"engageFeedback\").innerHTML = \"\ud83c\udf89 Wonderful! Foxy learns to take responsibility and apologise. Friendship blooms again!\";\n document.getElementById(\"engageCompleteBtn\").disabled = false;\n correctChosen = true;\n } else {\n document.getElementById(\"engageFeedback\").innerHTML = \"\u274c That doesn't fit. What should Foxy admit to doing wrong? Try again!\";\n document.getElementById(\"engageCompleteBtn\").disabled = true;\n }\n });\n });\n document.getElementById(\"engageCompleteBtn\").addEventListener(\"click\", () => {\n if (correctChosen) {\n completeEpisode();\n } else {\n alert(\"First choose the correct phrase to complete the apology!\");\n }\n });\n }\n else if (gameState.currentStep === \"finished\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83c\udf89\u2728 Mission Accomplished! \u2728\ud83c\udf89<\/p>\n <p>You helped Foxy fix the secret\u2011whisper problem and earned the <strong>${ep.reward.badge}<\/strong> badge!<\/p>\n <\/div>\n <div id=\"gardenContainer\"><\/div>\n <button class=\"next-btn\" id=\"playAgainBtn\">\u2b50 Play Again (Next Episode Coming Soon!) \u2b50<\/button>\n <button class=\"next-btn reset-btn\" id=\"resetAllBtn\">\ud83d\uddd1\ufe0f Reset All Progress<\/button>\n `;\n const gardenDiv = renderGarden();\n document.getElementById(\"gardenContainer\").appendChild(gardenDiv);\n document.getElementById(\"playAgainBtn\").addEventListener(\"click\", () => {\n gameState.currentStep = \"examine\";\n gameState.selectedPattern = null;\n gameState.selectedTool = null;\n render();\n });\n document.getElementById(\"resetAllBtn\").addEventListener(\"click\", () => {\n if (confirm(\"Delete all your flowers and start over?\")) {\n localStorage.removeItem(\"kindnessKingdom\");\n location.reload();\n }\n });\n }\n }\n\n loadGame();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kindness Kingdom \u2013 The Secret Whisper \ud83c\udf38 Kindness Kingdom \ud83c\udf31 Garden: 0 flowers<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":157,"date":"2026-05-31T18:35:40","date_gmt":"2026-05-31T18:35:40","guid":{"rendered":"https:\/\/camp.wiserighteous.org\/?page_id=157"},"modified":"2026-05-31T18:35:40","modified_gmt":"2026-05-31T18:35:40","slug":"kindness-kingdom-the-secret-whisper","status":"publish","type":"page","link":"https:\/\/camp.wiserighteous.org\/index.php\/kindness-kingdom-the-secret-whisper\/","title":{"rendered":"Kindness Kingdom \u2013 The Secret Whisper"},"content":{"rendered":"\n\n\n\n \n \n Kindness Kingdom \u2013 The Secret Whisper<\/title>\n <style>\n * {\n box-sizing: border-box;\n user-select: none;\n }\n body {\n font-family: 'Comic Neue', 'Segoe UI', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;\n background: linear-gradient(145deg, #b8e1fc 0%, #a0d2f0 100%);\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .game-container {\n max-width: 900px;\n width: 100%;\n background: #fffaf2;\n border-radius: 64px;\n box-shadow: 0 20px 35px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n .header {\n background: #f4a261;\n padding: 15px 25px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 5px solid #e76f51;\n }\n .title {\n font-size: 1.6rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 0 #c46d2b;\n }\n .badge-area {\n background: #fff0c0;\n padding: 6px 15px;\n border-radius: 40px;\n font-size: 0.9rem;\n font-weight: bold;\n color: #c46d2b;\n }\n .main-card {\n padding: 25px 30px;\n }\n .story-box {\n background: #feffdd;\n border-radius: 48px;\n padding: 20px;\n border: 3px solid #f4a261;\n margin-bottom: 25px;\n font-size: 1.2rem;\n line-height: 1.4;\n text-align: center;\n }\n .character {\n font-size: 3rem;\n margin-bottom: 8px;\n }\n .choices {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n margin: 20px 0;\n }\n .choice-btn {\n background: #f2d8b0;\n border: none;\n border-radius: 60px;\n padding: 12px 25px;\n font-family: inherit;\n font-weight: bold;\n font-size: 1rem;\n cursor: pointer;\n transition: 0.1s;\n box-shadow: 0 4px 0 #b48b5a;\n }\n .choice-btn:active {\n transform: translateY(2px);\n box-shadow: 0 2px 0 #b48b5a;\n }\n .tool-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n margin: 20px 0;\n }\n .tool-card {\n background: #ffe0b5;\n width: 140px;\n border-radius: 40px;\n padding: 12px 5px;\n text-align: center;\n cursor: pointer;\n transition: 0.1s;\n border: 2px solid #f4a261;\n }\n .tool-card.selected {\n background: #f4a261;\n color: white;\n border-color: white;\n transform: scale(1.02);\n }\n .next-btn {\n background: #2a9d8f;\n color: white;\n font-size: 1.2rem;\n padding: 12px 30px;\n border: none;\n border-radius: 60px;\n cursor: pointer;\n font-weight: bold;\n margin-top: 20px;\n width: 100%;\n }\n .reset-btn {\n background: #e76f51;\n margin-top: 10px;\n }\n .feedback {\n background: #e0f2fe;\n border-radius: 32px;\n padding: 12px;\n margin: 20px 0;\n text-align: center;\n font-weight: bold;\n }\n .garden {\n background: #e3f2cf;\n border-radius: 40px;\n padding: 15px;\n margin-top: 20px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .flower {\n font-size: 2rem;\n filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));\n }\n .hidden {\n display: none;\n }\n @media (max-width: 550px) {\n .game-container { border-radius: 32px; }\n .main-card { padding: 20px; }\n .choice-btn { font-size: 0.8rem; padding: 8px 16px; }\n .tool-card { width: 110px; font-size: 0.8rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"game-container\" id=\"gameApp\">\n <div class=\"header\">\n <div class=\"title\">\ud83c\udf38 Kindness Kingdom<\/div>\n <div class=\"badge-area\" id=\"badgeDisplay\">\ud83c\udf31 Garden: 0 flowers<\/div>\n <\/div>\n <div class=\"main-card\" id=\"mainContent\"><\/div>\n<\/div>\n\n<script>\n \/\/ Game state\n let gameState = {\n currentEpisode: 1,\n currentStep: \"examine\",\n completedEpisodes: [],\n earnedBadges: [],\n selectedPattern: null,\n selectedTool: null\n };\n\n \/\/ Episode 1 \u2013 The Secret Whisper\n const episodes = {\n 1: {\n title: \"The Secret Whisper\",\n story: \"\ud83e\udd8a Foxy the fox told a secret about Squirrel to Rabbit. 'Did you hear? Squirrel cheated in the race!' Rabbit felt uncomfortable but didn't say anything. Later, Squirrel found out and felt very sad and betrayed.\",\n characters: \"Foxy (fox), Rabbit, Squirrel\",\n examine: {\n question: \"What unrighteous pattern did Foxy show? (Choose the main one)\",\n options: [\n { text: \"\ud83d\udde3\ufe0f Gossip\", value: \"gossip\", correct: true },\n { text: \"\ud83d\ude36 Avoiding\", value: \"avoiding\", correct: false },\n { text: \"\ud83d\ude24 Blaming\", value: \"blaming\", correct: false }\n ],\n correctValues: [\"gossip\"]\n },\n equip: {\n description: \"Now choose a Righteous Tool to help Foxy make things right.\",\n tools: [\n { name: \"\ud83d\udcac Truth Whistle\", desc: \"Tell the truth and apologise to Squirrel\", effect: \"Foxy admits spreading the secret and says sorry.\" },\n { name: \"\ud83d\udee1\ufe0f Kindness Shield\", desc: \"Say something nice about Squirrel to everyone\", effect: \"Foxy compliments Squirrel's honest effort in the race.\" },\n { name: \"\ud83e\udd1d Bridge Builder\", desc: \"Help Foxy and Squirrel become friends again\", effect: \"They draw a picture together and share snacks.\" }\n ]\n },\n engage: {\n miniGameDescription: \"Help Foxy choose the right words to apologise. Drag the correct phrase into the sentence (click the best choice).\",\n sentenceStart: \"Foxy says: 'I was wrong to ______. Will you forgive me?'\",\n options: [\n { phrase: \"spread a secret about you\", correct: true },\n { phrase: \"run away\", correct: false },\n { phrase: \"blame you\", correct: false }\n ],\n correctPhrase: \"spread a secret about you\"\n },\n reward: {\n pattern: \"Gossip Guardian\",\n flower: \"\ud83c\udf38\",\n badge: \"Gossip Guardian\"\n }\n }\n };\n\n function loadGame() {\n const saved = localStorage.getItem(\"kindnessKingdom\");\n if (saved) {\n try {\n const data = JSON.parse(saved);\n gameState.completedEpisodes = data.completedEpisodes || [];\n gameState.earnedBadges = data.earnedBadges || [];\n updateBadgeDisplay();\n } catch(e) {}\n }\n gameState.currentEpisode = 1;\n gameState.currentStep = \"examine\";\n gameState.selectedPattern = null;\n gameState.selectedTool = null;\n render();\n }\n\n function saveGame() {\n const toSave = {\n completedEpisodes: gameState.completedEpisodes,\n earnedBadges: gameState.earnedBadges\n };\n localStorage.setItem(\"kindnessKingdom\", JSON.stringify(toSave));\n updateBadgeDisplay();\n }\n\n function updateBadgeDisplay() {\n const badgeDiv = document.getElementById(\"badgeDisplay\");\n if (badgeDiv) {\n badgeDiv.innerHTML = `\ud83c\udf38 Garden: ${gameState.earnedBadges.length} flower${gameState.earnedBadges.length !== 1 ? 's' : ''}`;\n }\n }\n\n function completeEpisode() {\n const ep = episodes[gameState.currentEpisode];\n if (!gameState.completedEpisodes.includes(gameState.currentEpisode)) {\n gameState.completedEpisodes.push(gameState.currentEpisode);\n if (ep.reward.badge && !gameState.earnedBadges.includes(ep.reward.badge)) {\n gameState.earnedBadges.push(ep.reward.badge);\n }\n saveGame();\n }\n gameState.currentStep = \"finished\";\n render();\n }\n\n function renderGarden() {\n const gardenDiv = document.createElement(\"div\");\n gardenDiv.className = \"garden\";\n gardenDiv.innerHTML = `<strong>\ud83c\udf3b Your Garden of Growth \ud83c\udf3b<\/strong><br>`;\n if (gameState.earnedBadges.length === 0) {\n gardenDiv.innerHTML += `<div>No flowers yet. Complete a mission to grow a flower!<\/div>`;\n } else {\n gameState.earnedBadges.forEach(badge => {\n gardenDiv.innerHTML += `<div class=\"flower\">\ud83c\udf38 ${badge}<\/div>`;\n });\n }\n return gardenDiv;\n }\n\n function render() {\n const container = document.getElementById(\"mainContent\");\n if (!container) return;\n const ep = episodes[gameState.currentEpisode];\n if (!ep) {\n container.innerHTML = `<div class=\"story-box\"><p>\ud83c\udf89 You've completed all missions! \ud83c\udf89<\/p><\/div>${renderGarden().outerHTML}<button class=\"next-btn reset-btn\" id=\"resetGameBtn\">Start Over<\/button>`;\n document.getElementById(\"resetGameBtn\")?.addEventListener(\"click\", () => {\n localStorage.removeItem(\"kindnessKingdom\");\n location.reload();\n });\n return;\n }\n\n if (gameState.currentStep === \"examine\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <div class=\"character\">\ud83e\udd8a\ud83d\udc30\ud83d\udc3f\ufe0f<\/div>\n <p><strong>\ud83d\udcd6 ${ep.title}<\/strong><br>${ep.story}<\/p>\n <p>${ep.examine.question}<\/p>\n <\/div>\n <div class=\"choices\" id=\"examineChoices\">\n ${ep.examine.options.map(opt => `<button class=\"choice-btn\" data-value=\"${opt.value}\">${opt.text}<\/button>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"examineNextBtn\" disabled>\u27a1\ufe0f Next: Choose Tool<\/button>\n <div class=\"feedback\" id=\"examineFeedback\"><\/div>\n `;\n const buttons = document.querySelectorAll(\"#examineChoices .choice-btn\");\n let selectedValue = null;\n buttons.forEach(btn => {\n btn.addEventListener(\"click\", () => {\n buttons.forEach(b => b.style.background = \"#f2d8b0\");\n btn.style.background = \"#f4a261\";\n selectedValue = btn.getAttribute(\"data-value\");\n const correctValues = ep.examine.correctValues || [\"gossip\"];\n const isCorrect = correctValues.includes(selectedValue);\n const feedbackDiv = document.getElementById(\"examineFeedback\");\n if (isCorrect) {\n feedbackDiv.innerHTML = \"\u2705 Correct! Spreading secrets (gossip) hurts friendships. Now let's equip a tool to fix it.\";\n document.getElementById(\"examineNextBtn\").disabled = false;\n gameState.selectedPattern = selectedValue;\n } else {\n feedbackDiv.innerHTML = \"\u274c Not quite. Gossip means sharing private or hurtful things about someone. Try again!\";\n document.getElementById(\"examineNextBtn\").disabled = true;\n }\n });\n });\n document.getElementById(\"examineNextBtn\").addEventListener(\"click\", () => {\n if (gameState.selectedPattern) {\n gameState.currentStep = \"equip\";\n render();\n }\n });\n }\n else if (gameState.currentStep === \"equip\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83d\udee0\ufe0f ${ep.equip.description}<\/p>\n <\/div>\n <div class=\"tool-grid\" id=\"toolGrid\">\n ${ep.equip.tools.map(tool => `<div class=\"tool-card\" data-tool=\"${tool.name}\"><strong>${tool.name}<\/strong><br><small>${tool.desc}<\/small><\/div>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"equipNextBtn\" disabled>\u2728 Use Tool & Move to Practice<\/button>\n <div class=\"feedback\" id=\"equipFeedback\"><\/div>\n `;\n const toolCards = document.querySelectorAll(\".tool-card\");\n let selectedTool = null;\n toolCards.forEach(card => {\n card.addEventListener(\"click\", () => {\n toolCards.forEach(c => c.classList.remove(\"selected\"));\n card.classList.add(\"selected\");\n selectedTool = card.getAttribute(\"data-tool\");\n gameState.selectedTool = selectedTool;\n document.getElementById(\"equipFeedback\").innerHTML = `\u2705 You chose ${selectedTool}! That's a wise choice.`;\n document.getElementById(\"equipNextBtn\").disabled = false;\n });\n });\n document.getElementById(\"equipNextBtn\").addEventListener(\"click\", () => {\n if (gameState.selectedTool) {\n gameState.currentStep = \"engage\";\n render();\n }\n });\n }\n else if (gameState.currentStep === \"engage\") {\n const engageData = ep.engage;\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83c\udfae ${engageData.miniGameDescription}<\/p>\n <p>Complete the sentence: <strong>\"${engageData.sentenceStart}\"<\/strong><\/p>\n <\/div>\n <div class=\"choices\" id=\"engageOptions\">\n ${engageData.options.map(opt => `<button class=\"choice-btn\" data-phrase=\"${opt.phrase}\">\"${opt.phrase}\"<\/button>`).join('')}\n <\/div>\n <button class=\"next-btn\" id=\"engageCompleteBtn\" disabled>\ud83c\udf31 Complete Mission<\/button>\n <div class=\"feedback\" id=\"engageFeedback\"><\/div>\n `;\n const engageBtns = document.querySelectorAll(\"#engageOptions .choice-btn\");\n let correctChosen = false;\n engageBtns.forEach(btn => {\n btn.addEventListener(\"click\", () => {\n const phrase = btn.getAttribute(\"data-phrase\");\n const isCorrect = (phrase === engageData.correctPhrase);\n if (isCorrect) {\n document.getElementById(\"engageFeedback\").innerHTML = \"\ud83c\udf89 Wonderful! Foxy learns to take responsibility and apologise. Friendship blooms again!\";\n document.getElementById(\"engageCompleteBtn\").disabled = false;\n correctChosen = true;\n } else {\n document.getElementById(\"engageFeedback\").innerHTML = \"\u274c That doesn't fit. What should Foxy admit to doing wrong? Try again!\";\n document.getElementById(\"engageCompleteBtn\").disabled = true;\n }\n });\n });\n document.getElementById(\"engageCompleteBtn\").addEventListener(\"click\", () => {\n if (correctChosen) {\n completeEpisode();\n } else {\n alert(\"First choose the correct phrase to complete the apology!\");\n }\n });\n }\n else if (gameState.currentStep === \"finished\") {\n container.innerHTML = `\n <div class=\"story-box\">\n <p>\ud83c\udf89\u2728 Mission Accomplished! \u2728\ud83c\udf89<\/p>\n <p>You helped Foxy fix the secret\u2011whisper problem and earned the <strong>${ep.reward.badge}<\/strong> badge!<\/p>\n <\/div>\n <div id=\"gardenContainer\"><\/div>\n <button class=\"next-btn\" id=\"playAgainBtn\">\u2b50 Play Again (Next Episode Coming Soon!) \u2b50<\/button>\n <button class=\"next-btn reset-btn\" id=\"resetAllBtn\">\ud83d\uddd1\ufe0f Reset All Progress<\/button>\n `;\n const gardenDiv = renderGarden();\n document.getElementById(\"gardenContainer\").appendChild(gardenDiv);\n document.getElementById(\"playAgainBtn\").addEventListener(\"click\", () => {\n gameState.currentStep = \"examine\";\n gameState.selectedPattern = null;\n gameState.selectedTool = null;\n render();\n });\n document.getElementById(\"resetAllBtn\").addEventListener(\"click\", () => {\n if (confirm(\"Delete all your flowers and start over?\")) {\n localStorage.removeItem(\"kindnessKingdom\");\n location.reload();\n }\n });\n }\n }\n\n loadGame();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kindness Kingdom \u2013 The Secret Whisper \ud83c\udf38 Kindness Kingdom \ud83c\udf31 Garden: 0 flowers<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}