Upload app.js

app.js

@@ -1,471 +1,513 @@
-// Application data
-const appData = {
-  "lifecycleStages": [
+// Дані про робочий процес науки про дані
+const workflowData = {
+  "title": "Робочий процес науки про дані",
+  "introduction": "Кожен проект з науки про дані включає кілька важливих етапів. Ця інтерактивна панель допоможе вам зрозуміти кожен етап робочого процесу та його важливість.",
+  "steps": [
     {
       "id": 1,
-      "name": "Problem Formulation",
-      "icon": "💡",
-      "description": "Transform real-world problems into data-driven questions",
-      "example": "Healthcare: Predicting patient recovery time based on medical history",
-      "keyPoints": ["Define business objectives", "Identify success metrics", "Translate to ML problem", "Set constraints and requirements"],
-      "status": "completed"
+      "title": "Формулювання проблеми",
+      "shortTitle": "Проблема",
+      "description": "Кожен проект з науки про дані починається з визначення проблеми. Незалежно від того, чи це прогнозування результатів пацієнтів або оптимізація бізнес-операцій, переклад реальної проблеми у питання, що базується на даних, є вирішальним.",
+      "keyPoints": [
+        "Визначення конкретної проблеми, яку потрібно вирішити",
+        "Формулювання питань, на які потрібно відповісти за допомогою даних",
+        "Вибір підходу до вирішення (машинне навчання, статистичний аналіз тощо)"
+      ],
+      "example": "У галузі охорони здоров'я, прогнозування часу відновлення пацієнта на основі медичної історії. Формулювання проблеми: лікарям потрібен інструмент для прогнозування тривалості відновлення пацієнта після лікування.",
+      "tips": [
+        "Завжди консультуйтеся з експертами в предметній області",
+        "Переконайтеся, що проблема може бути вирішена за допомогою даних",
+        "Визначте чіткі критерії успіху"
+      ],
+      "quiz": [
+        {
+          "question": "Що є першим кроком у проекті науки про дані?",
+          "options": [
+            "Збір даних",
+            "Визначення проблеми",
+            "Побудова моделі",
+            "Оцінка результатів"
+          ],
+          "answer": 1
+        }
+      ]
     },
     {
-      "id": 2, 
-      "name": "Data Collection",
-      "icon": "📊",
-      "description": "Gather relevant data from reliable sources",
-      "sources": ["Clinical databases", "IoT sensors", "Public datasets", "APIs"],
-      "compliance": {"HIPAA": true, "GDPR": true, "SOX": false},
-      "status": "completed"
+      "id": 2,
+      "title": "Збір даних",
+      "shortTitle": "Дані",
+      "description": "Наступним кроком є збір відповідних даних з надійних джерел. Це може включати бази даних, публічні набори даних або дані, зібрані через сенсори та додатки.",
+      "keyPoints": [
+        "Визначення потрібних даних для вирішення проблеми",
+        "Ідентифікація джерел даних",
+        "Розуміння регуляторних вимог та етичних міркувань"
+      ],
+      "example": "Збір клінічних записів з баз даних охорони здоров'я для аналізу часу відновлення пацієнтів.",
+      "tips": [
+        "Переконайтеся, що ви маєте дозвіл на використання даних",
+        "Перевірте якість та надійність джерел даних",
+        "Зберігайте дані безпечно та відповідно до норм"
+      ],
+      "quiz": [
+        {
+          "question": "Що Ендрю Нг назвав 'їжею для ШІ'?",
+          "options": [
+            "Алгоритми",
+            "Дані",
+            "Обчислювальні потужності",
+            "Програмний код"
+          ],
+          "answer": 1
+        }
+      ]
     },
     {
       "id": 3,
-      "name": "Data Preprocessing", 
-      "icon": "🔧",
-      "description": "Clean and standardize data for analysis",
-      "metrics": {"missingValues": 12, "normalization": "StandardScaler", "categoricalEncoding": "OneHot", "outliers": 8},
-      "status": "in-progress"
+      "title": "Підготовка даних",
+      "shortTitle": "Підготовка",
+      "description": "Сирі дані часто містять невідповідності, відсутні значення або викиди. Підготовка даних забезпечує, що дані чисті та стандартизовані.",
+      "keyPoints": [
+        "Очищення даних від невідповідностей",
+        "Обробка відсутніх значень",
+        "Нормалізація та стандартизація даних"
+      ],
+      "example": "Очищення клінічних даних для забезпечення послідовності в аналізі.",
+      "tips": [
+        "Документуйте всі зміни, внесені до вихідних даних",
+        "Використовуйте автоматизовані інструменти для очищення великих наборів даних",
+        "Перевірте дані після очищення, щоб переконатися, що вони все ще відображають реальність"
+      ],
+      "quiz": [
+        {
+          "question": "Які проблеми вирішує етап підготовки даних?",
+          "options": [
+            "Невідповідності, відсутні значення, викиди",
+            "Формулювання проблеми та вибір алгоритму",
+            "Вибір метрик оцінки",
+            "Розгортання моделі в виробництво"
+          ],
+          "answer": 0
+        }
+      ]
     },
     {
       "id": 4,
-      "name": "Modeling",
-      "icon": "🤖", 
-      "description": "Select and apply appropriate algorithms",
-      "modelTypes": ["Classification", "Regression", "Clustering"],
-      "algorithms": ["Random Forest", "Logistic Regression", "SVM", "Neural Networks"],
-      "status": "pending"
+      "title": "Моделювання",
+      "shortTitle": "Модель",
+      "description": "Вибір правильного алгоритму є критичним. В залежності від проблеми, ми можемо використовувати регресію, класифікацію або кластеризацію, тощо.",
+      "keyPoints": [
+        "Вибір алгоритму на основі типу проблеми",
+        "Оцінка доступних даних (кількість та якість)",
+        "Врахування обчислювальних ресурсів та часу навчання"
+      ],
+      "example": "Вибір алгоритму машинного навчання для прогнозування часу відновлення пацієнта на основі історичних даних.",
+      "tips": [
+        "Почніть з простих моделей перед переходом до складніших",
+        "Розділіть дані на тренувальні та тестові набори",
+        "Експериментуйте з різними алгоритмами для порівняння результатів"
+      ],
+      "quiz": [
+        {
+          "question": "Які фактори слід враховувати при виборі алгоритму?",
+          "options": [
+            "Тільки тип проблеми",
+            "Тільки обчислювальні ресурси",
+            "Тип проблеми, доступні дані та обчислювальні ресурси",
+            "Тільки розмір набору даних"
+          ],
+          "answer": 2
+        }
+      ]
     },
     {
       "id": 5,
-      "name": "Evaluation",
-      "icon": "📈",
-      "description": "Assess model performance and reliability", 
-      "metrics": {"accuracy": 0.94, "precision": 0.91, "recall": 0.89, "f1Score": 0.90},
-      "status": "pending"
+      "title": "Оцінювання",
+      "shortTitle": "Оцінка",
+      "description": "Після навчання, оцінка моделі є важливою для забезпечення точності та надійності.",
+      "keyPoints": [
+        "Вибір відповідних метрик для оцінки моделі",
+        "Порівняння результатів з бізнес-цілями",
+        "Виявлення областей для покращення"
+      ],
+      "example": "Оцінка моделі для виявлення ранніх симптомів захворювання за допомогою метрик точності, чутливості та специфічності.",
+      "tips": [
+        "Використовуйте метрики, що відповідають бізнес-цілям",
+        "Проведіть крос-валідацію для надійності оцінки",
+        "Порівняйте результати з базовими моделями"
+      ],
+      "quiz": [
+        {
+          "question": "Які метрики можуть використовуватися для оцінки моделі?",
+          "options": [
+            "Тільки точність (accuracy)",
+            "Точність, повнота, F1-оцінка та інші",
+            "Тільки час навчання",
+            "Тільки розмір моделі"
+          ],
+          "answer": 1
+        }
+      ]
     },
     {
       "id": 6,
-      "name": "Deployment",
-      "icon": "🚀",
-      "description": "Deploy model to production environment",
-      "pipeline": {"docker": true, "kubernetes": true, "cicd": "Jenkins", "api": "REST"},
-      "status": "pending"
+      "title": "Розгортання",
+      "shortTitle": "Розгортання",
+      "description": "Розгортання — це процес інтеграції навченої моделі в виробниче середовище, роблячи її доступною для реального використання. Цей крок є вирішальним для забезпечення того, щоб прогнози моделі були постійно доступні та надійні для кінцевих користувачів або автоматизованих систем.",
+      "keyPoints": [
+        "Контейнеризація моделі для портативності",
+        "Створення API для доступу до моделі",
+        "Налаштування безперервної інтеграції та доставки (CI/CD)",
+        "Забезпечення масштабованості та доступності"
+      ],
+      "example": "Розгортання моделі прогнозування часу відновлення пацієнта в хмарній платформі (AWS, Azure) та інтеграція з системою електронних медичних карт через API.",
+      "tips": [
+        "Тестуйте модель в середовищі, подібному до виробничого",
+        "Впровадіть моніторинг для відстеження продуктивності",
+        "Плануйте для масштабування від початку"
+      ],
+      "quiz": [
+        {
+          "question": "Що таке контейнеризація в контексті розгортання моделі?",
+          "options": [
+            "Упаковка моделі в фізичний контейнер для транспортування",
+            "Упаковка моделі, залежностей і середовища в програмний контейнер (як Docker)",
+            "Обмеження доступу до моделі",
+            "Зменшення розміру моделі"
+          ],
+          "answer": 1
+        }
+      ]
     },
     {
       "id": 7,
-      "name": "Monitoring & Maintenance", 
-      "icon": "🔍",
-      "description": "Monitor performance and maintain model accuracy",
-      "alerts": {"dataDrift": false, "accuracyDecay": 2.1, "retrainingDue": "2025-07-15"},
-      "status": "pending"
+      "title": "Моніторинг та підтримка",
+      "shortTitle": "Моніторинг",
+      "description": "Моделі потребують постійного моніторингу, щоб залишатися точними та ефективними. Зміни в розподілі даних можуть погіршити продуктивність з часом.",
+      "keyPoints": [
+        "Відстеження продуктивності моделі в реальному часі",
+        "Виявлення зміщення даних (data drift)",
+        "Регулярне перенавчання моделі з новими даними",
+        "Автоматизація розгортання оновлених моделей"
+      ],
+      "example": "Використання інструментів моніторингу, таких як Prometheus і Grafana, для відстеження точності моделі прогнозування часу відновлення пацієнта та виявлення будь-яких змін у розподілі даних.",
+      "tips": [
+        "Встановіть сповіщення для виявлення зниження продуктивності",
+        "Плануйте регулярні огляди моделі",
+        "Документуйте всі зміни та оновлення"
+      ],
+      "quiz": [
+        {
+          "question": "Чому важливий моніторинг моделі після розгортання?",
+          "options": [
+            "Він не важливий, якщо модель добре навчена",
+            "Тільки для задоволення регуляторних вимог",
+            "Для виявлення зміщення даних та підтримки продуктивності моделі",
+            "Тільки для економії обчислювальних ресурсів"
+          ],
+          "answer": 2
+        }
+      ]
     }
-  ],
-  "industries": [
-    {"name": "Healthcare", "examples": ["Patient recovery prediction", "Disease diagnosis", "Drug discovery"]},
-    {"name": "Retail", "examples": ["Customer segmentation", "Demand forecasting", "Price optimization"]}, 
-    {"name": "Finance", "examples": ["Fraud detection", "Credit scoring", "Algorithmic trading"]},
-    {"name": "Manufacturing", "examples": ["Predictive maintenance", "Quality control", "Supply chain optimization"]},
-    {"name": "Education", "examples": ["Student performance prediction", "Personalized learning", "Dropout prevention"]}
-  ],
-  "modelTypes": [
-    {"name": "Logistic Regression", "type": "Classification", "accuracy": 0.85},
-    {"name": "Random Forest", "type": "Classification", "accuracy": 0.92}, 
-    {"name": "SVM", "type": "Classification", "accuracy": 0.88},
-    {"name": "Neural Networks", "type": "Classification", "accuracy": 0.94},
-    {"name": "Linear Regression", "type": "Regression", "rmse": 0.23},
-    {"name": "K-Means", "type": "Clustering", "silhouette": 0.67}
-  ],
-  "complianceRequirements": {
-    "Healthcare": ["HIPAA", "FDA", "HITECH"],
-    "Finance": ["SOX", "GDPR", "PCI-DSS"], 
-    "Retail": ["GDPR", "CCPA"],
-    "Manufacturing": ["ISO 27001", "GDPR"],
-    "Education": ["FERPA", "COPPA"]
-  }
+  ]
 };
 
-// Global state
-let currentStage = null;
-let currentFilters = {
-  industry: '',
-  model: '',
-  version: ''
+// Глобальні змінні стану
+let currentStepId = null;
+let visitedSteps = new Set();
+let selectedQuizOption = null;
+let quizAnswered = false;
+
+// Іконки для етапів
+const stepIcons = {
+  1: '❓',
+  2: '📊',
+  3: '🔧',
+  4: '🤖',
+  5: '📈',
+  6: '🚀',
+  7: '👁️'
 };
-let evaluationChart = null;
 
-// Initialize the application
+// Ініціалізація додатка
 document.addEventListener('DOMContentLoaded', function() {
-  initializeTimeline();
-  initializeFilters();
-  updateProgressSummary();
+  initializeApp();
+  setupEventListeners();
 });
 
-// Initialize timeline with stages
-function initializeTimeline() {
-  const timelineStages = document.getElementById('timelineStages');
+function initializeApp() {
+  // Встановлення заголовку та вступу
+  document.getElementById('introText').textContent = workflowData.introduction;
   
-  appData.lifecycleStages.forEach((stage, index) => {
-    const stageElement = createTimelineStage(stage, index);
-    timelineStages.appendChild(stageElement);
-  });
+  // Рендер бічної панелі
+  renderSidebar();
+  
+  // Рендер візуалізації робочого процесу
+  renderWorkflowDiagram();
+  
+  // Оновлення прогресу
+  updateProgress();
+  
+  // Приховати деталі етапу спочатку
+  document.getElementById('stepDetailsSection').classList.remove('active');
 }
 
-// Create timeline stage element
-function createTimelineStage(stage, index) {
-  const stageDiv = document.createElement('div');
-  stageDiv.className = `timeline-stage timeline-stage--${index % 2 === 0 ? 'left' : 'right'} timeline-stage--${stage.status}`;
-  stageDiv.setAttribute('data-stage-id', stage.id);
-  
-  stageDiv.innerHTML = `
-    <div class="timeline-stage__card">
-      <h3 class="timeline-stage__title">${stage.name}</h3>
-      <p class="timeline-stage__description">${stage.description}</p>
-      <span class="timeline-stage__status status--${stage.status}">${stage.status.replace('-', ' ')}</span>
-    </div>
-    <div class="timeline-stage__node">${stage.icon}</div>
-  `;
-  
-  stageDiv.addEventListener('click', () => selectStage(stage.id));
-  
-  return stageDiv;
+function setupEventListeners() {
+  // Кнопки навігації
+  document.getElementById('nextStepBtn').addEventListener('click', () => navigateStep(1));
+  document.getElementById('prevStepBtn').addEventListener('click', () => navigateStep(-1));
+  
+  // Кнопка скидання прогресу
+  document.getElementById('resetProgressBtn').addEventListener('click', resetProgress);
+  
+  // Кнопка перевірки відповіді
+  document.getElementById('checkAnswerBtn').addEventListener('click', checkQuizAnswer);
 }
 
-// Initialize filters
-function initializeFilters() {
-  const industryFilter = document.getElementById('industryFilter');
-  const modelFilter = document.getElementById('modelFilter');
-  const versionFilter = document.getElementById('versionFilter');
-  
-  industryFilter.addEventListener('change', (e) => {
-    currentFilters.industry = e.target.value;
-    applyFilters();
-  });
-  
-  modelFilter.addEventListener('change', (e) => {
-    currentFilters.model = e.target.value;
-    applyFilters();
-  });
+function renderSidebar() {
+  const sidebarList = document.getElementById('sidebarStepsList');
+  sidebarList.innerHTML = '';
   
-  versionFilter.addEventListener('change', (e) => {
-    currentFilters.version = e.target.value;
-    applyFilters();
+  workflowData.steps.forEach(step => {
+    const listItem = document.createElement('li');
+    
+    const link = document.createElement('a');
+    link.href = '#';
+    link.className = 'step-link';
+    link.dataset.stepId = step.id;
+    
+    const stepNumber = document.createElement('span');
+    stepNumber.className = 'step-number';
+    stepNumber.textContent = step.id;
+    
+    const stepTitle = document.createElement('span');
+    stepTitle.textContent = step.shortTitle;
+    
+    link.appendChild(stepNumber);
+    link.appendChild(stepTitle);
+    
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      showStepDetails(step.id);
+    });
+    
+    listItem.appendChild(link);
+    sidebarList.appendChild(listItem);
   });
 }
 
-// Apply filters (placeholder for future filtering logic)
-function applyFilters() {
-  // This could filter content based on selected industry, model, etc.
-  console.log('Filters applied:', currentFilters);
+function renderWorkflowDiagram() {
+  const diagram = document.getElementById('workflowDiagram');
+  diagram.innerHTML = '';
+  
+  workflowData.steps.forEach(step => {
+    const stepElement = document.createElement('div');
+    stepElement.className = 'workflow-step';
+    stepElement.dataset.stepId = step.id;
+    
+    const icon = document.createElement('div');
+    icon.className = 'step-icon';
+    icon.textContent = stepIcons[step.id] || '⚡';
+    
+    const title = document.createElement('h3');
+    title.textContent = step.shortTitle;
+    
+    stepElement.appendChild(icon);
+    stepElement.appendChild(title);
+    
+    stepElement.addEventListener('click', () => {
+      showStepDetails(step.id);
+    });
+    
+    diagram.appendChild(stepElement);
+  });
 }
 
-// Select a stage and show its details
-function selectStage(stageId) {
-  // Remove active class from all stages
-  document.querySelectorAll('.timeline-stage').forEach(stage => {
-    stage.classList.remove('timeline-stage--active');
+function showStepDetails(stepId) {
+  const step = workflowData.steps.find(s => s.id === stepId);
+  if (!step) return;
+  
+  currentStepId = stepId;
+  visitedSteps.add(stepId);
+  
+  // Оновити активний стан
+  updateActiveStates();
+  
+  // Заповнити деталі етапу
+  document.getElementById('stepTitle').textContent = step.title;
+  document.getElementById('stepDescription').textContent = step.description;
+  
+  // Ключові моменти
+  const keyPointsList = document.getElementById('stepKeyPoints');
+  keyPointsList.innerHTML = '';
+  step.keyPoints.forEach(point => {
+    const li = document.createElement('li');
+    li.textContent = point;
+    keyPointsList.appendChild(li);
   });
   
-  // Add active class to selected stage
-  const selectedStage = document.querySelector(`[data-stage-id="${stageId}"]`);
-  if (selectedStage) {
-    selectedStage.classList.add('timeline-stage--active');
-  }
+  // Приклад
+  document.getElementById('stepExample').textContent = step.example;
   
-  // Find stage data
-  const stage = appData.lifecycleStages.find(s => s.id === stageId);
-  if (stage) {
-    currentStage = stage;
-    showStageDetails(stage);
-  }
-}
-
-// Show detailed information for a stage
-function showStageDetails(stage) {
-  const stageDetail = document.getElementById('stageDetail');
-  
-  let content = `
-    <div class="stage-content">
-      <div class="stage-header">
-        <div class="stage-icon">${stage.icon}</div>
-        <div>
-          <h2 class="stage-title">${stage.name}</h2>
-          <p class="stage-description">${stage.description}</p>
-        </div>
-      </div>
-      <div class="stage-sections">
-  `;
-  
-  // Generate content based on stage type
-  switch(stage.id) {
-    case 1: // Problem Formulation
-      content += `
-        <div class="stage-section">
-          <h4>Real-world Example</h4>
-          <p>${stage.example}</p>
-        </div>
-        <div class="stage-section">
-          <h4>Key Activities</h4>
-          <ul class="key-points">
-            ${stage.keyPoints.map(point => `<li>${point}</li>`).join('')}
-          </ul>
-        </div>
-      `;
-      break;
-      
-    case 2: // Data Collection
-      content += `
-        <div class="stage-section">
-          <h4>Data Sources</h4>
-          <ul class="key-points">
-            ${stage.sources.map(source => `<li>${source}</li>`).join('')}
-          </ul>
-        </div>
-        <div class="stage-section">
-          <h4>Compliance Status</h4>
-          <div class="compliance-badges">
-            ${Object.entries(stage.compliance).map(([key, value]) => 
-              `<span class="compliance-badge compliance-badge--${value ? 'active' : 'inactive'}">${key}</span>`
-            ).join('')}
-          </div>
-        </div>
-      `;
-      break;
-      
-    case 3: // Data Preprocessing
-      content += `
-        <div class="stage-section">
-          <h4>Data Quality Metrics</h4>
-          <div class="metrics-grid">
-            <div class="metric-item">
-              <span class="metric-label">Missing Values</span>
-              <span class="metric-value">${stage.metrics.missingValues}%</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Normalization</span>
-              <span class="metric-value">${stage.metrics.normalization}</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Categorical Encoding</span>
-              <span class="metric-value">${stage.metrics.categoricalEncoding}</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Outliers Detected</span>
-              <span class="metric-value">${stage.metrics.outliers}</span>
-            </div>
-          </div>
-        </div>
-      `;
-      break;
-      
-    case 4: // Modeling
-      content += `
-        <div class="stage-section">
-          <h4>Select Model Type</h4>
-          <div class="model-selector">
-            ${stage.modelTypes.map(type => 
-              `<div class="model-option" data-model-type="${type}">${type}</div>`
-            ).join('')}
-          </div>
-          <div id="modelOutput" class="mt-8"></div>
-        </div>
-      `;
-      break;
-      
-    case 5: // Evaluation
-      content += `
-        <div class="stage-section">
-          <h4>Performance Metrics</h4>
-          <div class="metrics-grid">
-            <div class="metric-item">
-              <span class="metric-label">Accuracy</span>
-              <span class="metric-value">${(stage.metrics.accuracy * 100).toFixed(1)}%</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Precision</span>
-              <span class="metric-value">${(stage.metrics.precision * 100).toFixed(1)}%</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Recall</span>
-              <span class="metric-value">${(stage.metrics.recall * 100).toFixed(1)}%</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">F1-Score</span>
-              <span class="metric-value">${(stage.metrics.f1Score * 100).toFixed(1)}%</span>
-            </div>
-          </div>
-          <div class="chart-container">
-            <canvas id="evaluationChart"></canvas>
-          </div>
-        </div>
-      `;
-      break;
-      
-    case 6: // Deployment
-      content += `
-        <div class="stage-section">
-          <h4>Infrastructure Status</h4>
-          <div class="metrics-grid">
-            <div class="metric-item">
-              <span class="metric-label">Docker</span>
-              <span class="metric-value">${stage.pipeline.docker ? '✓ Ready' : '✗ Not Ready'}</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">Kubernetes</span>
-              <span class="metric-value">${stage.pipeline.kubernetes ? '✓ Ready' : '✗ Not Ready'}</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">CI/CD</span>
-              <span class="metric-value">${stage.pipeline.cicd}</span>
-            </div>
-            <div class="metric-item">
-              <span class="metric-label">API Type</span>
-              <span class="metric-value">${stage.pipeline.api}</span>
-            </div>
-          </div>
-        </div>
-      `;
-      break;
-      
-    case 7: // Monitoring & Maintenance
-      content += `
-        <div class="stage-section">
-          <h4>System Health</h4>
-          <div class="alert alert--${stage.alerts.dataDrift ? 'warning' : 'success'}">
-            <strong>Data Drift:</strong> ${stage.alerts.dataDrift ? 'Detected - Review required' : 'No drift detected'}
-          </div>
-          <div class="alert alert--warning">
-            <strong>Accuracy Decay:</strong> ${stage.alerts.accuracyDecay}% decline detected
-          </div>
-          <div class="alert alert--info">
-            <strong>Next Retraining:</strong> Scheduled for ${stage.alerts.retrainingDue}
-          </div>
-        </div>
-      `;
-      break;
-  }
+  // Поради
+  const tipsList = document.getElementById('stepTips');
+  tipsList.innerHTML = '';
+  step.tips.forEach(tip => {
+    const li = document.createElement('li');
+    li.textContent = tip;
+    tipsList.appendChild(li);
+  });
   
-  content += `
-      </div>
-    </div>
-  `;
+  // Вікторина
+  setupQuiz(step.quiz[0]);
   
-  stageDetail.innerHTML = content;
+  // Показати панель деталей
+  document.getElementById('introSection').style.display = 'none';
+  document.getElementById('stepDetailsSection').classList.add('active');
   
-  // Add event listeners for interactive elements
-  if (stage.id === 4) {
-    setupModelSelector();
-  } else if (stage.id === 5) {
-    setTimeout(() => createEvaluationChart(stage.metrics), 100);
-  }
+  // Оновити кнопки навігації
+  updateNavigationButtons();
+  
+  // Оновити прогрес
+  updateProgress();
+  
+  // Прокрутити до верху
+  document.getElementById('stepDetailsSection').scrollIntoView({ behavior: 'smooth' });
 }
 
-// Setup model selector for modeling stage
-function setupModelSelector() {
-  document.querySelectorAll('.model-option').forEach(option => {
-    option.addEventListener('click', function() {
-      // Remove selected class from all options
-      document.querySelectorAll('.model-option').forEach(opt => {
-        opt.classList.remove('model-option--selected');
-      });
-      
-      // Add selected class to clicked option
-      this.classList.add('model-option--selected');
-      
-      // Show sample output
-      const modelType = this.getAttribute('data-model-type');
-      showModelOutput(modelType);
-    });
+function updateActiveStates() {
+  // Оновити бічну панель
+  document.querySelectorAll('.step-link').forEach(link => {
+    const stepId = parseInt(link.dataset.stepId);
+    link.classList.remove('active');
+    if (visitedSteps.has(stepId)) {
+      link.classList.add('visited');
+    }
+    if (stepId === currentStepId) {
+      link.classList.add('active');
+    }
+  });
+  
+  // Оновити діаграму
+  document.querySelectorAll('.workflow-step').forEach(step => {
+    const stepId = parseInt(step.dataset.stepId);
+    step.classList.remove('active');
+    if (visitedSteps.has(stepId)) {
+      step.classList.add('visited');
+    }
+    if (stepId === currentStepId) {
+      step.classList.add('active');
+    }
   });
 }
 
-// Show model output based on selected type
-function showModelOutput(modelType) {
-  const outputDiv = document.getElementById('modelOutput');
-  const relevantModels = appData.modelTypes.filter(model => model.type === modelType);
-  
-  let output = `
-    <h5>Available ${modelType} Models:</h5>
-    <div class="model-selector">
-  `;
-  
-  relevantModels.forEach(model => {
-    const metric = model.accuracy ? `Accuracy: ${(model.accuracy * 100).toFixed(1)}%` : 
-                  model.rmse ? `RMSE: ${model.rmse}` : 
-                  `Silhouette Score: ${model.silhouette}`;
+function setupQuiz(quiz) {
+  document.getElementById('quizQuestion').textContent = quiz.question;
+  
+  const optionsContainer = document.getElementById('quizOptions');
+  optionsContainer.innerHTML = '';
+  
+  quiz.options.forEach((option, index) => {
+    const optionElement = document.createElement('div');
+    optionElement.className = 'quiz-option';
+    optionElement.textContent = option;
+    optionElement.dataset.index = index;
     
-    output += `
-      <div class="model-option">
-        <strong>${model.name}</strong><br>
-        <small>${metric}</small>
-      </div>
-    `;
+    optionElement.addEventListener('click', () => {
+      if (quizAnswered) return;
+      
+      document.querySelectorAll('.quiz-option').forEach(opt => {
+        opt.classList.remove('selected');
+      });
+      optionElement.classList.add('selected');
+      selectedQuizOption = index;
+    });
+    
+    optionsContainer.appendChild(optionElement);
   });
   
-  output += '</div>';
-  outputDiv.innerHTML = output;
+  // Скинути стан вікторини
+  selectedQuizOption = null;
+  quizAnswered = false;
+  document.getElementById('quizResult').classList.remove('show', 'correct', 'incorrect');
+  document.getElementById('checkAnswerBtn').style.display = 'block';
 }
 
-// Create evaluation chart
-function createEvaluationChart(metrics) {
-  const ctx = document.getElementById('evaluationChart');
-  if (!ctx) return;
-  
-  // Destroy existing chart if it exists
-  if (evaluationChart) {
-    evaluationChart.destroy();
+function checkQuizAnswer() {
+  if (selectedQuizOption === null) {
+    alert('Будь ласка, оберіть відповідь');
+    return;
   }
   
-  evaluationChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: ['Accuracy', 'Precision', 'Recall', 'F1-Score'],
-      datasets: [{
-        label: 'Performance Metrics',
-        data: [metrics.accuracy, metrics.precision, metrics.recall, metrics.f1Score],
-        backgroundColor: ['#1FB8CD', '#FFC185', '#B4413C', '#5D878F'],
-        borderColor: ['#1FB8CD', '#FFC185', '#B4413C', '#5D878F'],
-        borderWidth: 2,
-        borderRadius: 8
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false
-        },
-        tooltip: {
-          callbacks: {
-            label: function(context) {
-              return `${context.label}: ${(context.parsed.y * 100).toFixed(1)}%`;
-            }
-          }
-        }
-      },
-      scales: {
-        y: {
-          beginAtZero: true,
-          max: 1,
-          ticks: {
-            callback: function(value) {
-              return (value * 100).toFixed(0) + '%';
-            }
-          }
-        }
-      }
+  const step = workflowData.steps.find(s => s.id === currentStepId);
+  const quiz = step.quiz[0];
+  const isCorrect = selectedQuizOption === quiz.answer;
+  
+  // Показати результат
+  const resultElement = document.getElementById('quizResult');
+  resultElement.classList.add('show');
+  
+  if (isCorrect) {
+    resultElement.classList.add('correct');
+    resultElement.textContent = '✅ Правильно! Відмінна робота!';
+  } else {
+    resultElement.classList.add('incorrect');
+    resultElement.textContent = `❌ Неправильно. Правильна відповідь: ${quiz.options[quiz.answer]}`;
+  }
+  
+  // Підсвітити правильну та неправильну відповіді
+  document.querySelectorAll('.quiz-option').forEach((option, index) => {
+    if (index === quiz.answer) {
+      option.classList.add('correct');
+    } else if (index === selectedQuizOption && !isCorrect) {
+      option.classList.add('incorrect');
     }
   });
+  
+  quizAnswered = true;
+  document.getElementById('checkAnswerBtn').style.display = 'none';
+}
+
+function navigateStep(direction) {
+  if (!currentStepId) return;
+  
+  const currentIndex = workflowData.steps.findIndex(s => s.id === currentStepId);
+  const newIndex = currentIndex + direction;
+  
+  if (newIndex >= 0 && newIndex < workflowData.steps.length) {
+    showStepDetails(workflowData.steps[newIndex].id);
+  }
+}
+
+function updateNavigationButtons() {
+  const currentIndex = workflowData.steps.findIndex(s => s.id === currentStepId);
+  
+  document.getElementById('prevStepBtn').disabled = currentIndex === 0;
+  document.getElementById('nextStepBtn').disabled = currentIndex === workflowData.steps.length - 1;
 }
 
-// Update progress summary
-function updateProgressSummary() {
-  const completed = appData.lifecycleStages.filter(stage => stage.status === 'completed').length;
-  const inProgress = appData.lifecycleStages.filter(stage => stage.status === 'in-progress').length;
-  const pending = appData.lifecycleStages.filter(stage => stage.status === 'pending').length;
-  
-  document.getElementById('completedCount').textContent = completed;
-  document.getElementById('inProgressCount').textContent = inProgress;
-  document.getElementById('pendingCount').textContent = pending;
+function updateProgress() {
+  const totalSteps = workflowData.steps.length;
+  const completedSteps = visitedSteps.size;
+  const percentage = (completedSteps / totalSteps) * 100;
+  
+  document.getElementById('progressFill').style.width = `${percentage}%`;
+  document.getElementById('progressText').textContent = `${completedSteps}/${totalSteps} етапів вивчено`;
+}
+
+function resetProgress() {
+  if (confirm('Ви впевнені, що хочете скинути свій прогрес?')) {
+    visitedSteps.clear();
+    currentStepId = null;
+    
+    // Приховати деталі етапу та показати вступ
+    document.getElementById('stepDetailsSection').classList.remove('active');
+    document.getElementById('introSection').style.display = 'block';
+    
+    // Оновити стани
+    updateActiveStates();
+    updateProgress();
+    
+    // Прокрутити до верху
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
 }