eaglelandsonce/Algorithm_Game

1<!DOCTYPE html>2<html lang="en">3<head>4  <meta charset="UTF-8">5  <title>ML Algorithm Quiz Game</title>6  <style>7    body { font-family: Arial, sans-serif; background: #f0f4f8; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }8    #quiz-container { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 90%; max-width: 600px; }9    .question-title { font-size: 1.5em; margin-bottom: 10px; color: #333; }10    .question-desc { margin-bottom: 15px; color: #555; line-height: 1.4; }11    .options button { display: block; width: 100%; margin: 8px 0; padding: 10px; font-size: 1em; border: 2px solid #007BFF; border-radius: 5px; background: #fff; cursor: pointer; }12    .options button:hover { background: #e6f0ff; }13    .explanation { margin-top: 15px; padding: 10px; background: #f9f9f9; border-left: 4px solid #007BFF; display: none; }14    #next-btn { margin-top: 15px; padding: 10px 20px; font-size: 1em; border: none; border-radius: 5px; background: #007BFF; color: #fff; cursor: pointer; display: none; }15    #scoreboard { margin-top: 20px; text-align: center; font-weight: bold; color: #333; }16  </style>17</head>18<body>19  <div id="quiz-container">20    <div id="question-box">21      <div class="question-title"></div>22      <div class="question-desc"></div>23      <div class="options"></div>24    </div>25    <div class="explanation"></div>26    <button id="next-btn">Next</button>27    <div id="scoreboard"></div>28  </div>29 30  <script>31    const questions = [32      {33        title: "Spam Detection",34        description: "A company wants to implement a system to automatically classify incoming emails as spam or not spam. The system needs to be efficient, accurate, and able to handle large volumes of emails.",35        justification: "Naïve Bayes is well-suited for text classification tasks like spam detection because it is fast, simple, and effective with a large number of features. It works well with relatively small training datasets and handles the independence assumption reasonably well for this application.",36        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],37        correct: 2,38        explainOthers: [39          "SVM: Good for binary classification but slower on high-dimensional text.",40          "Decision Tree: Prone to overfitting on many features.",41          "Random Forest: Robust but computationally heavier for large vocabularies.",42          "Neural Network: Requires more data and resources."43        ]44      },45      {46        title: "Image Classification Healthcare",47        description: "A healthcare organization needs to classify medical images (e.g., X-rays, MRIs) to diagnose conditions such as pneumonia, tumors, or fractures. High accuracy and the ability to handle complex patterns in images are crucial.",48        justification: "Convolutional Neural Networks (CNNs) are the state-of-the-art for image classification tasks. They automatically learn spatial hierarchies of features from input images, making them highly effective for medical image analysis and diagnostic accuracy.",49        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],50        correct: 4,51        explainOthers: [52          "SVM: Not optimal for raw pixel data without feature engineering.",53          "Decision Tree: Cannot model spatial hierarchies.",54          "Naive Bayes: Independence assumption fails on pixel correlations.",55          "Random Forest: Limited spatial feature learning."56        ]57      },58      {59        title: "Predictive Maintenance (Manufacturing)",60        description: "A manufacturing company wants to predict equipment failures before they occur to minimize downtime and maintenance costs. The system should analyze historical sensor data to predict when equipment is likely to fail.",61        justification: "Random Forest is robust to overfitting, handles large numbers of features and noisy sensor data well, and its ensemble approach improves predictive performance and reliability.",62        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],63        correct: 3,64        explainOthers: [65          "SVM: Less robust to noisy inputs.",66          "Decision Tree: Overfits without ensemble methods.",67          "Naive Bayes: Independence assumption breaks with correlated data.",68          "Neural Network: More complex and resource-intensive."69        ]70      },71      {72        title: "Customer Churn Prediction",73        description: "A subscription-based service wants to predict which customers are likely to churn based on usage patterns, demographics, and past behavior. The goal is to proactively engage at-risk customers to retain them.",74        justification: "Support Vector Machines (SVM) are effective for binary classification, handle high-dimensional data, and can model non-linear relationships with kernels, making them robust against overfitting in churn prediction.",75        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],76        correct: 0,77        explainOthers: [78          "Decision Tree: Interpretable but prone to overfitting.",79          "Naive Bayes: Oversimplifies feature interactions.",80          "Random Forest: Accurate but less interpretable.",81          "Neural Network: Risk of overfitting with limited data."82        ]83      },84      {85        title: "Sentiment Analysis",86        description: "A company wants to analyze customer reviews and social media posts to determine sentiment (positive, negative, neutral) about its products. The system should process large volumes of text efficiently.",87        justification: "Decision Trees are easy to interpret, handle both numerical and categorical data after preprocessing, and can be enhanced via bagging or boosting (e.g., Random Forest) for robust performance.",88        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],89        correct: 1,90        explainOthers: [91          "SVM: Accurate but less transparent.",92          "Naive Bayes: Fast but less nuanced.",93          "Random Forest: Complex ensemble, less interpretable.",94          "Neural Network: Overkill for basic NLP."95        ]96      },97      {98        title: "Financial Time Series Forecasting",99        description: "A financial institution needs to predict stock prices based on historical price data and other financial indicators. The model should capture complex temporal dependencies.",100        justification: "Recurrent Neural Networks (RNN), especially LSTM networks, are designed for sequential data and can learn long-term dependencies, making them ideal for time series forecasting.",101        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],102        correct: 4,103        explainOthers: [104          "SVM: Not suited for sequential dependencies.",105          "Decision Tree: Cannot model time relationships.",106          "Naive Bayes: Fails on sequence data.",107          "Random Forest: Lacks memory of past data."108        ]109      },110      {111        title: "Loan Eligibility Prediction",112        description: "A retail bank seeks to automate loan eligibility screening using factors like income, employment, credit history, and debts to reduce manual workload and inconsistency.",113        justification: "Decision Trees offer transparent, rule-based decisions that are easily interpretable and compliant with regulations, train quickly, and handle mixed data types with minimal preprocessing.",114        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],115        correct: 1,116        explainOthers: [117          "SVM: Less interpretable.",118          "Naive Bayes: Oversimplifies financial features.",119          "Random Forest: Less transparent ensemble.",120          "Neural Network: Lacks clear decision logic."121        ]122      },123      {124        title: "Demand Forecasting (Retail)",125        description: "A retail chain wants to forecast product demand at individual stores using historical sales, promotions, seasonality, and local trends to optimize inventory.",126        justification: "Random Forest captures complex feature interactions, provides feature importance insights for management, scales well via parallel training, and is robust to noise and sudden changes.",127        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],128        correct: 3,129        explainOthers: [130          "SVM: Not suited for seasonal numeric data.",131          "Decision Tree: Unstable without ensemble.",132          "Naive Bayes: Inappropriate for numeric features.",133          "Neural Network: Requires extensive tuning."134        ]135      },136      {137        title: "Real-Time Text Classification",138        description: "An e-commerce platform needs to automatically classify large volumes of customer messages (billing, product inquiries, order issues, returns) in real time to route them to the correct support teams.",139        justification: "Support Vector Machines handle high-dimensional text features effectively, provide precise decision boundaries, and balance speed and accuracy for live routing tasks.",140        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],141        correct: 0,142        explainOthers: [143          "Decision Tree: Prone to overfitting on text features.",144          "Naive Bayes: Simplifies feature dependencies.",145          "Random Forest: More computationally heavy.",146          "Neural Network: Overkill for simple routing."147        ]148      },149      {150        title: "Automated Defect Detection",151        description: "A manufacturer aims to automate visual inspection of components using high-resolution images to detect defects like scratches, chips, and misalignments in real time.",152        justification: "Convolutional Neural Networks automatically learn spatial hierarchies and subtle patterns in images, while techniques like data augmentation and dropout prevent overfitting, ensuring high accuracy in defect detection.",153        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],154        correct: 4,155        explainOthers: [156          "SVM: Requires manual feature extraction.",157          "Decision Tree: Cannot capture spatial context.",158          "Naive Bayes: Independence assumption invalid on images.",159          "Random Forest: Limited image feature learning."160        ]161      },162      {163        title: "Power Grid Equipment Maintenance",164        description: "A power utility needs real-time fault detection by analyzing multi-sensor time-series data (temperature, vibration, humidity, current, voltage) from transformers and circuit breakers to prevent outages.",165        justification: "LSTM-based Neural Networks handle sequential, multidimensional sensor data and capture long-term temporal dependencies, providing accurate early fault detection and scalability for real-time inference.",166        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],167        correct: 4,168        explainOthers: [169          "SVM: Fails on sequential modeling.",170          "Decision Tree: No sequence memory.",171          "Naive Bayes: Invalid independence on sequences.",172          "Random Forest: Lacks internal state."173        ]174      },175      {176        title: "Legal Document Classification",177        description: "A legal firm must classify high-dimensional legal documents into categories efficiently while ensuring interpretability for attorneys.",178        justification: "Naïve Bayes is computationally efficient, handles high-dimensional text by leveraging word-frequency probabilities, highlights influential terms for transparency, and scales well to large document sets.",179        options: ["Support Vector Machine","Decision Tree","Naive Bayes","Random Forest","Neural Network"],180        correct: 2,181        explainOthers: [182          "SVM: Slower and less interpretable.",183          "Decision Tree: Overfits on high-dimensional text.",184          "Random Forest: Complex ensemble reduces clarity.",185          "Neural Network: Resource-intensive and opaque."186        ]187      }188    ];189 190    let current = 0, score = 0;191    const titleEl = document.querySelector('.question-title');192    const descEl = document.querySelector('.question-desc');193    const optsEl = document.querySelector('.options');194    const explEl = document.querySelector('.explanation');195    const nextBtn = document.getElementById('next-btn');196    const scoreEl = document.getElementById('scoreboard');197 198    function loadQuestion() {199      const q = questions[current];200      titleEl.textContent = q.title;201      descEl.textContent = q.description;202      optsEl.innerHTML = '';203      explEl.style.display = 'none';204      nextBtn.style.display = 'none';205      questions[current].options.forEach((opt, i) => {206        const btn = document.createElement('button');207        btn.textContent = opt;208        btn.onclick = () => checkAnswer(i);209        optsEl.appendChild(btn);210      });211    }212 213    function checkAnswer(idx) {214      const q = questions[current];215      explEl.innerHTML = '';216      if(idx === q.correct) {217        score++;218        explEl.innerHTML += `<p>✅ <strong>Correct.</strong> Justification: ${q.justification}</p>`;219      } else {220        explEl.innerHTML += `<p>❌ <strong>Wrong.</strong> ${q.explainOthers[idx]}</p>`;221        explEl.innerHTML += `<p>✅ <strong>Correct Answer:</strong> ${q.options[q.correct]}. Justification: ${q.justification}</p>`;222      }223      explEl.style.display = 'block';224      nextBtn.style.display = 'inline-block';225      updateScoreboard();226    }227 228    function updateScoreboard() {229      scoreEl.textContent = `Score: ${score} / ${questions.length}`;230    }231 232    nextBtn.onclick = () => {233      current++;234      if(current < questions.length) {235        loadQuestion();236      } else {237        titleEl.textContent = 'Game Over!';238        descEl.textContent = `Your final score is ${score} out of ${questions.length}.`;239        optsEl.innerHTML = '';240        explEl.style.display = 'none';241        nextBtn.style.display = 'none';242      }243    };244 245    // Initialize246    loadQuestion();247    updateScoreboard();248  </script>249</body>250</html>251