| <!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> |
| |
| 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." |
| } |
| ]; |
| |
| |
| 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> |
|
|
