eaglelandsonce/Generative_AI_Hangman
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>Generative AI - Hangman Game</title>6 <style>7 body {8 font-family: Arial, sans-serif;9 background: #f0f2f5;10 margin: 0;11 padding: 0;12 text-align: center;13 }14 header {15 background-color: #0078d4; /* Title bar color */16 color: #fff;17 padding: 1rem;18 }19 h1 {20 margin: 0;21 font-size: 1.8rem;22 }23 .container {24 max-width: 900px;25 margin: 2rem auto;26 background: #fff;27 padding: 2rem;28 border-radius: 8px;29 box-shadow: 0 0 10px rgba(0,0,0,0.1);30 text-align: left;31 }32 #hangman-container {33 display: flex;34 flex-wrap: wrap;35 justify-content: center;36 align-items: flex-start;37 }38 /* SVG container */39 #svg-container {40 width: 250px;41 margin-right: 2rem;42 margin-bottom: 2rem;43 }44 #quiz-content {45 flex: 1;46 margin: 0 1rem;47 min-width: 250px;48 }49 #question {50 font-size: 1.2rem;51 font-weight: bold;52 margin-bottom: 1rem;53 }54 .btn-row {55 margin-top: 1rem;56 }57 button {58 padding: 0.6rem 1.2rem;59 font-size: 1rem;60 margin: 0.5rem;61 cursor: pointer;62 border: none;63 border-radius: 4px;64 background-color: #0078d4;65 color: #fff;66 transition: background-color 0.3s ease;67 }68 button:hover {69 background-color: #005fa3;70 }71 #feedback {72 font-weight: bold;73 margin-top: 1rem;74 min-height: 24px; /* space for feedback text */75 }76 #explanation {77 margin-top: 1rem;78 padding: 1rem;79 border: 1px solid #ccc;80 border-radius: 6px;81 display: none;82 background: #fafafa;83 }84 #next-btn, #restart-btn {85 margin-top: 1rem;86 }87 #restart-btn {88 background-color: #ff7675;89 }90 #restart-btn:hover {91 background-color: #d63031;92 }93 #hint-btn {94 background-color: #f1c40f;95 color: #000;96 }97 #hint-btn:hover {98 background-color: #d4ac0d;99 color: #fff;100 }101 /* Cheat Sheet styling */102 #cheat-sheet {103 display: none;104 position: fixed;105 top: 10%;106 left: 50%;107 transform: translateX(-50%);108 background: #fff;109 padding: 20px;110 border: 2px solid #444;111 box-shadow: 0 0 10px rgba(0,0,0,0.5);112 z-index: 999;113 width: 80%;114 max-width: 600px;115 }116 #cheat-sheet h2 {117 margin-top: 0;118 }119 #cheat-sheet ul {120 list-style: disc;121 margin: 1rem 0 0 1.5rem;122 padding: 0;123 text-align: left;124 }125 #close-cheat {126 float: right;127 cursor: pointer;128 font-weight: bold;129 font-size: 18px;130 color: red;131 }132 /* Responsive layout */133 @media (max-width: 600px) {134 #hangman-container {135 flex-direction: column;136 align-items: center;137 }138 #svg-container {139 margin-right: 0;140 margin-bottom: 1.5rem;141 }142 #quiz-content {143 margin: 0;144 }145 }146 </style>147</head>148 149<body>150 <header>151 <h1>Generative AI - Hangman Game</h1>152 </header>153 154 <div class="container">155 <div id="hangman-container">156 <!-- SVG Hangman -->157 <div id="svg-container">158 <svg 159 width="250" 160 height="300" 161 viewBox="0 0 250 300"162 style="border:1px solid #ccc;"163 >164 <!-- Base line -->165 <line id="base-line" x1="10" y1="280" x2="240" y2="280" stroke="#444" stroke-width="4" style="display:none;" />166 <!-- Upright post -->167 <line id="upright-post" x1="60" y1="280" x2="60" y2="40" stroke="#444" stroke-width="4" style="display:none;" />168 <!-- Top beam -->169 <line id="top-beam" x1="60" y1="40" x2="160" y2="40" stroke="#444" stroke-width="4" style="display:none;" />170 <!-- Rope -->171 <line id="rope" x1="160" y1="40" x2="160" y2="80" stroke="#444" stroke-width="4" style="display:none;" />172 <!-- Head -->173 <circle id="head" cx="160" cy="100" r="20" stroke="#444" stroke-width="4" fill="none" style="display:none;" />174 <!-- Body -->175 <line id="body" x1="160" y1="120" x2="160" y2="180" stroke="#444" stroke-width="4" style="display:none;" />176 <!-- Left arm -->177 <line id="left-arm" x1="160" y1="140" x2="120" y2="120" stroke="#444" stroke-width="4" style="display:none;" />178 <!-- Right arm -->179 <line id="right-arm" x1="160" y1="140" x2="200" y2="120" stroke="#444" stroke-width="4" style="display:none;" />180 <!-- Left leg -->181 <line id="left-leg" x1="160" y1="180" x2="130" y2="220" stroke="#444" stroke-width="4" style="display:none;" />182 <!-- Right leg -->183 <line id="right-leg" x1="160" y1="180" x2="190" y2="220" stroke="#444" stroke-width="4" style="display:none;" />184 </svg>185 </div>186 187 <!-- Quiz Section -->188 <div id="quiz-content">189 <div id="question">Loading question...</div>190 <div class="btn-row">191 <button id="yes-btn">YES</button>192 <button id="no-btn">NO</button>193 </div>194 <div id="feedback"></div>195 <div id="explanation"></div>196 197 <button id="hint-btn">Hint</button>198 <button id="next-btn" style="display:none;">Next</button>199 <button id="restart-btn" style="display:none;">Restart</button>200 </div>201 </div>202 </div>203 204 <!-- Cheat Sheet Popup -->205 <div id="cheat-sheet">206 <span id="close-cheat">X</span>207 <h2>Top 10 AI Vulnerabilities</h2>208 <ul>209 <li><b>Prompt Injection</b> – Manipulating AI through deceptive inputs.</li>210 <li><b>Insecure Output Handling</b> – Accepting AI output without validation.</li>211 <li><b>Training Data Poisoning</b> – Injecting malicious data into training sets.</li>212 <li><b>Model Denial of Service</b> – Overloading AI systems to degrade performance.</li>213 <li><b>Supply Chain Vulnerabilities</b> – Risks from third-party models or datasets.</li>214 <li><b>Sensitive Information Disclosure</b> – Accidental leakage of private data.</li>215 <li><b>Insecure Plugin Design</b> – Plugins allowing unauthorized access or code execution.</li>216 <li><b>Excessive Agency</b> – AI with too much autonomy causing unintended actions.</li>217 <li><b>Overreliance</b> – Blind trust in AI leading to misinformation or poor decisions.</li>218 <li><b>Model Theft</b> – Unauthorized access to proprietary AI models.</li>219 </ul>220 </div>221 222 <script>223 /****************************************************224 * QUIZ QUESTIONS225 ****************************************************/226 const quizData = [227 {228 question: "Is GPT an example of a model that only uses the decoder block?",229 correctAnswer: "yes",230 explanation: "Yes. GPT (Generative Pretrained Transformer) is built around the decoder architecture."231 },232 {233 question: "Does BERT use only the decoder block in a Transformer?",234 correctAnswer: "no",235 explanation: "No. BERT (Bidirectional Encoder Representations from Transformers) relies on the encoder block."236 },237 {238 question: "Is tokenization always limited to splitting full words on whitespace only?",239 correctAnswer: "no",240 explanation: "No. Tokenization can create sub-word tokens or combine words with punctuation."241 },242 {243 question: "Are embeddings used to represent the semantic meaning of tokens in vector form?",244 correctAnswer: "yes",245 explanation: "Yes. Embeddings are multidimensional numeric vectors encoding a token's semantic attributes."246 },247 {248 question: "Do attention layers allow a model to evaluate the importance of other tokens in the sequence?",249 correctAnswer: "yes",250 explanation: "Yes. The attention mechanism helps a model weight each token’s influence on others."251 },252 {253 question: "Is the transformer architecture based solely on recurrent neural networks?",254 correctAnswer: "no",255 explanation: "No. Transformer models rely on attention mechanisms and feed-forward layers, not RNNs."256 },257 {258 question: "Does the encoder block in a transformer create semantic representations of tokens?",259 correctAnswer: "yes",260 explanation: "Yes. The encoder block processes tokens to create embeddings that capture semantic relationships."261 },262 {263 question: "Can a transformer model generate human-like text completions?",264 correctAnswer: "yes",265 explanation: "Yes. Transformer-based models generate coherent text based on learned token relationships."266 },267 {268 question: "Is cosine similarity used to measure the similarity between token embeddings?",269 correctAnswer: "yes",270 explanation: "Yes. Cosine similarity quantifies the directional similarity between embedding vectors."271 },272 {273 question: "Does the training of transformer models rely on a small volume of text?",274 correctAnswer: "no",275 explanation: "No. Training requires large volumes of text to effectively capture vocabulary and semantics."276 }277 ];278 279 /****************************************************280 * HANGMAN PARTS281 ****************************************************/282 const hangmanParts = [283 "base-line",284 "upright-post",285 "top-beam",286 "rope",287 "head",288 "body",289 "left-arm",290 "right-arm",291 "left-leg",292 "right-leg"293 ];294 const maxMistakes = hangmanParts.length; // 10 parts295 /****************************************************296 * GAME STATE VARIABLES297 ****************************************************/298 let currentQuestionIndex = 0;299 let mistakes = 0;300 let gameOver = false;301 // DOM references302 const questionDiv = document.getElementById("question");303 const yesBtn = document.getElementById("yes-btn");304 const noBtn = document.getElementById("no-btn");305 const nextBtn = document.getElementById("next-btn");306 const restartBtn = document.getElementById("restart-btn");307 const feedbackDiv = document.getElementById("feedback");308 const explanationDiv = document.getElementById("explanation");309 const hintBtn = document.getElementById("hint-btn");310 const cheatSheet = document.getElementById("cheat-sheet");311 const closeCheat = document.getElementById("close-cheat");312 // Get references to the SVG parts313 const svgParts = hangmanParts.map(id => document.getElementById(id));314 /****************************************************315 * INIT GAME316 ****************************************************/317 function initGame() {318 mistakes = 0;319 currentQuestionIndex = 0;320 gameOver = false;321 feedbackDiv.textContent = "";322 explanationDiv.style.display = "none";323 restartBtn.style.display = "none";324 nextBtn.style.display = "none";325 // Hide all hangman parts326 svgParts.forEach(part => {327 if (part) part.style.display = "none";328 });329 loadQuestion();330 }331 /****************************************************332 * LOAD QUESTION333 ****************************************************/334 function loadQuestion() {335 if (currentQuestionIndex >= quizData.length) {336 // All questions answered337 endGame(true);338 return;339 }340 feedbackDiv.textContent = "";341 explanationDiv.style.display = "none";342 nextBtn.style.display = "none";343 const currentQ = quizData[currentQuestionIndex];344 questionDiv.textContent = currentQ.question;345 }346 /****************************************************347 * HANDLE ANSWER348 ****************************************************/349 function handleAnswer(userAnswer) {350 if (gameOver || currentQuestionIndex >= quizData.length) return;351 const currentQ = quizData[currentQuestionIndex];352 explanationDiv.textContent = currentQ.explanation;353 explanationDiv.style.display = "block";354 if (userAnswer === currentQ.correctAnswer) {355 feedbackDiv.textContent = "Correct!";356 } else {357 feedbackDiv.textContent = "Incorrect!";358 mistakes++;359 updateHangman();360 if (mistakes >= maxMistakes) {361 // Reached maximum mistakes362 endGame(false);363 return;364 }365 }366 // Show Next button if not the last question367 if (currentQuestionIndex < quizData.length) {368 nextBtn.style.display = "inline-block";369 }370 }371 /****************************************************372 * UPDATE HANGMAN (DRAW)373 ****************************************************/374 function updateHangman() {375 // Reveal the next part376 // mistakes is 1-based for revealing, so show hangmanParts[mistakes - 1]377 const partToShow = hangmanParts[mistakes - 1];378 if (partToShow) {379 document.getElementById(partToShow).style.display = "block";380 }381 }382 /****************************************************383 * END GAME384 ****************************************************/385 function endGame(userCompletedAll) {386 gameOver = true;387 yesBtn.disabled = true;388 noBtn.disabled = true;389 nextBtn.style.display = "none";390 restartBtn.style.display = "inline-block";391 if (userCompletedAll && mistakes < maxMistakes) {392 feedbackDiv.textContent = `Congratulations! You answered all ${quizData.length} questions with ${mistakes} mistake(s).`;393 explanationDiv.textContent = "Game Complete!";394 explanationDiv.style.display = "block";395 } else {396 questionDiv.textContent = "Game Over!";397 feedbackDiv.textContent = `You made ${mistakes} mistakes.`;398 explanationDiv.textContent = "The game has ended.";399 explanationDiv.style.display = "block";400 }401 }402 /****************************************************403 * NEXT QUESTION404 ****************************************************/405 function loadNextQuestion() {406 currentQuestionIndex++;407 loadQuestion();408 }409 /****************************************************410 * RESTART GAME411 ****************************************************/412 function restartGame() {413 yesBtn.disabled = false;414 noBtn.disabled = false;415 initGame();416 }417 /****************************************************418 * CHEAT SHEET419 ****************************************************/420 function showCheatSheet() {421 cheatSheet.style.display = "block";422 }423 function hideCheatSheet() {424 cheatSheet.style.display = "none";425 }426 /****************************************************427 * EVENT LISTENERS428 ****************************************************/429 yesBtn.addEventListener("click", () => handleAnswer("yes"));430 noBtn.addEventListener("click", () => handleAnswer("no"));431 nextBtn.addEventListener("click", loadNextQuestion);432 restartBtn.addEventListener("click", restartGame);433 hintBtn.addEventListener("click", showCheatSheet);434 closeCheat.addEventListener("click", hideCheatSheet);435 // Initialize the game on page load436 initGame();437 </script>438</body>439</html>440