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, у базу не записується: гравець бачить його (з поясненням, скільки бракує) і може ним поділитися, але після виходу зі сторінки він зникає.
• Одна людина займає в рейтингу один рядок. Якщо ПІБ збігається (без різниці у великих/малих літерах і порядку слів: «Ярослав Колесников» = «колесников ЯРОСЛАВ»), залишається лише найкращий результат: більше балів, а за рівних балів швидший час. Гірша повторна спроба рейтинг не змінює.

Рейтинг

Рейтинг вибирає сховище автоматично:

1. Онлайн-версія в Claude (Artifact): спільна база артефакту.
2. Сайт на GitHub Pages або будь-якому хостингу з налаштованим Firebase: спільний рейтинг у Firestore.
3. Без Firebase (або файл відкрито локально): localStorage, тобто окремий рейтинг для кожного браузера.

Спільний рейтинг через Firebase (безкоштовно)

Вже налаштовано: проєкт Firebase business-lab-c15c7, база Cloud Firestore (регіон eur3, план Spark), правила з firestore.rules опубліковані, ключі записані в js/firebase-config.js. Кроки нижче потрібні лише для нового проєкту.

1. Зайдіть на https://console.firebase.google.com, натисніть Create a project і дайте йому назву (наприклад business-lab). Google Analytics можна вимкнути.
2. У меню Build → Firestore Database натисніть Create database, оберіть регіон eur3 (europe-west) і режим Production mode.
3. На вкладці Rules замініть увесь текст вмістом файлу firestore.rules з цього репо й натисніть Publish. Ці правила дозволяють читати рейтинг і додавати нові результати, але не дозволяють змінювати чи видаляти їх із сайту.
4. Project settings (шестерня) → General → Your apps → іконка </> (Web). Дайте застосунку назву й натисніть Register app. Firebase Hosting вмикати не потрібно.
5. Скопіюйте об'єкт firebaseConfig, який покаже Firebase, у файл js/firebase-config.js замість null:

   BL.firebaseConfig = {
     apiKey: "...",
     authDomain: "...",
     projectId: "...",
     storageBucket: "...",
     messagingSenderId: "...",
     appId: "..."
   };
   

6. Закомітьте зміни й запуште в 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