Face Match & Feel<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background: #f0f0f0;\n padding: 40px;\n }\n h2 {\n margin-bottom: 10px;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(4, 100px);\n gap: 15px;\n justify-content: center;\n margin-top: 20px;\n }\n .card {\n width: 100px;\n height: 100px;\n background: #ccc;\n border-radius: 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n user-select: none;\n }\n .flipped {\n background: #fff;\n }\n #message {\n margin-top: 20px;\n font-size: 18px;\n }\n <\/style>\n<\/head>\n<body>\n <h2>Face Match & Feel<\/h2>\n <p>Match the faces to learn about emotions!<\/p>\n <div class=\"grid\" id=\"grid\"><\/div>\n <div id=\"message\"><\/div>\n\n <script>\n const faces = [\n { emoji: \"\ud83d\ude0a\", feeling: \"This is happiness. It feels light and warm.\" },\n { emoji: \"\ud83d\ude22\", feeling: \"This is sadness. It's okay to feel this way sometimes.\" },\n { emoji: \"\ud83d\ude20\", feeling: \"This is anger. It's a powerful emotion that needs care.\" },\n { emoji: \"\ud83d\ude28\", feeling: \"This is fear. It helps us stay safe.\" }\n ];\n\n let cards = [];\n let flipped = [];\n let matched = 0;\n let level = 1;\n\n const grid = document.getElementById(\"grid\");\n const message = document.getElementById(\"message\");\n\n function shuffle(array) {\n return array.sort(() => 0.5 - Math.random());\n }\n\n function setupGame() {\n message.textContent = `Level ${level}`;\n matched = 0;\n flipped = [];\n grid.innerHTML = \"\";\n\n const levelFaces = faces.slice(0, Math.min(level + 1, faces.length));\n cards = shuffle([...levelFaces, ...levelFaces]);\n\n cards.forEach((card, index) => {\n const div = document.createElement(\"div\");\n div.className = \"card\";\n div.dataset.index = index;\n div.onclick = () => flipCard(div, card);\n grid.appendChild(div);\n });\n }\n\n function flipCard(div, card) {\n if (flipped.length === 2 || div.classList.contains(\"flipped\")) return;\n\n div.textContent = card.emoji;\n div.classList.add(\"flipped\");\n flipped.push({ div, card });\n\n if (flipped.length === 2) {\n const [first, second] = flipped;\n if (first.card.emoji === second.card.emoji) {\n message.textContent = `\u2705 ${first.card.feeling}`;\n matched += 2;\n flipped = [];\n if (matched === cards.length) {\n setTimeout(() => {\n level++;\n setupGame();\n }, 2000);\n }\n } else {\n setTimeout(() => {\n first.div.textContent = \"\";\n second.div.textContent = \"\";\n first.div.classList.remove(\"flipped\");\n second.div.classList.remove(\"flipped\");\n flipped = [];\n }, 1000);\n }\n }\n }\n\n setupGame();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Face Match & Feel Face Match & Feel Match the faces to learn about emotions!<\/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-4030","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\/4030","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=4030"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4030\/revisions"}],"predecessor-version":[{"id":4032,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4030\/revisions\/4032"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4030,"date":"2025-06-14T18:57:22","date_gmt":"2025-06-14T23:57:22","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=4030"},"modified":"2025-06-14T18:57:22","modified_gmt":"2025-06-14T23:57:22","slug":"face-match-feel","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/face-match-feel\/","title":{"rendered":"Face Match & Feel"},"content":{"rendered":"\n\n\n\n \n Face Match & Feel<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background: #f0f0f0;\n padding: 40px;\n }\n h2 {\n margin-bottom: 10px;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(4, 100px);\n gap: 15px;\n justify-content: center;\n margin-top: 20px;\n }\n .card {\n width: 100px;\n height: 100px;\n background: #ccc;\n border-radius: 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n user-select: none;\n }\n .flipped {\n background: #fff;\n }\n #message {\n margin-top: 20px;\n font-size: 18px;\n }\n <\/style>\n<\/head>\n<body>\n <h2>Face Match & Feel<\/h2>\n <p>Match the faces to learn about emotions!<\/p>\n <div class=\"grid\" id=\"grid\"><\/div>\n <div id=\"message\"><\/div>\n\n <script>\n const faces = [\n { emoji: \"\ud83d\ude0a\", feeling: \"This is happiness. It feels light and warm.\" },\n { emoji: \"\ud83d\ude22\", feeling: \"This is sadness. It's okay to feel this way sometimes.\" },\n { emoji: \"\ud83d\ude20\", feeling: \"This is anger. It's a powerful emotion that needs care.\" },\n { emoji: \"\ud83d\ude28\", feeling: \"This is fear. It helps us stay safe.\" }\n ];\n\n let cards = [];\n let flipped = [];\n let matched = 0;\n let level = 1;\n\n const grid = document.getElementById(\"grid\");\n const message = document.getElementById(\"message\");\n\n function shuffle(array) {\n return array.sort(() => 0.5 - Math.random());\n }\n\n function setupGame() {\n message.textContent = `Level ${level}`;\n matched = 0;\n flipped = [];\n grid.innerHTML = \"\";\n\n const levelFaces = faces.slice(0, Math.min(level + 1, faces.length));\n cards = shuffle([...levelFaces, ...levelFaces]);\n\n cards.forEach((card, index) => {\n const div = document.createElement(\"div\");\n div.className = \"card\";\n div.dataset.index = index;\n div.onclick = () => flipCard(div, card);\n grid.appendChild(div);\n });\n }\n\n function flipCard(div, card) {\n if (flipped.length === 2 || div.classList.contains(\"flipped\")) return;\n\n div.textContent = card.emoji;\n div.classList.add(\"flipped\");\n flipped.push({ div, card });\n\n if (flipped.length === 2) {\n const [first, second] = flipped;\n if (first.card.emoji === second.card.emoji) {\n message.textContent = `\u2705 ${first.card.feeling}`;\n matched += 2;\n flipped = [];\n if (matched === cards.length) {\n setTimeout(() => {\n level++;\n setupGame();\n }, 2000);\n }\n } else {\n setTimeout(() => {\n first.div.textContent = \"\";\n second.div.textContent = \"\";\n first.div.classList.remove(\"flipped\");\n second.div.classList.remove(\"flipped\");\n flipped = [];\n }, 1000);\n }\n }\n }\n\n setupGame();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Face Match & Feel Face Match & Feel Match the faces to learn about emotions!<\/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-4030","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\/4030","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=4030"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4030\/revisions"}],"predecessor-version":[{"id":4032,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4030\/revisions\/4032"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}