Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>MCP 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 } | |
| /* 3D Stage */ | |
| .stage{ | |
| perspective: 1200px; | |
| width:min(1100px, 95vw); | |
| } | |
| #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); | |
| } | |
| .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); | |
| } | |
| /* 3D hover tilt + press */ | |
| .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; /* Increased font size for the questions */ | |
| line-height: 1.4; | |
| } | |
| #score{ font-size:24px; font-weight:800; color:#0d2b6f; margin-bottom:24px } | |
| .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 } | |
| /* DAILY DOUBLE overlay + flashing */ | |
| .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)); | |
| 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(0deg) } | |
| 50%{ transform: scale(1.06) rotate(-2deg) } | |
| 100%{ transform: scale(1) rotate(0deg) } | |
| } | |
| @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)); } | |
| } | |
| /* Card flash ring */ | |
| .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(0.96) } | |
| 100%{ opacity:1; transform: scale(1) } | |
| } | |
| .daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>MCP Jeopardy</h1> | |
| <a class="source" href="https://www.linkedin.com/pulse/understanding-model-context-protocol-mcp-server-its-role-lively-cjzaf/" target="_blank"> | |
| Source: Understanding the Model Context Protocol (MCP) Server & Its Role | |
| </a> | |
| <div class="stage"> | |
| <div id="game-board"> | |
| <div class="category">MCP Basics</div> | |
| <div class="category">Dynamic Tool Discovery</div> | |
| <div class="category">MCP Server & Client</div> | |
| <div class="category">Azure AI Integration</div> | |
| <div class="category">Use Cases & Benefits</div> | |
| <!-- cards will be injected --> | |
| </div> | |
| </div> | |
| <div id="question-display"></div> | |
| <div id="score">Score: 0</div> | |
| <!-- Daily Double audio: place daily-double.mp3 next to this file or swap the src --> | |
| <audio id="dd-audio" preload="auto"> | |
| <source src="daily-double.mp3" type="audio/mpeg"> | |
| </audio> | |
| <!-- Flashing overlay --> | |
| <div id="dd-overlay" class="dd-overlay"><div class="dd-text">DAILY DOUBLE!</div></div> | |
| <script> | |
| const categories = ["MCP Basics", "Dynamic Tool Discovery", "MCP Server & Client", "Azure AI Integration", "Use Cases & Benefits"]; | |
| // 15 questions total; correct indices are evenly distributed: five 0s, five 1s, five 2s | |
| const questions = [ | |
| // MCP Basics (correct indices: 0,1,2) | |
| [ | |
| { q: "An MCP server primarily acts as a:", a: ["Centralized tool registry", "Model-training service", "CI/CD runner"], correct: 0 }, | |
| { q: "The MCP client is best described as a:", a: ["Tool compiler", "Bridge between agent and server", "Vector database"], correct: 1 }, | |
| { q: "Which decorator exposes functions as tools for discovery?", a: ["@http.route", "@fastapi.tool", "@mcp.tool"], correct: 2 } | |
| ], | |
| // Dynamic Tool Discovery (correct indices: 0,1,2) | |
| [ | |
| { q: "Dynamic tool discovery lets agents:", a: ["Find and use tools at runtime", "Require redeploys for new tools", "Disable external tools"], correct: 0 }, | |
| { q: "A key benefit of dynamic discovery is:", a: ["Manual configuration", "Maintainability via central updates", "Vendor lock-in"], correct: 1 }, | |
| { q: "Dynamic discovery reduces the need to:", a: ["Secure APIs", "Write unit tests", "Hardcode every tool in the agent"], correct: 2 } | |
| ], | |
| // MCP Server & Client (correct indices: 0,1,2) | |
| [ | |
| { q: "Which method lists tools exposed by the MCP server?", a: ["session.list_tools()", "client.describe()", "mcp.fetch_all()"], correct: 0 }, | |
| { q: "What does the MCP client register with the agent?", a: ["Bash scripts", "Function wrappers for tools", "YAML manifests"], correct: 1 }, | |
| { q: "To invoke a tool directly through the client, you use:", a: ["agent.use_tool()", "client.invoke()", "session.call_tool(name, args)"], correct: 2 } | |
| ], | |
| // Azure AI Integration (correct indices: 0,1,2) | |
| [ | |
| { q: "Which object connects an Azure AI agent to remote MCP servers?", a: ["McpTool", "AzureConnector", "ServerProxy"], correct: 0 }, | |
| { q: "Which approval mode requires manual review of each tool call?", a: ["never", "always", "auto"], correct: 1 }, | |
| { q: "Custom headers for MCP tools typically carry:", a: ["CSS styles", "Image sprites", "Authentication tokens"], correct: 2 } | |
| ], | |
| // Use Cases & Benefits (correct indices: 0,1,2) | |
| [ | |
| { q: "In the retailer example, which task is out of scope for the agent?", a: ["Compiling source code", "Checking stock levels", "Recommending restocks"], correct: 0 }, | |
| { q: "Centralized management in MCP means:", a: ["Tools are static forever", "Tool updates happen on the server", "Agents ignore servers"], correct: 1 }, | |
| { q: "A top payoff of MCP integration is:", a: ["Code obfuscation", "Harder maintenance", "Future-proofing and flexibility"], correct: 2 } | |
| ] | |
| ]; | |
| let score = 0, answered = 0, total = 15; | |
| const board = document.getElementById("game-board"), | |
| qdisp = document.getElementById("question-display"), | |
| sdisp = document.getElementById("score"); | |
| const ddOverlay = document.getElementById("dd-overlay"); | |
| const ddAudio = document.getElementById("dd-audio"); | |
| // Random Daily Double location | |
| const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) }; | |
| function createBoard() { | |
| // inject 3 rows x 5 cols of cards after the 5 category headers | |
| 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}`; | |
| // store coordinates on the node | |
| card.dataset.col = col; | |
| card.dataset.row = row; | |
| // 3D hover tilt via mouse position | |
| card.addEventListener("mousemove", (e) => { | |
| const r = card.getBoundingClientRect(); | |
| const x = (e.clientX - r.left) / r.width; // 0..1 | |
| const y = (e.clientY - r.top) / r.height; // 0..1 | |
| const ry = (x - 0.5) * 10; // deg | |
| const rx = (0.5 - y) * 10; // deg | |
| card.style.setProperty("--ry", `${ry}deg`); | |
| card.style.setProperty("--rx", `${rx}deg`); | |
| }); | |
| card.addEventListener("mouseleave", () => { | |
| card.style.removeProperty("--ry"); | |
| card.style.removeProperty("--rx"); | |
| }); | |
| card.onclick = () => handleCardClick(card); | |
| board.appendChild(card); | |
| } | |
| } | |
| } | |
| 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); | |
| ddAudio.currentTime = 0; | |
| ddAudio.play().catch(()=>{}); | |
| ddOverlay.style.display = "flex"; | |
| setTimeout(() => { | |
| ddOverlay.style.display = "none"; | |
| ring.remove(); | |
| onDone(); | |
| }, 2400); | |
| } | |
| function showQuestion(categoryIndex, difficulty, card, isDailyDouble){ | |
| const q = questions[categoryIndex][difficulty]; | |
| // shuffle answers | |
| let answerOptions = q.a.map((ans, idx) => ({ text: ans, isCorrect: idx === q.correct })); | |
| for (let i = answerOptions.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [answerOptions[i], answerOptions[j]] = [answerOptions[j], answerOptions[i]]; | |
| } | |
| 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"> | |
| ${answerOptions.map(opt => | |
| `<button class="answer-btn" onclick="checkAnswer(${categoryIndex},${difficulty},${opt.isCorrect}, ${isDailyDouble})">${opt.text}</button>` | |
| ).join("")} | |
| </div> | |
| `; | |
| card.classList.add("disabled"); | |
| answered++; | |
| } | |
| window.checkAnswer = (cat, diff, isCorrect, isDouble) => { | |
| const q = questions[cat][diff]; | |
| let val = (diff + 1) * 100; | |
| if (isDouble) val *= 2; | |
| const correctText = q.a[q.correct]; | |
| 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}</p>`; | |
| } else { | |
| score -= val; | |
| qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val}. Correct: ${correctText}</p>`; | |
| } | |
| sdisp.textContent = `Score: ${score}`; | |
| if (answered === 15) { | |
| qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score}</p>`; | |
| } | |
| }; | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> | |