Spaces:

eaglelandsonce
/

Algorithm_Fact_or_Fiction_Game

Running

App Files Files Community

eaglelandsonce commited on Aug 17

Commit

aef29cd

verified ·

1 Parent(s): 24e146a

Update index.html

Browse files

Files changed (1) hide show

index.html +220 -18

index.html CHANGED Viewed

@@ -1,19 +1,221 @@
-<!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" />
+  <title>Algorithm Fact or Fiction</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg1:#c9e8ff; --bg2:#fde2ff; --ink:#222; --ink-sub:#555;
+      --brand:#2563eb; --brand-2:#22c55e; --good:#16a34a; --bad:#dc2626;
+      --card:#ffffffcc;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%),
+                  radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%),
+                  #f6f7fb;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 2rem 1rem;
+      color: var(--ink);
+    }
+    h1 { text-align: center; margin-bottom: .25rem; font-weight: 600; font-size: 2.2rem; }
+    #subtitle { text-align:center; margin-bottom:1rem; color: var(--ink-sub); }
+    #source-link { text-align: center; margin-bottom: 1.25rem; font-size: .95rem; }
+    #source-link a { color: var(--ink); text-decoration: underline; }
+    #game-container {
+      background: var(--card);
+      width: 100%; max-width: 820px;
+      padding: 2rem; border-radius: 16px;
+      box-shadow: 0 10px 24px rgba(0,0,0,.15);
+      display: flex; flex-direction: column; align-items: center;
+    }
+    .progress-container {
+      width: 100%; background:#ececec; border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
+    }
+    .progress-bar { height: 14px; width:0%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; }
+    #statement {
+      font-size: 1.25rem; line-height: 1.5; text-align: center; color: #333;
+      min-height: 84px; margin: .75rem 0 1rem;
+    }
+    .btn-group { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: .25rem 0 1rem; }
+    button {
+      padding: .75rem 1.25rem; border: none; border-radius: 999px; cursor: pointer;
+      background: var(--brand); color: #fff; font-weight: 600; letter-spacing:.2px;
+      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
+    }
+    button.secondary { background:#111827; }
+    button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
+    #result {
+      margin-top: .5rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-align: center; display:none;
+    }
+    #result.correct { display:block; background:#dcfce7; color:#14532d; }
+    #result.incorrect { display:block; background:#fee2e2; color:#7f1d1d; }
+    #explanation {
+      margin-top: .75rem; padding: 1rem; background:#f9fafb; color:#374151; border-radius:12px; display:none;
+    }
+    #score { margin-top: .75rem; font-weight: 700; }
+    #controls { display:flex; gap:.5rem; margin-top:.5rem; }
+    #controls button { background:#0f766e; }
+    #restart-btn { background:#6b21a8; }
+  </style>
+</head>
+<body>
+  <h1>Algorithm Fact or Fiction</h1>
+  <div id="subtitle">Test your knowledge of machine learning algorithms</div>
+  <div id="source-link">
+    Source: <a href="https://www.linkedin.com/pulse/practical-guide-five-core-machine-learning-algorithms-michael-lively-ntlfe/" target="_blank" rel="noopener">
+      Practical Guide to Five Core Machine Learning Algorithms (LinkedIn)
+    </a>
+  </div>
+  <div id="game-container">
+    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
+    <div id="statement">Loading statement...</div>
+    <div class="btn-group">
+      <button onclick="guess(true)">Fact</button>
+      <button class="secondary" onclick="guess(false)">Fiction</button>
+    </div>
+    <div id="result"></div>
+    <div id="explanation"></div>
+    <div id="controls">
+      <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>
+      <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
+    </div>
+    <div id="score"></div>
+  </div>
+  <script>
+    // Conceptual ML questions from the LinkedIn article
+    const statements = [
+      {
+        text: "Decision Trees are always resistant to overfitting without pruning.",
+        isFact: false,
+        explanation: "Fiction. Decision Trees can overfit easily unless pruning or depth limits are applied."
+      },
+      {
+        text: "K-Nearest Neighbors requires no training phase because it stores the dataset and compares during prediction.",
+        isFact: true,
+        explanation: "Fact. KNN is a 'lazy learner' and makes predictions by comparing to stored neighbors."
+      },
+      {
+        text: "Random Forest reduces overfitting by averaging the predictions of multiple Decision Trees.",
+        isFact: true,
+        explanation: "Fact. Random Forest ensembles many trees to stabilize results and generalize better."
+      },
+      {
+        text: "Support Vector Machines always perform best with large datasets, regardless of tuning.",
+        isFact: false,
+        explanation: "Fiction. SVMs can be computationally expensive with large datasets and require careful tuning."
+      },
+      {
+        text: "Logistic Regression can only be used for binary classification tasks.",
+        isFact: false,
+        explanation: "Fiction. While logistic regression is commonly binary, it can be extended to multiclass via one-vs-rest or softmax."
+      },
+      {
+        text: "The 'max_depth' hyperparameter in Decision Trees controls how complex the model can become.",
+        isFact: true,
+        explanation: "Fact. Restricting max_depth prevents trees from growing too complex and overfitting."
+      },
+      {
+        text: "KNN is highly sensitive to irrelevant or unscaled features.",
+        isFact: true,
+        explanation: "Fact. Because KNN depends on distances, scaling and feature selection are crucial."
+      },
+      {
+        text: "Random Forest models are always faster to train than a single Decision Tree.",
+        isFact: false,
+        explanation: "Fiction. Training many trees is slower than training a single tree, though performance may be better."
+      },
+      {
+        text: "The 'kernel' parameter in SVM determines how data is mapped into higher-dimensional space.",
+        isFact: true,
+        explanation: "Fact. Choosing the right kernel (linear, RBF, polynomial) is key to SVM performance."
+      },
+      {
+        text: "Logistic Regression uses a sigmoid function to map predictions to probabilities.",
+        isFact: true,
+        explanation: "Fact. The sigmoid maps real values into [0,1], giving interpretable probabilities."
+      }
+    ];
+    // Game logic
+    let currentIndex = 0, score = 0, answered = false;
+    function shuffle(arr) {
+      for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+    }
+    function startGame() {
+      shuffle(statements);
+      currentIndex = 0; score = 0; answered = false;
+      document.getElementById('restart-btn').style.display = 'none';
+      loadStatement(); updateScore();
+    }
+    function loadStatement() {
+      if (currentIndex >= statements.length) return endGame();
+      const s = statements[currentIndex];
+      document.getElementById('statement').textContent = s.text;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      answered = false; updateProgress();
+    }
+    function guess(isFactGuess) {
+      if (answered) return;
+      answered = true;
+      const correct = statements[currentIndex].isFact;
+      const resultEl = document.getElementById('result');
+      if (isFactGuess === correct) {
+        resultEl.textContent = 'Correct!';
+        resultEl.className = 'correct';
+        score++;
+      } else {
+        resultEl.textContent = 'Incorrect!';
+        resultEl.className = 'incorrect';
+      }
+      resultEl.style.display = 'block';
+      const expEl = document.getElementById('explanation');
+      expEl.textContent = statements[currentIndex].explanation + " (See source link above.)";
+      expEl.style.display = 'block';
+      document.getElementById('next-btn').style.display = 'inline-block';
+      updateScore();
+    }
+    function nextStatement() {
+      currentIndex++;
+      if (currentIndex < statements.length) loadStatement();
+      else endGame();
+    }
+    function updateScore() {
+      document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`;
+    }
+    function updateProgress() {
+      document.getElementById('progress-bar').style.width = `${(currentIndex / statements.length) * 100}%`;
+    }
+    function endGame() {
+      const pct = Math.round((score / statements.length) * 100);
+      document.getElementById('statement').textContent =
+        `Game Over! You scored ${score} of ${statements.length} (${pct}%).`;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      document.getElementById('restart-btn').style.display = 'inline-block';
+      document.getElementById('progress-bar').style.width = '100%';
+    }
+    startGame();
+  </script>
+</body>
 </html>