eaglelandsonce/AI_Algorithm_Jeopardy
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>6 <title>AI Algorithm Jeopardy</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 display: flex;11 flex-direction: column;12 align-items: center;13 background-color: #f0f0f0;14 margin: 0;15 }16 h1 {17 color: #0078D4;18 }19 #game-board {20 display: grid;21 grid-template-columns: repeat(5, 1fr);22 grid-auto-rows: 100px;23 gap: 2px;24 margin: 20px 0;25 background-color: #000;26 border: 4px solid #000;27 }28 .category {29 background-color: #005a9e;30 color: #fff;31 font-weight: bold;32 display: flex;33 justify-content: center;34 align-items: center;35 text-align: center;36 font-size: 18px;37 border: 1px solid #000;38 }39 .card {40 background-color: #0078D4;41 color: #fff;42 display: flex;43 justify-content: center;44 align-items: center;45 font-size: 16px;46 font-weight: bold;47 cursor: pointer;48 border: 1px solid #000;49 text-align: center;50 transition: background-color 0.3s;51 }52 .card:hover {53 background-color: #005a9e;54 }55 .card.disabled {56 background-color: #cccccc;57 cursor: default;58 }59 #question-display {60 width: 80%;61 text-align: center;62 margin-bottom: 20px;63 }64 #score {65 font-size: 24px;66 font-weight: bold;67 color: #0078D4;68 }69 .answer-container {70 display: flex;71 justify-content: center;72 margin-top: 20px;73 flex-wrap: wrap;74 }75 .answer-btn {76 margin: 5px;77 padding: 10px 15px;78 font-size: 18px;79 cursor: pointer;80 text-align: center;81 border: 2px solid #005a9e;82 border-radius: 5px;83 background-color: #0078D4;84 color: #fff;85 font-weight: bold;86 transition: background-color 0.3s, color 0.3s;87 }88 .answer-btn:hover {89 background-color: #005a9e;90 color: #f0f0f0;91 }92 .answer-btn.disabled {93 background-color: #cccccc;94 color: #666;95 cursor: not-allowed;96 }97 .feedback {98 margin-top: 10px;99 font-size: 18px;100 font-weight: bold;101 }102 </style>103</head>104<body>105 <h1>AI Algorithm Jeopardy</h1>106 <p>107 <strong>Learn More:</strong>108 <a109 href="https://www.linkedin.com/pulse/practical-guide-five-core-machine-learning-algorithms-michael-lively-ntlfe/"110 target="_blank"111 >A Guide to Five Core Machine Learning Algorithms</a>112 </p>113 <div id="game-board">114 <div class="category">Decision Tree</div>115 <div class="category">KNN</div>116 <div class="category">Random Forest</div>117 <div class="category">SVM</div>118 <div class="category">Logistic Reg.</div>119 </div>120 <div id="question-display"></div>121 <div id="score">Score: 0</div>122 <script>123 const categories = ["Decision Tree", "KNN", "Random Forest", "SVM", "Logistic Reg."];124 const questions = [125 [126 { q: "What does a Decision Tree split on?", a: ["Feature thresholds", "Data clusters", "Polynomial kernels"], correct: 0 },127 { q: "Which parameter limits tree depth?", a: ["min_samples_leaf", "max_depth", "criterion"], correct: 1 },128 { q: "Which is a Decision Tree weakness?", a: ["Hard to interpret", "Overfitting", "Slow training"], correct: 1 }129 ],130 [131 { q: "KNN stands for:", a: ["Kernel Nested Net", "K-Nearest Neighbors", "Knowledge Node Network"], correct: 1 },132 { q: "KNN is best used for:", a: ["Pattern recognition", "Stock prediction", "Hyperparameter tuning"], correct: 0 },133 { q: "Which is a KNN drawback?", a: ["Fast on large data", "Noisy predictions", "Needs feature scaling"], correct: 2 }134 ],135 [136 { q: "Random Forest is:", a: ["A clustering method", "An ensemble of trees", "A linear classifier"], correct: 1 },137 { q: "A Random Forest strength:", a: ["Overfits less", "Hard to scale", "Weak prediction"], correct: 0 },138 { q: "Which is a key hyperparameter?", a: ["max_features", "gamma", "solver"], correct: 0 }139 ],140 [141 { q: "SVM stands for:", a: ["Support Vector Machine", "Sequential Value Mapper", "Statistical Vector Model"], correct: 0 },142 { q: "Which kernel allows non-linear splits?", a: ["linear", "rbf", "mean"], correct: 1 },143 { q: "SVMs are good for:", a: ["Binary classification", "Regression only", "Data clustering"], correct: 0 }144 ],145 [146 { q: "Logistic Regression uses:", a: ["Softmax", "Sigmoid", "Decision Tree"], correct: 1 },147 { q: "Which is a limitation of Logistic Regression?", a: ["Can't handle linear problems", "Needs deep networks", "Poor with non-linear data"], correct: 2 },148 { q: "Which hyperparameter adjusts regularization?", a: ["max_iter", "C", "criterion"], correct: 1 }149 ]150 ];151 let score = 0;152 let totalCards = 15;153 let answeredCards = 0;154 const gameBoard = document.getElementById("game-board");155 const questionDisplay = document.getElementById("question-display");156 const scoreDisplay = document.getElementById("score");157 function createBoard() {158 for (let row = 0; row < 3; row++) {159 for (let col = 0; col < 5; col++) {160 const card = document.createElement("div");161 card.className = "card";162 card.textContent = `$${(row + 1) * 100}`;163 card.onclick = () => showQuestion(col, row, card);164 gameBoard.appendChild(card);165 }166 }167 }168 function showQuestion(category, difficulty, cardElement) {169 if (cardElement.classList.contains("disabled")) return;170 const question = questions[category][difficulty];171 const answerHtml = question.a172 .map((answer, index) => `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`) 173 .join("");174 questionDisplay.innerHTML = `175 <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>176 <p>${question.q}</p>177 <div class="answer-container">${answerHtml}</div>178 `;179 cardElement.classList.add("disabled");180 cardElement.style.backgroundColor = "#cccccc";181 answeredCards++;182 }183 function checkAnswer(category, difficulty, selectedAnswer) {184 const question = questions[category][difficulty];185 const correctAnswer = question.a[question.correct];186 const isCorrect = selectedAnswer === question.correct;187 const value = (difficulty + 1) * 100;188 document.querySelectorAll(".answer-btn").forEach((btn) => {189 btn.disabled = true;190 btn.classList.add("disabled");191 });192 if (isCorrect) {193 score += value;194 questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`;195 } else {196 score -= value;197 questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctAnswer}</p>`;198 }199 scoreDisplay.textContent = `Score: ${score}`;200 if (answeredCards === totalCards) endGame();201 }202 function endGame() {203 questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;204 }205 createBoard();206 </script>207</body>208</html>