Spaces:

eaglelandsonce
/

Five_Algorithms_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on 9 days ago

Commit

1ed8b7f

verified ·

1 Parent(s): b63a6c5

Update index.html

Browse files

Files changed (1) hide show

index.html +363 -66

index.html CHANGED Viewed

@@ -1,89 +1,386 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <title>Jeopardy Game - Five Algorithms</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-6">
-  <div class="w-full max-w-5xl bg-white rounded-2xl shadow-xl p-6">
-    <h1 class="text-4xl font-extrabold text-center text-indigo-700 mb-6">
-      Jeopardy: Five Algorithms
-    </h1>
-    <!-- Game Board -->
-    <div id="board" class="grid grid-cols-5 gap-2 text-center">
-      <!-- Categories will go here -->
     </div>
   </div>
   <script>
-    // Categories = Five Algorithms
     const categories = [
       "Logistic Regression",
       "Decision Tree",
       "Random Forest",
-      "Support Vector Machine",
-      "KNN"
     ];
-    // 3 questions per category = 15 total
-    const questions = {
-      "Logistic Regression": [
-        { points: 100, q: "Which algorithm estimates probabilities using a sigmoid function?", a: "Logistic Regression" },
-        { points: 200, q: "This algorithm is often used for binary classification, like predicting churn (Yes/No).", a: "Logistic Regression" },
-        { points: 300, q: "Which hyperparameter controls regularization strength in Logistic Regression?", a: "C" }
       ],
-      "Decision Tree": [
-        { points: 100, q: "Which algorithm splits data based on feature thresholds in a flowchart-like structure?", a: "Decision Tree" },
-        { points: 200, q: "This algorithm is easy to visualize and interpret but prone to overfitting.", a: "Decision Tree" },
-        { points: 300, q: "Which splitting criteria are commonly used in Decision Trees?", a: "Gini Impurity and Entropy" }
       ],
-      "Random Forest": [
-        { points: 100, q: "Which ensemble algorithm builds many trees and averages their predictions?", a: "Random Forest" },
-        { points: 200, q: "This algorithm reduces overfitting by using bagging across multiple trees.", a: "Random Forest" },
-        { points: 300, q: "Which hyperparameter controls the number of trees in a Random Forest?", a: "n_estimators" }
       ],
-      "Support Vector Machine": [
-        { points: 100, q: "Which algorithm finds the optimal hyperplane that separates classes?", a: "Support Vector Machine" },
-        { points: 200, q: "This algorithm is powerful with high-dimensional data and can use kernels.", a: "Support Vector Machine" },
-        { points: 300, q: "Which function transforms data into higher dimensions in SVM?", a: "Kernel Trick" }
       ],
-      "KNN": [
-        { points: 100, q: "Which algorithm classifies a point based on the labels of nearby points?", a: "K-Nearest Neighbors (KNN)" },
-        { points: 200, q: "This lazy learner algorithm has no training phase and relies on distance metrics.", a: "K-Nearest Neighbors (KNN)" },
-        { points: 300, q: "Which hyperparameter determines how many neighbors vote on classification?", a: "k" }
       ]
-    };
-    // Build board
-    const board = document.getElementById("board");
-    // First row = categories
-    categories.forEach(cat => {
-      const cell = document.createElement("div");
-      cell.className = "bg-indigo-600 text-white font-bold p-2 rounded";
-      cell.innerText = cat;
-      board.appendChild(cell);
-    });
-    // Question rows (3 per category)
-    for (let i = 0; i < 3; i++) {
-      categories.forEach(cat => {
-        const qData = questions[cat][i];
-        const cell = document.createElement("button");
-        cell.className = "bg-yellow-300 font-bold p-4 rounded hover:bg-yellow-400";
-        cell.innerText = `$${qData.points}`;
-        cell.onclick = () => {
-          alert(`${qData.q}\n\nAnswer: ${qData.a}`);
-          cell.disabled = true;
-          cell.className = "bg-gray-300 font-bold p-4 rounded";
-        };
-        board.appendChild(cell);
       });
     }
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Five Algorithms 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); }
+    #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));
+      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>Five Algorithms Jeopardy</h1>
+  <a class="source" href="#" target="_blank">
+    Source: Five Algorithms — Simplified Paper (Intelligent Applications)
+  </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">Logistic Regression</div>
+      <div class="category">Decision Tree</div>
+      <div class="category">Random Forest</div>
+      <div class="category">Support Vector Machines</div>
+      <div class="category">K-Nearest Neighbors</div>
+      <!-- cards injected -->
     </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&nbsp;DOUBLE!</div></div>
   <script>
     const categories = [
       "Logistic Regression",
       "Decision Tree",
       "Random Forest",
+      "Support Vector Machines",
+      "K-Nearest Neighbors"
     ];
