update files

ml_complete-all-topics/app.js

@@ -65,6 +65,32 @@ let state = {
   }
 };
 
+// Initialize category navigation
+function initCategories() {
+  const categoryHeaders = document.querySelectorAll('.toc-category-header');
+  
+  categoryHeaders.forEach(header => {
+    header.addEventListener('click', () => {
+      const category = header.getAttribute('data-category');
+      const content = document.getElementById(`${category}-content`);
+      const toggle = header.querySelector('.category-toggle');
+      
+      if (content.classList.contains('collapsed')) {
+        content.classList.remove('collapsed');
+        toggle.classList.remove('collapsed');
+      } else {
+        content.classList.add('collapsed');
+        toggle.classList.add('collapsed');
+      }
+    });
+  });
+  
+  // Start with all categories expanded
+  document.querySelectorAll('.toc-category-content').forEach(content => {
+    content.classList.remove('collapsed');
+  });
+}
+
 // Initialize collapsible sections
 function initSections() {
   const sections = document.querySelectorAll('.section');
@@ -110,6 +136,9 @@ function initSections() {
         if (section.id === 'kmeans') initKMeans();
         if (section.id === 'decision-trees') initDecisionTrees();
         if (section.id === 'ensemble-methods') initEnsembleMethods();
+        if (section.id === 'rl-intro') { /* No viz for intro */ }
+        if (section.id === 'q-learning') { /* Add Q-learning viz if needed */ }
+        if (section.id === 'policy-gradient') { /* Add policy gradient viz if needed */ }
         if (section.id === 'algorithm-comparison') initAlgorithmComparison();
       }
     });
@@ -234,7 +263,7 @@ function drawLinearRegression() {
   });
   mse /= data.linearRegression.length;
   
-  lrChart = new Chart(ctx, {
+  lrChart = safeCreateChart(ctx, {
     type: 'scatter',
     data: {
       datasets: [
@@ -284,7 +313,7 @@ function drawLinearRegression() {
         }
       }
     }
-  });
+  }, 'Linear Regression Chart');
 }
 
 // Gradient Descent Visualization
