BUSINESS LAB
Навчальна онлайн-гра Факультету бізнес-технологій та економіки. Гравець вводить ПІБ, бачить 10 карток п'яти кафедр, відкриває будь-яку, обирає одну з трьох відповідей і одразу бачить пояснення. Після 10 карток показуються підсумок і рейтинг.
Сайт: https://business-lab-zp.vercel.app/ (Vercel, оновлюється сам після кожного push у main). Стара адреса https://yarik-kolesnikov.github.io/Online-Game-Quantum/ автоматично перенаправляє на нову.
Як запустити
- Відкрийте
index.html у браузері (подвійний клік).
- Або у VS Code: розширення Live Server, ПКМ на
index.html → Open with Live Server.
Структура
index.html розмітка: старт, поле карток, вікно питання, результат і рейтинг
css/style.css стилі; світла тема за замовчуванням, темна через перемикач у хедері
js/config.js простір імен BL і функція додавання питань
js/questions/*.js банк питань: 1 файл = 1 кафедра, по 10 питань (усього 50)
js/app.js логіка гри: картки, таймер, підрахунок, рейтинг, тема, біжучий рядок кафедр
Кафедри (код у файлах → кафедра)
| Файл | Код | Кафедра | Колір |
|---|
| marketing-digital.js | mkt | МЦТ, Маркетинг та цифрові технології | синій #0253ce |
| management-administration.js | mgt | МА, Менеджмент та адміністрування | малиново-рожевий #f21e6e |
| accounting-finance.js | acc | ОФ, Облік та фінанси | зелений #129f43 |
| business-management.js | bus | БУ, Бізнес та управління | помаранчевий #fd7614 |
| economics-customs.js | econ | ЕМС, Економіка та митна справа | жовтий #fccb15 |
Кафедра «Маркетинг та цифрові технології» утворена з колишніх кафедр «Маркетинг і логістика» та «Цифрові технології в бізнесі та економіці».
Назви, абревіатури, описи й кольори кафедр задаються в js/app.js (об'єкт DEPTS), звідти ж береться біжучий рядок кафедр у шапці. Кольори кафедр і теми лежать у css/style.css (змінні --d-*).
Формат питання
{
question: "Текст питання",
options: ["Варіант A", "Варіант B", "Варіант C"],
correct: 1, // 0 = A, 1 = B, 2 = C
explanation: "Пояснення після відповіді"
}
Правила підрахунку
- Правильна відповідь дає 1 бал, неправильна 0. Максимум 10.
- Після підтвердження відповідь змінити не можна.
- У рейтингу вище той, хто має більше балів, а за рівних балів той, хто пройшов швидше.
- Кожна гра містить щонайменше одне питання з кожної кафедри, решта картки випадкові.
- Рейтинг показує лише ТОП-100. Результат, що не потрапляє в ТОП-100, у базу не записується: гравець бачить його (з поясненням, скільки бракує) і може ним поділитися, але після виходу зі сторінки він зникає.
- Одна людина займає в рейтингу один рядок. Якщо ПІБ збігається (без різниці у великих/малих літерах і порядку слів: «Ярослав Колесников» = «колесников ЯРОСЛАВ»), залишається лише найкращий результат: більше балів, а за рівних балів швидший час. Гірша повторна спроба рейтинг не змінює.
Рейтинг
Рейтинг вибирає сховище автоматично:
- Онлайн-версія в Claude (Artifact): спільна база артефакту.
- Сайт на GitHub Pages або будь-якому хостингу з налаштованим Firebase: спільний рейтинг у Firestore.
- Без Firebase (або файл відкрито локально):
localStorage, тобто окремий рейтинг для кожного браузера.
Спільний рейтинг через Firebase (безкоштовно)
Вже налаштовано: проєкт Firebase business-lab-c15c7, база Cloud Firestore (регіон eur3, план Spark), правила з firestore.rules опубліковані, ключі записані в js/firebase-config.js. Кроки нижче потрібні лише для нового проєкту.
- Зайдіть на https://console.firebase.google.com, натисніть Create a project і дайте йому назву (наприклад
business-lab). Google Analytics можна вимкнути.
- У меню Build → Firestore Database натисніть Create database, оберіть регіон
eur3 (europe-west) і режим Production mode.
- На вкладці Rules замініть увесь текст вмістом файлу
firestore.rules з цього репо й натисніть Publish. Ці правила дозволяють читати рейтинг і додавати нові результати, але не дозволяють змінювати чи видаляти їх із сайту.
- Project settings (шестерня) → General → Your apps → іконка
</> (Web). Дайте застосунку назву й натисніть Register app. Firebase Hosting вмикати не потрібно.
- Скопіюйте об'єкт
firebaseConfig, який покаже Firebase, у файл js/firebase-config.js замість null:
BL.firebaseConfig = {
apiKey: "...",
authDomain: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "..."
};
- Закомітьте зміни й запуште в
main. Через 1–2 хвилини GitHub Pages оновить сайт, і під рейтингом з'явиться напис «Загальний рейтинг усіх учасників.».
Ключі з firebaseConfig не секретні, у вебзастосунках вони завжди видні в браузері. Дані захищають правила з кроку 3.
Очищення рейтингу: Firebase Console → Firestore Database → колекція results → меню ⋮ → Delete collection (або видаліть окремі документи).
Ліміти безкоштовного плану (Spark): 50 000 читань і 20 000 записів на добу. Для навчальної гри цього з великим запасом достатньо.
Картинка результату в соцмережах (Vercel)
Кнопка «Поділитися результатом» додає в текст посилання виду https://business-lab-zp.vercel.app/r?…. Telegram і Facebook показують у прев'ю цього посилання картинку з результатом гравця (ПІБ, бали, звання, час, місце, кафедри), а клік веде на гру.
api/share.py — функція Vercel (Python + Pillow): /r віддає сторінку з og:image і перенаправляє на гру, /card малює PNG 1200×630.fonts/ — шрифти для картинки (Unbounded, Manrope, JetBrains Mono, ліцензія OFL).vercel.json, requirements.txt — налаштування Vercel. Проєкт business-lab у Vercel оновлюється сам після кожного push у main.- Адреса сервера задається в
js/share.js (SHARE_SERVER); якщо залишити порожньою, ділимося просто адресою гри.
Оформлення коду
Код відформатовано автоматично, тож він однаковий у всіх файлах:
- HTML, CSS, JavaScript — Prettier (налаштування в
.prettierrc.json: ширина рядка 100, відступ 2 пробіли);
- Python (
api/share.py) — Black з шириною рядка 100, перевірка — Ruff. Файл pyproject.toml у корені не створюємо: Vercel тоді бере залежності з нього замість requirements.txt, і сервер картинок лишається без Pillow;
- спільні правила для редакторів (кодування, відступи, кінці рядків) — у
.editorconfig.
Щоб відформатувати після змін:
npx prettier --write index.html css js
black -l 100 api
