File size: 9,624 Bytes
aef29cd 24e146a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 | <!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>
|