Maxim Dolgolyov
be4d43105e
Node.js/Express backend + vanilla JS frontend. Features: real-time collaborative whiteboard (SSE), multi-page support, LaTeX formulas, shapes/connectors, coordinate systems, number lines, compass, zoom/pan, Catmull-Rom pencil smoothing, ruler/protractor with rotation & resize controls, minimap navigation overlay, auto-measurements, multi-page thumbnails sidebar, PNG export, page templates. Student/teacher workflows: classes, assignments, library, dashboard. Mobile responsive. SQLite (better-sqlite3). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
854 lines
40 KiB
HTML
854 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Live-квиз — LearnSpace</title>
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="/css/ls.css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
|
||
<style>
|
||
.sb-content { background: #f4f5f8; overflow: hidden; display: flex; flex-direction: column; }
|
||
|
||
/* ── page header ── */
|
||
.lq-header {
|
||
background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
|
||
padding: 24px 28px 20px; position: relative; overflow: hidden; flex-shrink: 0;
|
||
}
|
||
.lq-header-dots {
|
||
position: absolute; inset: 0;
|
||
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||
background-size: 22px 22px; pointer-events: none;
|
||
}
|
||
.lq-header-inner { position: relative; z-index: 1; }
|
||
.lq-title {
|
||
font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800;
|
||
color: #fff; display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.lq-session-chip {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 5px 14px; border-radius: 999px;
|
||
background: rgba(6,214,160,0.15); border: 1.5px solid rgba(6,214,160,0.3);
|
||
font-size: 0.74rem; font-weight: 700; color: #06D6A0;
|
||
font-family: 'Unbounded', sans-serif; margin-top: 10px;
|
||
}
|
||
.lq-session-chip .dot {
|
||
width: 7px; height: 7px; border-radius: 50%; background: #06D6A0;
|
||
animation: pulse-dot 1.5s ease infinite;
|
||
}
|
||
@keyframes pulse-dot {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.5; transform: scale(0.7); }
|
||
}
|
||
|
||
/* ── body ── */
|
||
.lq-body {
|
||
flex: 1; display: flex; gap: 0; overflow: hidden; min-height: 0;
|
||
}
|
||
|
||
/* ── left panel ── */
|
||
.lq-left {
|
||
width: 300px; flex-shrink: 0;
|
||
background: #fff; border-right: 1.5px solid rgba(15,23,42,0.08);
|
||
overflow-y: auto; display: flex; flex-direction: column;
|
||
}
|
||
.lq-panel-head {
|
||
padding: 16px 18px 12px;
|
||
border-bottom: 1px solid rgba(15,23,42,0.07);
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
color: #0F172A; display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.class-list { padding: 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
|
||
.class-card {
|
||
border: 1.5px solid rgba(15,23,42,0.08); border-radius: 14px;
|
||
padding: 13px 14px; cursor: pointer; transition: all 0.15s;
|
||
display: flex; align-items: center; gap: 12px;
|
||
}
|
||
.class-card:hover { border-color: rgba(155,93,229,0.25); background: rgba(155,93,229,0.03); }
|
||
.class-card.active {
|
||
border-color: rgba(155,93,229,0.4); background: rgba(155,93,229,0.06);
|
||
box-shadow: 0 2px 10px rgba(155,93,229,0.1);
|
||
}
|
||
.class-card-icon {
|
||
width: 38px; height: 38px; border-radius: 10px;
|
||
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
.class-card-name { font-size: 0.85rem; font-weight: 700; color: #0F172A; }
|
||
.class-card-meta { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
|
||
|
||
.lq-session-area { padding: 14px 12px; border-top: 1px solid rgba(15,23,42,0.07); }
|
||
.btn-start {
|
||
width: 100%; padding: 12px; border: none; border-radius: 12px;
|
||
background: linear-gradient(135deg, #06D6E0, #9B5DE5);
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
color: #fff; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
|
||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
}
|
||
.btn-start:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,93,229,0.3); }
|
||
.btn-start:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
|
||
.btn-end {
|
||
width: 100%; padding: 10px; border: 1.5px solid rgba(239,71,111,0.3); border-radius: 12px;
|
||
background: rgba(239,71,111,0.06);
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800;
|
||
color: #EF476F; cursor: pointer; transition: all 0.15s; margin-top: 8px;
|
||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||
}
|
||
.btn-end:hover { background: rgba(239,71,111,0.12); border-color: #EF476F; }
|
||
.active-status {
|
||
padding: 10px 12px; border-radius: 12px;
|
||
background: rgba(6,214,160,0.08); border: 1.5px solid rgba(6,214,160,0.25);
|
||
margin-bottom: 8px;
|
||
}
|
||
.as-label { font-size: 0.7rem; font-weight: 700; color: #8898AA; margin-bottom: 3px; }
|
||
.as-val {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
|
||
color: #059652; display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.as-dot { width: 7px; height: 7px; border-radius: 50%; background: #06D6A0; animation: pulse-dot 1.5s ease infinite; }
|
||
|
||
/* ── right panel ── */
|
||
.lq-right { flex: 1; overflow-y: auto; padding: 20px 24px 60px; min-width: 0; }
|
||
|
||
/* question search */
|
||
.lq-search-wrap { position: relative; margin-bottom: 16px; }
|
||
.lq-search {
|
||
width: 100%; padding: 10px 14px 10px 40px;
|
||
border: 1.5px solid rgba(15,23,42,0.12); border-radius: 12px;
|
||
font-family: 'Manrope', sans-serif; font-size: 0.86rem; font-weight: 500;
|
||
color: #0F172A; background: #fff; outline: none; transition: border-color 0.15s;
|
||
}
|
||
.lq-search:focus { border-color: var(--violet); }
|
||
.lq-search-icon {
|
||
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
|
||
color: #8898AA; pointer-events: none; width: 16px; height: 16px;
|
||
}
|
||
|
||
/* section header */
|
||
.lq-section-title {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
color: #0F172A; margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
|
||
}
|
||
|
||
/* question pick cards */
|
||
.lq-q-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
|
||
.lq-q-card {
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
|
||
border-radius: 14px; padding: 14px 16px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
box-shadow: 0 1px 4px rgba(15,23,42,0.04); transition: all 0.15s;
|
||
}
|
||
.lq-q-card:hover { border-color: rgba(155,93,229,0.25); }
|
||
.lq-q-card.launched { border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.03); }
|
||
.lq-q-body { flex: 1; min-width: 0; }
|
||
.lq-q-text {
|
||
font-size: 0.84rem; font-weight: 600; color: #0F172A;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.lq-q-meta { font-size: 0.7rem; color: #8898AA; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.btn-launch {
|
||
padding: 7px 16px; border: none; border-radius: 999px;
|
||
background: var(--grad-1); color: #fff;
|
||
font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; flex-shrink: 0;
|
||
display: flex; align-items: center; gap: 5px;
|
||
}
|
||
.btn-launch:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(155,93,229,0.3); }
|
||
.btn-launch:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
|
||
|
||
/* ── active question display ── */
|
||
.lq-active-wrap {
|
||
background: #fff; border: 1.5px solid rgba(155,93,229,0.25);
|
||
border-radius: 20px; padding: 22px 24px;
|
||
box-shadow: 0 4px 16px rgba(155,93,229,0.08); margin-bottom: 20px;
|
||
}
|
||
.lq-active-label {
|
||
font-size: 0.68rem; font-weight: 700; color: var(--violet);
|
||
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.lq-active-text {
|
||
font-size: 0.96rem; font-weight: 700; color: #0F172A;
|
||
line-height: 1.55; margin-bottom: 16px;
|
||
}
|
||
.lq-active-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
|
||
.lq-active-opt {
|
||
padding: 8px 14px; border-radius: 10px;
|
||
border: 1.5px solid rgba(15,23,42,0.08);
|
||
font-size: 0.82rem; font-weight: 500; color: #3D4F6B;
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.lq-active-opt.correct {
|
||
border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.06);
|
||
color: #059652; font-weight: 700;
|
||
}
|
||
.lq-opt-letter {
|
||
width: 22px; height: 22px; border-radius: 6px;
|
||
background: rgba(15,23,42,0.07); flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.72rem; font-weight: 800; color: #8898AA;
|
||
}
|
||
.lq-active-opt.correct .lq-opt-letter { background: #06D6A0; color: #fff; }
|
||
|
||
/* answer counter */
|
||
.lq-counter {
|
||
display: flex; align-items: center; gap: 16px;
|
||
padding: 14px 18px; background: rgba(155,93,229,0.05);
|
||
border-radius: 14px; margin-bottom: 14px;
|
||
}
|
||
.lq-counter-val {
|
||
font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 900;
|
||
color: var(--violet);
|
||
}
|
||
.lq-counter-label { font-size: 0.78rem; color: #8898AA; font-weight: 600; }
|
||
.lq-counter-bar-wrap {
|
||
flex: 1; height: 8px; background: rgba(155,93,229,0.1); border-radius: 999px; overflow: hidden;
|
||
}
|
||
.lq-counter-bar {
|
||
height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0);
|
||
border-radius: 999px; transition: width 0.4s ease;
|
||
}
|
||
|
||
.btn-show-results {
|
||
padding: 10px 24px; border: none; border-radius: 999px;
|
||
background: linear-gradient(135deg, #06D6E0, #9B5DE5);
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
color: #fff; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
|
||
display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.btn-show-results:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,93,229,0.3); }
|
||
|
||
/* ── results chart ── */
|
||
.lq-results-wrap {
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
|
||
border-radius: 20px; padding: 20px 22px; margin-top: 14px;
|
||
}
|
||
.lq-results-title {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||
color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.result-bars { display: flex; flex-direction: column; gap: 10px; }
|
||
.result-bar-row { display: flex; align-items: center; gap: 10px; }
|
||
.result-bar-label {
|
||
min-width: 120px; font-size: 0.78rem; font-weight: 600; color: #3D4F6B;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.result-bar-label.correct-lbl { color: #059652; font-weight: 700; }
|
||
.rb-correct-marker { color: #06D6A0; }
|
||
.result-bar-track { flex: 1; height: 18px; background: rgba(15,23,42,0.05); border-radius: 999px; overflow: hidden; position: relative; }
|
||
.result-bar-fill {
|
||
height: 100%; border-radius: 999px; transition: width 0.5s ease;
|
||
background: rgba(155,93,229,0.35);
|
||
}
|
||
.result-bar-fill.correct-fill { background: linear-gradient(90deg, #06D6A0, #06D6E0); }
|
||
.result-bar-count {
|
||
min-width: 36px; text-align: right;
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #0F172A;
|
||
}
|
||
|
||
/* no session state */
|
||
.lq-no-session {
|
||
text-align: center; padding: 80px 20px; color: #8898AA;
|
||
}
|
||
.lq-no-session-icon { margin-bottom: 14px; opacity: 0.2; }
|
||
|
||
/* badges */
|
||
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; }
|
||
.badge-diff-1 { background: rgba(6,214,160,0.12); color: #059652; }
|
||
.badge-diff-2 { background: rgba(255,179,71,0.15); color: #B8860B; }
|
||
.badge-diff-3 { background: rgba(239,71,111,0.12); color: #EF476F; }
|
||
.badge-type { background: rgba(6,214,224,0.12); color: #0891B2; }
|
||
|
||
/* ── nav ── */
|
||
.nav-active {
|
||
background: rgba(155,93,229,0.08) !important;
|
||
border-color: var(--violet) !important;
|
||
color: var(--violet) !important;
|
||
cursor: default; pointer-events: none;
|
||
}
|
||
.notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
|
||
.notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
|
||
.notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
|
||
.notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
|
||
.notif-item:last-child { border-bottom: none; }
|
||
.notif-item:hover { background: rgba(155,93,229,0.04); }
|
||
.notif-item.unread { background: rgba(155,93,229,0.05); }
|
||
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
|
||
.notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
|
||
.notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
|
||
.notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
|
||
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
|
||
|
||
@media (max-width: 768px) {
|
||
.lq-body { flex-direction: column; }
|
||
.lq-left { width: 100%; max-height: 220px; border-right: none; border-bottom: 1.5px solid rgba(15,23,42,0.08); }
|
||
.lq-right { padding: 14px 12px 60px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-layout">
|
||
<aside class="sidebar">
|
||
<div class="sb-brand">
|
||
<a href="/dashboard" class="sb-logo"><span class="sb-lbl">Learn<span>Space</span></span></a>
|
||
<button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть меню"><i data-lucide="chevron-left" class="sb-icon"></i></button>
|
||
</div>
|
||
<nav class="sb-nav">
|
||
<button class="sb-link" onclick="lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
|
||
<a href="/dashboard" class="sb-link"><i data-lucide="home" class="sb-icon"></i><span class="sb-lbl">Дашборд</span></a>
|
||
<a href="/board" class="sb-link"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
|
||
<a href="/classes" class="sb-link"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></a>
|
||
<a href="/library" class="sb-link"><i data-lucide="book-open" class="sb-icon"></i><span class="sb-lbl">Библиотека</span></a>
|
||
<a href="/theory" class="sb-link"><i data-lucide="brain" class="sb-icon"></i><span class="sb-lbl">Теория</span></a>
|
||
<a href="/lab" class="sb-link"><i data-lucide="atom" class="sb-icon"></i><span class="sb-lbl">Лаборатория</span></a>
|
||
<a href="/biochem" class="sb-link"><i data-lucide="flask-conical" class="sb-icon"></i><span class="sb-lbl">Биохимия</span></a>
|
||
<a href="/hangman" class="sb-link"><i data-lucide="gamepad-2" class="sb-icon"></i><span class="sb-lbl">Виселица</span></a>
|
||
<a href="/crossword" class="sb-link"><i data-lucide="grid-3x3" class="sb-icon"></i><span class="sb-lbl">Кроссворд</span></a>
|
||
<a href="/pet" class="sb-link"><i data-lucide="heart" class="sb-icon"></i><span class="sb-lbl">Питомец</span></a>
|
||
<a href="/collection" class="sb-link"><i data-lucide="layers" class="sb-icon"></i><span class="sb-lbl">Коллекция</span></a>
|
||
<a href="/knowledge-map" class="sb-link"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
|
||
<a href="/red-book.html" class="sb-link"><i data-lucide="leaf" class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
|
||
<a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
|
||
<div class="sb-divider"></div>
|
||
<a href="/analytics" class="sb-link"><i data-lucide="bar-chart-2" class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
|
||
<a href="/question-bank" class="sb-link"><i data-lucide="database" class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
|
||
<a href="/live-quiz" class="sb-link nav-active"><i data-lucide="radio" class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
|
||
<a href="/gradebook" class="sb-link"><i data-lucide="table" class="sb-icon"></i><span class="sb-lbl">Журнал</span></a>
|
||
<a href="/admin" class="sb-link" id="btn-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
|
||
</nav>
|
||
<div style="padding: 4px 2px">
|
||
<div id="notif-wrap">
|
||
<button class="sb-link" id="notif-btn" onclick="toggleNotifDrop()">
|
||
<i data-lucide="bell" class="sb-icon"></i><span class="sb-lbl">Уведомления</span>
|
||
<span class="sb-badge" id="notif-badge" style="display:none"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="sb-foot">
|
||
<a href="/profile" class="sb-user-row" style="text-decoration:none">
|
||
<div class="sb-avatar" id="nav-avatar">?</div>
|
||
<div class="sb-user-info">
|
||
<div class="sb-user-name" id="nav-user">—</div>
|
||
<span class="sb-logout" style="pointer-events:none">Мой профиль</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
<div class="notif-drop" id="notif-drop"></div>
|
||
<div class="sb-content">
|
||
|
||
<!-- Header -->
|
||
<div class="lq-header">
|
||
<div class="lq-header-dots"></div>
|
||
<div class="lq-header-inner">
|
||
<div class="lq-title"><i data-lucide="radio" style="width:22px;height:22px;opacity:0.5"></i> Live-квиз</div>
|
||
<div id="session-header-chip" style="display:none" class="lq-session-chip">
|
||
<div class="dot"></div>
|
||
<span id="session-header-label">Сессия активна</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="lq-body">
|
||
|
||
<!-- Left: class selector + session control -->
|
||
<div class="lq-left">
|
||
<div class="lq-panel-head">
|
||
<i data-lucide="graduation-cap" style="width:14px;height:14px;opacity:0.5"></i>
|
||
Выберите класс
|
||
</div>
|
||
<div class="class-list" id="class-list">
|
||
<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">
|
||
<div class="spinner" style="margin:0 auto 10px"></div>
|
||
Загрузка классов…
|
||
</div>
|
||
</div>
|
||
<div class="lq-session-area" id="session-area">
|
||
<div id="active-status-wrap" style="display:none">
|
||
<div class="active-status">
|
||
<div class="as-label">Статус сессии</div>
|
||
<div class="as-val"><div class="as-dot"></div> <span id="as-students-text">Активна</span></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn-start" id="btn-start" onclick="startSession()" disabled>
|
||
<i data-lucide="play" style="width:14px;height:14px"></i>
|
||
Начать сессию
|
||
</button>
|
||
<button class="btn-end" id="btn-end" onclick="endSession()" style="display:none">
|
||
<i data-lucide="square" style="width:14px;height:14px"></i>
|
||
Завершить сессию
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: question launcher + active question -->
|
||
<div class="lq-right">
|
||
|
||
<!-- No session state -->
|
||
<div id="no-session-state">
|
||
<div class="lq-no-session">
|
||
<div class="lq-no-session-icon"><i data-lucide="radio" style="width:64px;height:64px"></i></div>
|
||
<div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:1rem;color:#0F172A;margin-bottom:8px">Нет активной сессии</div>
|
||
<div style="font-size:0.84rem">Выберите класс и нажмите «Начать сессию»,<br>чтобы запустить Live-квиз</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Session active state -->
|
||
<div id="session-state" style="display:none">
|
||
|
||
<!-- Active question -->
|
||
<div id="active-q-wrap" style="display:none">
|
||
<div class="lq-section-title" style="margin-bottom:10px">
|
||
<i data-lucide="zap" style="width:14px;height:14px;color:#FFB347"></i>
|
||
Активный вопрос
|
||
</div>
|
||
<div class="lq-active-wrap" id="active-q-card">
|
||
<!-- filled by JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question search & list -->
|
||
<div class="lq-section-title">
|
||
<i data-lucide="list" style="width:14px;height:14px;opacity:0.5"></i>
|
||
Вопросы для запуска
|
||
</div>
|
||
<div class="lq-search-wrap">
|
||
<i data-lucide="search" class="lq-search-icon"></i>
|
||
<input class="lq-search" id="q-search" type="text" placeholder="Поиск вопросов…" />
|
||
</div>
|
||
<div class="lq-q-list" id="q-list">
|
||
<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">
|
||
<div class="spinner" style="margin:0 auto 10px"></div>
|
||
Загрузка вопросов…
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/api.js"></script>
|
||
<script>
|
||
if (!LS.requireAuth()) throw new Error();
|
||
|
||
const user = LS.getUser();
|
||
document.getElementById('nav-user').textContent = user?.name || user?.email || '';
|
||
document.getElementById('nav-avatar').textContent =
|
||
(user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
|
||
|
||
const isTeacher = ['admin', 'teacher'].includes(user?.role);
|
||
if (!isTeacher) { location.href = '/dashboard'; throw new Error(); }
|
||
if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
|
||
|
||
/* ── helpers ── */
|
||
function fmtTime(s) {
|
||
const d = new Date(s && s.includes('T') ? s : (s || '').replace(' ', 'T') + 'Z');
|
||
const diff = Date.now() - d.getTime();
|
||
if (diff < 60000) return 'только что';
|
||
if (diff < 3600000) return Math.floor(diff / 60000) + ' мин назад';
|
||
return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
|
||
}
|
||
const TYPE_LABELS = {
|
||
single: 'Один ответ', multi: 'Несколько', true_false: 'Да/Нет',
|
||
short_answer: 'Краткий ответ', matching: 'Соответствие',
|
||
'fill-blank': 'Заполни пробел', ordering: 'Порядок',
|
||
};
|
||
|
||
/* ── sidebar ── */
|
||
function toggleSidebar() {
|
||
const layout = document.querySelector('.app-layout');
|
||
const collapsed = layout.classList.toggle('sb-collapsed');
|
||
localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
|
||
lucide.createIcons();
|
||
}
|
||
if (localStorage.getItem('ls_sb_collapsed'))
|
||
document.querySelector('.app-layout').classList.add('sb-collapsed');
|
||
|
||
/* ── notifications ── */
|
||
function toggleNotifDrop() {
|
||
const btn = document.getElementById('notif-btn');
|
||
const drop = document.getElementById('notif-drop');
|
||
const r = btn.getBoundingClientRect();
|
||
drop.style.left = (r.right + 8) + 'px';
|
||
drop.style.top = r.top + 'px';
|
||
if (drop.classList.toggle('open')) loadNotifs();
|
||
}
|
||
async function loadNotifs() {
|
||
const drop = document.getElementById('notif-drop');
|
||
drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
|
||
try {
|
||
const data = await LS.api('/api/notifications?limit=20');
|
||
const items = data.items || [];
|
||
const badge = document.getElementById('notif-badge');
|
||
const unread = items.filter(n => !n.is_read).length;
|
||
badge.textContent = unread; badge.style.display = unread ? '' : 'none';
|
||
if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
|
||
drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
|
||
items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${n.link || '#'}" onclick="markRead(${n.id})">
|
||
<div class="notif-dot${n.is_read ? ' read' : ''}"></div>
|
||
<div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
|
||
</a>`).join('');
|
||
} catch {}
|
||
}
|
||
async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method: 'POST' }); } catch {} }
|
||
async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method: 'POST' }); loadNotifs(); } catch {} }
|
||
document.addEventListener('click', e => {
|
||
const drop = document.getElementById('notif-drop');
|
||
if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
|
||
drop.classList.remove('open');
|
||
});
|
||
|
||
/* ── state ── */
|
||
let selectedClass = null;
|
||
let activeSession = null;
|
||
let currentQuestion = null;
|
||
let memberCount = 0;
|
||
let answerCount = 0;
|
||
let sseSource = null;
|
||
let allQuestions = [];
|
||
let filteredQuestions = [];
|
||
let searchTimeout = null;
|
||
|
||
/* ── load classes ── */
|
||
async function loadClasses() {
|
||
try {
|
||
const classes = await LS.api('/api/classes');
|
||
const list = document.getElementById('class-list');
|
||
if (!(classes || []).length) {
|
||
list.innerHTML = '<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">Нет доступных классов</div>';
|
||
lucide.createIcons();
|
||
return;
|
||
}
|
||
let html = '';
|
||
(classes || []).forEach(c => {
|
||
const initials = (c.name || '?').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || '?';
|
||
html += `<div class="class-card" id="cc-${c.id}" onclick="selectClass(${c.id}, '${esc(c.name)}', ${c.members_count || 0})">
|
||
<div class="class-card-icon">${initials}</div>
|
||
<div>
|
||
<div class="class-card-name">${esc(c.name)}</div>
|
||
<div class="class-card-meta">${c.members_count || 0} учеников</div>
|
||
</div>
|
||
</div>`;
|
||
});
|
||
list.innerHTML = html;
|
||
lucide.createIcons();
|
||
} catch {
|
||
document.getElementById('class-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки</div>';
|
||
}
|
||
}
|
||
|
||
async function selectClass(id, name, members) {
|
||
if (activeSession) {
|
||
if (!await LS.confirm('Выбрать другой класс?', { title: 'Завершить текущую сессию?', confirmText: 'Завершить', danger: true })) return;
|
||
endSession(true);
|
||
}
|
||
selectedClass = { id, name, members };
|
||
memberCount = members;
|
||
|
||
document.querySelectorAll('.class-card').forEach(el => el.classList.remove('active'));
|
||
const card = document.getElementById('cc-' + id);
|
||
if (card) card.classList.add('active');
|
||
|
||
document.getElementById('btn-start').disabled = false;
|
||
lucide.createIcons();
|
||
}
|
||
|
||
/* ── start session ── */
|
||
async function startSession() {
|
||
if (!selectedClass || activeSession) return;
|
||
const btn = document.getElementById('btn-start');
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<div class="spinner" style="width:16px;height:16px;margin:0"></div> Создаём…';
|
||
try {
|
||
const session = await LS.api('/api/live', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ class_id: selectedClass.id }),
|
||
});
|
||
activeSession = session;
|
||
onSessionActive();
|
||
loadQuestions();
|
||
startSSE();
|
||
} catch (e) {
|
||
LS.toast(e.message || 'Ошибка создания сессии', 'error');
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px"></i> Начать сессию';
|
||
lucide.createIcons();
|
||
}
|
||
}
|
||
|
||
function onSessionActive() {
|
||
document.getElementById('no-session-state').style.display = 'none';
|
||
document.getElementById('session-state').style.display = '';
|
||
document.getElementById('active-status-wrap').style.display = '';
|
||
document.getElementById('btn-start').style.display = 'none';
|
||
document.getElementById('btn-end').style.display = '';
|
||
document.getElementById('session-header-chip').style.display = '';
|
||
document.getElementById('session-header-label').innerHTML =
|
||
'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg> Активна · ' + selectedClass.name;
|
||
updateStudentCounter(0);
|
||
lucide.createIcons();
|
||
}
|
||
|
||
function updateStudentCounter(count) {
|
||
answerCount = count;
|
||
document.getElementById('as-students-text').textContent =
|
||
'Ответили: ' + count + ' / ' + memberCount;
|
||
}
|
||
|
||
/* ── end session ── */
|
||
async function endSession(silent = false) {
|
||
if (!activeSession) return;
|
||
if (!silent && !await LS.confirm('Все участники увидят, что сессия завершена.', { title: 'Завершить Live-квиз?', confirmText: 'Завершить', danger: true })) return;
|
||
const id = activeSession.id;
|
||
activeSession = null;
|
||
currentQuestion = null;
|
||
if (sseSource) { sseSource.close(); sseSource = null; }
|
||
|
||
document.getElementById('no-session-state').style.display = '';
|
||
document.getElementById('session-state').style.display = 'none';
|
||
document.getElementById('active-q-wrap').style.display = 'none';
|
||
document.getElementById('active-status-wrap').style.display = 'none';
|
||
document.getElementById('btn-start').style.display = '';
|
||
document.getElementById('btn-end').style.display = 'none';
|
||
document.getElementById('session-header-chip').style.display = 'none';
|
||
const btn = document.getElementById('btn-start');
|
||
btn.disabled = !selectedClass;
|
||
btn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px"></i> Начать сессию';
|
||
lucide.createIcons();
|
||
|
||
try { await LS.api('/api/live/' + id, { method: 'DELETE' }); } catch {}
|
||
}
|
||
|
||
/* ── SSE for real-time answer count ── */
|
||
function startSSE() {
|
||
const token = localStorage.getItem('ls_token');
|
||
if (!token) return;
|
||
try {
|
||
sseSource = new EventSource('/api/notifications/stream?token=' + encodeURIComponent(token));
|
||
sseSource.onmessage = (ev) => {
|
||
try {
|
||
const msg = JSON.parse(ev.data);
|
||
if (msg.type === 'live_answer_count' && activeSession && msg.liveId === activeSession.id) {
|
||
updateStudentCounter(msg.count || 0);
|
||
// update counter in active-q-card if visible
|
||
const counterEl = document.getElementById('lq-answer-count');
|
||
if (counterEl) counterEl.textContent = (msg.count || 0) + ' / ' + memberCount;
|
||
const barEl = document.getElementById('lq-answer-bar');
|
||
if (barEl) {
|
||
const pct = memberCount > 0 ? Math.round(((msg.count || 0) / memberCount) * 100) : 0;
|
||
barEl.style.width = pct + '%';
|
||
}
|
||
}
|
||
} catch {}
|
||
};
|
||
sseSource.onerror = () => {
|
||
sseSource.close();
|
||
sseSource = null;
|
||
// retry after 5s if session still active
|
||
if (activeSession) setTimeout(startSSE, 5000);
|
||
};
|
||
} catch {}
|
||
}
|
||
|
||
/* ── load questions ── */
|
||
async function loadQuestions() {
|
||
document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA"><div class="spinner" style="margin:0 auto 10px"></div> Загрузка…</div>';
|
||
try {
|
||
const data = await LS.api('/api/questions?limit=50');
|
||
allQuestions = data.rows || [];
|
||
filteredQuestions = allQuestions;
|
||
renderQuestionList();
|
||
} catch {
|
||
document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки вопросов</div>';
|
||
}
|
||
}
|
||
|
||
function renderQuestionList() {
|
||
const list = document.getElementById('q-list');
|
||
if (!filteredQuestions.length) {
|
||
list.innerHTML = '<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">Вопросов не найдено</div>';
|
||
lucide.createIcons();
|
||
return;
|
||
}
|
||
let html = '';
|
||
filteredQuestions.forEach(q => {
|
||
const diffCls = 'badge-diff-' + (q.difficulty || 1);
|
||
const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 2 ? 'Средний' : 'Сложный';
|
||
const typeLabel = TYPE_LABELS[q.type] || q.type || '';
|
||
const isLaunched = currentQuestion && currentQuestion.id === q.id;
|
||
html += `<div class="lq-q-card${isLaunched ? ' launched' : ''}">
|
||
<div class="lq-q-body">
|
||
<div class="lq-q-text">${esc(q.text)}</div>
|
||
<div class="lq-q-meta">
|
||
<span class="badge ${diffCls}">${diffLabel}</span>
|
||
${typeLabel ? `<span class="badge badge-type">${esc(typeLabel)}</span>` : ''}
|
||
${q.topic ? `<span>${esc(q.topic)}</span>` : ''}
|
||
</div>
|
||
</div>
|
||
<button class="btn-launch" onclick="launchQuestion(${q.id})" ${isLaunched ? 'disabled' : ''}>
|
||
${isLaunched ? '<i data-lucide="check" style="width:13px;height:13px"></i> Запущен' : '<i data-lucide="zap" style="width:13px;height:13px"></i> Запустить'}
|
||
</button>
|
||
</div>`;
|
||
});
|
||
list.innerHTML = html;
|
||
lucide.createIcons();
|
||
}
|
||
|
||
/* search questions */
|
||
document.getElementById('q-search').addEventListener('input', () => {
|
||
clearTimeout(searchTimeout);
|
||
searchTimeout = setTimeout(() => {
|
||
const q = document.getElementById('q-search').value.trim().toLowerCase();
|
||
filteredQuestions = q
|
||
? allQuestions.filter(item => item.text.toLowerCase().includes(q) || (item.topic || '').toLowerCase().includes(q))
|
||
: allQuestions;
|
||
renderQuestionList();
|
||
}, 280);
|
||
});
|
||
|
||
/* ── launch question ── */
|
||
async function launchQuestion(questionId) {
|
||
if (!activeSession) return;
|
||
const q = allQuestions.find(x => x.id === questionId);
|
||
if (!q) return;
|
||
try {
|
||
await LS.api('/api/live/' + activeSession.id + '/question', {
|
||
method: 'PUT',
|
||
body: JSON.stringify({ question_id: questionId }),
|
||
});
|
||
currentQuestion = q;
|
||
answerCount = 0;
|
||
updateStudentCounter(0);
|
||
renderActiveQuestion(q);
|
||
renderQuestionList();
|
||
} catch (e) {
|
||
LS.toast(e.message || 'Ошибка запуска вопроса', 'error');
|
||
}
|
||
}
|
||
|
||
function renderActiveQuestion(q) {
|
||
const wrap = document.getElementById('active-q-wrap');
|
||
const card = document.getElementById('active-q-card');
|
||
wrap.style.display = '';
|
||
|
||
const diffCls = 'badge-diff-' + (q.difficulty || 1);
|
||
const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 2 ? 'Средний' : 'Сложный';
|
||
const typeLabel = TYPE_LABELS[q.type] || q.type || '';
|
||
const pct = memberCount > 0 ? Math.round((answerCount / memberCount) * 100) : 0;
|
||
|
||
let optionsHtml = '';
|
||
if ((q.options || []).length) {
|
||
optionsHtml = '<div class="lq-active-options">';
|
||
q.options.forEach((opt, idx) => {
|
||
const letter = String.fromCharCode(65 + idx);
|
||
optionsHtml += `<div class="lq-active-opt${opt.is_correct ? ' correct' : ''}">
|
||
<div class="lq-opt-letter">${opt.is_correct ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : letter}</div>
|
||
<span>${esc(opt.text)}</span>
|
||
</div>`;
|
||
});
|
||
optionsHtml += '</div>';
|
||
}
|
||
|
||
card.innerHTML = `
|
||
<div class="lq-active-label">
|
||
<div class="dot" style="width:7px;height:7px;border-radius:50%;background:#FFB347;animation:pulse-dot 1.5s ease infinite"></div>
|
||
В эфире · <span class="badge ${diffCls}">${diffLabel}</span>
|
||
${typeLabel ? `<span class="badge badge-type">${esc(typeLabel)}</span>` : ''}
|
||
</div>
|
||
<div class="lq-active-text">${esc(q.text)}</div>
|
||
${optionsHtml}
|
||
<div class="lq-counter">
|
||
<div>
|
||
<div class="lq-counter-val" id="lq-answer-count">${answerCount} / ${memberCount}</div>
|
||
<div class="lq-counter-label">студентов ответили</div>
|
||
</div>
|
||
<div class="lq-counter-bar-wrap">
|
||
<div class="lq-counter-bar" id="lq-answer-bar" style="width:${pct}%"></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn-show-results" onclick="showResults()">
|
||
<i data-lucide="bar-chart-2" style="width:14px;height:14px"></i>
|
||
Показать результаты
|
||
</button>
|
||
<div id="results-area"></div>
|
||
`;
|
||
lucide.createIcons();
|
||
wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
|
||
/* ── show results ── */
|
||
async function showResults() {
|
||
if (!activeSession || !currentQuestion) return;
|
||
const resultsArea = document.getElementById('results-area');
|
||
if (!resultsArea) return;
|
||
resultsArea.innerHTML = '<div class="spinner" style="margin:20px auto"></div>';
|
||
try {
|
||
const data = await LS.api('/api/live/' + activeSession.id + '/results');
|
||
renderResults(data, resultsArea);
|
||
} catch (e) {
|
||
resultsArea.innerHTML = `<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.84rem">${esc(e.message || 'Ошибка загрузки результатов')}</div>`;
|
||
}
|
||
}
|
||
|
||
function renderResults(data, container) {
|
||
const { answers = [], options = [] } = data;
|
||
// count answers per option
|
||
const countMap = {};
|
||
answers.forEach(a => {
|
||
const key = a.option_id ?? a.answer ?? 'other';
|
||
countMap[key] = (countMap[key] || 0) + 1;
|
||
});
|
||
const totalAnswers = answers.length;
|
||
const maxCount = Math.max(...Object.values(countMap), 1);
|
||
|
||
// use options from current question if not in results
|
||
const opts = options.length ? options : (currentQuestion?.options || []);
|
||
|
||
if (!opts.length) {
|
||
container.innerHTML = '<div style="padding:16px;text-align:center;color:#8898AA;font-size:0.84rem">Нет данных о вариантах ответа</div>';
|
||
return;
|
||
}
|
||
|
||
let html = `<div class="lq-results-wrap">
|
||
<div class="lq-results-title"><i data-lucide="bar-chart-horizontal" style="width:14px;height:14px;opacity:0.5"></i> Результаты · ${totalAnswers} ответов</div>
|
||
<div class="result-bars">`;
|
||
|
||
opts.forEach((opt, idx) => {
|
||
const letter = String.fromCharCode(65 + idx);
|
||
const key = opt.id ?? idx;
|
||
const count = countMap[key] || 0;
|
||
const pct = Math.round((count / Math.max(maxCount, 1)) * 100);
|
||
const isCorrect = opt.is_correct;
|
||
html += `<div class="result-bar-row">
|
||
<div class="result-bar-label${isCorrect ? ' correct-lbl' : ''}">
|
||
${isCorrect ? '<span class="rb-correct-marker"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' : letter + '.'}
|
||
<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px">${esc(opt.text)}</span>
|
||
</div>
|
||
<div class="result-bar-track">
|
||
<div class="result-bar-fill${isCorrect ? ' correct-fill' : ''}" style="width:${pct}%"></div>
|
||
</div>
|
||
<div class="result-bar-count">${count}</div>
|
||
</div>`;
|
||
});
|
||
|
||
html += '</div></div>';
|
||
container.innerHTML = html;
|
||
lucide.createIcons();
|
||
}
|
||
|
||
lucide.createIcons();
|
||
loadClasses();
|
||
</script>
|
||
<script src="/js/notifications.js"></script>
|
||
<script src="/js/search.js"></script>
|
||
<script src="/js/mobile.js"></script>
|
||
</body>
|
||
</html>
|