Hangman Game<\/title>\n \n<\/head>\n<body>\n <div class=\"game-modal\">\n <div class=\"content\">\n <img decoding=\"async\" src=\"#\" alt=\"gif\">\n <h4>Game Over!<\/h4>\n <p>The correct word was: <b>rainbow<\/b><\/p>\n <button class=\"play-again\">Play Again<\/button>\n <\/div>\n <\/div>\n <div class=\"container\">\n <div class=\"hangman-box\">\n <img decoding=\"async\" src=\"#http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-0.jpg\" \t\t\tdraggable=\"false\" alt=\"hangman-0.png\">\n <h1>Hangman Game<\/h1>\n <\/div>\n <div class=\"game-box\">\n <ul class=\"word-display\"><\/ul>\n <h4 class=\"hint-text\">Hint: <b><\/b><\/h4>\n <h4 class=\"guesses-text\">Incorrect guesses: <b><\/b><\/h4>\n <div class=\"keyboard\">\n\t\t\t<\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n<script>\nconst wordList = [\n {\n word: \"midwest\",\n hint: \"Yeah no, no yeah\"\n },\n {\n word: \"oxygen\",\n hint: \"A colorless, odorless gas essential for life.\"\n },\n {\n word: \"technology\",\n hint: \"The branch of knowledge dealing with engineering or applied sciences\"\n },\n {\n word: \"painting\",\n hint: \"An art form using colors on a surface to create images or expression.\"\n },\n {\n word: \"innovation\",\n hint: \"Building on current solutions with new and creative ideas\"\n },\n {\n word: \"football\",\n hint: \"A popular sport played with a spherical ball.\"\n },\n {\n word: \"chocolate\",\n hint: \"A sweet treat made from cocoa beans.\"\n },\n {\n word: \"butterfly\",\n hint: \"An insect with colorful wings and a slender body.\"\n },\n {\n word: \"history\",\n hint: \"The study of past events and human civilization.\"\n },\n {\n word: \"pizza\",\n hint: \"Classic event food on campus\"\n },\n {\n word: \"flash\",\n hint: \"The mascot at Kent State\"\n },\n {\n word: \"library\",\n hint: \"The tallest building in Portage County\"\n },\n {\n word: \"zephyr\",\n hint: \"Located in downtown Kent\"\n },\n {\n word: \"adventure\",\n hint: \"An exciting or daring experience.\"\n },\n {\n word: \"scooter\",\n hint: \"A mode of transportation zooming around campus\"\n },\n {\n word: \"entrepreneur\",\n hint: \"One who has the drive and passion to make their own business\"\n },\n {\n word: \"radio\",\n hint: \"Black Squirrel is a student-run ____ station\"\n },\n {\n word: \"computer\",\n hint: \"Electronic device for storing and processing data\"\n },\n {\n word: \"phython\",\n hint: \"A coding language used in the interactive data class\"\n },\n {\n word: \"ideabase\",\n hint: \"Where you can find Kristin Dowling, a.k.a the base of all ideas\"\n },\n {\n word: \"orchestra\",\n hint: \"A large ensemble of musicians playing various instruments.\"\n },\n {\n word: \"advertising\",\n hint: \"Paid, Search, and Display are all forms of this\"\n },\n {\n word: \"novel\",\n hint: \"A long work of fiction, typically with a complex plot and characters.\"\n },\n {\n word: \"sculpture\",\n hint: \"A three-dimensional art form created by shaping or combining materials.\"\n },\n {\n word: \"university\",\n hint: \"What you are currently enrolled in, working at, or visiting\"\n },\n {\n word: \"javascript\",\n hint: \"The coding language that makes this game functional\"\n },\n {\n word: \"ballet\",\n hint: \"A classical dance form characterized by precise and graceful movements.\"\n },\n {\n word: \"squirrel\",\n hint: \"KSU\u2019s second mascot after flash\"\n },\n {\n word: \"waterfall\",\n hint: \"A cascade of water falling from a height.\"\n },\n {\n word: \"technology\",\n hint: \"The application of scientific knowledge for practical purposes.\"\n },\n {\n word: \"rainbow\",\n hint: \"A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light.\"\n },\n {\n word: \"universe\",\n hint: \"All existing matter, space, and time as a whole.\"\n },\n {\n word: \"piano\",\n hint: \"A musical instrument played by pressing keys that cause hammers to strike strings.\"\n },\n {\n word: \"vacation\",\n hint: \"A period of time devoted to pleasure, rest, or relaxation.\"\n },\n {\n word: \"rainforest\",\n hint: \"A dense forest characterized by high rainfall and biodiversity.\"\n },\n {\n word: \"theater\",\n hint: \"A building or outdoor area in which plays, movies, or other performances are staged.\"\n },\n {\n word: \"telephone\",\n hint: \"A device used to transmit sound over long distances.\"\n },\n {\n word: \"language\",\n hint: \"A system of communication consisting of words, gestures, and syntax.\"\n },\n {\n word: \"desert\",\n hint: \"A barren or arid land with little or no precipitation.\"\n },\n {\n word: \"sunflower\",\n hint: \"A tall plant with a large yellow flower head.\"\n },\n {\n word: \"fantasy\",\n hint: \"A genre of imaginative fiction involving magic and supernatural elements.\"\n },\n {\n word: \"telescope\",\n hint: \"An optical instrument used to view distant objects in space.\"\n },\n {\n word: \"breeze\",\n hint: \"A gentle wind.\"\n },\n {\n word: \"oasis\",\n hint: \"A fertile spot in a desert where water is found.\"\n },\n {\n word: \"photography\",\n hint: \"The art, process, or practice of creating images by recording light or other electromagnetic radiation.\"\n },\n {\n word: \"safari\",\n hint: \"An expedition or journey, typically to observe wildlife in their natural habitat.\"\n },\n {\n word: \"planet\",\n hint: \"A celestial body that orbits a star and does not produce light of its own.\"\n },\n {\n word: \"river\",\n hint: \"A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.\"\n },\n {\n word: \"tropical\",\n hint: \"Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn.\"\n },\n {\n word: \"mysterious\",\n hint: \"Difficult or impossible to understand, explain, or identify.\"\n },\n {\n word: \"enigma\",\n hint: \"Something that is mysterious, puzzling, or difficult to understand.\"\n },\n {\n word: \"paradox\",\n hint: \"A statement or situation that contradicts itself or defies intuition.\"\n },\n {\n word: \"puzzle\",\n hint: \"A game, toy, or problem designed to test ingenuity or knowledge.\"\n },\n {\n word: \"whisper\",\n hint: \"To speak very softly or quietly, often in a secretive manner.\"\n },\n {\n word: \"shadow\",\n hint: \"A dark area or shape produced by an object blocking the light.\"\n },\n {\n word: \"secret\",\n hint: \"Something kept hidden or unknown to others.\"\n },\n {\n word: \"curiosity\",\n hint: \"A strong desire to know or learn something.\"\n },\n {\n word: \"unpredictable\",\n hint: \"Not able to be foreseen or known beforehand; uncertain.\"\n },\n {\n word: \"obfuscate\",\n hint: \"To confuse or bewilder someone; to make something unclear or difficult to understand.\"\n },\n {\n word: \"unveil\",\n hint: \"To make known or reveal something previously secret or unknown.\"\n },\n {\n word: \"illusion\",\n hint: \"A false perception or belief; a deceptive appearance or impression.\"\n },\n {\n word: \"moonlight\",\n hint: \"The light from the moon.\"\n },\n {\n word: \"vibrant\",\n hint: \"Full of energy, brightness, and life.\"\n },\n {\n word: \"nostalgia\",\n hint: \"A sentimental longing or wistful affection for the past.\"\n },\n {\n word: \"brilliant\",\n hint: \"Exceptionally clever, talented, or impressive.\"\n },\n];\n\nconst wordDisplay = document.querySelector(\".word-display\");\nconst guessesText = document.querySelector(\".guesses-text b\");\nconst keyboardDiv = document.querySelector(\".keyboard\");\nconst hangmanImage = document.querySelector(\".hangman-box img\");\nconst gameModal = document.querySelector(\".game-modal\");\nconst playAgainBtn = gameModal.querySelector(\"button\");\n\/\/ Initializing game variables\nlet currentWord, correctLetters, wrongGuessCount;\nconst maxGuesses = 6;\nconst resetGame = () => {\n \/\/ Ressetting game variables and UI elements\n correctLetters = [];\n wrongGuessCount = 0;\n hangmanImage.src = \"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-0.jpg\";\n guessesText.innerText = `${wrongGuessCount} \/ ${maxGuesses}`;\n wordDisplay.innerHTML = currentWord.split(\"\").map(() => `<li class=\"letter\"><\/li>`).join(\"\");\n keyboardDiv.querySelectorAll(\"button\").forEach(btn => btn.disabled = false);\n gameModal.classList.remove(\"show\");\n};\nconst getRandomWord = () => {\n \/\/ Selecting a random word and hint from the wordList\n const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)];\n currentWord = word; \/\/ Making currentWord as random word\n document.querySelector(\".hint-text b\").innerText = hint;\n resetGame();\n};\nconst gameOver = (isVictory) => {\n \/\/ After game complete.. showing modal with relevant details\n const modalText = isVictory ? `You found the word:` : 'The correct word was:';\n gameModal.querySelector(\"img\").src = `http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/${isVictory ? 'victory' : 'lost'}.gif`;\n gameModal.querySelector(\"h4\").innerText = isVictory ? 'Congrats!' : 'Game Over!';\n gameModal.querySelector(\"p\").innerHTML = `${modalText} <b>${currentWord}<\/b>`;\n gameModal.classList.add(\"show\");\n};\nconst initGame = (button, clickedLetter) => {\n \/\/ Checking if clickedLetter is exist on the currentWord\n if(currentWord.includes(clickedLetter)) {\n \/\/ Showing all correct letters on the word display\n [...currentWord].forEach((letter, index) => {\n if(letter === clickedLetter) {\n correctLetters.push(letter);\n wordDisplay.querySelectorAll(\"li\")[index].innerText = letter;\n wordDisplay.querySelectorAll(\"li\")[index].classList.add(\"guessed\");\n }\n });\n } else {\n \/\/ If clicked letter doesn't exist then update the wrongGuessCount and hangman image\n wrongGuessCount++;\n hangmanImage.src = `http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-${wrongGuessCount}.jpg`;\n }\n button.disabled = true; \/\/ Disabling the clicked button so user can't click again\n guessesText.innerText = `${wrongGuessCount} \/ ${maxGuesses}`;\n \/\/ Calling gameOver function if any of these condition meets\n if(wrongGuessCount === maxGuesses) return gameOver(false);\n if(correctLetters.length === currentWord.length) return gameOver(true);\n};\n\/\/ Creating keyboard buttons and adding event listeners\nfor (let i = 97; i <= 122; i++) {\n const button = document.createElement(\"button\");\n button.innerText = String.fromCharCode(i);\n keyboardDiv.appendChild(button);\n button.addEventListener(\"click\", (e) => initGame(e.target, String.fromCharCode(i)));\n}\ngetRandomWord();\nplayAgainBtn.addEventListener(\"click\", getRandomWord);\n<\/script>\n\n<style>\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;500;600;700&display=swap\");\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Open Sans\", sans-serif;\n}\nbody {\n display: flex;\n padding: 0 10px;\n align-items: top;\n justify-content: center;\n min-height: 100vh;\n}\n\n.container {\n display: flex;\n width: 850px;\n gap: 70px;\n padding: 60px 50px;\n background: #fff;\n border-radius: 10px;\n align-items: flex-end;\n justify-content: space-between;\n box-shadow: 10px 20px cmyk(0,0,0,100);\n}\n.hangman-box img {\n user-select: none;\n\tcolor: #000;\n max-width: 270px;\n}\n.hangman-box h1 {\n font-size: 1.45rem;\n\tcolor: #000;\n text-align: center;\n margin-top: 20px;\n text-transform: uppercase;\n}\n.game-box .word-display {\n gap: 10px;\n\tcolor: #000;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n}\n.word-display .letter {\n width: 28px;\n font-size: 2rem;\n\tcolor: #000;\n text-align: center;\n font-weight: 600;\n margin-bottom: 40px;\n text-transform: uppercase;\n border-bottom: 3px solid #000;\n}\n.word-display .letter.guessed {\n margin: -40px 0 35px;\n border-color: transparent;\n}\n.game-box h4 {\n text-align: center;\n font-size: 1.1rem;\n\tcolor: #000;\n font-weight: 500;\n margin-bottom: 15px;\n}\n.game-box h4 b {\n font-weight: 600;\n\tcolor: #000;\n}\n.game-box .guesses-text b {\n color: #000;\n}\n.game-box .keyboard {\n display: flex;\n gap: 5px;\n flex-wrap: wrap;\n margin-top: 40px;\n justify-content: center;\n}\n:where(.game-modal, .keyboard) button {\n color: #fff;\n border: none;\n outline: none;\n cursor: pointer;\n font-size: 1rem;\n\tcolor: #fff;\n font-weight: 600;\n border-radius: 4px;\n text-transform: uppercase;\n background: #3054F8;\n}\n.keyboard button {\n padding: 7px;\n width: calc(100% \/ 9 - 5px);\n}\n.keyboard button[disabled] {\n pointer-events: none;\n opacity: 0.6;\n}\n:where(.game-modal, .keyboard) button:hover {\n background: #8286c9;\n}\n.game-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n background: cmyk(0,0,0,100);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n padding: 0 10px;\n transition: opacity 0.4s ease;\n\n}\n.game-modal.show {\n opacity: 1;\n pointer-events: auto;\n transition: opacity 0.4s 0.4s ease;\n}\n.game-modal .content {\n padding: 30px;\n max-width: 420px;\n width: 100%;\n border-radius: 10px;\n background: #fff;\n text-align: center;\n box-shadow: 10px 20px cmyk(0,0,0,100);\n}\n\n.game-modal img {\n max-width: 130px;\n margin-bottom: 20px;\n}\n.game-modal img[src=\"images\/victory.gif\"] {\n margin-left: -10px;\n}\n.game-modal h4 {\n font-size: 1.53rem;\n}\n.game-modal p {\n font-size: 1.15rem;\n margin: 15px 0 30px;\n font-weight: 500;\n}\n.game-modal p b {\n color: #5E63BA;\n font-weight: 600;\n}\n.game-modal button {\n padding: 12px 23px;\n}\n\"context\" (max-width: 782px) {\n .container {\n flex-direction: column;\n padding: 30px 15px;\n align-items: center;\n }\n .hangman-box img {\n max-width: 200px;\n }\n .hangman-box h1 {\n display: none;\n }\n .game-box h4 {\n font-size: 1rem;\n }\n .word-display .letter {\n margin-bottom: 35px;\n font-size: 1.7rem;\n }\n .word-display .letter.guessed {\n margin: -35px 0 25px;\n }\n .game-modal img {\n max-width: 120px;\n }\n .game-modal h4 {\n font-size: 1.45rem;\n }\n .game-modal p {\n font-size: 1.1rem;\n }\n .game-modal button {\n padding: 10px 18px;\n }\n}\n<\/style>\n<\/div><\/main><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/\">Home<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/word-scramble-2\/\">word scramble<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/memory-card-2\/\">memory card<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/tic-tac-toe-2\/\">tic tac toe<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hangman Game Game Over! The correct word was: rainbow Play Again Hangman Game Hint: Incorrect guesses:<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":0,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/237\/revisions"}],"wp:attachment":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/media?parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/div>\n\n\n

