MadlySane Games<\/title>\n <style>\n body {\n font-family: 'Arial', sans-serif;\n text-align: center;\n background-color: #f0f0f0;\n padding: 50px;\n }\n .game {\n background-color: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n margin-bottom: 50px;\n }\n .color-button, .memory-card, .mood-button, .breathing-button {\n padding: 15px 30px;\n margin: 10px;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n color: #fff;\n }\n .memory-card {\n background-color: #3498db;\n color: #fff;\n width: 100px;\n height: 100px;\n display: inline-block;\n vertical-align: top;\n line-height: 100px;\n font-size: 24px;\n }\n .hidden {\n background-color: #95a5a6;\n color: #95a5a6;\n }\n #message, #memory-message, #mood-message, #breathing-message {\n margin-top: 20px;\n font-size: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>MadlySane Games<\/h1>\n\n \n <div class=\"game\" id=\"color-match-game\">\n <h2>Color Match Calm<\/h2>\n <p>Click the button that matches the background color.<\/p>\n <div id=\"color-buttons\"><\/div>\n <div id=\"message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"breathing-exercise-game\">\n <h2>Breathing Exercise<\/h2>\n <p>Follow the breathing guide to relax.<\/p>\n <button class=\"breathing-button\" id=\"start-breathing\">Start Breathing Exercise<\/button>\n <div id=\"breathing-message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"memory-match-game\">\n <h2>Memory Match<\/h2>\n <p>Flip the cards to find pairs.<\/p>\n <div id=\"memory-cards\"><\/div>\n <div id=\"memory-message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"mood-picker-game\">\n <h2>Mood-Based Activity Picker<\/h2>\n <p>Click on your current mood to get a suggestion.<\/p>\n <button class=\"mood-button\" style=\"background-color: #e74c3c;\" onclick=\"showMoodActivity('Happy')\">Happy<\/button>\n <button class=\"mood-button\" style=\"background-color: #3498db;\" onclick=\"showMoodActivity('Sad')\">Sad<\/button>\n <button class=\"mood-button\" style=\"background-color: #2ecc71;\" onclick=\"showMoodActivity('Calm')\">Calm<\/button>\n <button class=\"mood-button\" style=\"background-color: #f1c40f;\" onclick=\"showMoodActivity('Anxious')\">Anxious<\/button>\n <div id=\"mood-message\"><\/div>\n <\/div>\n\n <script>\n \/\/ Color Match Calm Game\n const colors = [\n { name: \"Red\", hex: \"#e74c3c\" },\n { name: \"Green\", hex: \"#2ecc71\" },\n { name: \"Blue\", hex: \"#3498db\" },\n { name: \"Purple\", hex: \"#9b59b6\" },\n { name: \"Orange\", hex: \"#e67e22\" }\n ];\n\n const colorGame = document.getElementById(\"color-match-game\");\n const colorButtonsDiv = document.getElementById(\"color-buttons\");\n const colorMessage = document.getElementById(\"message\");\n\n function newColorRound() {\n colorMessage.textContent = \"\";\n colorButtonsDiv.innerHTML = \"\";\n\n const correctColor = colors[Math.floor(Math.random() * colors.length)];\n colorGame.style.backgroundColor = correctColor.hex;\n\n const shuffled = [...colors].sort(() => 0.5 - Math.random());\n shuffled.forEach(color => {\n const btn = document.createElement(\"button\");\n btn.textContent = color.name;\n btn.className = \"color-button\";\n btn.style.backgroundColor = color.hex;\n btn.onclick = () => {\n colorMessage.textContent = color.name === correctColor.name ? \"\u2705 Great job!\" : \"\u274c Try again!\";\n setTimeout(newColorRound, 1000);\n };\n colorButtonsDiv.appendChild(btn);\n });\n }\n\n newColorRound();\n\n \/\/ Breathing Exercise Game\n const breathingButton = document.getElementById(\"start-breathing\");\n const breathingMessage = document.getElementById(\"breathing-message\");\n\n breathingButton.onclick = () => {\n breathingMessage.textContent = \"Breathe in...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Hold...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Breathe out...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Relax...\";\n }, 4000);\n }, 4000);\n }, 4000);\n };\n\n \/\/ Memory Match Game\n const memoryCardsDiv = document.getElementById(\"memory-cards\");\n const memoryMessage = document.getElementById(\"memory-message\");\n const memoryCards = [\"A\", \"A\", \"B\", \"B\", \"C\", \"C\", \"D\", \"D\"];\n\n let firstCard = null;\n let secondCard = null;\n let matches = 0;\n\n function newMemoryRound() {\n memoryMessage.textContent = \"\";\n memoryCardsDiv.innerHTML = \"\";\n matches = 0;\n\n const shuffledCards = [...memoryCards].sort(() => 0.5 - Math.random());\n shuffledCards.forEach(card => {\n const cardDiv = document.createElement(\"div\");\n cardDiv.className = \"memory-card hidden\";\n cardDiv.dataset.card = card;\n cardDiv.onclick = () => {\n if (firstCard && secondCard) return;\n cardDiv.classList.remove(\"hidden\");\n cardDiv.textContent = card;\n if (!firstCard) {\n firstCard = cardDiv;\n } else if (!secondCard) {\n secondCard = cardDiv;\n if (firstCard.dataset.card === secondCard.dataset.card) {\n matches += 1;\n firstCard = null;\n secondCard = null;\n if (matches === memoryCards.length \/ 2) {\n memoryMessage.textContent = \"\u2705 You found all pairs!\";\n setTimeout(newMemoryRound, 2000);\n }\n } else {\n setTimeout(() => {\n firstCard.classList.add(\"hidden\");\n secondCard.classList.add(\"hidden\");\n firstCard.textContent = \"\";\n secondCard.textContent = \"\";\n firstCard = null;\n secondCard = null;\n }, 1000);\n }\n }\n };\n memoryCardsDiv.appendChild(cardDiv);\n });\n }\n\n newMemoryRound();\n\n \/\/ Mood-Based Activity Picker\n const moodMessage = document.getElementById(\"mood-message\");\n\n function showMoodActivity(mood) {\n switch (mood) {\n case \"Happy\":\n moodMessage.textContent = \"\ud83d\ude0a Keep smiling! How about a fun game?\";\n break;\n case \"Sad\":\n moodMessage.textContent = \"\ud83d\ude22 It's okay to feel sad. Maybe try some deep breathing.\";\n break;\n case \"Calm\":\n moodMessage.textContent = \"\ud83d\ude0c Enjoy the calm. How about some light reading?\";\n break;\n case \"Anxious\":\n moodMessage.textContent = \"\ud83d\ude1f Take a moment to breathe deeply. You got this!\";\n break;\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MadlySane Games MadlySane Games Color Match Calm Click the button that matches the background color. Breathing Exercise Follow the breathing guide to relax. Start Breathing Exercise Memory Match Flip the cards to find pairs. Mood-Based Activity Picker Click on your current mood to get a suggestion. Happy Sad Calm Anxious<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-3901","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=3901"}],"version-history":[{"count":4,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901\/revisions"}],"predecessor-version":[{"id":5589,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901\/revisions\/5589"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=3901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3901,"date":"2025-06-14T19:09:11","date_gmt":"2025-06-15T00:09:11","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=3901"},"modified":"2025-08-23T20:19:39","modified_gmt":"2025-08-24T01:19:39","slug":"madlysane-games","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/madlysane-games\/","title":{"rendered":"Madlysane Games"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n MadlySane Games<\/title>\n <style>\n body {\n font-family: 'Arial', sans-serif;\n text-align: center;\n background-color: #f0f0f0;\n padding: 50px;\n }\n .game {\n background-color: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n margin-bottom: 50px;\n }\n .color-button, .memory-card, .mood-button, .breathing-button {\n padding: 15px 30px;\n margin: 10px;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n color: #fff;\n }\n .memory-card {\n background-color: #3498db;\n color: #fff;\n width: 100px;\n height: 100px;\n display: inline-block;\n vertical-align: top;\n line-height: 100px;\n font-size: 24px;\n }\n .hidden {\n background-color: #95a5a6;\n color: #95a5a6;\n }\n #message, #memory-message, #mood-message, #breathing-message {\n margin-top: 20px;\n font-size: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>MadlySane Games<\/h1>\n\n \n <div class=\"game\" id=\"color-match-game\">\n <h2>Color Match Calm<\/h2>\n <p>Click the button that matches the background color.<\/p>\n <div id=\"color-buttons\"><\/div>\n <div id=\"message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"breathing-exercise-game\">\n <h2>Breathing Exercise<\/h2>\n <p>Follow the breathing guide to relax.<\/p>\n <button class=\"breathing-button\" id=\"start-breathing\">Start Breathing Exercise<\/button>\n <div id=\"breathing-message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"memory-match-game\">\n <h2>Memory Match<\/h2>\n <p>Flip the cards to find pairs.<\/p>\n <div id=\"memory-cards\"><\/div>\n <div id=\"memory-message\"><\/div>\n <\/div>\n\n \n <div class=\"game\" id=\"mood-picker-game\">\n <h2>Mood-Based Activity Picker<\/h2>\n <p>Click on your current mood to get a suggestion.<\/p>\n <button class=\"mood-button\" style=\"background-color: #e74c3c;\" onclick=\"showMoodActivity('Happy')\">Happy<\/button>\n <button class=\"mood-button\" style=\"background-color: #3498db;\" onclick=\"showMoodActivity('Sad')\">Sad<\/button>\n <button class=\"mood-button\" style=\"background-color: #2ecc71;\" onclick=\"showMoodActivity('Calm')\">Calm<\/button>\n <button class=\"mood-button\" style=\"background-color: #f1c40f;\" onclick=\"showMoodActivity('Anxious')\">Anxious<\/button>\n <div id=\"mood-message\"><\/div>\n <\/div>\n\n <script>\n \/\/ Color Match Calm Game\n const colors = [\n { name: \"Red\", hex: \"#e74c3c\" },\n { name: \"Green\", hex: \"#2ecc71\" },\n { name: \"Blue\", hex: \"#3498db\" },\n { name: \"Purple\", hex: \"#9b59b6\" },\n { name: \"Orange\", hex: \"#e67e22\" }\n ];\n\n const colorGame = document.getElementById(\"color-match-game\");\n const colorButtonsDiv = document.getElementById(\"color-buttons\");\n const colorMessage = document.getElementById(\"message\");\n\n function newColorRound() {\n colorMessage.textContent = \"\";\n colorButtonsDiv.innerHTML = \"\";\n\n const correctColor = colors[Math.floor(Math.random() * colors.length)];\n colorGame.style.backgroundColor = correctColor.hex;\n\n const shuffled = [...colors].sort(() => 0.5 - Math.random());\n shuffled.forEach(color => {\n const btn = document.createElement(\"button\");\n btn.textContent = color.name;\n btn.className = \"color-button\";\n btn.style.backgroundColor = color.hex;\n btn.onclick = () => {\n colorMessage.textContent = color.name === correctColor.name ? \"\u2705 Great job!\" : \"\u274c Try again!\";\n setTimeout(newColorRound, 1000);\n };\n colorButtonsDiv.appendChild(btn);\n });\n }\n\n newColorRound();\n\n \/\/ Breathing Exercise Game\n const breathingButton = document.getElementById(\"start-breathing\");\n const breathingMessage = document.getElementById(\"breathing-message\");\n\n breathingButton.onclick = () => {\n breathingMessage.textContent = \"Breathe in...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Hold...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Breathe out...\";\n setTimeout(() => {\n breathingMessage.textContent = \"Relax...\";\n }, 4000);\n }, 4000);\n }, 4000);\n };\n\n \/\/ Memory Match Game\n const memoryCardsDiv = document.getElementById(\"memory-cards\");\n const memoryMessage = document.getElementById(\"memory-message\");\n const memoryCards = [\"A\", \"A\", \"B\", \"B\", \"C\", \"C\", \"D\", \"D\"];\n\n let firstCard = null;\n let secondCard = null;\n let matches = 0;\n\n function newMemoryRound() {\n memoryMessage.textContent = \"\";\n memoryCardsDiv.innerHTML = \"\";\n matches = 0;\n\n const shuffledCards = [...memoryCards].sort(() => 0.5 - Math.random());\n shuffledCards.forEach(card => {\n const cardDiv = document.createElement(\"div\");\n cardDiv.className = \"memory-card hidden\";\n cardDiv.dataset.card = card;\n cardDiv.onclick = () => {\n if (firstCard && secondCard) return;\n cardDiv.classList.remove(\"hidden\");\n cardDiv.textContent = card;\n if (!firstCard) {\n firstCard = cardDiv;\n } else if (!secondCard) {\n secondCard = cardDiv;\n if (firstCard.dataset.card === secondCard.dataset.card) {\n matches += 1;\n firstCard = null;\n secondCard = null;\n if (matches === memoryCards.length \/ 2) {\n memoryMessage.textContent = \"\u2705 You found all pairs!\";\n setTimeout(newMemoryRound, 2000);\n }\n } else {\n setTimeout(() => {\n firstCard.classList.add(\"hidden\");\n secondCard.classList.add(\"hidden\");\n firstCard.textContent = \"\";\n secondCard.textContent = \"\";\n firstCard = null;\n secondCard = null;\n }, 1000);\n }\n }\n };\n memoryCardsDiv.appendChild(cardDiv);\n });\n }\n\n newMemoryRound();\n\n \/\/ Mood-Based Activity Picker\n const moodMessage = document.getElementById(\"mood-message\");\n\n function showMoodActivity(mood) {\n switch (mood) {\n case \"Happy\":\n moodMessage.textContent = \"\ud83d\ude0a Keep smiling! How about a fun game?\";\n break;\n case \"Sad\":\n moodMessage.textContent = \"\ud83d\ude22 It's okay to feel sad. Maybe try some deep breathing.\";\n break;\n case \"Calm\":\n moodMessage.textContent = \"\ud83d\ude0c Enjoy the calm. How about some light reading?\";\n break;\n case \"Anxious\":\n moodMessage.textContent = \"\ud83d\ude1f Take a moment to breathe deeply. You got this!\";\n break;\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MadlySane Games MadlySane Games Color Match Calm Click the button that matches the background color. Breathing Exercise Follow the breathing guide to relax. Start Breathing Exercise Memory Match Flip the cards to find pairs. Mood-Based Activity Picker Click on your current mood to get a suggestion. Happy Sad Calm Anxious<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-3901","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=3901"}],"version-history":[{"count":4,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901\/revisions"}],"predecessor-version":[{"id":5589,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/3901\/revisions\/5589"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=3901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}