{"id":235,"date":"2024-07-10T18:26:43","date_gmt":"2024-07-10T18:26:43","guid":{"rendered":"https:\/\/projects.emat.kent.edu\/24sp-emat\/?page_id=235"},"modified":"2024-07-10T19:07:50","modified_gmt":"2024-07-10T19:07:50","slug":"word-scramble-2","status":"publish","type":"page","link":"https:\/\/projects.emat.kent.edu\/24sp-emat\/word-scramble-2\/","title":{"rendered":"Word Scramble"},"content":{"rendered":"\n<div class=\"wp-site-blocks\">\n\n\n<main class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><\/div>\n\n\n<div class=\"entry-content wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained\">\n\t\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\t\n    <div class=\"container\">\n     <h2> <\/h2>\n        <div class=\"content\">\n            <p class=\"word\"><\/p>\n            <div class=\"details\">\n                <p class=\"hint\">Hint: <span><\/span><\/p>\n                <p class=\"time\">Time Left: <span><b>45<\/b>s<\/span><\/p>\n            <\/div>\n\t\t\t<input id=\"answerbox\" type=\"text\" spellcheck=\"false\" placeholder=\"Enter a valid word\">\n            <div class=\"buttons\">\n                <button class=\"refresh-word\">Refresh Word<\/button>\n               <button class=\"check-word\">Check Word<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"keyboard-container\">\n\t\t\t<div class=\"keyboard\">\n  <\/div>\n            <\/div>\n        <\/div>\n<\/div>\n\n<script>\n\tlet words = [\n    {\n        word: \"flash\",\n        hint: \"The mascot at Kent State\"\n    },\n    {\n        word: \"creativity\",\n        hint: \"The use of the imagination or original ideas\"\n    },\n    {\n        word: \"library\",\n        hint: \"The tallest building in Portage County\"\n    },\n    {\n        word: \"franklin\",\n        hint: \"The building you're currently in\"\n    },\n    {\n        word: \"magazine\",\n        hint: \"A publication containing articles and illustrations\"\n    },\n    {\n        word: \"communication\",\n        hint: \"the College of ____ & Information\"\n    },\n    {\n        word: \"emerging\",\n        hint: \"The E in EMAT\"\n    },\n    {\n        word: \"media\",\n        hint: \"Follow us on social ____ @ccikentstate\"\n    },\n    {\n        word: \"technology\",\n        hint: \"The branch of knowledge dealing with engineering or applied sciences\"\n    },\n    {\n        word: \"advertising\",\n        hint: \"Paid, Search, and Display are all forms of this\"\n    },\n    {\n        word: \"journalism\",\n        hint: \"Writing for newspapers or preparing news to be broadcast is known as____\"\n    },\n    {\n        word: \"news\",\n        hint: \"A room on the second floor of Franklin Hall\"\n    },\n    {\n        word: \"radio\",\n        hint: \"Black Squirrel is a student-run ____ station\"\n    },\n    {\n        word: \"elevator\",\n        hint: \"Arguably the slowest one on campus, after the library\u2019s\"\n    },\n    {\n        word: \"campus\",\n        hint: \"The library is across ____ from Franklin Hall\"\n    },\n    {\n        word: \"semester\",\n        hint: \"15 weeks long, typically two in a school year\"\n    },\n    {\n        word: \"community\",\n        hint: \"Flashes take care of Flashes is a sense of ______\"\n    },\n    {\n        word: \"teams\",\n        hint: \"A group of people who perform work toward accomplishing a common mission\"\n    },\n    {\n        word: \"microsoft\",\n        hint: \"Word, Outlook, Teams, and Office are all a part of this\"\n    },\n    {\n        word: \"computer\",\n        hint: \"Electronic device for storing and processing data\"\n    },\n    {\n        word: \"reynolds\",\n        hint: \"Dean of the College of Communication at KSU\"\n    },\n    {\n        word: \"diacon\",\n        hint: \"The President of KSU\"\n    },\n    {\n        word: \"ideabase\",\n        hint: \"Where you can find Kristin Dowling, a.k.a the base of all ideas\"\n    },\n\t\t {\n        word: \"canvas\",\n        hint: \"A website KSU students use to stay informed with grades, assignments, and class work\"\n    },\n\t\t {\n        word: \"graduation\",\n        hint: \"What most of us students are working towards\"\n    },\n\t\t {\n        word: \"academics\",\n        hint: \"Students in Franklin Hall are focused on their_____\"\n    },\n\t\t {\n        word: \"internship\",\n        hint: \"A paid or unpaid job that most majors require for credit\"\n    },\n\t\t {\n        word: \"studio\",\n        hint: \"A room where students can go to produce their work\"\n    },\n\t\t {\n        word: \"squirrel\",\n        hint: \"KSU\u2019s second mascot after flash\"\n    },\n];\n\nconst wordText = document.querySelector(\".word\");\nconst keyboardDiv = document.querySelector(\".keyboard-container .keyboard\"),\nhintText = document.querySelector(\".hint span\"),\ntimeText = document.querySelector(\".time b\"),\ninputField = document.getElementById(\"answerbox\"),\nrefreshBtn = document.querySelector(\".refresh-word\"),\ncheckBtn = document.querySelector(\".check-word\");\nlet correctWord, timer;\nconst initTimer = maxTime => {\n    clearInterval(timer);\n    timer = setInterval(() => {\n        if(maxTime > 0) {\n            maxTime--;\n            return timeText.innerText = maxTime;\n        }\n        alert(`Time off! ${correctWord.toUpperCase()} was the correct word`);\n        initGame();\n    }, 1000);\n};\nconst initGame = () => {\n    initTimer(45);\n    let randomObj = words[Math.floor(Math.random() * words.length)];\n    let wordArray = randomObj.word.split(\"\");\n    for (let i = wordArray.length - 1; i > 0; i--) {\n        let j = Math.floor(Math.random() * (i + 1));\n        [wordArray[i], wordArray[j]] = [wordArray[j], wordArray[i]];\n    }\n    wordText.innerText = wordArray.join(\"\");\n    hintText.innerText = randomObj.hint;\n    correctWord = randomObj.word.toLowerCase();\n    inputField.value = \"\";\n    inputField.setAttribute(\"maxlength\", correctWord.length);\n};\ninitGame();\nconst checkWord = () => {\n    let userWord = inputField.value.toLowerCase();\n    if(!userWord) return alert(\"Please enter the word to check!\");\n    if(userWord !== correctWord) return alert(`Oops! ${userWord} is not a correct word`);\n    alert(`Congrats! ${correctWord.toUpperCase()} is the correct word`);\n    initGame();\n};\nrefreshBtn.addEventListener(\"click\", initGame);\ncheckBtn.addEventListener(\"click\", checkWord);\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) => {\n    console.log(\"Keyboard button clicked:\", e.target.innerText);\n    const char = e.target.innerText;\n    inputField.value += char; \/\/ Append the clicked character to the input field\n\t\tconsole.log(inputField.value)\n});\n}\n<\/script>\n\n<style>\n\t\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: Poppins, sans-serif;\n}\n\na:link, a:visited {\n  color: white;\n }\n\na:hover {\n  color: white;\n}\n\nbody {\n  display: flex;\n  padding: 0 10px;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #3054F8;\n  position: relative; \/* Added relative positioning *\/\n}\n\n.container {\n  width: 600px;\n  height: 500px;\n  border-radius: 7px;\n  background: #fff;\n  box-shadow: 10px 20px cmyk(0, 0, 0, 10%);\n  z-index: 1; \/* Ensure the container is above the keyboard *\/\n}\n\n.container h2 {\n  font-size: 25px;\n  font-weight: 500;\n  color: #004AAD;\n  padding: 16px 25px;\n  border-bottom: 1px solid #ccc;\n}\n\n.container .content {\n  margin: 25px 20px 35px;\n}\n\n.content .word {\n  user-select: none;\n  font-size: 33px;\n  font-weight: 500;\n  color: #004AAD;\n  text-align: center;\n  letter-spacing: 24px;\n  margin-right: -24px;\n  word-break: break-all;\n  text-transform: uppercase;\n}\n\n.content .details {\n  margin: 25px 0 20px;\n}\n\n.details p {\n  font-size: 18px;\n  color: #004AAD;\n  margin-bottom: 10px;\n}\n\n.details p b {\n  font-weight: 500;\n}\n\n.input {\n  width: 100px;\n  height: 100px;\n  outline: none;\n  padding: 100px;\n  font-size: 18px;\n  color: #004AAD;\n  border-radius: 10px;\n  border: 1px solid #bfbfbf;\n}\n\n.content input:focus {\n  box-shadow: 2px 4px cmyk(0, 0, 0, 100);\n}\n\n.content input::placeholder {\n  color: #004AAD;\n}\n\n.content input:focus::placeholder {\n  color: #004AAD;\n}\n\n.content .buttons {\n  display: flex;\n  margin-top: 20px;\n  justify-content: space-between;\n}\n\n.buttons button {\n  border: none;\n  outline: none;\n  color: #fff;\n  cursor: pointer;\n  padding: 15px 0;\n  font-size: 17px;\n  border-radius: 5px;\n  width: calc(100% \/ 2 - 8px);\n  transition: all 0.3s ease;\n\tz-index: 1;\n}\n\n.buttons button:active {\n  transform: scale(0.97);\n}\n\n.buttons .refresh-word {\n  background: #004AAD;\n\tz-index: 1;\n}\n\n.buttons .refresh-word:hover {\n  background: #3054F8;\n\tz-index: 1;\n}\n\n.buttons .check-word {\n  background: #FF914D;\n\tz-index: 1;\n}\n\n.buttons .check-word:hover {\n  background: #FDBE6C;\n\tz-index: 1;\n}\n\t .game-box .keyboard {\n    display: flex;\n    gap: 5px;\n    flex-wrap: wrap;\n    margin-top: 40px;\n    justify-content: center;\n    position: absolute; \/* Position the keyboard absolutely within the game-box *\/\n    bottom: -100px; \/* Adjust as needed to place it below the other content *\/\n    left: 50%;\n    transform: translateX(-50%); \/* Center horizontally *\/\n    z-index: 0; \/* Ensure the keyboard is below other content *\/\n  }\n\n  :where(.game-modal, .keyboard) button {\n    color: #C2C2C2;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    font-size: 17px;\n    color: #ffffff;\n    font-weight: 600;\n    border-radius: 10px;\n    text-transform: uppercase;\n    background: #C2C2C2;\n  }\n\t\n   .keyboard button {\n  padding: 10px;\n  width: calc(100% \/ 9 - 5px);\n  height: calc(100% \/ 9 - 5px);\n}\n\n  :where(.game-modal, .keyboard) button:hover {\n    background: #3054F8;\n  }\n\n.context and (max-width: 500px) {\n  .container {\n    width: 110%; \/* Adjusted width to fit smaller screens *\/\n  }\n\n  .container h2 {\n    font-size: 22px;\n    padding: 13px 20px;\n  }\n\n  .content .word {\n    font-size: 30px;\n    letter-spacing: 20px;\n    margin-right: -20px;\n  }\n\n  .container .content {\n    margin: 20px 20px 30px;\n  }\n\n  .details p {\n    font-size: 16px;\n    margin-bottom: 8px;\n  }\n\n  .content input {\n    height: 55px;\n    font-size: 17px;\n  }\n\n  .buttons button {\n    padding: 14px 0;\n    font-size: 16px;\n    width: calc(100% \/ 2 - 7px);\n  }\n\n  .game-box {\n    position: relative; \/* Added relative positioning for the game-box *\/\n  }\n}\n\t<\/style>\n<\/div><\/main><\/div>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/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\/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\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\/hangman-7\/\">hangman<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hint: Time Left: 45s Refresh Word Check Word<\/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-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/235","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=235"}],"version-history":[{"count":0,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"wp:attachment":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}