eaglelandsonce/Fact_or_Fiction_Machine_Learning
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <title>Fact or Fiction Machine Learning</title>6 <link rel="preconnect" href="https://fonts.gstatic.com" />7 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">8 <style>9 * { margin: 0; padding: 0; box-sizing: border-box; }10 body {11 font-family: 'Poppins', sans-serif;12 background: linear-gradient(120deg, #b4f2e1, #d9d2ff);13 min-height: 100vh;14 display: flex;15 flex-direction: column;16 align-items: center;17 justify-content: flex-start;18 padding: 2rem;19 }20 h1 {21 text-align: center;22 margin-bottom: 1.5rem;23 color: #222;24 font-weight: 600;25 font-size: 2.5rem;26 }27 #game-container {28 background: #ffffffcc;29 width: 100%;30 max-width: 760px;31 padding: 2rem;32 border-radius: 12px;33 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);34 display: flex;35 flex-direction: column;36 align-items: center;37 }38 #statement {39 font-size: 1.25rem;40 margin-bottom: 1rem;41 min-height: 70px;42 text-align: center;43 color: #444;44 }45 .btn-group { margin: 1rem 0; }46 button {47 margin: 0.5rem;48 padding: 0.75rem 1.5rem;49 font-size: 1rem;50 cursor: pointer;51 border: none;52 border-radius: 8px;53 background-color: #2d8f7b;54 color: #fff;55 transition: background-color 0.3s ease, transform 0.2s ease;56 }57 button:hover {58 background-color: #1f6a5a;59 transform: translateY(-2px);60 }61 #result {62 margin-top: 1rem;63 padding: 1rem;64 border-radius: 4px;65 font-weight: 600;66 text-align: center;67 width: 100%;68 display: none;69 }70 #result.correct {71 background-color: #d4edda;72 color: #155724;73 display: block;74 }75 #result.incorrect {76 background-color: #f8d7da;77 color: #721c24;78 display: block;79 }80 #explanation {81 margin-top: 0.5rem;82 padding: 1rem;83 background-color: #f9f9f9;84 color: #555;85 display: none;86 border-radius: 4px;87 }88 .progress-container {89 width: 100%;90 background-color: #eeeeee;91 border-radius: 50px;92 overflow: hidden;93 margin: 1rem 0;94 }95 .progress-bar {96 height: 16px;97 background-color: #2d8f7b;98 width: 0%;99 transition: width 0.3s ease;100 }101 #score {102 margin-top: 1rem;103 font-weight: 600;104 color: #333;105 }106 </style>107</head>108<body>109 <h1>Fact or Fiction Machine Learning</h1>110 <div id="game-container">111 <div class="progress-container">112 <div class="progress-bar" id="progress-bar"></div>113 </div>114 <div id="statement">Loading statement...</div>115 <div class="btn-group">116 <button onclick="guessFact()">Fact</button>117 <button onclick="guessFiction()">Fiction</button>118 </div>119 <div id="result"></div>120 <div id="explanation"></div>121 <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>122 <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>123 <div id="score"></div>124 </div>125 126 <script>127 const statements = [128 {129 text: "Machine Learning involves systems improving performance through data-driven experience rather than explicit programming.",130 isFact: true,131 explanation: "Fact! ML algorithms learn patterns from data to make predictions, not by following hand‑coded rules."132 },133 {134 text: "In unsupervised learning, the model learns from labeled data to predict target outputs.",135 isFact: false,136 explanation: "Fiction! Unsupervised learning works with unlabeled data, discovering structure without target labels."137 },138 {139 text: "Clustering is a common unsupervised technique used to segment data into groups based on similarity.",140 isFact: true,141 explanation: "Fact! Clustering algorithms like K‑means group examples by distance in feature space."142 },143 {144 text: "Overfitting occurs when a model performs well on unseen data but poorly on its training data.",145 isFact: false,146 explanation: "Fiction! Overfitting means a model fits training data too closely and generalizes poorly to new data."147 },148 {149 text: "High variance models change their predictions significantly in response to small fluctuations in input data.",150 isFact: true,151 explanation: "Fact! High variance indicates sensitivity to noise, often causing overfitting."152 },153 {154 text: "Bias refers to the error introduced by approximating a complex problem with a simpler model.",155 isFact: true,156 explanation: "Fact! High bias comes from oversimplified assumptions, leading to underfitting."157 },158 {159 text: "Concept drift describes when the statistical properties of the target variable change over time.",160 isFact: true,161 explanation: "Fact! Real‑world data distributions shift, so models need monitoring and retraining."162 },163 {164 text: "Once a machine learning model is deployed, no further monitoring or retraining is necessary.",165 isFact: false,166 explanation: "Fiction! Deployed models must be monitored for drift and retrained as data evolves."167 },168 {169 text: "Hidden technical debt in ML systems often arises from complex dependencies between code, data pipelines, and models.",170 isFact: true,171 explanation: "Fact! Coupled pipelines and brittle training code create maintenance burdens over time."172 },173 {174 text: "The R.O.A.D. framework outlines steps for data collection, transformation, model training, deployment, and continuous monitoring.",175 isFact: true,176 explanation: "Fact! R.O.A.D. covers Collect, Explore, Label, Deploy and monitor for drift."177 }178 ];179 180 let currentIndex = 0, score = 0, answered = false;181 182 function shuffle(arr) {183 for (let i = arr.length - 1; i > 0; i--) {184 const j = Math.floor(Math.random() * (i + 1));185 [arr[i], arr[j]] = [arr[j], arr[i]];186 }187 }188 189 function startGame() {190 shuffle(statements);191 currentIndex = 0;192 score = 0;193 answered = false;194 document.getElementById('restart-btn').style.display = 'none';195 loadStatement();196 updateScore();197 updateProgress();198 }199 200 function loadStatement() {201 if (currentIndex >= statements.length) return endGame();202 const s = statements[currentIndex];203 document.getElementById('statement').textContent = s.text;204 document.getElementById('result').style.display = 'none';205 document.getElementById('explanation').style.display = 'none';206 document.getElementById('next-btn').style.display = 'none';207 answered = false;208 updateProgress();209 }210 211 function guessFact() { if (!answered) checkAnswer(true); }212 function guessFiction() { if (!answered) checkAnswer(false); }213 214 function checkAnswer(guess) {215 answered = true;216 const correct = statements[currentIndex].isFact;217 const resultEl = document.getElementById('result');218 if (guess === correct) {219 resultEl.textContent = 'Correct!';220 resultEl.className = 'correct';221 score++;222 } else {223 resultEl.textContent = 'Incorrect!';224 resultEl.className = 'incorrect';225 }226 resultEl.style.display = 'block';227 const expEl = document.getElementById('explanation');228 expEl.textContent = statements[currentIndex].explanation;229 expEl.style.display = 'block';230 document.getElementById('next-btn').style.display = 'inline-block';231 updateScore();232 }233 234 function nextStatement() {235 currentIndex++;236 if (currentIndex < statements.length) {237 loadStatement();238 } else {239 endGame();240 }241 }242 243 function updateScore() {244 document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`;245 }246 247 function updateProgress() {248 document.getElementById('progress-bar').style.width =249 `${(currentIndex / statements.length) * 100}%`;250 }251 252 function endGame() {253 const pct = Math.round((score / statements.length) * 100);254 document.getElementById('statement').textContent =255 `Game Over! You scored ${score} out of ${statements.length} (${pct}%).`;256 document.getElementById('result').style.display = 'none';257 document.getElementById('explanation').style.display = 'none';258 document.getElementById('next-btn').style.display = 'none';259 document.getElementById('restart-btn').style.display = 'inline-block';260 document.getElementById('progress-bar').style.width = '100%';261 }262 263 // Initialize264 startGame();265 </script>266</body>267</html>268