@@ -400,7 +429,7 @@ function drawGradientDescent(currentStep = -1) {
   const ctx = canvas.getContext('2d');
   const lossData = state.gdIterations.map((iter, i) => ({ x: i + 1, y: iter.loss }));
   
-  gdChart = new Chart(ctx, {
+  gdChart = safeCreateChart(ctx, {
     type: 'line',
     data: {
       datasets: [{
@@ -445,8 +474,27 @@ function drawGradientDescent(currentStep = -1) {
   });
 }
 
+// Safe chart creation with error handling
+function safeCreateChart(ctx, config, chartName) {
+  try {
+    if (!ctx) {
+      console.warn(`Canvas context not found for ${chartName}`);
+      return null;
+    }
+    return new Chart(ctx, config);
+  } catch (error) {
+    console.error(`Chart creation failed for ${chartName}:`, error);
+    // Show fallback message
+    if (ctx && ctx.canvas && ctx.canvas.parentElement) {
+      ctx.canvas.parentElement.innerHTML = `<p style="color: #ff8c6a; text-align: center; padding: 40px;">Visualization temporarily unavailable. Please refresh the page.</p>`;
+    }
+    return null;
+  }
+}
+
 // Initialize everything when DOM is ready
 function init() {
+  initCategories();
   initSections();
   initTOCLinks();
   
@@ -512,7 +560,12 @@ function drawSVMBasic() {
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
-  const width = canvas.width = canvas.offsetWidth;
+  if (!ctx) {
+    console.warn('Could not get canvas context for svm-basic-canvas');
+    return;
+  }
+  
+  const width = canvas.width = canvas.offsetWidth || 600;
   const height = canvas.height = 450;
   
   ctx.clearRect(0, 0, width, height);
@@ -633,7 +686,12 @@ function drawSVMMargin() {
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
-  const width = canvas.width = canvas.offsetWidth;
+  if (!ctx) {
+    console.warn('Could not get canvas context for svm-margin-canvas');
+    return;
+  }
+  
+  const width = canvas.width = canvas.offsetWidth || 600;
   const height = canvas.height = 450;
   
   ctx.clearRect(0, 0, width, height);
@@ -754,7 +812,12 @@ function drawSVMCParameter() {
   }
   
   const ctx = canvas.getContext('2d');
-  const width = canvas.width = canvas.offsetWidth;
+  if (!ctx) {
+    console.warn('Could not get canvas context for svm-c-canvas');
+    return;
+  }
+  
+  const width = canvas.width = canvas.offsetWidth || 600;
   const height = canvas.height = 450;
   
   ctx.clearRect(0, 0, width, height);
@@ -932,7 +995,12 @@ function drawSVMTraining() {
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
-  const width = canvas.width = canvas.offsetWidth;
+  if (!ctx) {
+    console.warn('Could not get canvas context for svm-train-canvas');
+    return;
+  }
+  
+  const width = canvas.width = canvas.offsetWidth || 600;
   const height = canvas.height = 450;
   
   ctx.clearRect(0, 0, width, height);
@@ -2460,7 +2528,7 @@ function drawElbowCurve() {
         }
       }
     }
-  });
+  }, 'Elbow Chart');
 }
 
 function drawCVKHeatmap() {
@@ -2855,7 +2923,7 @@ function drawCategoricalNB() {
   
   const ctx = canvas.getContext('2d');
   
-  categoricalNBChart = new Chart(ctx, {
+  categoricalNBChart = safeCreateChart(ctx, {
     type: 'bar',
     data: {
       labels: ['P(Yes|Rainy,Hot)', 'P(No|Rainy,Hot)'],
@@ -2907,7 +2975,7 @@ function drawCategoricalNB() {
         }
       }
     }
-  });
+  }, 'Categorical Naive Bayes Chart');
 }
 
 function drawGaussianNB() {
@@ -3089,7 +3157,7 @@ function drawSpamClassification() {
     compCanvas.style.marginTop = '20px';
     canvas.parentElement.appendChild(compCanvas);
     
-    bayesComparisonChart = new Chart(compCanvas.getContext('2d'), {
+    bayesComparisonChart = safeCreateChart(compCanvas.getContext('2d'), {
       type: 'bar',
       data: {
         labels: ['Spam Probability', 'Not-Spam Probability'],
@@ -3125,8 +3193,8 @@ function drawSpamClassification() {
           }
         }
       }
-    });
-    compCanvas.style.height = '150px';
+    }, 'Bayes Comparison Chart');
+    if (bayesComparisonChart) compCanvas.style.height = '150px';
   }
 }
 
@@ -3245,6 +3313,67 @@ function drawDecisionTree() {
   ctx.fillText('Example: Email with "free" + link → SPAM', 40, height - 20);
 }
 
+function drawSplitComparison() {
+  const canvas = document.getElementById('split-comparison');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const splits = [
+    { name: 'Split A: "Contains FREE"', ig: 0.034, color: '#ff8c6a' },
+    { name: 'Split B: "Has Link"', ig: 0.156, color: '#7ef0d4' },
+    { name: 'Split C: "Urgent"', ig: 0.089, color: '#ffb490' }
+  ];
+  
+  const padding = 60;
+  const barHeight = 60;
+  const maxWidth = width - 2 * padding - 200;
+  const maxIG = Math.max(...splits.map(s => s.ig));
+  
+  splits.forEach((split, i) => {
+    const y = 80 + i * (barHeight + 40);
+    const barWidth = (split.ig / maxIG) * maxWidth;
+    
+    // Bar
+    ctx.fillStyle = split.color;
+    ctx.fillRect(padding, y, barWidth, barHeight);
+    
+    // Border
+    ctx.strokeStyle = split.color;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(padding, y, barWidth, barHeight);
+    
+    // Label
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 13px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(split.name, padding, y - 10);
+    
+    // Value
+    ctx.fillStyle = '#1a2332';
+    ctx.font = 'bold 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`IG = ${split.ig.toFixed(3)}`, padding + barWidth / 2, y + barHeight / 2 + 6);
+  });
+  
+  // Winner
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('✓ Best split: Highest Information Gain!', width / 2, height - 30);
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Comparing Split Quality', width / 2, 40);
+}
+
 function drawEntropyViz() {
   const canvas = document.getElementById('entropy-viz');
   if (!canvas) return;
@@ -3388,6 +3517,88 @@ function drawSplitComparison() {
   ctx.fillText('Comparing Split Quality', width / 2, 40);
 }
 
+function drawEntropyViz() {
+  const canvas = document.getElementById('entropy-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  // Draw entropy curve
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  for (let p = 0.01; p <= 0.99; p += 0.01) {
+    const entropy = -p * Math.log2(p) - (1 - p) * Math.log2(1 - p);
+    const x = padding + p * chartWidth;
+    const y = height - padding - entropy * chartHeight;
+    if (p === 0.01) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+  
+  // Mark key points
+  const points = [
+    { p: 0.1, label: 'Pure\n(low)' },
+    { p: 0.5, label: 'Maximum\n(high)' },
+    { p: 0.9, label: 'Pure\n(low)' }
+  ];
+  
+  points.forEach(point => {
+    const entropy = -point.p * Math.log2(point.p) - (1 - point.p) * Math.log2(1 - point.p);
+    const x = padding + point.p * chartWidth;
+    const y = height - padding - entropy * chartHeight;
+    
+    ctx.fillStyle = '#7ef0d4';
+    ctx.beginPath();
+    ctx.arc(x, y, 6, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    ctx.fillStyle = '#7ef0d4';
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'center';
+    const lines = point.label.split('\n');
+    lines.forEach((line, i) => {
+      ctx.fillText(line, x, y - 15 - (lines.length - 1 - i) * 12);
+    });
+  });
+  
+  // Axes
+  ctx.strokeStyle = '#2a3544';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(padding, padding);
+  ctx.lineTo(padding, height - padding);
+  ctx.lineTo(width - padding, height - padding);
+  ctx.stroke();
+  
+  // Labels
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Proportion of Positive Class (p)', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Entropy H(p)', 0, 0);
+  ctx.restore();
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Entropy: Measuring Disorder', width / 2, 30);
+}
+
 function drawTreeBoundary() {
   const canvas = document.getElementById('tree-boundary');
   if (!canvas) return;
@@ -3587,6 +3798,8 @@ function drawBaggingViz() {
   ctx.fillText('Bagging: Bootstrap Aggregating', width / 2, 30);
 }
 
+
+
 function drawBoostingViz() {
   const canvas = document.getElementById('boosting-viz');
   if (!canvas) return;
@@ -3962,7 +4175,7 @@ function drawKMeansElbow() {
   const kValues = [1, 2, 3, 4, 5];
   const wcssValues = [50, 18, 10, 8, 7];
   
-  kmeansElbowChart = new Chart(ctx, {
+  kmeansElbowChart = safeCreateChart(ctx, {
     type: 'line',
     data: {
       labels: kValues,
@@ -4025,15 +4238,511 @@ function drawKMeansElbow() {
         }
       }
     }
-  });
+  }, 'K-means Elbow Chart');
 }
 
-// Topic 19: Algorithm Comparison
+// Topic 18: Algorithm Comparison
+let comparisonState = {
+  selectedAlgorithms: [],
+  algorithmData: {
+    'Linear Regression': {
+      category: 'Supervised - Regression',
+      speed: 5, accuracy: 3, dataRequired: 1, interpretability: 5, scalability: 3,
+      featureScaling: 'Required', nonLinear: 'No', trainingTime: 'Fast', memoryUsage: 'Low',
+      bestFor: 'Linear trends, forecasting',
+      pros: ['Very fast', 'Highly interpretable', 'Works with little data', 'No tuning needed'],
+      cons: ['Assumes linearity', 'Sensitive to outliers', 'No complex patterns'],
+      useCases: { regression: 5, classification: 0, clustering: 0, speed: 5, interpretability: 5 }
+    },
+    'Logistic Regression': {
+      category: 'Supervised - Classification',
+      speed: 5, accuracy: 4, dataRequired: 2, interpretability: 4, scalability: 4,
+      featureScaling: 'Required', nonLinear: 'No', trainingTime: 'Fast', memoryUsage: 'Low',
+      bestFor: 'Binary classification, probabilities',
+      pros: ['Fast', 'Probabilistic output', 'Interpretable', 'Works well'],
+      cons: ['Binary only', 'Assumes linearity', 'Limited complexity'],
+      useCases: { regression: 0, classification: 5, clustering: 0, speed: 5, interpretability: 4 }
+    },
+    'SVM': {
+      category: 'Supervised - Classification',
+      speed: 2, accuracy: 5, dataRequired: 2, interpretability: 2, scalability: 2,
+      featureScaling: 'Required', nonLinear: 'Yes', trainingTime: 'Slow', memoryUsage: 'Medium',
+      bestFor: 'High accuracy, complex boundaries',
+      pros: ['Very high accuracy', 'Handles non-linear', 'Effective in high dims'],
+      cons: ['Slow training', 'Hard to interpret', 'Needs tuning'],
+      useCases: { regression: 2, classification: 5, clustering: 0, speed: 2, interpretability: 2 }
+    },
+    'KNN': {
+      category: 'Supervised - Classification',
+      speed: 1, accuracy: 4, dataRequired: 3, interpretability: 3, scalability: 1,
+      featureScaling: 'Required', nonLinear: 'Yes', trainingTime: 'None', memoryUsage: 'High',
+      bestFor: 'Local patterns, small datasets',
+      pros: ['Simple', 'No training', 'Handles non-linear'],
+      cons: ['Very slow prediction', 'Needs lots of memory', 'Needs scaling'],
+      useCases: { regression: 3, classification: 4, clustering: 3, speed: 1, interpretability: 3 }
+    },
+    'Naive Bayes': {
+      category: 'Supervised - Classification',
+      speed: 5, accuracy: 3, dataRequired: 2, interpretability: 5, scalability: 5,
+      featureScaling: 'Not needed', nonLinear: 'Yes', trainingTime: 'Fast', memoryUsage: 'Low',
+      bestFor: 'Quick models, text classification',
+      pros: ['Very fast', 'Interpretable', 'Works with little data'],
+      cons: ['Independence assumption wrong', 'Often biased', 'Limited accuracy'],
+      useCases: { regression: 2, classification: 4, clustering: 0, speed: 5, interpretability: 5 }
+    },
+    'Decision Trees': {
+      category: 'Supervised - Classification',
+      speed: 3, accuracy: 4, dataRequired: 2, interpretability: 5, scalability: 3,
+      featureScaling: 'Not needed', nonLinear: 'Yes', trainingTime: 'Medium', memoryUsage: 'Low',
+      bestFor: 'Interpretability, complex decisions',
+      pros: ['Very interpretable', 'No scaling needed', 'Handles non-linear'],
+      cons: ['Prone to overfitting', 'Unstable', 'Biased to dominant class'],
+      useCases: { regression: 3, classification: 4, clustering: 0, speed: 3, interpretability: 5 }
+    },
+    'Random Forest': {
+      category: 'Supervised - Classification',
+      speed: 2, accuracy: 5, dataRequired: 3, interpretability: 3, scalability: 3,
+      featureScaling: 'Not needed', nonLinear: 'Yes', trainingTime: 'Slow', memoryUsage: 'Medium',
+      bestFor: 'High accuracy with complex data',
+      pros: ['Very high accuracy', 'No scaling', 'Handles non-linear'],
+      cons: ['Slow', 'Less interpretable', 'Black box'],
+      useCases: { regression: 3, classification: 5, clustering: 0, speed: 3, interpretability: 2 }
+    },
+    'K-means': {
+      category: 'Unsupervised - Clustering',
+      speed: 4, accuracy: 3, dataRequired: 3, interpretability: 4, scalability: 4,
+      featureScaling: 'Required', nonLinear: 'No', trainingTime: 'Medium', memoryUsage: 'Low',
+      bestFor: 'Customer segmentation, grouping',
+      pros: ['Fast', 'Simple', 'Scalable'],
+      cons: ['Need to specify K', 'Sensitive to init', 'Assumes spherical'],
+      useCases: { regression: 0, classification: 0, clustering: 5, speed: 4, interpretability: 4 }
+    },
+    'PCA': {
+      category: 'Unsupervised - Dimensionality Reduction',
+      speed: 3, accuracy: 4, dataRequired: 2, interpretability: 2, scalability: 4,
+      featureScaling: 'Required', nonLinear: 'No', trainingTime: 'Medium', memoryUsage: 'Medium',
+      bestFor: 'High-dimensional data reduction',
+      pros: ['Reduces dimensions', 'Preserves variance', 'Fast after trained'],
+      cons: ['Components not interpretable', 'Linear only', 'Assumes normality'],
+      useCases: { regression: 0, classification: 0, clustering: 0, speed: 4, interpretability: 2 }
+    }
+  }
+};
+
 function initAlgorithmComparison() {
-  const canvas = document.getElementById('decision-flowchart');
-  if (!canvas || canvas.dataset.initialized) return;
-  canvas.dataset.initialized = 'true';
-  drawDecisionFlowchart();
+  const container = document.getElementById('algorithm-checkboxes');
+  if (!container || container.dataset.initialized) return;
+  container.dataset.initialized = 'true';
+  
+  populateAlgorithmCheckboxes();
+  initComparisonListeners();
+  initQuiz();
+}
+
+function populateAlgorithmCheckboxes() {
+  const container = document.getElementById('algorithm-checkboxes');
+  if (!container) return;
+  
+  const categoryRadios = document.querySelectorAll('input[name="category"]');
+  
+  function updateCheckboxes() {
+    const selectedCategory = document.querySelector('input[name="category"]:checked')?.value || 'all';
+    container.innerHTML = '';
+    
+    Object.keys(comparisonState.algorithmData).forEach(name => {
+      const algo = comparisonState.algorithmData[name];
+      const category = algo.category.toLowerCase();
+      
+      if (selectedCategory === 'all' || 
+          (selectedCategory === 'supervised' && category.includes('supervised')) ||
+          (selectedCategory === 'unsupervised' && category.includes('unsupervised'))) {
+        
+        const label = document.createElement('label');
+        label.style.display = 'flex';
+        label.style.alignItems = 'center';
+        label.style.gap = '8px';
+        label.style.cursor = 'pointer';
+        label.style.padding = '8px';
+        label.style.borderRadius = '6px';
+        label.style.transition = 'background 0.2s';
+        
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.value = name;
+        checkbox.addEventListener('change', updateSelection);
+        
+        const text = document.createTextNode(name);
+        
+        label.appendChild(checkbox);
+        label.appendChild(text);
+        label.addEventListener('mouseenter', () => label.style.background = 'var(--color-secondary)');
+        label.addEventListener('mouseleave', () => label.style.background = 'transparent');
+        
+        container.appendChild(label);
+      }
+    });
+  }
+  
+  categoryRadios.forEach(radio => radio.addEventListener('change', updateCheckboxes));
+  updateCheckboxes();
+}
+
+function updateSelection() {
+  const checkboxes = document.querySelectorAll('#algorithm-checkboxes input[type="checkbox"]:checked');
+  comparisonState.selectedAlgorithms = Array.from(checkboxes).map(cb => cb.value);
+  
+  const count = comparisonState.selectedAlgorithms.length;
+  const countEl = document.getElementById('selection-count');
+  const compareBtn = document.getElementById('compare-btn');
+  
+  if (countEl) {
+    countEl.textContent = `Selected: ${count} algorithm${count !== 1 ? 's' : ''}`;
+    countEl.style.color = count >= 2 && count <= 5 ? 'var(--color-success)' : 'var(--color-error)';
+  }
+  
+  if (compareBtn) {
+    compareBtn.disabled = count < 2 || count > 5;
+  }
+}
+
+function initComparisonListeners() {
+  const compareBtn = document.getElementById('compare-btn');
+  if (compareBtn) {
+    compareBtn.addEventListener('click', showComparison);
+  }
+  
+  const viewBtns = document.querySelectorAll('.view-btn');
+  viewBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      viewBtns.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      
+      const view = btn.dataset.view;
+      document.querySelectorAll('.comparison-view').forEach(v => v.style.display = 'none');
+      const targetView = document.getElementById(`view-${view}`);
+      if (targetView) targetView.style.display = 'block';
+    });
+  });
+}
+
+function showComparison() {
+  const resultsDiv = document.getElementById('comparison-results');
+  if (!resultsDiv) return;
+  
+  resultsDiv.style.display = 'block';
+  resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  
+  renderComparisonTable();
+  renderRadarChart();
+  renderHeatmap();
+  renderUseCaseMatrix();
+  renderDetailedCards();
+}
+
+function renderComparisonTable() {
+  const table = document.getElementById('comparison-table');
+  if (!table) return;
+  
+  const metrics = [
+    { key: 'speed', label: 'Speed', format: (v) => '⭐'.repeat(v) },
+    { key: 'accuracy', label: 'Accuracy', format: (v) => '⭐'.repeat(v) },
+    { key: 'dataRequired', label: 'Data Required', format: (v) => ['Small', 'Small', 'Medium', 'Large', 'Very Large'][v] },
+    { key: 'interpretability', label: 'Interpretability', format: (v) => '⭐'.repeat(v) },
+    { key: 'featureScaling', label: 'Feature Scaling' },
+    { key: 'nonLinear', label: 'Handles Non-linear' },
+    { key: 'trainingTime', label: 'Training Time' },
+    { key: 'memoryUsage', label: 'Memory Usage' },
+    { key: 'bestFor', label: 'Best For' }
+  ];
+  
+  let html = '<thead><tr><th>Metric</th>';
+  comparisonState.selectedAlgorithms.forEach(name => {
+    html += `<th>${name}</th>`;
+  });
+  html += '</tr></thead><tbody>';
+  
+  metrics.forEach(metric => {
+    html += `<tr><td><strong>${metric.label}</strong></td>`;
+    comparisonState.selectedAlgorithms.forEach(name => {
+      const algo = comparisonState.algorithmData[name];
+      const value = algo[metric.key];
+      const display = metric.format ? metric.format(value) : value;
+      html += `<td>${display}</td>`;
+    });
+    html += '</tr>';
+  });
+  
+  html += '</tbody>';
+  table.innerHTML = html;
+}
+
+let radarComparisonChart = null;
+
+function renderRadarChart() {
+  const canvas = document.getElementById('radar-comparison-canvas');
+  if (!canvas) return;
+  
+  if (radarComparisonChart) {
+    radarComparisonChart.destroy();
+    radarComparisonChart = null;
+  }
+  
+  const ctx = canvas.getContext('2d');
+  canvas.width = canvas.offsetWidth;
+  canvas.height = 500;
+  
+  const colors = ['#6aa9ff', '#7ef0d4', '#ff8c6a', '#ffeb3b', '#ffb490'];
+  
+  const datasets = comparisonState.selectedAlgorithms.map((name, i) => {
+    const algo = comparisonState.algorithmData[name];
+    return {
+      label: name,
+      data: [algo.speed, algo.accuracy, 5 - algo.dataRequired, algo.interpretability, algo.scalability],
+      borderColor: colors[i],
+      backgroundColor: colors[i] + '33',
+      borderWidth: 2,
+      pointRadius: 4
+    };
+  });
+  
+  radarComparisonChart = safeCreateChart(ctx, {
+    type: 'radar',
+    data: {
+      labels: ['Speed', 'Accuracy', 'Data Efficiency', 'Interpretability', 'Scalability'],
+      datasets: datasets
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'top',
+          labels: { color: '#a9b4c2', padding: 15 }
+        }
+      },
+      scales: {
+        r: {
+          beginAtZero: true,
+          max: 5,
+          ticks: { color: '#a9b4c2', backdropColor: 'transparent' },
+          grid: { color: '#2a3544' },
+          pointLabels: { color: '#e8eef6', font: { size: 12 } }
+        }
+      }
+    }
+  }, 'Radar Comparison Chart');
+}
+
+function renderHeatmap() {
+  const container = document.getElementById('view-heatmap');
+  if (!container) return;
+  
+  // Remove canvas, use HTML table instead for 100% browser compatibility
+  const metrics = ['Speed', 'Accuracy', 'Data Efficiency', 'Interpretability', 'Scalability'];
+  const algos = comparisonState.selectedAlgorithms;
+  
+  // Helper function to get color based on value
+  function getHeatmapColor(value) {
+    const intensity = value / 5;
+    const r = Math.floor(255 - 149 * intensity);
+    const g = Math.floor(140 + 100 * intensity);
+    const b = Math.floor(106 + 106 * intensity);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  
+  // Build HTML table heatmap
+  let html = '<h3 style="margin-bottom: 20px; text-align: center; color: #7ef0d4;">Performance Heatmap (Higher is Better)</h3>';
+  html += '<div style="overflow-x: auto;">';
+  html += '<table style="width: 100%; border-collapse: collapse; margin: 20px auto; max-width: 1000px;">';
+  
+  // Header row
+  html += '<thead><tr style="background: #2a3544; border-bottom: 2px solid #6aa9ff;">';
+  html += '<th style="padding: 12px; text-align: left; color: #7ef0d4; border: 1px solid #3a4554; min-width: 150px;">Algorithm</th>';
+  metrics.forEach(metric => {
+    html += `<th style="padding: 12px; text-align: center; color: #7ef0d4; border: 1px solid #3a4554; min-width: 80px;">${metric}</th>`;
+  });
+  html += '</tr></thead>';
+  
+  // Data rows
+  html += '<tbody>';
+  algos.forEach((name, i) => {
+    const algo = comparisonState.algorithmData[name];
+    const values = [algo.speed, algo.accuracy, 5 - algo.dataRequired, algo.interpretability, algo.scalability];
+    
+    html += `<tr style="border-bottom: 1px solid #3a4554;">`;
+    html += `<td style="padding: 12px; font-weight: 600; background: #2a3544; color: #e8eef6; border: 1px solid #3a4554;">${name}</td>`;
+    
+    values.forEach((value, j) => {
+      const color = getHeatmapColor(value);
+      const stars = '⭐'.repeat(Math.round(value));
+      html += `<td style="padding: 12px; text-align: center; background: ${color}; border: 1px solid #1a2332; color: #1a2332; font-weight: bold; font-size: 16px;">`;
+      html += `<div style="margin-bottom: 4px;">${value.toFixed(0)}</div>`;
+      html += `<div style="font-size: 12px;">${stars}</div>`;
+      html += `</td>`;
+    });
+    html += '</tr>';
+  });
+  html += '</tbody>';
+  html += '</table>';
+  html += '</div>';
+  
+  // Legend
+  html += '<div style="text-align: center; margin-top: 24px; padding: 16px; background: var(--color-bg-2); border-radius: 8px;">';
+  html += '<strong style="color: #e8eef6;">Legend:</strong> ';
+  html += '<span style="margin-left: 16px;">🔴 Low (1-2)</span> ';
+  html += '<span style="margin-left: 16px;">🟡 Medium (3)</span> ';
+  html += '<span style="margin-left: 16px;">🟢 High (4-5)</span>';
+  html += '</div>';
+  
+  // Find the canvas and replace with our HTML
+  const oldCanvas = container.querySelector('#heatmap-canvas');
+  if (oldCanvas) {
+    oldCanvas.parentElement.innerHTML = html;
+  } else {
+    container.innerHTML = html;
+  }
+}
+
+function renderUseCaseMatrix() {
+  const table = document.getElementById('matrix-table');
+  if (!table) return;
+  
+  const useCases = [
+    { key: 'regression', label: 'Regression' },
+    { key: 'classification', label: 'Classification' },
+    { key: 'clustering', label: 'Clustering' },
+    { key: 'speed', label: 'Speed' },
+    { key: 'interpretability', label: 'Interpretability' }
+  ];
+  
+  let html = '<thead><tr><th>Use Case</th>';
+  comparisonState.selectedAlgorithms.forEach(name => {
+    html += `<th>${name}</th>`;
+  });
+  html += '</tr></thead><tbody>';
+  
+  useCases.forEach(useCase => {
+    html += `<tr><td><strong>${useCase.label}</strong></td>`;
+    comparisonState.selectedAlgorithms.forEach(name => {
+      const algo = comparisonState.algorithmData[name];
+      const value = algo.useCases[useCase.key];
+      const check = '✓'.repeat(value);
+      html += `<td style="color: ${value > 3 ? 'var(--color-success)' : value > 0 ? 'var(--color-warning)' : 'var(--color-error)'}">${check || '✗'}</td>`;
+    });
+    html += '</tr>';
+  });
+  
+  html += '</tbody>';
+  table.innerHTML = html;
+}
+
+function renderDetailedCards() {
+  const container = document.getElementById('detailed-cards');
+  if (!container) return;
+  
+  let html = '<h3 style="margin-bottom: 24px; text-align: center;">Detailed Comparison</h3>';
+  html += '<div style="display: grid; gap: 24px;">';
+  
+  comparisonState.selectedAlgorithms.forEach(name => {
+    const algo = comparisonState.algorithmData[name];
+    html += `
+      <div class="info-card" style="background: var(--color-bg-1); padding: 24px;">
+        <h4 style="font-size: 20px; margin-bottom: 16px; color: var(--color-primary);">${name}</h4>
+        <p style="margin-bottom: 12px; color: var(--color-text-secondary);">${algo.category}</p>
+        
+        <div style="margin: 20px 0;">
+          <strong style="color: var(--color-success);">✓ Pros:</strong>
+          <ul style="margin: 8px 0 0 20px; color: var(--color-text);">
+            ${algo.pros.map(p => `<li>${p}</li>`).join('')}
+          </ul>
+        </div>
+        
+        <div style="margin: 20px 0;">
+          <strong style="color: var(--color-error);">✗ Cons:</strong>
+          <ul style="margin: 8px 0 0 20px; color: var(--color-text);">
+            ${algo.cons.map(c => `<li>${c}</li>`).join('')}
+          </ul>
+        </div>
+        
+        <div style="padding: 12px; background: var(--color-secondary); border-radius: 6px; margin-top: 16px;">
+          <strong style="color: var(--color-text);">⚡ Best For:</strong> ${algo.bestFor}
+        </div>
+      </div>
+    `;
+  });
+  
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+function initQuiz() {
+  const questions = document.querySelectorAll('.quiz-question');
+  const resultDiv = document.getElementById('quiz-result');
+  
+  questions.forEach((q, idx) => {
+    const radios = q.querySelectorAll('input[type="radio"]');
+    radios.forEach(radio => {
+      radio.addEventListener('change', () => {
+        if (idx < questions.length - 1) {
+          questions[idx + 1].style.display = 'block';
+        }
+        
+        if (idx === questions.length - 1) {
+          showQuizResult();
+        }
+      });
+    });
+  });
+  
+  function showQuizResult() {
+    const q1 = document.querySelector('input[name="q1"]:checked')?.value;
+    const q2 = document.querySelector('input[name="q2"]:checked')?.value;
+    const q3 = document.querySelector('input[name="q3"]:checked')?.value;
+    const q4 = document.querySelector('input[name="q4"]:checked')?.value;
+    
+    let recommendation = '';
+    let alternatives = [];
+    
+    if (q1 === 'no') {
+      recommendation = 'K-means';
+      alternatives = ['PCA', 'DBSCAN'];
+    } else if (q2 === 'numbers') {
+      if (q3 === 'little') {
+        recommendation = 'Linear Regression';
+        alternatives = ['Decision Trees'];
+      } else {
+        recommendation = 'Random Forest';
+        alternatives = ['XGBoost', 'Linear Regression'];
+      }
+    } else if (q2 === 'categories') {
+      if (q4 === 'very') {
+        recommendation = 'Decision Trees';
+        alternatives = ['Logistic Regression', 'Naive Bayes'];
+      } else if (q3 === 'little') {
+        recommendation = 'Naive Bayes';
+        alternatives = ['Logistic Regression'];
+      } else {
+        recommendation = 'Random Forest';
+        alternatives = ['SVM', 'XGBoost'];
+      }
+    } else {
+      recommendation = 'K-means';
+      alternatives = ['PCA'];
+    }
+    
+    if (resultDiv) {
+      resultDiv.style.display = 'block';
+      resultDiv.innerHTML = `
+        <h4 style="font-size: 18px; color: var(--color-success); margin-bottom: 12px;">🎯 Recommendation: ${recommendation}</h4>
+        <p style="margin-bottom: 12px;">Based on your answers, <strong>${recommendation}</strong> is the best fit for your use case.</p>
+        <p style="margin-bottom: 8px;"><strong>Other good choices:</strong></p>
+        <ul style="margin-left: 20px;">
+          ${alternatives.map(a => `<li>${a}</li>`).join('')}
+        </ul>
+      `;
+      resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }
 }
 
 function drawDecisionFlowchart() {

ml_complete-all-topics/index.html

@@ -450,6 +450,30 @@ canvas {
   margin-right: 8px;
 }
 
+/* Step boxes */
+.step {
+  background: #2a3544;
+  border-left: 4px solid #6aa9ff;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #7ef0d4;
+  margin-bottom: 12px;
+}
+
+.step-calculation {
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #e8eef6;
+  white-space: pre-wrap;
+}
+
 /* Responsive */
 @media (max-width: 1024px) {
   .toc-sidebar {
@@ -485,35 +509,88 @@ canvas {
                 <p class="toc-subtitle">Complete Learning Guide</p>
             </div>
             <nav class="toc-nav">
-                <a href="#intro" class="toc-link">1. Introduction to ML</a>
-                <a href="#linear-regression" class="toc-link">2. Linear Regression</a>
-                <a href="#gradient-descent" class="toc-link">3. Gradient Descent</a>
-                <a href="#logistic-regression" class="toc-link">4. Logistic Regression</a>
-                <a href="#svm" class="toc-link">5. Support Vector Machines</a>
-                <a href="#knn" class="toc-link">6. K-Nearest Neighbors</a>
-                <a href="#model-evaluation" class="toc-link">7. Model Evaluation</a>
-                <a href="#regularization" class="toc-link">8. Regularization</a>
-                <a href="#bias-variance" class="toc-link">9. Bias-Variance Tradeoff</a>
-                <a href="#cross-validation" class="toc-link">10. Cross-Validation</a>
-                <a href="#preprocessing" class="toc-link">11. Data Preprocessing</a>
-                <a href="#loss-functions" class="toc-link">12. Loss Functions</a>
-                <a href="#optimal-k" class="toc-link">13. Finding Optimal K in KNN</a>
-                <a href="#hyperparameter-tuning" class="toc-link">14. Hyperparameter Tuning</a>
-                <a href="#naive-bayes" class="toc-link">15. Naive Bayes</a>
-                <a href="#kmeans" class="toc-link">16. K-means Clustering</a>
-                <a href="#decision-trees" class="toc-link">17. Decision Trees</a>
-                <a href="#ensemble-methods" class="toc-link">18. Ensemble Methods</a>
-                <a href="#algorithm-comparison" class="toc-link">19. Algorithm Comparison</a>
+                <a href="#intro" class="toc-link">📚 Introduction</a>
+                
+                <div class="toc-category">
+                    <div class="toc-category-header" data-category="supervised">
+                        <span class="category-icon">📊</span>
+                        <span class="category-title">SUPERVISED LEARNING</span>
+                        <span class="category-toggle">▼</span>
+                    </div>
+                    <div class="toc-category-content" id="supervised-content">
+                        <div class="toc-subcategory">
+                            <div class="toc-subcategory-title">Regression</div>
+                            <a href="#linear-regression" class="toc-link toc-sub">Linear Regression</a>
+                            <a href="#gradient-descent" class="toc-link toc-sub">Gradient Descent</a>
+                        </div>
+                        <div class="toc-subcategory">
+                            <div class="toc-subcategory-title">Classification</div>
+                            <a href="#logistic-regression" class="toc-link toc-sub">Logistic Regression</a>
+                            <a href="#svm" class="toc-link toc-sub">Support Vector Machines</a>
+                            <a href="#knn" class="toc-link toc-sub">K-Nearest Neighbors</a>
+                            <a href="#naive-bayes" class="toc-link toc-sub">Naive Bayes</a>
+                            <a href="#decision-trees" class="toc-link toc-sub">Decision Trees</a>
+                            <a href="#ensemble-methods" class="toc-link toc-sub">Ensemble Methods</a>
+                        </div>
+                        <div class="toc-subcategory">
+                            <div class="toc-subcategory-title">Evaluation &amp; Tuning</div>
+                            <a href="#model-evaluation" class="toc-link toc-sub">Model Evaluation</a>
+                            <a href="#cross-validation" class="toc-link toc-sub">Cross-Validation</a>
+                            <a href="#optimal-k" class="toc-link toc-sub">Finding Optimal K</a>
+                            <a href="#hyperparameter-tuning" class="toc-link toc-sub">Hyperparameter Tuning</a>
+                            <a href="#regularization" class="toc-link toc-sub">Regularization</a>
+                            <a href="#bias-variance" class="toc-link toc-sub">Bias-Variance Tradeoff</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="toc-category">
+                    <div class="toc-category-header" data-category="unsupervised">
+                        <span class="category-icon">🔍</span>
+                        <span class="category-title">UNSUPERVISED LEARNING</span>
+                        <span class="category-toggle">▼</span>
+                    </div>
+                    <div class="toc-category-content" id="unsupervised-content">
+                        <div class="toc-subcategory">
+                            <div class="toc-subcategory-title">Clustering</div>
+                            <a href="#kmeans" class="toc-link toc-sub">K-means Clustering</a>
+                        </div>
+                        <div class="toc-subcategory">
+                            <div class="toc-subcategory-title">Preprocessing</div>
+                            <a href="#preprocessing" class="toc-link toc-sub">Data Preprocessing</a>
+                            <a href="#loss-functions" class="toc-link toc-sub">Loss Functions</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="toc-category">
+                    <div class="toc-category-header" data-category="reinforcement">
+                        <span class="category-icon">🎮</span>
+                        <span class="category-title">REINFORCEMENT LEARNING</span>
+                        <span class="category-toggle">▼</span>
+                    </div>
+                    <div class="toc-category-content" id="reinforcement-content">
+                        <a href="#rl-intro" class="toc-link toc-sub">RL Introduction</a>
+                        <a href="#q-learning" class="toc-link toc-sub">Q-Learning</a>
+                        <a href="#policy-gradient" class="toc-link toc-sub">Policy Gradient</a>
+                    </div>
+                </div>
+                
+                <a href="#algorithm-comparison" class="toc-link">📊 Algorithm Comparison</a>
             </nav>
         </aside>
 
         <!-- Main Content Area -->
         <main class="content-main">
             <div class="content-header">
-                <h1>Machine Learning: Complete Educational Guide</h1>
-                <p>A comprehensive learning resource for students - from fundamentals to advanced concepts</p>
+                <h1>Machine Learning: The Ultimate Learning Platform</h1>
+                <p style="font-size: 18px; margin-bottom: 16px;">Master ML through <strong style="color: #6aa9ff;">Supervised</strong>, <strong style="color: #7ef0d4;">Unsupervised</strong> &amp; <strong style="color: #ff8c6a;">Reinforcement Learning</strong></p>
+                <p style="font-size: 16px; color: #a9b4c2;">Complete with step-by-step mathematical solutions, interactive visualizations, and real-world examples</p>
             </div>
 
+            <!-- ========================================
+                 INTRODUCTION SECTION
+                 ======================================== -->
             <!-- Section 1: Introduction to Machine Learning -->
             <div class="section" id="intro">
                 <div class="section-header">
@@ -523,6 +600,39 @@ canvas {
                 <div class="section-body">
                     <p>Machine Learning is teaching computers to learn from experience, just like humans do. Instead of programming every rule, we let the computer discover patterns in data and make decisions on its own.</p>
 
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0;">
+                        <div style="background: rgba(106, 169, 255, 0.1); border: 2px solid #6aa9ff; border-radius: 12px; padding: 24px; text-align: center;">
+                            <div style="font-size: 48px; margin-bottom: 12px;">📊</div>
+                            <h4 style="color: #6aa9ff; margin-bottom: 8px;">Supervised Learning</h4>
+                            <p style="font-size: 14px; color: #a9b4c2; margin: 0;">Learning with labeled data - like a teacher providing answers</p>
+                            <div style="margin-top: 12px; font-size: 12px; color: #7ef0d4;">
+                                <div>✓ Regression</div>
+                                <div>✓ Classification</div>
+                                <div>✓ Evaluation</div>
+                            </div>
+                        </div>
+                        <div style="background: rgba(126, 240, 212, 0.1); border: 2px solid #7ef0d4; border-radius: 12px; padding: 24px; text-align: center;">
+                            <div style="font-size: 48px; margin-bottom: 12px;">🔍</div>
+                            <h4 style="color: #7ef0d4; margin-bottom: 8px;">Unsupervised Learning</h4>
+                            <p style="font-size: 14px; color: #a9b4c2; margin: 0;">Finding patterns without labels - discovering hidden structure</p>
+                            <div style="margin-top: 12px; font-size: 12px; color: #7ef0d4;">
+                                <div>✓ Clustering</div>
+                                <div>✓ Dimensionality Reduction</div>
+                                <div>✓ Preprocessing</div>
+                            </div>
+                        </div>
+                        <div style="background: rgba(255, 140, 106, 0.1); border: 2px solid #ff8c6a; border-radius: 12px; padding: 24px; text-align: center;">
+                            <div style="font-size: 48px; margin-bottom: 12px;">🎮</div>
+                            <h4 style="color: #ff8c6a; margin-bottom: 8px;">Reinforcement Learning</h4>
+                            <p style="font-size: 14px; color: #a9b4c2; margin: 0;">Learning through trial &amp; error - maximizing rewards</p>
+                            <div style="margin-top: 12px; font-size: 12px; color: #7ef0d4;">
+                                <div>✓ Q-Learning</div>
+                                <div>✓ Policy Gradient</div>
+                                <div>✓ Applications</div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="info-card">
                         <div class="info-card-title">Key Concepts</div>
                         <ul class="info-card-list">
@@ -571,7 +681,7 @@ canvas {
             <!-- Section 2: Linear Regression -->
             <div class="section" id="linear-regression">
                 <div class="section-header">
-                    <h2>2. Linear Regression</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Regression</span> Linear Regression</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -669,7 +779,7 @@ canvas {
             <!-- Section 3: Gradient Descent -->
             <div class="section" id="gradient-descent">
                 <div class="section-header">
-                    <h2>3. Gradient Descent</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Optimization</span> Gradient Descent</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -764,7 +874,7 @@ canvas {
             <!-- Section 4: Logistic Regression -->
             <div class="section" id="logistic-regression">
                 <div class="section-header">
-                    <h2>4. Logistic Regression</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Classification</span> Logistic Regression</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -906,7 +1016,7 @@ canvas {
             <!-- Section 5: Support Vector Machines (COMPREHENSIVE UPDATE) -->
             <div class="section" id="svm">
                 <div class="section-header">
-                    <h2>5. Support Vector Machines (SVM)</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Classification</span> Support Vector Machines (SVM)</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -1288,7 +1398,7 @@ canvas {
             <!-- Section 6: K-Nearest Neighbors -->
             <div class="section" id="knn">
                 <div class="section-header">
-                    <h2>6. K-Nearest Neighbors (KNN)</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Classification</span> K-Nearest Neighbors (KNN)</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -1412,7 +1522,7 @@ canvas {
 
             <div class="section" id="model-evaluation">
                 <div class="section-header">
-                    <h2>7. Model Evaluation</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Evaluation</span> Model Evaluation</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -1865,7 +1975,7 @@ Actual  Pos     TP     FN
 
             <div class="section" id="cross-validation">
                 <div class="section-header">
-                    <h2>10. Cross-Validation</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Evaluation</span> Cross-Validation</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -2018,7 +2128,7 @@ Actual  Pos     TP     FN
 
             <div class="section" id="preprocessing">
                 <div class="section-header">
-                    <h2>11. Data Preprocessing</h2>
+                    <h2><span class="badge" style="background: rgba(126, 240, 212, 0.3); color: #7ef0d4;">🔍 Unsupervised - Preprocessing</span> Data Preprocessing</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -2556,7 +2666,7 @@ Actual  Pos     TP     FN
             <!-- Section 15: Naive Bayes (COMPREHENSIVE WITH MATH) -->
             <div class="section" id="naive-bayes">
                 <div class="section-header">
-                    <h2>15. Naive Bayes Classification</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised - Classification</span> Naive Bayes Classification</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -2955,7 +3065,7 @@ Actual  Pos     TP     FN
             <!-- Section 16: K-means Clustering -->
             <div class="section" id="kmeans">
                 <div class="section-header">
-                    <h2>16. K-means Clustering</h2>
+                    <h2><span class="badge" style="background: rgba(126, 240, 212, 0.3); color: #7ef0d4;">🔍 Unsupervised - Clustering</span> K-means Clustering</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -3135,7 +3245,7 @@ Actual  Pos     TP     FN
             <!-- Section 17: Decision Trees -->
             <div class="section" id="decision-trees">
                 <div class="section-header">
-                    <h2>16. Decision Trees</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised</span> Decision Trees</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
@@ -3290,10 +3400,503 @@ Actual  Pos     TP     FN
                 </div>
             </div>
 
-            <!-- Section 18: Ensemble Methods -->
+            <!-- REINFORCEMENT LEARNING SECTIONS -->
+            
+            <!-- Section: RL Introduction -->
+            <div class="section" id="rl-intro">
+                <div class="section-header">
+                    <h2><span class="badge" style="background: rgba(255, 140, 106, 0.3); color: #ff8c6a;">🎮 Reinforcement</span> Introduction to Reinforcement Learning</h2>
+                    <button class="section-toggle collapsed">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Reinforcement Learning (RL) is learning by trial and error, just like teaching a dog tricks! The agent takes actions in an environment, receives rewards or punishments, and learns which actions lead to the best outcomes.</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Agent: The learner/decision maker</li>
+                            <li>Environment: The world the agent interacts with</li>
+                            <li>State: Current situation of the agent</li>
+                            <li>Action: What the agent can do</li>
+                            <li>Reward: Feedback signal (positive or negative)</li>
+                            <li>Policy: Strategy the agent follows</li>
+                        </ul>
+                    </div>
+
+                    <h3>The RL Loop</h3>
+                    <ol>
+                        <li><strong>Observe state:</strong> Agent sees current situation</li>
+                        <li><strong>Choose action:</strong> Based on policy π(s)</li>
+                        <li><strong>Execute action:</strong> Interact with environment</li>
+                        <li><strong>Receive reward:</strong> Get feedback r</li>
+                        <li><strong>Transition to new state:</strong> Environment changes to s'</li>
+                        <li><strong>Learn and update:</strong> Improve policy</li>
+                    </ol>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 Key Difference from Supervised Learning</div>
+                        <div class="callout-content">
+                            <strong>Supervised:</strong> "Here's the right answer for each example"<br>
+                            <strong>Reinforcement:</strong> "Try things and I'll tell you if you did well or poorly"<br>
+                            <br>
+                            RL must explore to discover good actions, while supervised learning is given correct answers upfront!
+                        </div>
+                    </div>
+
+                    <h3>Real-World Examples</h3>
+                    <ul>
+                        <li><strong>Game Playing:</strong> AlphaGo learning to play Go by playing millions of games</li>
+                        <li><strong>Robotics:</strong> Robot learning to walk by trying different leg movements</li>
+                        <li><strong>Self-Driving Cars:</strong> Learning to drive safely through experience</li>
+                        <li><strong>Recommendation Systems:</strong> Learning what users like from their interactions</li>
+                        <li><strong>Resource Management:</strong> Optimizing data center cooling to save energy</li>
+                    </ul>
+
+                    <h3>Exploration vs Exploitation</h3>
+                    <p>The fundamental dilemma in RL:</p>
+                    <ul>
+                        <li><strong>Exploration:</strong> Try new actions to discover better rewards</li>
+                        <li><strong>Exploitation:</strong> Use known good actions to maximize reward</li>
+                    </ul>
+                    <p>Balance is key! Too much exploration wastes time on bad actions. Too much exploitation misses better strategies.</p>
+
+                    <div class="formula">
+                        <strong>Reward Signal:</strong>
+                        Total Return = R = r₁ + γr₂ + γ²r₃ + ... = Σ γᵗ rᵗ₊₁
+                        <br><small>where:<br>γ = discount factor (0 ≤ γ ≤ 1)<br>Future rewards are worth less than immediate rewards</small>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section: Q-Learning -->
+            <div class="section" id="q-learning">
+                <div class="section-header">
+                    <h2><span class="badge" style="background: rgba(255, 140, 106, 0.3); color: #ff8c6a;">🎮 Reinforcement</span> Q-Learning</h2>
+                    <button class="section-toggle collapsed">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Q-Learning is a value-based RL algorithm that learns the quality (Q-value) of taking each action in each state. It's model-free and can learn optimal policies even without knowing how the environment works!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Q-value: Expected future reward for action a in state s</li>
+                            <li>Q-table: Stores Q-values for all state-action pairs</li>
+                            <li>Off-policy: Can learn optimal policy while following exploratory policy</li>
+                            <li>Temporal Difference: Learn from each step, not just end of episode</li>
+                        </ul>
+                    </div>
+
+                    <div class="formula">
+                        <strong>Q-Learning Update Rule:</strong>
+                        Q(s, a) ← Q(s, a) + α[r + γ · max Q(s', a') - Q(s, a)]
+                        <br><br>
+                        Breaking it down:<br>
+                        Q(s, a) = Current Q-value estimate<br>
+                        α = Learning rate (e.g., 0.1)<br>
+                        r = Immediate reward received<br>
+                        γ = Discount factor (e.g., 0.9)<br>
+                        max Q(s', a') = Best Q-value in next state<br>
+                        [r + γ · max Q(s', a') - Q(s, a)] = TD error (how wrong we were)
+                    </div>
+
+                    <h3>Step-by-Step Example: Grid World Navigation</h3>
+                    <p><strong>Problem:</strong> Agent navigates 3x3 grid to reach goal at (2,2)</p>
+
+                    <div class="step">
+                        <div class="step-title">STEP 1: Initialize Q-Table</div>
+                        <div class="step-calculation">
+                            States: 9 positions (0,0) to (2,2)<br>
+                            Actions: 4 directions (Up, Down, Left, Right)<br>
+                            <br>
+                            Q-table: 9 × 4 = 36 values, all initialized to 0<br>
+                            <br>
+                            Example entry: Q((1,1), Right) = 0.0
+                        </div>
+                    </div>
+
+                    <div class="step">
+                        <div class="step-title">STEP 2: Episode 1 - Random Exploration</div>
+                        <div class="step-calculation">
+                            Start: s = (0,0)<br>
+                            <br>
+                            <strong>Step 1:</strong> Choose action a = Right (ε-greedy)<br>
+                            Execute: Move to s' = (0,1)<br>
+                            Reward: r = -1 (penalty for each step)<br>
+                            <br>
+                            Update Q((0,0), Right):<br>
+                            Q = 0 + 0.1[-1 + 0.9 × max(0, 0, 0, 0) - 0]<br>
+                            Q = 0 + 0.1[-1]<br>
+                            Q((0,0), Right) = <strong>-0.1</strong> ✓<br>
+                            <br>
+                            <strong>Step 2:</strong> s = (0,1), action = Down<br>
+                            s' = (1,1), r = -1<br>
+                            Q((0,1), Down) = 0 + 0.1[-1 + 0] = <strong>-0.1</strong><br>
+                            <br>
+                            <strong>Step 3:</strong> s = (1,1), action = Right<br>
+                            s' = (1,2), r = -1<br>
+                            Q((1,1), Right) = <strong>-0.1</strong><br>
+                            <br>
+                            <strong>Step 4:</strong> s = (1,2), action = Down<br>
+                            s' = (2,2) ← <span style="color: #7ef0d4;">GOAL!</span><br>
+                            r = +100 (big reward!)<br>
+                            <br>
+                            Q((1,2), Down) = 0 + 0.1[100 + 0]<br>
+                            Q((1,2), Down) = <strong style="color: #7ef0d4;">10.0</strong> ✓✓✓
+                        </div>
+                    </div>
+
+                    <div class="step">
+                        <div class="step-title">STEP 3: Episode 2 - Learning Propagates Backward</div>
+                        <div class="step-calculation">
+                            Path: (0,0) → (0,1) → (1,1) → (1,2) → (2,2)<br>
+                            <br>
+                            At (1,1), choosing Right:<br>
+                            Q((1,1), Right) = -0.1 + 0.1[-1 + 0.9 × 10.0 - (-0.1)]<br>
+                            = -0.1 + 0.1[-1 + 9.0 + 0.1]<br>
+                            = -0.1 + 0.1[8.1]<br>
+                            = -0.1 + 0.81<br>
+                            Q((1,1), Right) = <strong style="color: #7ef0d4;">0.71</strong> ✓<br>
+                            <br>
+                            <span style="color: #7ef0d4;">→ The value of being near the goal propagates backward!</span>
+                        </div>
+                    </div>
+
+                    <div class="callout success">
+                        <div class="callout-title">✅ After Many Episodes</div>
+                        <div class="callout-content">
+                            The Q-table converges to optimal values:<br>
+                            <br>
+                            Q((0,0), Right) ≈ 7.3<br>
+                            Q((1,1), Right) ≈ 8.1<br>
+                            Q((1,2), Down) ≈ 9.0<br>
+                            <br>
+                            <strong>Optimal Policy:</strong> Always move toward (2,2) via shortest path!<br>
+                            Agent has learned to navigate perfectly through trial and error.
+                        </div>
+                    </div>
+
+                    <h3>ε-Greedy Policy</h3>
+                    <div class="formula">
+                        <strong>Action Selection:</strong><br>
+                        With probability ε: Choose random action (explore)<br>
+                        With probability 1-ε: Choose argmax Q(s,a) (exploit)<br>
+                        <br>
+                        Common: Start ε=1.0, decay to ε=0.01 over time
+                    </div>
+
+                    <h3>Advantages</h3>
+                    <ul>
+                        <li>✓ Simple to implement</li>
+                        <li>✓ Guaranteed to converge to optimal policy</li>
+                        <li>✓ Model-free (doesn't need environment model)</li>
+                        <li>✓ Off-policy (learn from exploratory behavior)</li>
+                    </ul>
+
+                    <h3>Disadvantages</h3>
+                    <ul>
+                        <li>✗ Doesn't scale to large/continuous state spaces</li>
+                        <li>✗ Slow convergence in complex environments</li>
+                        <li>✗ Requires discrete actions</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Section: Policy Gradient -->
+            <div class="section" id="policy-gradient">
+                <div class="section-header">
+                    <h2><span class="badge" style="background: rgba(255, 140, 106, 0.3); color: #ff8c6a;">🎮 Reinforcement</span> Policy Gradient Methods</h2>
+                    <button class="section-toggle collapsed">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Policy Gradient methods directly optimize the policy (action selection strategy) instead of learning value functions. They're powerful for continuous action spaces and stochastic policies!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Direct policy optimization: Learn πᵧ(a|s) directly</li>
+                            <li>Parameterized policy: Use neural network with weights θ</li>
+                            <li>Gradient ascent: Move parameters to maximize expected reward</li>
+                            <li>Works with continuous actions: Can output action distributions</li>
+                        </ul>
+                    </div>
+
+                    <h3>Policy vs Value-Based Methods</h3>
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>Aspect</th><th>Value-Based (Q-Learning)</th><th>Policy-Based</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>What it learns</td><td>Q(s,a) values</td><td>π(a|s) policy directly</td></tr>
+                            <tr><td>Action selection</td><td>argmax Q(s,a)</td><td>Sample from π(a|s)</td></tr>
+                            <tr><td>Continuous actions</td><td>Difficult</td><td>Natural</td></tr>
+                            <tr><td>Stochastic policy</td><td>Indirect</td><td>Direct</td></tr>
+                            <tr><td>Convergence</td><td>Can be unstable</td><td>Smoother</td></tr>
+                        </tbody>
+                    </table>
+
+                    <div class="formula">
+                        <strong>Policy Gradient Theorem:</strong>
+                        ∇ᵧ J(θ) = Eᵧ[∇ᵧ log πᵧ(a|s) · Qᵧ(s,a)]
+                        <br><br>
+                        Practical form (REINFORCE):<br>
+                        ∇ᵧ J(θ) ≈ ∇ᵧ log πᵧ(aᵗ|sᵗ) · Gᵗ<br>
+                        <br>
+                        where:<br>
+                        Gᵗ = Total return from time t onward<br>
+                        πᵧ(a|s) = Probability of action a in state s<br>
+                        θ = Policy parameters (neural network weights)
+                    </div>
+
+                    <h3>REINFORCE Algorithm (Monte Carlo Policy Gradient)</h3>
+                    <div class="step">
+                        <div class="step-title">Algorithm Steps</div>
+                        <div class="step-calculation">
+                            <strong>1. Initialize:</strong> Random policy parameters θ<br>
+                            <br>
+                            <strong>2. For each episode:</strong><br>
+                            &nbsp;&nbsp;&nbsp;a. Generate trajectory: s₀, a₀, r₁, s₁, a₁, r₂, ..., sₜ<br>
+                            &nbsp;&nbsp;&nbsp;b. For each time step t:<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Calculate return: Gᵗ = rᵗ₊₁ + γrᵗ₊₂ + γ²rᵗ₊₃ + ...<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Update: θ ← θ + α · Gᵗ · ∇ᵧ log πᵧ(aᵗ|sᵗ)<br>
+                            <br>
+                            <strong>3. Repeat</strong> until policy converges
+                        </div>
+                    </div>
+
+                    <h3>Example: CartPole Balancing</h3>
+                    <p><strong>Problem:</strong> Balance a pole on a cart by moving left or right</p>
+
+                    <div class="step">
+                        <div class="step-title">Episode Example</div>
+                        <div class="step-calculation">
+                            State: s = [cart_pos, cart_vel, pole_angle, pole_vel]<br>
+                            Actions: a ∈ {Left, Right}<br>
+                            <br>
+                            <strong>Time t=0:</strong><br>
+                            s₀ = [0.0, 0.0, 0.1, 0.0] (pole leaning right)<br>
+                            π(Left|s₀) = 0.3, π(Right|s₀) = 0.7<br>
+                            Sample action: a₀ = Right<br>
+                            Reward: r₁ = +1 (pole still balanced)<br>
+                            <br>
+                            <strong>Time t=1:</strong><br>
+                            s₁ = [0.05, 0.1, 0.08, -0.05]<br>
+                            Action: a₁ = Right<br>
+                            r₂ = +1<br>
+                            <br>
+                            ... episode continues for T=200 steps ...<br>
+                            <br>
+                            <strong>Total return:</strong> G = 200 (balanced entire episode!)<br>
+                            <br>
+                            <strong>Update policy:</strong><br>
+                            For each (sᵗ, aᵗ) in trajectory:<br>
+                            θ ← θ + 0.01 × 200 × ∇ log π(aᵗ|sᵗ)<br>
+                            <br>
+                            → Increase probability of all actions taken in this successful episode!
+                        </div>
+                    </div>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 Why It Works</div>
+                        <div class="callout-content">
+                            <strong>Good episode (high G):</strong> Increase probability of actions taken<br>
+                            <strong>Bad episode (low G):</strong> Decrease probability of actions taken<br>
+                            <br>
+                            Over many episodes, the policy learns which actions lead to better outcomes!
+                        </div>
+                    </div>
+
+                    <h3>Advantages</h3>
+                    <ul>
+                        <li>✓ Works with continuous action spaces</li>
+                        <li>✓ Can learn stochastic policies</li>
+                        <li>✓ Better convergence properties</li>
+                        <li>✓ Effective in high-dimensional spaces</li>
+                    </ul>
+
+                    <h3>Disadvantages</h3>
+                    <ul>
+                        <li>✗ High variance in gradient estimates</li>
+                        <li>✗ Sample inefficient (needs many episodes)</li>
+                        <li>✗ Can get stuck in local optima</li>
+                        <li>✗ Sensitive to learning rate</li>
+                    </ul>
+
+                    <div class="callout success">
+                        <div class="callout-title">✅ Modern Improvements</div>
+                        <div class="callout-content">
+                            <strong>Actor-Critic:</strong> Combine policy gradient with value function to reduce variance<br>
+                            <strong>PPO (Proximal Policy Optimization):</strong> Constrain policy updates for stability<br>
+                            <strong>TRPO (Trust Region):</strong> Guarantee monotonic improvement<br>
+                            <br>
+                            These advances make policy gradients practical for complex tasks like robot control and game playing!
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section 18: Algorithm Comparison Tool -->
+            <div class="section" id="algorithm-comparison">
+                <div class="section-header">
+                    <h2><span class="badge" style="background: rgba(126, 240, 212, 0.3); color: #7ef0d4;">🔄 Comparison</span> Algorithm Comparison Tool</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Compare machine learning algorithms side-by-side to choose the best one for your problem!</p>
+
+                    <!-- Step 1: Select Category -->
+                    <div class="info-card" style="background: var(--color-bg-1);">
+                        <h3 style="margin-bottom: 16px; color: var(--color-text);">Step 1: Select Learning Category</h3>
+                        <div class="radio-group">
+                            <label><input type="radio" name="category" value="all" checked> Show All</label>
+                            <label><input type="radio" name="category" value="supervised"> Supervised Learning</label>
+                            <label><input type="radio" name="category" value="unsupervised"> Unsupervised Learning</label>
+                        </div>
+                    </div>
+
+                    <!-- Step 2: Select Algorithms -->
+                    <div class="info-card" style="background: var(--color-bg-2); margin-top: 24px;">
+                        <h3 style="margin-bottom: 16px; color: var(--color-text);">Step 2: Select Algorithms to Compare (2-5)</h3>
+                        <div id="algorithm-checkboxes" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
+                            <!-- Populated by JavaScript -->
+                        </div>
+                        <p id="selection-count" style="margin-top: 12px; color: var(--color-text-secondary); font-size: 14px;">Selected: 0 algorithms</p>
+                    </div>
+
+                    <!-- Step 3: Compare Button -->
+                    <div style="text-align: center; margin: 32px 0;">
+                        <button class="btn btn--primary" id="compare-btn" style="padding: 14px 48px; font-size: 16px;" disabled>Compare Algorithms</button>
+                    </div>
+
+                    <!-- Comparison Results Container -->
+                    <div id="comparison-results" style="display: none;">
+                        <!-- View Selector -->
+                        <div style="display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center;">
+                            <button class="btn btn--secondary view-btn active" data-view="table">📊 Table View</button>
+                            <button class="btn btn--secondary view-btn" data-view="radar">🎯 Radar Chart</button>
+                            <button class="btn btn--secondary view-btn" data-view="heatmap">🔥 Heatmap</button>
+                            <button class="btn btn--secondary view-btn" data-view="decision">🌳 Decision Tree</button>
+                            <button class="btn btn--secondary view-btn" data-view="matrix">📋 Use Case Matrix</button>
+                        </div>
+
+                        <!-- View: Table -->
+                        <div class="comparison-view" id="view-table">
+                            <h3 style="margin-bottom: 20px; text-align: center;">Side-by-Side Comparison</h3>
+                            <div style="overflow-x: auto;">
+                                <table class="data-table" id="comparison-table">
+                                    <!-- Populated by JavaScript -->
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- View: Radar Chart -->
+                        <div class="comparison-view" id="view-radar" style="display: none;">
+                            <h3 style="margin-bottom: 20px; text-align: center;">Visual Performance Comparison</h3>
+                            <p style="text-align: center; color: var(--color-text-secondary); margin-bottom: 16px;">Interactive radar chart - works in all modern browsers</p>
+                            <div class="figure">
+                                <div class="figure-placeholder" style="height: 500px;">
+                                    <canvas id="radar-comparison-canvas"></canvas>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- View: Heatmap -->
+                        <div class="comparison-view" id="view-heatmap" style="display: none;">
+                            <!-- HTML table-based heatmap - works in ALL browsers (Chrome, Firefox, Safari, Edge, Mobile) -->
+                            <p style="text-align: center; color: var(--color-text-secondary); margin-bottom: 16px;">✓ HTML table-based visualization - 100% browser compatible</p>
+                        </div>
+
+                        <!-- View: Decision Tree -->
+                        <div class="comparison-view" id="view-decision" style="display: none;">
+                            <h3 style="margin-bottom: 20px; text-align: center;">When to Use Which Algorithm?</h3>
+                            <div style="background: var(--color-surface); padding: 32px; border-radius: 12px; border: 1px solid var(--color-border);">
+                                <pre style="font-family: monospace; font-size: 13px; line-height: 1.8; color: var(--color-text); background: transparent; border: none; padding: 0; margin: 0; white-space: pre-wrap;">What's your use case?
+
+├─ I have <strong style="color: #7ef0d4;">LABELED</strong> data
+│  ├─ Predict <strong style="color: #6aa9ff;">NUMBERS</strong> (Regression)
+│  │  ├─ Linear relationship? → <strong style="color: #7ef0d4;">Linear Regression</strong>
+│  │  └─ Complex patterns? → <strong style="color: #7ef0d4;">Random Forest / XGBoost</strong>
+│  │
+│  ├─ Predict <strong style="color: #6aa9ff;">CATEGORIES</strong> (Classification)
+│  │  ├─ Want interpretability? → <strong style="color: #7ef0d4;">Decision Trees / Naive Bayes</strong>
+│  │  ├─ Want best accuracy? → <strong style="color: #7ef0d4;">SVM / Random Forest</strong>
+│  │  ├─ Want speed? → <strong style="color: #7ef0d4;">Logistic Regression / Naive Bayes</strong>
+│  │  ├─ Have few samples? → <strong style="color: #7ef0d4;">Naive Bayes</strong>
+│  │  └─ Local patterns? → <strong style="color: #7ef0d4;">KNN</strong>
+│
+├─ I have <strong style="color: #ff8c6a;">UNLABELED</strong> data
+│  ├─ Want to group similar items? → <strong style="color: #7ef0d4;">K-means</strong>
+│  ├─ Want to reduce dimensions? → <strong style="color: #7ef0d4;">PCA</strong>
+│  └─ Unknown number of groups? → <strong style="color: #7ef0d4;">DBSCAN</strong>
+│
+└─ I want to <strong style="color: #ffb490;">LEARN from experience</strong>
+   └─ Use <strong style="color: #7ef0d4;">Reinforcement Learning</strong></pre>
+                            </div>
+                        </div>
+
+                        <!-- View: Use Case Matrix -->
+                        <div class="comparison-view" id="view-matrix" style="display: none;">
+                            <h3 style="margin-bottom: 20px; text-align: center;">Use Case Suitability Matrix</h3>
+                            <div style="overflow-x: auto;">
+                                <table class="data-table" id="matrix-table">
+                                    <!-- Populated by JavaScript -->
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Detailed Comparison Cards -->
+                        <div id="detailed-cards" style="margin-top: 48px;">
+                            <!-- Populated by JavaScript -->
+                        </div>
+                    </div>
+
+                    <!-- Algorithm Quiz -->
+                    <div class="info-card" style="background: var(--color-bg-5); margin-top: 48px;">
+                        <h3 style="margin-bottom: 20px; color: var(--color-text);">🎯 Not Sure Which Algorithm? Take the Quiz!</h3>
+                        <div id="quiz-container">
+                            <div class="quiz-question" id="quiz-q1">
+                                <p style="font-weight: 600; margin-bottom: 12px;">Question 1: Do you have labeled data?</p>
+                                <div class="radio-group">
+                                    <label><input type="radio" name="q1" value="yes"> Yes</label>
+                                    <label><input type="radio" name="q1" value="no"> No</label>
+                                </div>
+                            </div>
+                            <div class="quiz-question" id="quiz-q2" style="display: none; margin-top: 20px;">
+                                <p style="font-weight: 600; margin-bottom: 12px;">Question 2: What do you want to predict?</p>
+                                <div class="radio-group">
+                                    <label><input type="radio" name="q2" value="numbers"> Numbers (Regression)</label>
+                                    <label><input type="radio" name="q2" value="categories"> Categories (Classification)</label>
+                                    <label><input type="radio" name="q2" value="groups"> Groups (Clustering)</label>
+                                </div>
+                            </div>
+                            <div class="quiz-question" id="quiz-q3" style="display: none; margin-top: 20px;">
+                                <p style="font-weight: 600; margin-bottom: 12px;">Question 3: How much training data do you have?</p>
+                                <div class="radio-group">
+                                    <label><input type="radio" name="q3" value="little"> Very Little (&lt;100 samples)</label>
+                                    <label><input type="radio" name="q3" value="some"> Some (100-10k samples)</label>
+                                    <label><input type="radio" name="q3" value="lots"> Lots (&gt;10k samples)</label>
+                                </div>
+                            </div>
+                            <div class="quiz-question" id="quiz-q4" style="display: none; margin-top: 20px;">
+                                <p style="font-weight: 600; margin-bottom: 12px;">Question 4: Is interpretability important?</p>
+                                <div class="radio-group">
+                                    <label><input type="radio" name="q4" value="very"> Very Important</label>
+                                    <label><input type="radio" name="q4" value="somewhat"> Somewhat Important</label>
+                                    <label><input type="radio" name="q4" value="not"> Not Important</label>
+                                </div>
+                            </div>
+                            <div id="quiz-result" style="display: none; margin-top: 24px; padding: 20px; background: var(--color-bg-3); border-radius: 8px; border-left: 4px solid var(--color-success);">
+                                <!-- Result populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section 19: Ensemble Methods -->
             <div class="section" id="ensemble-methods">
                 <div class="section-header">
-                    <h2>18. Ensemble Methods</h2>
+                    <h2><span class="badge" style="background: rgba(106, 169, 255, 0.3); color: #6aa9ff;">📊 Supervised</span> Ensemble Methods</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">

ml_complete-all-topics/style.css

@@ -977,6 +977,103 @@ html, body {
   color: var(--color-btn-primary-text);
 }
 
+/* TOC Category Styles */
+.toc-category {
+  margin-bottom: var(--space-8);
+}
+
+.toc-category-header {
+  display: flex;
+  align-items: center;
+  padding: var(--space-12) var(--space-16);
+  background-color: rgba(var(--color-teal-500-rgb), 0.15);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+  margin-bottom: var(--space-8);
+}
+
+.toc-category-header:hover {
+  background-color: rgba(var(--color-teal-500-rgb), 0.25);
+}
+
+.toc-category-header[data-category="supervised"] {
+  background-color: rgba(106, 169, 255, 0.15);
+}
+
+.toc-category-header[data-category="supervised"]:hover {
+  background-color: rgba(106, 169, 255, 0.25);
+}
+
+.toc-category-header[data-category="unsupervised"] {
+  background-color: rgba(126, 240, 212, 0.15);
+}
+
+.toc-category-header[data-category="unsupervised"]:hover {
+  background-color: rgba(126, 240, 212, 0.25);
+}
+
+.toc-category-header[data-category="reinforcement"] {
+  background-color: rgba(255, 140, 106, 0.15);
+}
+
+.toc-category-header[data-category="reinforcement"]:hover {
+  background-color: rgba(255, 140, 106, 0.25);
+}
+
+.category-icon {
+  font-size: var(--font-size-xl);
+  margin-right: var(--space-8);
+}
+
+.category-title {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  letter-spacing: 0.5px;
+}
+
+.category-toggle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  transition: transform var(--duration-normal) var(--ease-standard);
+}
+
+.category-toggle.collapsed {
+  transform: rotate(-90deg);
+}
+
+.toc-category-content {
+  padding-left: var(--space-16);
+  max-height: 1000px;
+  overflow: hidden;
+  transition: max-height var(--duration-normal) var(--ease-standard);
+}
+
+.toc-category-content.collapsed {
+  max-height: 0;
+}
+
+.toc-subcategory {
+  margin-bottom: var(--space-12);
+}
+
+.toc-subcategory-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
+}
+
+.toc-link.toc-sub {
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
+}
+
 .nav-icon {
   font-size: var(--font-size-xl);
   margin-right: var(--space-12);