// Data Literacy Dashboard Application
class DataLiteracyApp {
constructor() {
this.currentPage = 'home';
this.currentProfession = '';
this.testCurrentQuestion = 0;
this.testAnswers = [];
// Application data
this.data = {
statistics: {
dataImportant: "87% співробітників вважають базові навички роботи з даними важливими",
dataTrained: "Тільки 40% співробітників почуваються підготовленими",
dataLiteracy: "64% керівників повідомляють про нестачу розуміння даних"
},
professions: {
marketing: {
title: "Маркетинг та продажі",
icon: "📊",
uses: [
"Аналіз поведінки клієнтів",
"Оптимізація рекламних кампаній",
"Персоналізація повідомлень",
"Прогнозування продажів",
"Аналіз ROI"
],
example: "DirectTV використовує USPS дані для персоналізації сторінок для людей, які переїжджають",
metrics: ["CTR", "Conversion Rate", "CAC", "LTV", "ROAS"],
interactive: "roi_calculator"
},
hr: {
title: "Людські ресурси",
icon: "👥",
uses: [
"Планування робочої сили",
"Оптимізація рекрутингу",
"Аналіз плинності кадрів",
"Оцінка ефективності навчання",
"Прогнозування продуктивності"
],
example: "Credit Suisse використовує HR аналітику для прогнозування ризику звільнення",
metrics: ["Turnover Rate", "Time to Hire", "Employee Satisfaction", "Training ROI"],
interactive: "turnover_simulator"
},
finance: {
title: "Фінанси",
icon: "💰",
uses: [
"Фінансові коефіцієнти",
"Аналіз прибутковості",
"Управління ризиками",
"Бюджетування та прогнозування",
"Контроль витрат"
],
example: "Банки використовують аналітику для категоризації клієнтів за кредитними ризиками",
metrics: ["ROI", "NPV", "Liquidity Ratio", "Debt-to-Equity", "Profit Margin"],
interactive: "financial_calculator"
},
operations: {
title: "Операції та логістика",
icon: "🚚",
uses: [
"Оптимізація ланцюга поставок",
"Прогнозне обслуговування",
"Управління запасами",
"Планування маршрутів",
"Контроль якості"
],
example: "Walmart використовує аналітику для оптимізації запасів та зменшення витрат на 20%",
metrics: ["Inventory Turnover", "Order Fulfillment Rate", "Lead Time", "Quality Score"],
interactive: "inventory_simulator"
},
customer_service: {
title: "Клієнтський сервіс",
icon: "📞",
uses: [
"Аналіз задоволеності клієнтів",
"Оптимізація часу відповіді",
"Прогнозування навантаження",
"Персоналізація підтримки",
"Аналіз відгуків"
],
example: "Компанії використовують аналітику для моніторингу в реальному часі та покращення досвіду клієнтів",
metrics: ["CSAT", "NPS", "First Call Resolution", "Average Handle Time"],
interactive: "service_dashboard"
},
manufacturing: {
title: "Виробництво",
icon: "🏭",
uses: [
"Прогнозне обслуговування обладнання",
"Контроль якості",
"Оптимізація виробничих процесів",
"Управління ресурсами",
"Планування виробництва"
],
example: "United Airlines використовує прогнозну аналітику для технічного обслуговування літаків",
metrics: ["OEE", "Downtime", "Quality Rate", "Production Cost", "Throughput"],
interactive: "equipment_monitor"
},
healthcare: {
title: "Охорона здоров'я",
icon: "🏥",
uses: [
"Прогнозування захворюваності",
"Оптимізація розкладу персоналу",
"Управління запасами ліків",
"Аналіз ефективності лікування",
"Планування ресурсів"
],
example: "Лікарні використовують ML для прогнозування кількості пацієнтів у відділенні невідкладної допомоги",
metrics: ["Patient Satisfaction", "Readmission Rate", "Average Length of Stay", "Resource Utilization"],
interactive: "hospital_predictor"
},
it: {
title: "IT та технології",
icon: "💻",
uses: [
"Моніторинг системи",
"Аналіз продуктивності",
"Прогнозування відмов",
"Оптимізація ресурсів",
"Безпека даних"
],
example: "Компанії використовують аналітику для прогнозування та попередження системних збоїв",
metrics: ["Uptime", "Response Time", "Security Incidents", "Resource Utilization"],
interactive: "system_monitor"
}
},
literacyLevels: [
{
level: 1,
name: "Conversational",
description: "Розуміння базових термінів та концепцій",
skills: ["Читання графіків", "Розуміння основних метрик", "Участь в обговореннях даних"]
},
{
level: 2,
name: "Literacy",
description: "Здатність працювати з простими наборами даних",
skills: ["Фільтрація даних", "Створення базових звітів", "Інтерпретація результатів"]
},
{
level: 3,
name: "Competency",
description: "Впевнене використання аналітичних інструментів",
skills: ["Складні запити", "Візуалізація даних", "Статистичний аналіз"]
},
{
level: 4,
name: "Fluency",
description: "Експертний рівень аналітики",
skills: ["Машинне навчання", "Прогнозування", "Комплексне моделювання"]
},
{
level: 5,
name: "Multilingual",
description: "Лідерство в data-driven організаціях",
skills: ["Стратегія даних", "Управління командами", "Інновації в аналітиці"]
}
],
testQuestions: [
{
question: "Як часто ви використовуєте дані у своїй роботі?",
options: [
{ text: "Щодня", value: 4 },
{ text: "Кілька разів на тиждень", value: 3 },
{ text: "Кілька разів на місяць", value: 2 },
{ text: "Рідко або ніколи", value: 1 }
]
},
{
question: "Наскільки впевнено ви створюєте графіки та діаграми?",
options: [
{ text: "Дуже впевнено", value: 4 },
{ text: "Достатньо впевнено", value: 3 },
{ text: "Базово", value: 2 },
{ text: "Не вмію", value: 1 }
]
},
{
question: "Чи можете ви виявити тренди в даних?",
options: [
{ text: "Легко виявляю складні тренди", value: 4 },
{ text: "Виявляю основні тренди", value: 3 },
{ text: "Іноді помічаю очевидні тренди", value: 2 },
{ text: "Важко виявити тренди", value: 1 }
]
},
{
question: "Як ви ставитеся до статистичних понять?",
options: [
{ text: "Вільно використовую статистику", value: 4 },
{ text: "Розумію базові концепції", value: 3 },
{ text: "Знаю лише основи", value: 2 },
{ text: "Статистика складна для мене", value: 1 }
]
},
{
question: "Чи маєте ви досвід з аналітичними інструментами?",
options: [
{ text: "Використовую професійні інструменти", value: 4 },
{ text: "Працюю з Excel та подібними", value: 3 },
{ text: "Базове використання таблиць", value: 2 },
{ text: "Мінімальний досвід", value: 1 }
]
}
]
};
this.init();
}
init() {
this.renderProfessionNavigation();
this.renderLiteracyLevels();
this.bindEvents();
}
bindEvents() {
// Modal events
document.getElementById('interactiveModal').addEventListener('click', (e) => {
if (e.target.id === 'interactiveModal') {
this.closeModal();
}
});
document.getElementById('testModal').addEventListener('click', (e) => {
if (e.target.id === 'testModal') {
this.closeTestModal();
}
});
// Escape key to close modals
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
this.closeModal();
this.closeTestModal();
}
});
}
renderProfessionNavigation() {
const navContainer = document.getElementById('professionNav');
navContainer.innerHTML = '';
Object.entries(this.data.professions).forEach(([key, profession]) => {
const navItem = document.createElement('button');
navItem.className = 'nav-item';
navItem.onclick = () => this.showProfession(key);
navItem.innerHTML = `
${profession.icon}
${profession.title}
`;
navContainer.appendChild(navItem);
});
}
renderLiteracyLevels() {
const container = document.getElementById('literacyLevels');
container.innerHTML = '';
this.data.literacyLevels.forEach(level => {
const levelElement = document.createElement('div');
levelElement.className = 'literacy-level';
levelElement.innerHTML = `
${level.level}
${level.name}
${level.description}
${level.skills.map(skill => `${skill}`).join('')}
`;
container.appendChild(levelElement);
});
}
showHome() {
this.setActivePage('home');
this.setActiveNavItem(0);
}
showFirstProfession() {
const firstProfession = Object.keys(this.data.professions)[0];
this.showProfession(firstProfession);
}
showProfession(professionKey) {
this.currentProfession = professionKey;
const profession = this.data.professions[professionKey];
this.setActivePage('professionPages');
this.setActiveNavItem(Object.keys(this.data.professions).indexOf(professionKey) + 1);
const content = document.getElementById('professionContent');
content.innerHTML = `
🎯 Способи використання даних
${profession.uses.map(use => `
${use}
`).join('')}
💡 Реальний приклад
${profession.example}
📊 Ключові метрики
${profession.metrics.map(metric => `
${metric}
`).join('')}
🎮 Інтерактивний інструмент
Спробуйте практичний інструмент для цієї професії
`;
}
showLiteracyLevels() {
this.setActivePage('literacyPage');
this.setActiveNavItem(Object.keys(this.data.professions).length + 1);
}
setActivePage(pageId) {
// Hide all pages
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// Show selected page
document.getElementById(pageId).classList.add('active');
this.currentPage = pageId;
}
setActiveNavItem(index) {
// Remove active class from all nav items
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});
// Add active class to selected item
const navItems = document.querySelectorAll('.nav-item');
if (navItems[index]) {
navItems[index].classList.add('active');
}
}
openInteractive(type) {
const modal = document.getElementById('interactiveModal');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');
modalTitle.textContent = this.getInteractiveTitle(type);
modalBody.innerHTML = this.getInteractiveContent(type);
modal.classList.add('active');
this.bindInteractiveEvents(type);
}
getInteractiveTitle(type) {
const titles = {
'roi_calculator': 'Калькулятор ROI кампанії',
'turnover_simulator': 'Симулятор плинності кадрів',
'financial_calculator': 'Калькулятор фінансових коефіцієнтів',
'inventory_simulator': 'Симулятор управління запасами',
'service_dashboard': 'Дашборд метрик клієнтського сервісу',
'equipment_monitor': 'Монітор стану обладнання',
'hospital_predictor': 'Прогнозувач навантаження лікарні',
'system_monitor': 'Системний монітор'
};
return titles[type] || 'Інтерактивний інструмент';
}
getInteractiveContent(type) {
switch (type) {
case 'roi_calculator':
return `
Рентабельність інвестицій
`;
case 'turnover_simulator':
return `
15%
Прогнозований рівень плинності
`;
case 'financial_calculator':
return `
`;
case 'inventory_simulator':
return `
`;
case 'service_dashboard':
return `
CSAT: 4.2/5
NPS: 67
FCR: 82%
AHT: 3.5 хв
📊 Тренд задоволеності клієнтів
📈 Зростання на 12% за останній місяць
⚡ Час відповіді покращився на 25%
🎯 85% звернень вирішено з першого разу
`;
case 'equipment_monitor':
return `
Температура: 72°C
Вібрація: Норма
Ефективність: 94%
Час роботи: 99.2%
✅ Прогнозна аналітика
🔧 Наступне ТО через 15 днів
⚠️ Рекомендується заміна фільтра через 7 днів
📊 Ризик поломки: Низький (5%)
`;
case 'hospital_predictor':
return `
23
Прогнозована кількість пацієнтів
`;
case 'system_monitor':
return `
CPU: 45%
RAM: 67%
Disk: 23%
Network: 12 Mbps
🚨 Системні події
✅ Всі сервіси працюють нормально
📊 Середній час відповіді: 120ms
🔒 Останній інцидент безпеки: 30 днів тому
`;
default:
return 'Інтерактивний контент недоступний.
';
}
}
bindInteractiveEvents(type) {
switch (type) {
case 'turnover_simulator':
['salary', 'satisfaction', 'growth'].forEach(param => {
const slider = document.getElementById(`${param}Slider`);
const valueDisplay = document.getElementById(`${param}Value`);
slider.addEventListener('input', () => {
valueDisplay.textContent = slider.value;
this.updateTurnoverRate();
});
});
this.updateTurnoverRate();
break;
case 'inventory_simulator':
['stock', 'demand', 'lead'].forEach(param => {
const slider = document.getElementById(`${param}Slider`);
const valueDisplay = document.getElementById(`${param === 'stock' ? 'currentStock' : param === 'demand' ? 'dailyDemand' : 'leadTime'}Value`);
slider.addEventListener('input', () => {
valueDisplay.textContent = slider.value;
this.updateInventoryDays();
});
});
this.updateInventoryDays();
break;
case 'hospital_predictor':
const daySlider = document.getElementById('daySlider');
const hourSlider = document.getElementById('hourSlider');
const seasonSlider = document.getElementById('seasonSlider');
daySlider.addEventListener('input', () => {
const days = ['Понеділок', 'Вівторок', 'Середа', 'Четвер', 'П\'ятниця', 'Субота', 'Неділя'];
document.getElementById('dayValue').textContent = days[daySlider.value - 1];
this.updatePatientCount();
});
hourSlider.addEventListener('input', () => {
document.getElementById('hourValue').textContent = hourSlider.value;
this.updatePatientCount();
});
seasonSlider.addEventListener('input', () => {
const seasons = ['Зима', 'Весна', 'Літо', 'Осінь'];
document.getElementById('seasonValue').textContent = seasons[seasonSlider.value - 1];
this.updatePatientCount();
});
this.updatePatientCount();
break;
}
}
calculateROI() {
const cost = parseFloat(document.getElementById('campaignCost').value) || 0;
const revenue = parseFloat(document.getElementById('campaignRevenue').value) || 0;
const roi = cost > 0 ? ((revenue - cost) / cost * 100) : 0;
document.getElementById('roiResult').style.display = 'block';
document.getElementById('roiValue').textContent = `${roi.toFixed(1)}%`;
}
calculateFinancials() {
const profit = parseFloat(document.getElementById('netProfit').value) || 0;
const assets = parseFloat(document.getElementById('totalAssets').value) || 0;
const equity = parseFloat(document.getElementById('equity').value) || 0;
const revenue = parseFloat(document.getElementById('revenue').value) || 0;
const roa = assets > 0 ? (profit / assets * 100).toFixed(1) + '%' : '0%';
const roe = equity > 0 ? (profit / equity * 100).toFixed(1) + '%' : '0%';
const margin = revenue > 0 ? (profit / revenue * 100).toFixed(1) + '%' : '0%';
document.getElementById('financialResults').style.display = 'block';
document.getElementById('roaValue').textContent = roa;
document.getElementById('roeValue').textContent = roe;
document.getElementById('marginValue').textContent = margin;
}
updateTurnoverRate() {
const salary = parseInt(document.getElementById('salarySlider').value);
const satisfaction = parseInt(document.getElementById('satisfactionSlider').value);
const growth = parseInt(document.getElementById('growthSlider').value);
// Simple turnover calculation formula
const baseTurnover = 30;
const salaryFactor = (100000 - salary) / 100000 * 20;
const satisfactionFactor = (10 - satisfaction) * 3;
const growthFactor = (10 - growth) * 2;
const turnover = Math.max(0, baseTurnover + salaryFactor + satisfactionFactor + growthFactor);
document.getElementById('turnoverRate').textContent = `${turnover.toFixed(1)}%`;
}
updateInventoryDays() {
const stock = parseInt(document.getElementById('stockSlider').value);
const demand = parseInt(document.getElementById('demandSlider').value);
const days = demand > 0 ? Math.floor(stock / demand) : 0;
document.getElementById('stockDays').textContent = days;
}
updatePatientCount() {
const day = parseInt(document.getElementById('daySlider').value);
const hour = parseInt(document.getElementById('hourSlider').value);
const season = parseInt(document.getElementById('seasonSlider').value);
// Simple patient count prediction
let baseCount = 20;
// Day factor (weekends are busier)
if (day === 6 || day === 7) baseCount += 10;
// Hour factor (peak hours)
if (hour >= 9 && hour <= 17) baseCount += 15;
if (hour >= 18 && hour <= 22) baseCount += 8;
// Season factor (winter is busier)
if (season === 1) baseCount += 12; // Winter
if (season === 4) baseCount += 5; // Fall
document.getElementById('patientCount').textContent = baseCount;
}
refreshServiceMetrics() {
const metrics = {
csat: (3.8 + Math.random() * 1.2).toFixed(1) + '/5',
nps: Math.floor(50 + Math.random() * 40),
fcr: Math.floor(75 + Math.random() * 20) + '%',
aht: (2.5 + Math.random() * 2).toFixed(1) + ' хв'
};
document.getElementById('csatMetric').textContent = metrics.csat;
document.getElementById('npsMetric').textContent = metrics.nps;
document.getElementById('fcrMetric').textContent = metrics.fcr;
document.getElementById('ahtMetric').textContent = metrics.aht;
}
refreshEquipmentData() {
const metrics = {
temp: Math.floor(65 + Math.random() * 20) + '°C',
vibr: Math.random() > 0.2 ? 'Норма' : 'Увага',
eff: Math.floor(85 + Math.random() * 15) + '%',
uptime: (98 + Math.random() * 2).toFixed(1) + '%'
};
document.getElementById('tempMetric').textContent = metrics.temp;
document.getElementById('vibrMetric').textContent = metrics.vibr;
document.getElementById('effMetric').textContent = metrics.eff;
document.getElementById('uptimeMetric').textContent = metrics.uptime;
}
refreshSystemData() {
const metrics = {
cpu: Math.floor(20 + Math.random() * 60) + '%',
ram: Math.floor(40 + Math.random() * 40) + '%',
disk: Math.floor(15 + Math.random() * 30) + '%',
net: Math.floor(5 + Math.random() * 20) + ' Mbps'
};
document.getElementById('cpuMetric').textContent = metrics.cpu;
document.getElementById('ramMetric').textContent = metrics.ram;
document.getElementById('diskMetric').textContent = metrics.disk;
document.getElementById('netMetric').textContent = metrics.net;
}
startLiteracyTest() {
this.testCurrentQuestion = 0;
this.testAnswers = [];
this.showTestQuestion();
document.getElementById('testModal').classList.add('active');
}
showTestQuestion() {
const question = this.data.testQuestions[this.testCurrentQuestion];
const modalBody = document.getElementById('testModalBody');
modalBody.innerHTML = `
Питання ${this.testCurrentQuestion + 1} з ${this.data.testQuestions.length}
${question.question}
${question.options.map((option, index) => `
${option.text}
`).join('')}
Питання ${this.testCurrentQuestion + 1} з ${this.data.testQuestions.length}
${this.testCurrentQuestion > 0 ? '' : ''}
`;
}
selectTestOption(optionIndex, value) {
// Remove previous selection
document.querySelectorAll('.test-option').forEach(option => {
option.classList.remove('selected');
});
// Select current option
document.querySelectorAll('.test-option')[optionIndex].classList.add('selected');
// Store answer
this.testAnswers[this.testCurrentQuestion] = value;
// Enable next button
document.getElementById('nextBtn').disabled = false;
}
nextQuestion() {
if (this.testCurrentQuestion < this.data.testQuestions.length - 1) {
this.testCurrentQuestion++;
this.showTestQuestion();
} else {
this.showTestResults();
}
}
previousQuestion() {
if (this.testCurrentQuestion > 0) {
this.testCurrentQuestion--;
this.showTestQuestion();
}
}
showTestResults() {
const totalScore = this.testAnswers.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / this.data.testQuestions.length;
let level, recommendations;
if (averageScore >= 3.5) {
level = 4;
recommendations = "Ви маєте експертний рівень! Розвивайте лідерські навички в data-driven проектах.";
} else if (averageScore >= 2.5) {
level = 3;
recommendations = "Ваш рівень - впевнений користувач. Вивчайте статистичні методи та машинне навчання.";
} else if (averageScore >= 1.5) {
level = 2;
recommendations = "Базовий рівень. Рекомендуємо вивчити Excel та основи візуалізації даних.";
} else {
level = 1;
recommendations = "Початковий рівень. Почніть з основ: читання графіків та базових метрик.";
}
const modalBody = document.getElementById('testModalBody');
modalBody.innerHTML = `
🎯 Ваш рівень Data Literacy
Рівень ${level}
${this.data.literacyLevels[level - 1].name}
Оцінка: ${averageScore.toFixed(1)} з 4.0
Рекомендації: ${recommendations}
`;
}
closeModal() {
document.getElementById('interactiveModal').classList.remove('active');
}
closeTestModal() {
document.getElementById('testModal').classList.remove('active');
}
}
// Initialize the application when the page loads
let app;
document.addEventListener('DOMContentLoaded', () => {
app = new DataLiteracyApp();
});