mario-ctig/llm-basic-game
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8"/>5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>6 <title>Vectorizing Words Jeopardy</title>7 <style>8 :root{9 --blue:#0a49a6;10 --blue-dark:#073a84;11 --gold:#ffd24a;12 --board-gap:10px;13 --card-depth:28px;14 }15 *{box-sizing:border-box}16 body{17 font-family: system-ui, Arial, sans-serif;18 display:flex;flex-direction:column;align-items:center;19 background: radial-gradient(1200px 700px at 50% -200px, #f2f6ff 0%, #e9efff 30%, #cfdafc 100%) fixed;20 margin:0; min-height:100vh;21 }22 h1{ color:#173e8c; margin:22px 0 6px; text-shadow:0 2px 0 #fff;}23 a.source{ font-size:14px; color:#334; margin-bottom:8px; text-decoration:none}24 a.source:hover{ text-decoration:underline }25 26 .topbar {27 width:min(1100px,95vw);28 display:flex;29 justify-content:space-between;30 align-items:center;31 gap:10px;32 margin-bottom:8px;33 }34 .btn-reset{35 padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer;36 border:2px solid #0d3a85; color:#fff; background:linear-gradient(180deg,#1362ff,#0d3a85);37 box-shadow:0 8px 18px rgba(0,0,0,.25);38 }39 .btn-reset:hover{ transform: translateY(-1px) }40 .btn-reset:active{ transform: translateY(0) }41 42 /* Stage / Board */43 .stage{ perspective: 1200px; width:min(1100px, 95vw); }44 #game-board{45 display:grid;46 grid-template-columns: repeat(5, 1fr);47 grid-auto-rows: 120px;48 gap: var(--board-gap);49 padding: var(--board-gap);50 border-radius:18px;51 background: linear-gradient(180deg, #0e1a3a, #01060f);52 box-shadow:53 0 20px 45px rgba(0,0,0,.35),54 inset 0 0 0 4px #000;55 transform: rotateX(8deg);56 transform-origin: top center;57 }58 .category, .card{59 position:relative;60 border-radius:14px;61 user-select:none;62 transform-style: preserve-3d;63 transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;64 box-shadow:65 0 var(--card-depth) calc(var(--card-depth) + 12px) rgba(0,0,0,.35),66 inset 0 0 0 1px rgba(255,255,255,.15);67 }68 .category{69 background: linear-gradient(180deg, #004fbf 0%, #003d93 60%, #003684 100%);70 color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.3px;71 display:flex; justify-content:center; align-items:center; text-align:center;72 border:1px solid #00122c;73 text-shadow:0 2px 0 rgba(0,0,0,.35);74 }75 .card{76 cursor:pointer; font-weight:900; color: var(--gold);77 background:78 radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),79 linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);80 border:1px solid #031b3f;81 display:flex; justify-content:center; align-items:center; text-align:center;82 font-size: clamp(16px, 2.4vw, 26px);83 text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,210,74,.35);84 }85 .card.tilt:hover{86 transform: translateZ(10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));87 box-shadow:88 0 24px 48px rgba(0,0,0,.4),89 0 0 24px rgba(255,210,74,.15),90 inset 0 0 0 1px rgba(255,255,255,.18);91 filter: saturate(1.1);92 }93 .card:active{ transform: translateZ(0) scale(.985); box-shadow: 0 12px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }94 .card.disabled{ cursor:default; color:#bfc7da; background: linear-gradient(180deg,#6b7aa6,#4e5b85); text-shadow:none; filter:grayscale(.2) brightness(.92); }95 96 #question-display{ width:min(1000px, 92vw); text-align:center; margin:16px 0 6px; }97 #question-display h2{ margin:8px 0 6px; color:#0d2b6f }98 #question-display p { font-size: 22px; line-height: 1.4; }99 #score{ font-size:24px; font-weight:800; color:#0d2b6f; margin:0 0 8px 0 }100 101 .answer-container{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px }102 .answer-btn{103 margin:0; padding:10px 16px; font-size:18px; cursor:pointer;104 border:2px solid #0d3a85; border-radius:10px; font-weight:800; color:#fff;105 background: linear-gradient(180deg,#1362ff,#0d3a85);106 box-shadow: 0 8px 18px rgba(0,0,0,.25);107 transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;108 }109 .answer-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28) }110 .answer-btn:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.25) }111 .answer-btn.disabled{ background:#aab4cc; color:#445; cursor:not-allowed; border-color:#889 }112 .feedback{ margin-top:10px; font-size:18px; font-weight:800 }113 114 .dd-overlay{115 position: fixed; inset:0; display:none; align-items:center; justify-content:center;116 z-index: 9999; pointer-events:none;117 background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));118 animation: dd-bg 1.2s ease-in-out 2;119 }120 .dd-text{121 font-size: clamp(40px, 7vw, 120px);122 font-weight: 900; color:#ffe17a; letter-spacing:2px;123 text-shadow:124 0 0 12px rgba(255,225,122,.9),125 0 0 40px rgba(255,225,122,.6),126 0 6px 0 #000;127 animation: flash 1.2s steps(2, jump-none) 2, wobble .9s ease-in-out 2;128 }129 @keyframes flash{ 0%,49%{opacity:1;filter:drop-shadow(0 0 24px rgba(255,225,122,.85));} 50%,100%{opacity:0;filter:none;} }130 @keyframes wobble{ 0%{transform:scale(1) rotate(0)} 50%{transform:scale(1.06) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} }131 @keyframes dd-bg{ 0%{background: radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.12), rgba(0,0,0,.9));} 100%{background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));} }132 .flash-ring{ position:absolute; inset:-3px; border-radius:14px; pointer-events:none; box-shadow:0 0 0 3px rgba(255,225,122,.95), 0 0 30px 6px rgba(255,225,122,.6); animation: ring 1.2s ease-in-out 2; }133 @keyframes ring{ 0%{opacity:1;transform:scale(1)} 50%{opacity:.1;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }134 .daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 }135 136 /* Review */137 #review{138 width:min(1000px, 92vw);139 margin:14px 0 24px 0;140 padding:12px;141 background:#fff;142 border:1px solid #ccd3e0;143 border-radius:12px;144 box-shadow:0 6px 20px rgba(0,0,0,.08);145 }146 #review h3{ margin:0 0 8px 0; color:#0d2b6f }147 .missed{ margin:8px 0; text-align:left }148 .missed .q{ font-weight:700 }149 .missed .a{ margin-left:8px }150 </style>151</head>152<body>153 <h1>Vectorizing Words Jeopardy</h1>154 <a class="source" href="https://www.linkedin.com/pulse/turning-text-numbers-word2vec-glove-fasttext-michael-lively-vtwde/" target="_blank">155 Source: Turning Text Into Numbers — Word2Vec, GloVe, FastText156 </a>157 158 <div class="topbar">159 <div id="score">Score: 0</div>160 <button class="btn-reset" id="reset-btn" title="Start a fresh round">Reset Game</button>161 </div>162 163 <div class="stage">164 <div id="game-board">165 <div class="category">Embedding Basics</div>166 <div class="category">Word2Vec: CBOW & Skip-gram</div>167 <div class="category">GloVe & Global Stats</div>168 <div class="category">FastText & Subwords</div>169 <div class="category">Training & Tools</div>170 <!-- cards will be injected -->171 </div>172 </div>173 174 <div id="question-display"></div>175 <div id="review" style="display:none;"></div>176 177 <audio id="dd-audio" preload="auto">178 <source src="daily-double.mp3" type="audio/mpeg">179 </audio>180 <div id="dd-overlay" class="dd-overlay"><div class="dd-text">DAILY DOUBLE!</div></div>181 182 <script>183 const categories = [184 "Embedding Basics",185 "Word2Vec: CBOW & Skip-gram",186 "GloVe & Global Stats",187 "FastText & Subwords",188 "Training & Tools"189 ];190 191 // ✅ Corrected answer keys included192 const questions = [193 // Embedding Basics194 [195 { q: "Compared to Bag of Words/TF-IDF, word embeddings primarily:", a: ["Capture meaning via context, not just frequency", "Apply hand-written linguistic rules", "Ignore context entirely"], correct: 0 },196 { q: "Which metric measures similarity by the angle between vectors?", a: ["Euclidean distance", "Cosine similarity", "Jaccard index"], correct: 1 },197 { q: "A common way to visualize high-dimensional embeddings in 2D is:", a: ["Gradient Descent", "Backpropagation", "PCA or t-SNE"], correct: 2 }198 ],199 // Word2Vec: CBOW & Skip-gram200 [201 { q: "CBOW’s training objective is to:", a: ["Predict the target word from surrounding context words", "Predict the context from the target word", "Factorize the co-occurrence matrix"], correct: 0 },202 { q: "Skip-gram’s training objective is to:", a: ["Count word frequencies", "Predict surrounding context words from a target word", "Remove stopwords before training"], correct: 1 },203 { q: "Which techniques speed up Word2Vec training?", a: ["Bag-of-Words and TF-IDF", "Count vectors and hashing", "Negative sampling and/or hierarchical softmax"], correct: 2 }204 ],205 // GloVe & Global Stats206 [207 { q: "GloVe learns embeddings mainly by:", a: ["Matrix factorization of a word co-occurrence matrix", "Predicting characters from bytes", "Labeling sentences with topics"], correct: 0 },208 { q: "In GloVe, a weighting function is used to:", a: ["Increase the window size automatically", "Balance frequent and rare words so common terms don't dominate", "Normalize vectors to unit length"], correct: 1 },209 { q: "Compared with Word2Vec, GloVe is especially strong at capturing:", a: ["Local syntactic patterns only", "Character-level morphology", "Global relationships across the entire corpus"], correct: 2 }210 ],211 // FastText & Subwords212 [213 { q: "FastText represents a word as:", a: ["A single one-hot vector", "Character n-grams (subword units) combined", "Only its stem or lemma"], correct: 1 }, // fixed214 { q: "A key advantage of FastText over Word2Vec is that it:", a: ["Requires no training data", "Handles out-of-vocabulary words via subwords", "Eliminates the need for context windows"], correct: 1 },215 { q: "FastText training generally uses the same framework as Word2Vec:", a: ["No, it uses topic modeling only", "Partly, but only with CBOW", "Yes, CBOW and/or Skip-gram with subwords"], correct: 2 }216 ],217 // Training & Tools218 [219 { q: "Embedding quality generally improves with:", a: ["Smaller, single-topic corpora", "Random word shuffling", "Larger and more diverse corpora and well-chosen window sizes"], correct: 2 }, // fixed220 { q: "Which library is optimized for production-grade NLP with pretrained vectors?", a: ["NLTK", "spaCy", "A spreadsheet"], correct: 1 },221 { q: "Which statement about classic embeddings is most accurate?", a: ["They are rule-based representations", "They fully model document-level structure like Transformers", "They learn from context but don’t capture full sequence structure; Transformers handle that"], correct: 2 }222 ]223 ];224 225 let score = 0, answered = 0;226 const total = 15;227 228 const board = document.getElementById("game-board"),229 qdisp = document.getElementById("question-display"),230 sdisp = document.getElementById("score"),231 review = document.getElementById("review");232 233 const ddOverlay = document.getElementById("dd-overlay");234 const ddAudio = document.getElementById("dd-audio");235 236 // Track where the correct answer ended up after shuffling, per "c-r" key237 const shuffleRegistry = new Map();238 const missedQuestions = [];239 240 const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };241 242 document.getElementById('reset-btn').addEventListener('click', () => {243 // simple reset: reload page to fresh state244 location.reload();245 });246 247 function createBoard() {248 // inject 15 cards (3 rows x 5 columns)249 for (let row = 0; row < 3; row++) {250 for (let col = 0; col < 5; col++) {251 const card = document.createElement("div");252 card.className = "card tilt";253 card.textContent = `$${(row + 1) * 100}`;254 card.dataset.col = col;255 card.dataset.row = row;256 257 // tilt effect258 card.addEventListener("mousemove", (e) => {259 const r = card.getBoundingClientRect();260 const x = (e.clientX - r.left) / r.width;261 const y = (e.clientY - r.top) / r.height;262 const ry = (x - 0.5) * 10;263 const rx = (0.5 - y) * 10;264 card.style.setProperty("--ry", `${ry}deg`);265 card.style.setProperty("--rx", `${rx}deg`);266 });267 card.addEventListener("mouseleave", () => {268 card.style.removeProperty("--ry");269 card.style.removeProperty("--rx");270 });271 272 card.onclick = () => handleCardClick(card);273 board.appendChild(card);274 }275 }276 }277 278 function handleCardClick(card){279 if (card.classList.contains("disabled")) return;280 const col = +card.dataset.col;281 const row = +card.dataset.row;282 const isDD = (col === dailyDouble.col && row === dailyDouble.row);283 if (isDD){284 triggerDailyDouble(card, () => showQuestion(col, row, card, true));285 } else {286 showQuestion(col, row, card, false);287 }288 }289 290 function triggerDailyDouble(card, onDone){291 const ring = document.createElement("div");292 ring.className = "flash-ring";293 card.appendChild(ring);294 ddAudio.currentTime = 0;295 ddAudio.play().catch(()=>{});296 ddOverlay.style.display = "flex";297 setTimeout(() => {298 ddOverlay.style.display = "none";299 ring.remove();300 onDone();301 }, 2400);302 }303 304 function showQuestion(categoryIndex, difficulty, card, isDailyDouble){305 const q = questions[categoryIndex][difficulty];306 307 // Build shuffled options and record where the correct one ended up308 const options = q.a.map((text, origIdx) => ({ text, origIdx }));309 for (let i = options.length - 1; i > 0; i--) {310 const j = Math.floor(Math.random() * (i + 1));311 [options[i], options[j]] = [options[j], options[i]];312 }313 const shuffledCorrectIndex = options.findIndex(o => o.origIdx === q.correct);314 const key = `${categoryIndex}-${difficulty}`;315 shuffleRegistry.set(key, { shuffledCorrectIndex, isDailyDouble });316 317 const dailyDoubleBanner = isDailyDouble ? `<div class="daily-double-banner">🎉 DAILY DOUBLE! 🎉</div>` : "";318 qdisp.innerHTML = `319 ${dailyDoubleBanner}320 <h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}${isDailyDouble ? " (x2)" : ""}</h2>321 <p>${q.q}</p>322 <div class="answer-container">323 ${options.map((opt, i) =>324 `<button class="answer-btn" data-ans="${i}" data-key="${key}">${opt.text}</button>`325 ).join("")}326 </div>327 `;328 329 // disable the card so it can't be opened again330 card.classList.add("disabled");331 332 // attach click handlers to answers (no inline booleans)333 document.querySelectorAll('.answer-btn').forEach(btn => {334 btn.addEventListener('click', () => {335 if (btn.classList.contains('disabled')) return;336 const chosenIndex = parseInt(btn.getAttribute('data-ans'), 10);337 const k = btn.getAttribute('data-key');338 checkAnswer(categoryIndex, difficulty, chosenIndex, k);339 }, { once: true });340 });341 }342 343 function checkAnswer(cat, diff, chosenShuffledIndex, key){344 const q = questions[cat][diff];345 const reg = shuffleRegistry.get(key);346 const isCorrect = (chosenShuffledIndex === reg.shuffledCorrectIndex);347 348 let val = (diff + 1) * 100;349 if (reg.isDailyDouble) val *= 2;350 351 // lock buttons (prevent multiple scoring)352 document.querySelectorAll(".answer-btn").forEach(b => {353 b.disabled = true; b.classList.add("disabled");354 });355 356 if (isCorrect) {357 score += val;358 qdisp.innerHTML += `<p class="feedback" style="color:green;">✅ Correct! +$${val.toLocaleString()}</p>`;359 } else {360 score -= val;361 const correctText = q.a[q.correct];362 const chosenText = q.a[363 // translate shuffled index back to original by comparing text (safe here; could also carry mapping)364 q.a.findIndex((orig, idx) => {365 // find the text for chosenShuffledIndex by looking up the rendered button text366 // simpler: we recorded only shuffled index; to show user's text, just read from DOM:367 return false; // placeholder, we'll get from DOM below368 })369 ];370 // Grab the chosen text from the DOM directly371 const chosenBtn = document.querySelector(`.answer-btn[data-ans="${chosenShuffledIndex}"][data-key="${key}"]`);372 const chosenPretty = chosenBtn ? chosenBtn.textContent : "(your choice)";373 374 qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val.toLocaleString()}<br/>Correct answer: <em>${correctText}</em></p>`;375 376 // record for review377 missedQuestions.push({378 category: categories[cat],379 value: `$${(diff+1)*100}${reg.isDailyDouble ? " (x2)" : ""}`,380 question: q.q,381 yourAnswer: chosenPretty,382 correctAnswer: correctText383 });384 }385 386 sdisp.textContent = `Score: ${score}`;387 answered++; // increment only after answering388 389 if (answered === total) {390 endGame();391 }392 }393 394 function endGame(){395 qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score.toLocaleString()}</p>`;396 if (missedQuestions.length){397 const items = missedQuestions.map(m =>398 `<div class="missed">399 <div class="q">(${m.category} • ${m.value}) ${m.question}</div>400 <div class="a">Your answer: <em>${m.yourAnswer}</em></div>401 <div class="a">Correct: <strong>${m.correctAnswer}</strong></div>402 </div>`403 ).join("");404 review.style.display = "block";405 review.innerHTML = `<h3>Review: Questions to Revisit (${missedQuestions.length})</h3>${items}`;406 } else {407 review.style.display = "block";408 review.innerHTML = `<h3>Perfect Round!</h3><p>You answered all questions correctly 🎉</p>`;409 }410 }411 412 // Build the board413 createBoard();414 </script>415</body>416</html>