Spaces:

eaglelandsonce
/

Five_Algorithms_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on 15 days ago

Commit

b63a6c5

verified ·

1 Parent(s): 1ec6f4e

Update index.html

Browse files

Files changed (1) hide show

index.html +61 -253

index.html CHANGED Viewed

@@ -1,41 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Five Algorithm Jeopardy</title>
-  <!-- same CSS as before -->
 </head>
-<body>
-  <h1>Five Algorithm Jeopardy</h1>
-  <a class="source" href="https://www.linkedin.com/pulse/foundational-machine-learning-algorithms-modern-data-science-lively-t4xje/" target="_blank">
-    Source: Foundational Machine Learning Algorithms for Modern Data Science (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">Logistic Regression</div>
-      <div class="category">Decision Tree</div>
-      <div class="category">Random Forest</div>
-      <div class="category">Support Vector Machine</div>
-      <div class="category">KNN</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&nbsp;DOUBLE!</div></div>
   <script>
     const categories = [
       "Logistic Regression",
       "Decision Tree",
@@ -43,239 +27,63 @@
       "Support Vector Machine",
       "KNN"
     ];
-    // 15 questions, correct indices evenly distributed (5x0, 5x1, 5x2)
-    const questions = [
-      // Logistic Regression
-      [
-        { q: "What does Logistic Regression output for each prediction?", a: [
-            "A probability between 0 and 1 using the sigmoid function",
-            "A cluster of nearest neighbors",
-            "A collection of random trees averaged together"
-          ], correct: 0 },
-        { q: "Which is a limitation of Logistic Regression?", a: [
-            "It automatically models non-linear decision boundaries",
-            "It struggles when data is not linearly separable without feature engineering",
-            "It cannot run on large datasets"
-          ], correct: 1 },
-        { q: "In healthcare, Logistic Regression is often used to:", a: [
-            "Rank feature importance in tree ensembles",
-            "Estimate probabilities of disease presence or risk",
-            "Define separating hyperplanes in high dimensions"
-          ], correct: 2 }
       ],
-      // Decision Tree
-      [
-        { q: "What measure is commonly used to decide splits in Decision Trees?", a: [
-            "Gradient descent step size",
-            "Gini impurity or entropy",
-            "Euclidean distance"
-          ], correct: 1 },
-        { q: "Which is a strength of Decision Trees?", a: [
-            "They are transparent and easy to explain to non-technical stakeholders",
-            "They are always the most accurate model for high-dimensional data",
-            "They require no stopping criteria and cannot overfit"
-          ], correct: 0 },
-        { q: "Why might Decision Trees be unstable?", a: [
-            "Because they average many weak learners",
-            "Because small changes in input data can change the entire tree structure",
-            "Because they always assume linear log-odds"
-          ], correct: 2 }
       ],
-      // Random Forest
-      [
-        { q: "How does a Random Forest reduce overfitting compared to a single Decision Tree?", a: [
-            "By using sigmoid functions",
-            "By averaging results across many randomly built trees",
-            "By calculating Euclidean distances to neighbors"
-          ], correct: 1 },
-        { q: "Which real-world task is well suited to Random Forests?", a: [
-            "Fraud detection with structured transaction data",
-            "Image recognition with deep convolutional networks",
-            "Building separating hyperplanes in very high-dimensional text data"
-          ], correct: 0 },
-        { q: "What is a limitation of Random Forests?", a: [
-            "They are always linear models",
-            "They are slower to train and interpret compared to a single tree",
-            "They cannot handle missing values"
-          ], correct: 2 }
       ],
-      // Support Vector Machine
-      [
-        { q: "What is the key principle behind SVM classification?", a: [
-            "Maximizing the margin between classes using support vectors",
-            "Averaging predictions from multiple trees",
-            "Voting from k-nearest neighbors"
-          ], correct: 0 },
-        { q: "Which hyperparameter defines how far the influence of a single training example reaches in an SVM?", a: [
-            "max_depth",
-            "gamma",
-            "n_neighbors"
-          ], correct: 1 },
-        { q: "In which field is SVM often applied due to high-dimensional data?", a: [
-            "Computer vision image classification with CNNs",
-            "Text classification such as spam filtering",
-            "Simple binary logistic models"
-          ], correct: 2 }
       ],
-      // KNN
-      [
-        { q: "How does KNN classify a new data point?", a: [
-            "By calculating the weighted sum of features and applying sigmoid",
-            "By looking at the majority class among its k nearest neighbors",
-            "By building an ensemble of trees to vote"
-          ], correct: 1 },
-        { q: "What is a major limitation of KNN?", a: [
-            "Prediction is slow on large datasets since distances must be calculated for all points",
-            "It always assumes linear decision boundaries",
-            "It cannot handle more than two features"
-          ], correct: 0 },
-        { q: "Which type of task is naturally suited to KNN?", a: [
-            "Credit scoring in finance",
-            "Handwriting recognition or recommender systems",
-            "Genome sequence modeling"
-          ], correct: 2 }
       ]
-    ];
-    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);
-        }
-      }
-    }
-    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 }));
-      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>

 <!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",
       "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>