+    // 15 questions, indices evenly distributed: five 0s, five 1s, five 2s
+    const questions = [
+      // Logistic Regression
+      [
+        { q: "Which function maps a linear score to a probability between 0 and 1 in binary classification?",
+          a: ["Sigmoid (logistic) function", "ReLU activation", "Softmax over all classes"], correct: 0 },
+        { q: "A classic use case for Logistic Regression is:",
+          a: ["Binary classification like churn (Yes/No)", "Clustering customers into segments", "Dimensionality reduction"], correct: 0 },
+        { q: "Which hyperparameter controls the strength of regularization in Logistic Regression (inverse strength)?",
+          a: ["C", "k", "n_estimators"], correct: 0 }
       ],
+      // Decision Tree
+      [
+        { q: "How does a Decision Tree choose splits at each node?",
+          a: ["By selecting features/thresholds that reduce impurity most", "By maximizing margin from a hyperplane", "By averaging predictions across many trees"], correct: 0 },
+        { q: "Decision Trees tend to overfit unless you:",
+          a: ["Prune or limit depth/leaf size", "Add dropout layers", "Ignore categorical features"], correct: 0 },
+        { q: "Common split criteria for classification trees are:",
+          a: ["Gini impurity and Entropy (Information Gain)", "MSE and MAE", "Cosine similarity and Jaccard"], correct: 0 }
       ],
+      // Random Forest
+      [
+        { q: "What main technique does Random Forest use to reduce variance?",
+          a: ["Bagging (bootstrap aggregating)", "Boosting with sequential learners", "Early stopping"], correct: 0 },
+        { q: "Which hyperparameter sets the number of trees in a Random Forest?",
+          a: ["n_estimators", "C", "gamma"], correct: 0 },
+        { q: "At each split, a Random Forest typically:",
+          a: ["Considers a random subset of features", "Uses all features every time", "Learns attention weights across tokens"], correct: 0 }
       ],
+      // Support Vector Machines
+      [
+        { q: "SVMs primarily aim to:",
+          a: ["Maximize the margin via an optimal separating hyperplane", "Minimize tree depth", "Maximize training accuracy regardless of margin"], correct: 0 },
+        { q: "What enables SVMs to model non-linear decision boundaries?",
+          a: ["The kernel trick", "Batch normalization", "Bagging"], correct: 0 },
+        { q: "In an RBF-kernel SVM, which hyperparameter controls how far the influence of a single training example reaches?",
+          a: ["gamma (γ)", "n_neighbors", "learning rate"], correct: 0 }
       ],
+      // K-Nearest Neighbors
+      [
+        { q: "KNN is best described as a:",
+          a: ["Lazy, instance-based learner", "Parametric, eager learner", "Generative probabilistic model"], correct: 0 },
+        { q: "If k is set too small in KNN, the model will most likely:",
+          a: ["Overfit to noise/outliers", "Underfit severely in all cases", "Generalize better automatically"], correct: 0 },
+        { q: "Which preprocessing step is especially important for KNN?",
+          a: ["Feature scaling/standardization", "Adding bias terms to features", "Label smoothing"], 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() {
+      // header row already has categories; now inject 15 value cards
+      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);
+        }
+      }
+    }
+    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];
+      const options = q.a.map((text, origIdx) => ({ text, origIdx }));
+      // shuffle options for display
+      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>