\n\t\n\n

\n\n\n\n \n \n Hangman Game<\/title>\n \n<\/head>\n<body>\n <div class=\"game-modal\">\n <div class=\"content\">\n <img decoding=\"async\" src=\"#\" alt=\"gif\">\n <h4>Game Over!<\/h4>\n <p>The correct word was: <b>rainbow<\/b><\/p>\n <button class=\"play-again\">Play Again<\/button>\n <\/div>\n <\/div>\n <div class=\"container\">\n <div class=\"hangman-box\">\n <img decoding=\"async\" src=\"#http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-0.jpg\" \t\t\tdraggable=\"false\" alt=\"hangman-0.png\">\n <h1>Hangman Game<\/h1>\n <\/div>\n <div class=\"game-box\">\n <ul class=\"word-display\"><\/ul>\n <h4 class=\"hint-text\">Hint: <b><\/b><\/h4>\n <h4 class=\"guesses-text\">Incorrect guesses: <b><\/b><\/h4>\n <div class=\"keyboard\">\n\t\t\t<\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n<script>\nconst wordList = [\n {\n word: \"midwest\",\n hint: \"Yeah no, no yeah\"\n },\n {\n word: \"oxygen\",\n hint: \"A colorless, odorless gas essential for life.\"\n },\n {\n word: \"technology\",\n hint: \"The branch of knowledge dealing with engineering or applied sciences\"\n },\n {\n word: \"painting\",\n hint: \"An art form using colors on a surface to create images or expression.\"\n },\n {\n word: \"innovation\",\n hint: \"Building on current solutions with new and creative ideas\"\n },\n {\n word: \"football\",\n hint: \"A popular sport played with a spherical ball.\"\n },\n {\n word: \"chocolate\",\n hint: \"A sweet treat made from cocoa beans.\"\n },\n {\n word: \"butterfly\",\n hint: \"An insect with colorful wings and a slender body.\"\n },\n {\n word: \"history\",\n hint: \"The study of past events and human civilization.\"\n },\n {\n word: \"pizza\",\n hint: \"Classic event food on campus\"\n },\n {\n word: \"flash\",\n hint: \"The mascot at Kent State\"\n },\n {\n word: \"library\",\n hint: \"The tallest building in Portage County\"\n },\n {\n word: \"zephyr\",\n hint: \"Located in downtown Kent\"\n },\n {\n word: \"adventure\",\n hint: \"An exciting or daring experience.\"\n },\n {\n word: \"scooter\",\n hint: \"A mode of transportation zooming around campus\"\n },\n {\n word: \"entrepreneur\",\n hint: \"One who has the drive and passion to make their own business\"\n },\n {\n word: \"radio\",\n hint: \"Black Squirrel is a student-run ____ station\"\n },\n {\n word: \"computer\",\n hint: \"Electronic device for storing and processing data\"\n },\n {\n word: \"phython\",\n hint: \"A coding language used in the interactive data class\"\n },\n {\n word: \"ideabase\",\n hint: \"Where you can find Kristin Dowling, a.k.a the base of all ideas\"\n },\n {\n word: \"orchestra\",\n hint: \"A large ensemble of musicians playing various instruments.\"\n },\n {\n word: \"advertising\",\n hint: \"Paid, Search, and Display are all forms of this\"\n },\n {\n word: \"novel\",\n hint: \"A long work of fiction, typically with a complex plot and characters.\"\n },\n {\n word: \"sculpture\",\n hint: \"A three-dimensional art form created by shaping or combining materials.\"\n },\n {\n word: \"university\",\n hint: \"What you are currently enrolled in, working at, or visiting\"\n },\n {\n word: \"javascript\",\n hint: \"The coding language that makes this game functional\"\n },\n {\n word: \"ballet\",\n hint: \"A classical dance form characterized by precise and graceful movements.\"\n },\n {\n word: \"squirrel\",\n hint: \"KSU\u2019s second mascot after flash\"\n },\n {\n word: \"waterfall\",\n hint: \"A cascade of water falling from a height.\"\n },\n {\n word: \"technology\",\n hint: \"The application of scientific knowledge for practical purposes.\"\n },\n {\n word: \"rainbow\",\n hint: \"A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light.\"\n },\n {\n word: \"universe\",\n hint: \"All existing matter, space, and time as a whole.\"\n },\n {\n word: \"piano\",\n hint: \"A musical instrument played by pressing keys that cause hammers to strike strings.\"\n },\n {\n word: \"vacation\",\n hint: \"A period of time devoted to pleasure, rest, or relaxation.\"\n },\n {\n word: \"rainforest\",\n hint: \"A dense forest characterized by high rainfall and biodiversity.\"\n },\n {\n word: \"theater\",\n hint: \"A building or outdoor area in which plays, movies, or other performances are staged.\"\n },\n {\n word: \"telephone\",\n hint: \"A device used to transmit sound over long distances.\"\n },\n {\n word: \"language\",\n hint: \"A system of communication consisting of words, gestures, and syntax.\"\n },\n {\n word: \"desert\",\n hint: \"A barren or arid land with little or no precipitation.\"\n },\n {\n word: \"sunflower\",\n hint: \"A tall plant with a large yellow flower head.\"\n },\n {\n word: \"fantasy\",\n hint: \"A genre of imaginative fiction involving magic and supernatural elements.\"\n },\n {\n word: \"telescope\",\n hint: \"An optical instrument used to view distant objects in space.\"\n },\n {\n word: \"breeze\",\n hint: \"A gentle wind.\"\n },\n {\n word: \"oasis\",\n hint: \"A fertile spot in a desert where water is found.\"\n },\n {\n word: \"photography\",\n hint: \"The art, process, or practice of creating images by recording light or other electromagnetic radiation.\"\n },\n {\n word: \"safari\",\n hint: \"An expedition or journey, typically to observe wildlife in their natural habitat.\"\n },\n {\n word: \"planet\",\n hint: \"A celestial body that orbits a star and does not produce light of its own.\"\n },\n {\n word: \"river\",\n hint: \"A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.\"\n },\n {\n word: \"tropical\",\n hint: \"Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn.\"\n },\n {\n word: \"mysterious\",\n hint: \"Difficult or impossible to understand, explain, or identify.\"\n },\n {\n word: \"enigma\",\n hint: \"Something that is mysterious, puzzling, or difficult to understand.\"\n },\n {\n word: \"paradox\",\n hint: \"A statement or situation that contradicts itself or defies intuition.\"\n },\n {\n word: \"puzzle\",\n hint: \"A game, toy, or problem designed to test ingenuity or knowledge.\"\n },\n {\n word: \"whisper\",\n hint: \"To speak very softly or quietly, often in a secretive manner.\"\n },\n {\n word: \"shadow\",\n hint: \"A dark area or shape produced by an object blocking the light.\"\n },\n {\n word: \"secret\",\n hint: \"Something kept hidden or unknown to others.\"\n },\n {\n word: \"curiosity\",\n hint: \"A strong desire to know or learn something.\"\n },\n {\n word: \"unpredictable\",\n hint: \"Not able to be foreseen or known beforehand; uncertain.\"\n },\n {\n word: \"obfuscate\",\n hint: \"To confuse or bewilder someone; to make something unclear or difficult to understand.\"\n },\n {\n word: \"unveil\",\n hint: \"To make known or reveal something previously secret or unknown.\"\n },\n {\n word: \"illusion\",\n hint: \"A false perception or belief; a deceptive appearance or impression.\"\n },\n {\n word: \"moonlight\",\n hint: \"The light from the moon.\"\n },\n {\n word: \"vibrant\",\n hint: \"Full of energy, brightness, and life.\"\n },\n {\n word: \"nostalgia\",\n hint: \"A sentimental longing or wistful affection for the past.\"\n },\n {\n word: \"brilliant\",\n hint: \"Exceptionally clever, talented, or impressive.\"\n },\n];\n\nconst wordDisplay = document.querySelector(\".word-display\");\nconst guessesText = document.querySelector(\".guesses-text b\");\nconst keyboardDiv = document.querySelector(\".keyboard\");\nconst hangmanImage = document.querySelector(\".hangman-box img\");\nconst gameModal = document.querySelector(\".game-modal\");\nconst playAgainBtn = gameModal.querySelector(\"button\");\n\/\/ Initializing game variables\nlet currentWord, correctLetters, wrongGuessCount;\nconst maxGuesses = 6;\nconst resetGame = () => {\n \/\/ Ressetting game variables and UI elements\n correctLetters = [];\n wrongGuessCount = 0;\n hangmanImage.src = \"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-0.jpg\";\n guessesText.innerText = `${wrongGuessCount} \/ ${maxGuesses}`;\n wordDisplay.innerHTML = currentWord.split(\"\").map(() => `<li class=\"letter\"><\/li>`).join(\"\");\n keyboardDiv.querySelectorAll(\"button\").forEach(btn => btn.disabled = false);\n gameModal.classList.remove(\"show\");\n};\nconst getRandomWord = () => {\n \/\/ Selecting a random word and hint from the wordList\n const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)];\n currentWord = word; \/\/ Making currentWord as random word\n document.querySelector(\".hint-text b\").innerText = hint;\n resetGame();\n};\nconst gameOver = (isVictory) => {\n \/\/ After game complete.. showing modal with relevant details\n const modalText = isVictory ? `You found the word:` : 'The correct word was:';\n gameModal.querySelector(\"img\").src = `http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/${isVictory ? 'victory' : 'lost'}.gif`;\n gameModal.querySelector(\"h4\").innerText = isVictory ? 'Congrats!' : 'Game Over!';\n gameModal.querySelector(\"p\").innerHTML = `${modalText} <b>${currentWord}<\/b>`;\n gameModal.classList.add(\"show\");\n};\nconst initGame = (button, clickedLetter) => {\n \/\/ Checking if clickedLetter is exist on the currentWord\n if(currentWord.includes(clickedLetter)) {\n \/\/ Showing all correct letters on the word display\n [...currentWord].forEach((letter, index) => {\n if(letter === clickedLetter) {\n correctLetters.push(letter);\n wordDisplay.querySelectorAll(\"li\")[index].innerText = letter;\n wordDisplay.querySelectorAll(\"li\")[index].classList.add(\"guessed\");\n }\n });\n } else {\n \/\/ If clicked letter doesn't exist then update the wrongGuessCount and hangman image\n wrongGuessCount++;\n hangmanImage.src = `http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/hangman-${wrongGuessCount}.jpg`;\n }\n button.disabled = true; \/\/ Disabling the clicked button so user can't click again\n guessesText.innerText = `${wrongGuessCount} \/ ${maxGuesses}`;\n \/\/ Calling gameOver function if any of these condition meets\n if(wrongGuessCount === maxGuesses) return gameOver(false);\n if(correctLetters.length === currentWord.length) return gameOver(true);\n};\n\/\/ Creating keyboard buttons and adding event listeners\nfor (let i = 97; i <= 122; i++) {\n const button = document.createElement(\"button\");\n button.innerText = String.fromCharCode(i);\n keyboardDiv.appendChild(button);\n button.addEventListener(\"click\", (e) => initGame(e.target, String.fromCharCode(i)));\n}\ngetRandomWord();\nplayAgainBtn.addEventListener(\"click\", getRandomWord);\n<\/script>\n\n<style>\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;500;600;700&display=swap\");\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Open Sans\", sans-serif;\n}\nbody {\n display: flex;\n padding: 0 10px;\n align-items: top;\n justify-content: center;\n min-height: 100vh;\n}\n\n.container {\n display: flex;\n width: 850px;\n gap: 70px;\n padding: 60px 50px;\n background: #fff;\n border-radius: 10px;\n align-items: flex-end;\n justify-content: space-between;\n box-shadow: 10px 20px cmyk(0,0,0,100);\n}\n.hangman-box img {\n user-select: none;\n\tcolor: #000;\n max-width: 270px;\n}\n.hangman-box h1 {\n font-size: 1.45rem;\n\tcolor: #000;\n text-align: center;\n margin-top: 20px;\n text-transform: uppercase;\n}\n.game-box .word-display {\n gap: 10px;\n\tcolor: #000;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n}\n.word-display .letter {\n width: 28px;\n font-size: 2rem;\n\tcolor: #000;\n text-align: center;\n font-weight: 600;\n margin-bottom: 40px;\n text-transform: uppercase;\n border-bottom: 3px solid #000;\n}\n.word-display .letter.guessed {\n margin: -40px 0 35px;\n border-color: transparent;\n}\n.game-box h4 {\n text-align: center;\n font-size: 1.1rem;\n\tcolor: #000;\n font-weight: 500;\n margin-bottom: 15px;\n}\n.game-box h4 b {\n font-weight: 600;\n\tcolor: #000;\n}\n.game-box .guesses-text b {\n color: #000;\n}\n.game-box .keyboard {\n display: flex;\n gap: 5px;\n flex-wrap: wrap;\n margin-top: 40px;\n justify-content: center;\n}\n:where(.game-modal, .keyboard) button {\n color: #fff;\n border: none;\n outline: none;\n cursor: pointer;\n font-size: 1rem;\n\tcolor: #fff;\n font-weight: 600;\n border-radius: 4px;\n text-transform: uppercase;\n background: #3054F8;\n}\n.keyboard button {\n padding: 7px;\n width: calc(100% \/ 9 - 5px);\n}\n.keyboard button[disabled] {\n pointer-events: none;\n opacity: 0.6;\n}\n:where(.game-modal, .keyboard) button:hover {\n background: #8286c9;\n}\n.game-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n background: cmyk(0,0,0,100);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n padding: 0 10px;\n transition: opacity 0.4s ease;\n\n}\n.game-modal.show {\n opacity: 1;\n pointer-events: auto;\n transition: opacity 0.4s 0.4s ease;\n}\n.game-modal .content {\n padding: 30px;\n max-width: 420px;\n width: 100%;\n border-radius: 10px;\n background: #fff;\n text-align: center;\n box-shadow: 10px 20px cmyk(0,0,0,100);\n}\n\n.game-modal img {\n max-width: 130px;\n margin-bottom: 20px;\n}\n.game-modal img[src=\"images\/victory.gif\"] {\n margin-left: -10px;\n}\n.game-modal h4 {\n font-size: 1.53rem;\n}\n.game-modal p {\n font-size: 1.15rem;\n margin: 15px 0 30px;\n font-weight: 500;\n}\n.game-modal p b {\n color: #5E63BA;\n font-weight: 600;\n}\n.game-modal button {\n padding: 12px 23px;\n}\n\"context\" (max-width: 782px) {\n .container {\n flex-direction: column;\n padding: 30px 15px;\n align-items: center;\n }\n .hangman-box img {\n max-width: 200px;\n }\n .hangman-box h1 {\n display: none;\n }\n .game-box h4 {\n font-size: 1rem;\n }\n .word-display .letter {\n margin-bottom: 35px;\n font-size: 1.7rem;\n }\n .word-display .letter.guessed {\n margin: -35px 0 25px;\n }\n .game-modal img {\n max-width: 120px;\n }\n .game-modal h4 {\n font-size: 1.45rem;\n }\n .game-modal p {\n font-size: 1.1rem;\n }\n .game-modal button {\n padding: 10px 18px;\n }\n}\n<\/style>\n<\/div><\/main><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/\">Home<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/word-scramble-2\/\">word scramble<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/memory-card-2\/\">memory card<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/tic-tac-toe-2\/\">tic tac toe<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hangman Game Game Over! The correct word was: rainbow Play Again Hangman Game Hint: Incorrect guesses:<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":0,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/237\/revisions"}],"wp:attachment":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/media?parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}