Kid-Friendly Find the Word Game<\/title>\n<style>\n body {\n background: #fff;\n color: #111;\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n }\n header {\n font-size: 2em;\n font-weight: 700;\n margin-bottom: 20px;\n color: #000;\n text-align: center;\n letter-spacing: 2px;\n }\n #wordDisplay {\n font-size: 2.4em;\n letter-spacing: 0.32em;\n margin-bottom: 22px;\n user-select: none;\n text-align:center;\n }\n #message {\n font-size: 1.15em;\n color: #333;\n height: 28px;\n margin-bottom: 16px;\n min-height: 1.6em;\n text-align: center;\n }\n #lettersContainer {\n display: flex;\n flex-wrap: wrap;\n max-width: 480px;\n justify-content: center;\n gap: 10px;\n user-select: none;\n margin-bottom: 12px;\n }\n .letter-btn {\n background: #eee;\n border: 2px solid #666;\n width: 44px;\n height: 44px;\n font-size: 1.2em;\n font-weight: 700;\n color: #222;\n border-radius: 7px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background 0.25s, color 0.25s, border-color 0.25s;\n }\n .letter-btn.disabled {\n cursor: default;\n background: #bbb;\n color: #eee;\n border-color: #888;\n }\n .letter-btn:hover:not(.disabled) {\n background: #ccc;\n }\n #resetBtn {\n margin-top: 30px;\n background: #000;\n color: #fff;\n border: none;\n padding: 12px 44px;\n border-radius: 6px;\n font-size: 1.1em;\n cursor: pointer;\n transition: background 0.22s;\n display:none;\n }\n #resetBtn.visible { display:inline-block;}\n \/* SUN ILLUSTRATION *\/\n #sunContainer {\n margin: 18px auto 20px auto;\n height: 120px;\n width: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n position:relative;\n pointer-events:none;\n }\n<\/style>\n<\/head>\n<body>\n<header>Find the Word \u2013 Sunny Game!<\/header>\n<div id=\"sunContainer\"><\/div>\n<div id=\"wordDisplay\"><\/div>\n<div id=\"message\"><\/div>\n<div id=\"lettersContainer\"><\/div>\n<button id=\"resetBtn\">Play Again<\/button>\n<script>\n const words = [\n \"ENGLISH\", \"JAVASCRIPT\", \"PROGRAMMING\", \"COMPUTER\",\n \"DEVELOPER\", \"SOFTWARE\", \"KEYBOARD\", \"INTERNET\",\n \"BROWSER\", \"FUNCTION\"\n ];\n const MAX_WRONG = 6;\n\n let selectedWord = \"\";\n let guessedLetters = new Set();\n let wrongGuesses = 0;\n let finished = false;\n\n const wordDisplay = document.getElementById(\"wordDisplay\");\n const message = document.getElementById(\"message\");\n const lettersContainer = document.getElementById(\"lettersContainer\");\n const resetBtn = document.getElementById(\"resetBtn\");\n const sunContainer = document.getElementById(\"sunContainer\");\n\n \/\/ Sun with rays, face, cheeks\n function drawSun(stage) {\n \/\/ stage 0-6 (how many parts to show). 0 = nothing, 6 = full sun\n \/\/ Rays: 1-4, Face: 5, Smile\/Cheeks: 6\n function ray(x, y, r, l, color=\"#222\") {\n return `<line x1=\"${x}\" y1=\"${y}\" x2=\"${x+r}\" y2=\"${y+l}\" stroke=\"${color}\" stroke-width=\"4\" stroke-linecap=\"round\"\/>`;\n }\n let svg = `<svg width=\"110\" height=\"110\" viewBox=\"0 0 110 110\">`;\n if(stage>0) svg += ray(55,10,0,-16); \/\/ top\n if(stage>1) svg += ray(55,100,0,16); \/\/ bottom\n if(stage>2) svg += ray(100,55,16,0); \/\/ right\n if(stage>3) svg += ray(10,55,-16,0); \/\/ left\n if(stage>4) {\n svg += `<circle cx=\"55\" cy=\"55\" r=\"32\" fill=\"#fff\" stroke=\"#111\" stroke-width=\"4\"\/>`;\n svg += `<circle cx=\"43\" cy=\"50\" r=\"6\" fill=\"#222\"\/><circle cx=\"67\" cy=\"50\" r=\"6\" fill=\"#222\"\/>`; \/\/ eyes\n }\n if(stage>5) {\n svg += `<path d=\"M44 69 Q55 80 66 69\" stroke=\"#222\" stroke-width=\"3.5\" fill=\"none\" \/>`;\n svg += `<ellipse cx=\"39\" cy=\"67\" rx=\"3\" ry=\"2\" fill=\"#ccc\"\/><ellipse cx=\"71\" cy=\"67\" rx=\"3\" ry=\"2\" fill=\"#ccc\"\/>`;\n }\n svg += `<\/svg>`;\n sunContainer.innerHTML = svg;\n }\n\n function selectRandomWord() {\n const index = Math.floor(Math.random() * words.length);\n return words[index];\n }\n\n function createLetterButtons() {\n lettersContainer.innerHTML = \"\";\n for (let i = 65; i <= 90; i++) {\n const letter = String.fromCharCode(i);\n const btn = document.createElement(\"button\");\n btn.classList.add(\"letter-btn\");\n btn.textContent = letter;\n btn.addEventListener(\"click\", () => handleGuess(letter, btn));\n lettersContainer.appendChild(btn);\n }\n }\n\n function updateWordDisplay() {\n let display = \"\";\n for (const char of selectedWord) {\n display += guessedLetters.has(char) ? char + \" \" : \"_ \";\n }\n wordDisplay.textContent = display.trim();\n }\n\n function handleGuess(letter, button) {\n if (guessedLetters.has(letter) || finished) return;\n guessedLetters.add(letter);\n button.classList.add(\"disabled\");\n button.disabled = true;\n\n if (selectedWord.includes(letter)) {\n message.textContent = `Well done! \"${letter}\" is in the word!`;\n updateWordDisplay();\n checkWin();\n } else {\n wrongGuesses++;\n drawSun(wrongGuesses);\n message.textContent = `Oops! \"${letter}\" is not in the word.`;\n if (wrongGuesses === MAX_WRONG) {\n revealWord();\n }\n }\n }\n\n function checkWin() {\n let won = true;\n for (const char of selectedWord) {\n if (!guessedLetters.has(char)) {\n won = false;\n break;\n }\n }\n if (won) {\n message.textContent = \"\ud83c\udf1e Hooray! You found the word!\";\n finished = true;\n disableAllButtons();\n resetBtn.classList.add(\"visible\");\n }\n }\n\n function revealWord() {\n finished = true;\n updateWordDisplay();\n message.textContent = `Bright sun! The word was \"${selectedWord}\".`;\n disableAllButtons();\n resetBtn.classList.add(\"visible\");\n }\n\n function disableAllButtons() {\n const btns = lettersContainer.querySelectorAll(\".letter-btn\");\n btns.forEach(btn => { btn.disabled = true; btn.classList.add(\"disabled\"); });\n }\n\n function resetGame() {\n guessedLetters.clear();\n selectedWord = selectRandomWord();\n wrongGuesses = 0;\n finished = false;\n message.textContent = \"\";\n resetBtn.classList.remove(\"visible\");\n createLetterButtons();\n updateWordDisplay();\n drawSun(0);\n }\n\n resetBtn.addEventListener(\"click\", resetGame);\n\n \/\/ Init\n resetGame();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Kid-Friendly Find the Word Game Find the Word \u2013 Sunny Game! Play Again<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","hentry","category-others"],"_links":{"self":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=229"}],"version-history":[{"count":1,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":229,"date":"2025-08-04T08:49:09","date_gmt":"2025-08-04T03:19:09","guid":{"rendered":"https:\/\/myschoolnow.in\/?p=229"},"modified":"2025-08-04T08:49:09","modified_gmt":"2025-08-04T03:19:09","slug":"find-the-word","status":"publish","type":"post","link":"https:\/\/myschoolnow.in\/?p=229","title":{"rendered":"Find the word"},"content":{"rendered":"\n\n\n\n\n\nKid-Friendly Find the Word Game<\/title>\n<style>\n body {\n background: #fff;\n color: #111;\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n }\n header {\n font-size: 2em;\n font-weight: 700;\n margin-bottom: 20px;\n color: #000;\n text-align: center;\n letter-spacing: 2px;\n }\n #wordDisplay {\n font-size: 2.4em;\n letter-spacing: 0.32em;\n margin-bottom: 22px;\n user-select: none;\n text-align:center;\n }\n #message {\n font-size: 1.15em;\n color: #333;\n height: 28px;\n margin-bottom: 16px;\n min-height: 1.6em;\n text-align: center;\n }\n #lettersContainer {\n display: flex;\n flex-wrap: wrap;\n max-width: 480px;\n justify-content: center;\n gap: 10px;\n user-select: none;\n margin-bottom: 12px;\n }\n .letter-btn {\n background: #eee;\n border: 2px solid #666;\n width: 44px;\n height: 44px;\n font-size: 1.2em;\n font-weight: 700;\n color: #222;\n border-radius: 7px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background 0.25s, color 0.25s, border-color 0.25s;\n }\n .letter-btn.disabled {\n cursor: default;\n background: #bbb;\n color: #eee;\n border-color: #888;\n }\n .letter-btn:hover:not(.disabled) {\n background: #ccc;\n }\n #resetBtn {\n margin-top: 30px;\n background: #000;\n color: #fff;\n border: none;\n padding: 12px 44px;\n border-radius: 6px;\n font-size: 1.1em;\n cursor: pointer;\n transition: background 0.22s;\n display:none;\n }\n #resetBtn.visible { display:inline-block;}\n \/* SUN ILLUSTRATION *\/\n #sunContainer {\n margin: 18px auto 20px auto;\n height: 120px;\n width: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n position:relative;\n pointer-events:none;\n }\n<\/style>\n<\/head>\n<body>\n<header>Find the Word \u2013 Sunny Game!<\/header>\n<div id=\"sunContainer\"><\/div>\n<div id=\"wordDisplay\"><\/div>\n<div id=\"message\"><\/div>\n<div id=\"lettersContainer\"><\/div>\n<button id=\"resetBtn\">Play Again<\/button>\n<script>\n const words = [\n \"ENGLISH\", \"JAVASCRIPT\", \"PROGRAMMING\", \"COMPUTER\",\n \"DEVELOPER\", \"SOFTWARE\", \"KEYBOARD\", \"INTERNET\",\n \"BROWSER\", \"FUNCTION\"\n ];\n const MAX_WRONG = 6;\n\n let selectedWord = \"\";\n let guessedLetters = new Set();\n let wrongGuesses = 0;\n let finished = false;\n\n const wordDisplay = document.getElementById(\"wordDisplay\");\n const message = document.getElementById(\"message\");\n const lettersContainer = document.getElementById(\"lettersContainer\");\n const resetBtn = document.getElementById(\"resetBtn\");\n const sunContainer = document.getElementById(\"sunContainer\");\n\n \/\/ Sun with rays, face, cheeks\n function drawSun(stage) {\n \/\/ stage 0-6 (how many parts to show). 0 = nothing, 6 = full sun\n \/\/ Rays: 1-4, Face: 5, Smile\/Cheeks: 6\n function ray(x, y, r, l, color=\"#222\") {\n return `<line x1=\"${x}\" y1=\"${y}\" x2=\"${x+r}\" y2=\"${y+l}\" stroke=\"${color}\" stroke-width=\"4\" stroke-linecap=\"round\"\/>`;\n }\n let svg = `<svg width=\"110\" height=\"110\" viewBox=\"0 0 110 110\">`;\n if(stage>0) svg += ray(55,10,0,-16); \/\/ top\n if(stage>1) svg += ray(55,100,0,16); \/\/ bottom\n if(stage>2) svg += ray(100,55,16,0); \/\/ right\n if(stage>3) svg += ray(10,55,-16,0); \/\/ left\n if(stage>4) {\n svg += `<circle cx=\"55\" cy=\"55\" r=\"32\" fill=\"#fff\" stroke=\"#111\" stroke-width=\"4\"\/>`;\n svg += `<circle cx=\"43\" cy=\"50\" r=\"6\" fill=\"#222\"\/><circle cx=\"67\" cy=\"50\" r=\"6\" fill=\"#222\"\/>`; \/\/ eyes\n }\n if(stage>5) {\n svg += `<path d=\"M44 69 Q55 80 66 69\" stroke=\"#222\" stroke-width=\"3.5\" fill=\"none\" \/>`;\n svg += `<ellipse cx=\"39\" cy=\"67\" rx=\"3\" ry=\"2\" fill=\"#ccc\"\/><ellipse cx=\"71\" cy=\"67\" rx=\"3\" ry=\"2\" fill=\"#ccc\"\/>`;\n }\n svg += `<\/svg>`;\n sunContainer.innerHTML = svg;\n }\n\n function selectRandomWord() {\n const index = Math.floor(Math.random() * words.length);\n return words[index];\n }\n\n function createLetterButtons() {\n lettersContainer.innerHTML = \"\";\n for (let i = 65; i <= 90; i++) {\n const letter = String.fromCharCode(i);\n const btn = document.createElement(\"button\");\n btn.classList.add(\"letter-btn\");\n btn.textContent = letter;\n btn.addEventListener(\"click\", () => handleGuess(letter, btn));\n lettersContainer.appendChild(btn);\n }\n }\n\n function updateWordDisplay() {\n let display = \"\";\n for (const char of selectedWord) {\n display += guessedLetters.has(char) ? char + \" \" : \"_ \";\n }\n wordDisplay.textContent = display.trim();\n }\n\n function handleGuess(letter, button) {\n if (guessedLetters.has(letter) || finished) return;\n guessedLetters.add(letter);\n button.classList.add(\"disabled\");\n button.disabled = true;\n\n if (selectedWord.includes(letter)) {\n message.textContent = `Well done! \"${letter}\" is in the word!`;\n updateWordDisplay();\n checkWin();\n } else {\n wrongGuesses++;\n drawSun(wrongGuesses);\n message.textContent = `Oops! \"${letter}\" is not in the word.`;\n if (wrongGuesses === MAX_WRONG) {\n revealWord();\n }\n }\n }\n\n function checkWin() {\n let won = true;\n for (const char of selectedWord) {\n if (!guessedLetters.has(char)) {\n won = false;\n break;\n }\n }\n if (won) {\n message.textContent = \"\ud83c\udf1e Hooray! You found the word!\";\n finished = true;\n disableAllButtons();\n resetBtn.classList.add(\"visible\");\n }\n }\n\n function revealWord() {\n finished = true;\n updateWordDisplay();\n message.textContent = `Bright sun! The word was \"${selectedWord}\".`;\n disableAllButtons();\n resetBtn.classList.add(\"visible\");\n }\n\n function disableAllButtons() {\n const btns = lettersContainer.querySelectorAll(\".letter-btn\");\n btns.forEach(btn => { btn.disabled = true; btn.classList.add(\"disabled\"); });\n }\n\n function resetGame() {\n guessedLetters.clear();\n selectedWord = selectRandomWord();\n wrongGuesses = 0;\n finished = false;\n message.textContent = \"\";\n resetBtn.classList.remove(\"visible\");\n createLetterButtons();\n updateWordDisplay();\n drawSun(0);\n }\n\n resetBtn.addEventListener(\"click\", resetGame);\n\n \/\/ Init\n resetGame();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Kid-Friendly Find the Word Game Find the Word \u2013 Sunny Game! Play Again<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","hentry","category-others"],"_links":{"self":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=229"}],"version-history":[{"count":1,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=\/wp\/v2\/posts\/229\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myschoolnow.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}