Spaces:

eaglelandsonce
/

Five_Algorithms_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on 16 days ago

Commit

1ec6f4e

verified ·

1 Parent(s): e08e052

Update index.html

Browse files

Files changed (1) hide show

index.html +280 -18

index.html CHANGED Viewed

@@ -1,19 +1,281 @@
-<!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>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",
+      "Random Forest",
+      "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>