Spaces:

eaglelandsonce
/

MCP_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on Aug 12

Commit

52761d7

verified ·

1 Parent(s): 3d4c83a

Update index.html

Browse files

Files changed (1) hide show

index.html +325 -18

index.html CHANGED Viewed

@@ -1,19 +1,326 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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{ margin:8px 0 }
+    #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&nbsp;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>