| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>Six Prompts Jeopardy</title> |
| <style> |
| :root{ |
| --blue:#0a49a6; |
| --blue-dark:#073a84; |
| --gold:#ffd24a; |
| --board-gap:10px; |
| --card-depth:28px; |
| } |
| *{box-sizing:border-box} |
| body{ |
| font-family: system-ui, Arial, sans-serif; |
| display:flex;flex-direction:column;align-items:center; |
| background: radial-gradient(1200px 700px at 50% -200px, #f2f6ff 0%, #e9efff 30%, #cfdafc 100%) fixed; |
| margin:0; min-height:100vh; |
| } |
| h1{ color:#173e8c; margin:22px 0 6px; text-shadow:0 2px 0 #fff;} |
| a.source{ font-size:14px; color:#334; margin-bottom:8px; text-decoration:none} |
| a.source:hover{ text-decoration:underline } |
| .topbar { |
| width:min(1100px,95vw); |
| display:flex; |
| justify-content:space-between; |
| align-items:center; |
| gap:10px; |
| margin-bottom:8px; |
| } |
| .btn-reset{ |
| padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer; |
| border:2px solid #0d3a85; color:#fff; background:linear-gradient(180deg,#1362ff,#0d3a85); |
| box-shadow:0 8px 18px rgba(0,0,0,.25); |
| } |
| .btn-reset:hover{ transform: translateY(-1px) } |
| .btn-reset:active{ transform: translateY(0) } |
| |
| .stage{ perspective: 1200px; width:min(1100px, 95vw); visibility:hidden; } |
| #game-board{ |
| display:grid; |
| grid-template-columns: repeat(5, 1fr); |
| grid-auto-rows: 120px; |
| gap: var(--board-gap); |
| padding: var(--board-gap); |
| border-radius:18px; |
| background: linear-gradient(180deg, #0e1a3a, #01060f); |
| box-shadow: |
| 0 20px 45px rgba(0,0,0,.35), |
| inset 0 0 0 4px #000; |
| transform: rotateX(8deg); |
| transform-origin: top center; |
| } |
| .category, .card{ |
| position:relative; |
| border-radius:14px; |
| user-select:none; |
| transform-style: preserve-3d; |
| transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; |
| box-shadow: |
| 0 var(--card-depth) calc(var(--card-depth) + 12px) rgba(0,0,0,.35), |
| inset 0 0 0 1px rgba(255,255,255,.15); |
| } |
| .category{ |
| background: linear-gradient(180deg, #004fbf 0%, #003d93 60%, #003684 100%); |
| color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.3px; |
| display:flex; justify-content:center; align-items:center; text-align:center; |
| border:1px solid #00122c; |
| text-shadow:0 2px 0 rgba(0,0,0,.35); |
| padding:8px; |
| } |
| .card{ |
| cursor:pointer; font-weight:900; color: var(--gold); |
| background: |
| radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), |
| linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); |
| border:1px solid #031b3f; |
| display:flex; justify-content:center; align-items:center; text-align:center; |
| font-size: clamp(16px, 2.4vw, 26px); |
| text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,210,74,.35); |
| padding:10px; |
| } |
| .card.tilt:hover{ |
| transform: translateZ(10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); |
| box-shadow: |
| 0 24px 48px rgba(0,0,0,.4), |
| 0 0 24px rgba(255,210,74,.15), |
| inset 0 0 0 1px rgba(255,255,255,.18); |
| filter: saturate(1.1); |
| } |
| .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); } |
| .card.disabled{ cursor:default; color:#bfc7da; background: linear-gradient(180deg,#6b7aa6,#4e5b85); text-shadow:none; filter:grayscale(.2) brightness(.92); } |
| #question-display{ width:min(1000px, 92vw); text-align:center; margin:16px 0 6px; } |
| #question-display h2{ margin:8px 0 6px; color:#0d2b6f } |
| #question-display p { font-size: 22px; line-height: 1.4; } |
| #score{ font-size:24px; font-weight:800; color:#0d2b6f; margin:0 0 8px 0 } |
| .answer-container{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px } |
| .answer-btn{ |
| margin:0; padding:10px 16px; font-size:18px; cursor:pointer; |
| border:2px solid #0d3a85; border-radius:10px; font-weight:800; color:#fff; |
| background: linear-gradient(180deg,#1362ff,#0d3a85); |
| box-shadow: 0 8px 18px rgba(0,0,0,.25); |
| transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; |
| } |
| .answer-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28) } |
| .answer-btn:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.25) } |
| .answer-btn.disabled{ background:#aab4cc; color:#445; cursor:not-allowed; border-color:#889 } |
| .feedback{ margin-top:10px; font-size:18px; font-weight:800 } |
| .dd-overlay{ |
| position: fixed; inset:0; display:none; align-items:center; justify-content:center; |
| z-index: 9999; pointer-events:none; |
| background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7)); |
| } |
| .dd-overlay.active{ animation: dd-bg 1.2s ease-in-out 2; } |
| .dd-text{ |
| font-size: clamp(40px, 7vw, 120px); |
| font-weight: 900; color:#ffe17a; letter-spacing:2px; |
| text-shadow: |
| 0 0 12px rgba(255,225,122,.9), |
| 0 0 40px rgba(255,225,122,.6), |
| 0 6px 0 #000; |
| animation: flash 1.2s steps(2, jump-none) 2, wobble .9s ease-in-out 2; |
| } |
| @keyframes flash{ 0%,49%{opacity:1;filter:drop-shadow(0 0 24px rgba(255,225,122,.85));} 50%,100%{opacity:0;filter:none;} } |
| @keyframes wobble{ 0%{transform:scale(1) rotate(0)} 50%{transform:scale(1.06) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} } |
| @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));} } |
| .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; } |
| @keyframes ring{ 0%{opacity:1;transform:scale(1)} 50%{opacity:.1;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} } |
| .daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 } |
| #review{ |
| width:min(1000px, 92vw); |
| margin:14px 0 24px 0; |
| padding:12px; |
| background:#fff; |
| border:1px solid #ccd3e0; |
| border-radius:12px; |
| box-shadow:0 6px 20px rgba(0,0,0,.08); |
| } |
| #review h3{ margin:0 0 8px 0; color:#0d2b6f } |
| .missed{ margin:8px 0; text-align:left } |
| .missed .q{ font-weight:700 } |
| .missed .a{ margin-left:8px } |
| </style> |
| </head> |
| <body> |
| <h1>Six Prompts Jeopardy</h1> |
| <a class="source" href="https://www.linkedin.com/pulse/six-core-prompting-approaches-harnessing-large-language-lively-8xbee/" target="_blank" rel="noopener noreferrer"> |
| Source: Six Core Prompting Approaches for Harnessing Large Language Models (LinkedIn) |
| </a> |
|
|
| <div class="topbar"> |
| <div id="score">Score: 0</div> |
| <button class="btn-reset" id="reset-btn" title="Start a fresh round">Reset Game</button> |
| </div> |
|
|
| <div class="stage"> |
| <div id="game-board"> |
| <div class="category">Direct Prompting</div> |
| <div class="category">Chain-of-Thought</div> |
| <div class="category">Contextual Prompting</div> |
| <div class="category">Comparative Prompting</div> |
| <div class="category">Iterative & Steps</div> |
| |
| </div> |
| </div> |
|
|
| <div id="question-display"></div> |
| <div id="review" style="display:none;"></div> |
|
|
| <audio id="dd-audio" preload="auto"> |
| <source src="daily-double.mp3" type="audio/mpeg"> |
| </audio> |
| <div id="dd-overlay" class="dd-overlay"><div class="dd-text">DAILY DOUBLE!</div></div> |
|
|
| <script> |
| const categories = [ |
| "Direct Prompting", |
| "Chain-of-Thought", |
| "Contextual Prompting", |
| "Comparative Prompting", |
| "Iterative & Step-by-Step" |
| ]; |
| |
| |
| const questions = [ |
| |
| [ |
| { |
| q: "When is direct prompting the best choice?", |
| a: [ |
| "When the task is narrow, clearly defined, and you already know the output format.", |
| "When you need the model to explore a messy, open-ended problem.", |
| "When you want the model to simulate multi-step reasoning in detail." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "What is a key limitation of direct prompting?", |
| a: [ |
| "It is very sensitive to ambiguity, so vague prompts lead to vague answers.", |
| "It cannot be used for rewriting or summarizing short texts.", |
| "It always requires you to supply pages of detailed context." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "Which of these is the best example of a direct prompt?", |
| a: [ |
| "\"Rewrite this email so it sounds more professional and concise, but keep the meaning.\"", |
| "\"Think through several policy options, list pros and cons, and then show your reasoning.\"", |
| "\"Draft something and then ask me questions to refine it over several rounds.\"" |
| ], |
| correct: 0 |
| } |
| ], |
| |
| [ |
| { |
| q: "What does chain-of-thought prompting explicitly ask the model to do?", |
| a: [ |
| "Show its reasoning step-by-step before giving the final answer.", |
| "Return only a short bullet list with no explanation.", |
| "Ignore constraints and optimize only for creativity." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "When is chain-of-thought prompting especially useful?", |
| a: [ |
| "When a task has multiple steps, trade-offs, or constraints and you care about the reasoning.", |
| "When you just need a quick title or short paraphrase.", |
| "When you want to hide the model's reasoning from learners." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "Which prompt best illustrates chain-of-thought prompting?", |
| a: [ |
| "\"You are a project manager. Think through the risks of compressing a six-month project into four months step-by-step, then give a recommendation.\"", |
| "\"Summarize this article in three bullet points.\"", |
| "\"Generate ten random creative writing prompts.\"" |
| ], |
| correct: 0 |
| } |
| ], |
| |
| [ |
| { |
| q: "What is the main idea of contextual prompting?", |
| a: [ |
| "Embedding the instruction in a specific role, audience, domain, and constraint.", |
| "Asking the model to always respond in as few words as possible.", |
| "Removing all background information to avoid bias." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "Which situation is a strong fit for contextual prompting?", |
| a: [ |
| "Writing a memo from a hospital CIO explaining why the organization is piloting generative AI tools.", |
| "Generating a list of random fun facts about animals.", |
| "Solving a simple arithmetic problem like 2 + 2." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "What is a potential risk of contextual prompting?", |
| a: [ |
| "Pasting in full internal documents and accidentally sharing sensitive information.", |
| "Making the model completely unable to follow any instructions.", |
| "Forcing the model to ignore the specified audience." |
| ], |
| correct: 0 |
| } |
| ], |
| |
| [ |
| { |
| q: "What does comparative prompting ask the model to do?", |
| a: [ |
| "Evaluate or contrast options against each other using clear criteria.", |
| "Generate a single best answer with no alternatives.", |
| "Refuse to discuss trade-offs or risks." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "Which of these is an example of comparative prompting?", |
| a: [ |
| "\"Compare centralizing all analytics work in one data team versus embedding analysts in departments, listing pros and cons for each.\"", |
| "\"Write a story about a data team that learns to use AI tools.\"", |
| "\"Explain what an analytics team does to a new intern.\"" |
| ], |
| correct: 0 |
| }, |
| { |
| q: "What is a limitation of comparative prompting mentioned in the article?", |
| a: [ |
| "If you ask for precise numbers without data, the model may simply make them up.", |
| "It cannot ever use tables or scorecards in its answers.", |
| "It only works for decisions about software tools, not strategies." |
| ], |
| correct: 0 |
| } |
| ], |
| |
| [ |
| { |
| q: "What characterizes iterative prompting?", |
| a: [ |
| "Treating the interaction as a multi-round conversation where you refine the output over several passes.", |
| "Asking the model to answer once and never revisiting the result.", |
| "Limiting every answer to a single sentence regardless of task." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "What is a major strength of iterative prompting?", |
| a: [ |
| "You can improve structure, tone, and detail across rounds without needing a perfect first prompt.", |
| "It guarantees the first draft will be perfect with no revision.", |
| "It completely eliminates the need for human feedback." |
| ], |
| correct: 0 |
| }, |
| { |
| q: "What is step-by-step prompting designed to produce?", |
| a: [ |
| "Clear, ordered procedures such as checklists, workflows, or how-to guides.", |
| "Only abstract philosophical reflections with no concrete actions.", |
| "One-word answers that are easy to read on a phone." |
| ], |
| correct: 0 |
| } |
| ] |
| ]; |
| |
| let score = 0, answered = 0; |
| const total = 15; |
| const board = document.getElementById("game-board"), |
| qdisp = document.getElementById("question-display"), |
| sdisp = document.getElementById("score"), |
| review = document.getElementById("review"); |
| const ddOverlay = document.getElementById("dd-overlay"); |
| const ddAudio = document.getElementById("dd-audio"); |
| const shuffleRegistry = new Map(); |
| const missedQuestions = []; |
| |
| const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) }; |
| document.getElementById('reset-btn').addEventListener('click', () => location.reload()); |
| |
| function createBoard() { |
| |
| for (let row = 0; row < 3; row++) { |
| for (let col = 0; col < 5; col++) { |
| const card = document.createElement("div"); |
| card.className = "card tilt"; |
| card.textContent = `$${(row + 1) * 100}`; |
| card.dataset.col = col; |
| card.dataset.row = row; |
| card.addEventListener("mousemove", (e) => { |
| const r = card.getBoundingClientRect(); |
| const x = (e.clientX - r.left) / r.width; |
| const y = (e.clientY - r.top) / r.height; |
| card.style.setProperty("--ry", `${(x - 0.5) * 10}deg`); |
| card.style.setProperty("--rx", `${(0.5 - y) * 10}deg`); |
| }); |
| card.addEventListener("mouseleave", () => { |
| card.style.removeProperty("--ry"); |
| card.style.removeProperty("--rx"); |
| }); |
| card.onclick = () => handleCardClick(card); |
| board.appendChild(card); |
| } |
| } |
| |
| document.querySelector('.stage').style.visibility = 'visible'; |
| } |
| |
| function handleCardClick(card){ |
| if (card.classList.contains("disabled")) return; |
| const col = +card.dataset.col; |
| const row = +card.dataset.row; |
| const isDD = (col === dailyDouble.col && row === dailyDouble.row); |
| if (isDD){ |
| triggerDailyDouble(card, () => showQuestion(col, row, card, true)); |
| } else { |
| showQuestion(col, row, card, false); |
| } |
| } |
| |
| function triggerDailyDouble(card, onDone){ |
| const ring = document.createElement("div"); |
| ring.className = "flash-ring"; |
| card.appendChild(ring); |
| if (ddAudio) { |
| try { ddAudio.currentTime = 0; ddAudio.play().catch(()=>{}); } catch(e){} |
| } |
| ddOverlay.classList.add('active'); |
| ddOverlay.style.display = "flex"; |
| setTimeout(() => { |
| ddOverlay.style.display = "none"; |
| ddOverlay.classList.remove('active'); |
| ring.remove(); |
| onDone(); |
| }, 2400); |
| } |
| |
| function showQuestion(categoryIndex, difficulty, card, isDailyDouble){ |
| const q = questions[categoryIndex][difficulty]; |
| const options = q.a.map((text, origIdx) => ({ text, origIdx })); |
| |
| for (let i = options.length - 1; i > 0; i--) { |
| const j = Math.floor(Math.random() * (i + 1)); |
| [options[i], options[j]] = [options[j], options[i]]; |
| } |
| const shuffledCorrectIndex = options.findIndex(o => o.origIdx === q.correct); |
| const key = `${categoryIndex}-${difficulty}`; |
| shuffleRegistry.set(key, { shuffledCorrectIndex, isDailyDouble }); |
| const dailyDoubleBanner = isDailyDouble ? `<div class="daily-double-banner">🎉 DAILY DOUBLE! 🎉</div>` : ""; |
| qdisp.innerHTML = ` |
| ${dailyDoubleBanner} |
| <h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}${isDailyDouble ? " (x2)" : ""}</h2> |
| <p>${q.q}</p> |
| <div class="answer-container"> |
| ${options.map((opt, i) => |
| `<button class="answer-btn" data-ans="${i}" data-key="${key}">${opt.text}</button>` |
| ).join("")} |
| </div> |
| `; |
| card.classList.add("disabled"); |
| document.querySelectorAll('.answer-btn').forEach(btn => { |
| btn.addEventListener('click', () => { |
| if (btn.classList.contains('disabled')) return; |
| const chosenIndex = parseInt(btn.getAttribute('data-ans'), 10); |
| const k = btn.getAttribute('data-key'); |
| checkAnswer(categoryIndex, difficulty, chosenIndex, k); |
| }, { once: true }); |
| }); |
| } |
| |
| function checkAnswer(cat, diff, chosenShuffledIndex, key){ |
| const q = questions[cat][diff]; |
| const reg = shuffleRegistry.get(key); |
| const isCorrect = (chosenShuffledIndex === reg.shuffledCorrectIndex); |
| let val = (diff + 1) * 100; |
| if (reg.isDailyDouble) val *= 2; |
| document.querySelectorAll(".answer-btn").forEach(b => { |
| b.disabled = true; b.classList.add("disabled"); |
| }); |
| if (isCorrect) { |
| score += val; |
| qdisp.innerHTML += `<p class="feedback" style="color:green;">✅ Correct! +$${val.toLocaleString()}</p>`; |
| } else { |
| score -= val; |
| const correctText = q.a[q.correct]; |
| const chosenBtn = document.querySelector(`.answer-btn[data-ans="${chosenShuffledIndex}"][data-key="${key}"]`); |
| const chosenPretty = chosenBtn ? chosenBtn.textContent : "(your choice)"; |
| qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val.toLocaleString()}<br/>Correct answer: <em>${correctText}</em></p>`; |
| missedQuestions.push({ |
| category: categories[cat], |
| value: `$${(diff+1)*100}${reg.isDailyDouble ? " (x2)" : ""}`, |
| question: q.q, |
| yourAnswer: chosenPretty, |
| correctAnswer: correctText |
| }); |
| } |
| sdisp.textContent = `Score: ${score}`; |
| if (++answered === total) endGame(); |
| } |
| |
| function endGame(){ |
| qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score.toLocaleString()}</p>`; |
| if (missedQuestions.length){ |
| const items = missedQuestions.map(m => |
| `<div class="missed"> |
| <div class="q">(${m.category} • ${m.value}) ${m.question}</div> |
| <div class="a">Your answer: <em>${m.yourAnswer}</em></div> |
| <div class="a">Correct: <strong>${m.correctAnswer}</strong></div> |
| </div>` |
| ).join(""); |
| review.style.display = "block"; |
| review.innerHTML = `<h3>Review: Questions to Revisit (${missedQuestions.length})</h3>${items}`; |
| } else { |
| review.style.display = "block"; |
| review.innerHTML = `<h3>Perfect Round!</h3><p>You answered all questions correctly 🎉</p>`; |
| } |
| } |
| |
| |
| createBoard(); |
| </script> |
| </body> |
| </html> |
|
|
