Maxim Dolgolyov
26ba289019
- css/ls.css: --text-3 #8898AA → #56687A (5.1:1 contrast), min-height 44px on .btn-primary/.btn-ghost/.sb-link, new .icon-btn utility (44×44px) - js/api.js: lsConfirm — role=dialog, aria-modal, aria-labelledby, Tab focus trap, restore focus on close; lsToast — aria-live=polite on container, role=alert on errors; live quiz — role=dialog, role=radiogroup, role=radio, aria-checked, keyboard support - test-run.html: q-opt divs — role=radio/checkbox, aria-checked, tabindex, keyboard enter/space; confirm modal — role=dialog, aria-modal; btn-flag — aria-pressed; dots — aria-label, aria-current; touch targets 44px - board.html: btn-del-ann — aria-label; reaction buttons — aria-label, aria-pressed - All 18 HTML files: replace hardcoded color:#8898AA with color:var(--text-3) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1191 lines
86 KiB
HTML
1191 lines
86 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Руководство для учителей — 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-y: auto; }
|
||
|
||
/* ── Two-column doc layout ── */
|
||
.tg-layout {
|
||
display: flex; align-items: flex-start;
|
||
max-width: 1320px; margin: 0 auto;
|
||
padding: 0 24px 80px; gap: 28px;
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* ══════════════════════════════
|
||
NAV SIDEBAR
|
||
══════════════════════════════ */
|
||
.tg-nav {
|
||
width: 264px; flex-shrink: 0;
|
||
position: sticky; top: 0;
|
||
max-height: 100vh; overflow-y: auto;
|
||
padding: 24px 0 40px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.tg-nav::-webkit-scrollbar { width: 3px; }
|
||
.tg-nav::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.25); border-radius: 99px; }
|
||
|
||
.tg-nav-header { padding: 0 16px 16px; border-bottom: 1px solid rgba(15,23,42,0.08); margin-bottom: 12px; }
|
||
.tg-nav-title {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
|
||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tg-progress-wrap { margin-bottom: 6px; }
|
||
.tg-progress-bar-outer {
|
||
height: 4px; background: rgba(15,23,42,0.08); border-radius: 99px; overflow: hidden;
|
||
}
|
||
.tg-progress-bar-inner {
|
||
height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0);
|
||
border-radius: 99px; width: 0%; transition: width 0.3s;
|
||
}
|
||
.tg-progress-text { font-size: 0.68rem; color: var(--text-3); margin-top: 5px; }
|
||
|
||
/* Search in nav */
|
||
.tg-nav-search {
|
||
padding: 0 12px 10px;
|
||
}
|
||
.tg-nav-search input {
|
||
width: 100%; padding: 7px 12px 7px 32px;
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.09);
|
||
border-radius: 10px; font-family: 'Manrope', sans-serif;
|
||
font-size: 0.78rem; color: #0F172A; outline: none;
|
||
transition: border-color 0.18s;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238898AA' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat; background-position: 10px center;
|
||
}
|
||
.tg-nav-search input:focus { border-color: rgba(155,93,229,0.4); }
|
||
|
||
/* Chapter items */
|
||
.tg-nav-chapter { margin-bottom: 2px; }
|
||
.tg-nav-ch-btn {
|
||
display: flex; align-items: center; gap: 9px;
|
||
width: 100%; padding: 8px 16px;
|
||
background: none; border: none; cursor: pointer;
|
||
border-radius: 10px; transition: background 0.15s;
|
||
font-family: 'Manrope', sans-serif; text-align: left;
|
||
}
|
||
.tg-nav-ch-btn:hover { background: rgba(155,93,229,0.07); }
|
||
.tg-nav-ch-btn.active { background: rgba(155,93,229,0.1); }
|
||
.tg-nav-ch-icon {
|
||
width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
|
||
background: rgba(15,23,42,0.06); display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tg-nav-ch-icon svg { width: 13px; height: 13px; color: var(--text-3); stroke: var(--text-3); }
|
||
.tg-nav-ch-btn.active .tg-nav-ch-icon { background: rgba(155,93,229,0.12); }
|
||
.tg-nav-ch-btn.active .tg-nav-ch-icon svg { color: #9B5DE5; stroke: #9B5DE5; }
|
||
.tg-nav-ch-label {
|
||
flex: 1; font-size: 0.8rem; font-weight: 600; color: #3D4F6B; line-height: 1.3;
|
||
}
|
||
.tg-nav-ch-btn.active .tg-nav-ch-label { color: #0F172A; font-weight: 700; }
|
||
.tg-nav-ch-status { flex-shrink: 0; }
|
||
.tg-nav-ch-status svg { width: 14px; height: 14px; color: #06D664; stroke: #06D664; display: none; }
|
||
.tg-nav-ch-btn.read .tg-nav-ch-status svg { display: block; }
|
||
.tg-nav-ch-chevron { flex-shrink: 0; transition: transform 0.2s; }
|
||
.tg-nav-ch-chevron svg { width: 12px; height: 12px; color: var(--text-3); stroke: var(--text-3); }
|
||
.tg-nav-chapter.open .tg-nav-ch-chevron { transform: rotate(90deg); }
|
||
|
||
/* Sub-sections */
|
||
.tg-nav-sections { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
|
||
.tg-nav-chapter.open .tg-nav-sections { max-height: 800px; }
|
||
.tg-nav-sec-link {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 5px 16px 5px 51px;
|
||
font-size: 0.74rem; color: var(--text-3); text-decoration: none;
|
||
border-radius: 8px; transition: all 0.15s; cursor: pointer;
|
||
}
|
||
.tg-nav-sec-link:hover { color: #0F172A; background: rgba(15,23,42,0.04); }
|
||
.tg-nav-sec-link.active {
|
||
color: #9B5DE5; font-weight: 600;
|
||
background: rgba(155,93,229,0.06);
|
||
}
|
||
.tg-nav-sec-link.active::before {
|
||
content: ''; width: 4px; height: 4px; border-radius: 50%;
|
||
background: #9B5DE5; flex-shrink: 0;
|
||
}
|
||
|
||
/* ══════════════════════════════
|
||
CONTENT AREA
|
||
══════════════════════════════ */
|
||
.tg-content { flex: 1; min-width: 0; padding: 24px 0; }
|
||
|
||
/* Hero */
|
||
.tg-hero {
|
||
background: linear-gradient(135deg, #f8f6ff 0%, #eef2ff 100%);
|
||
border: 1.5px solid rgba(155,93,229,0.15);
|
||
border-radius: 24px; padding: 40px 40px 36px;
|
||
margin-bottom: 36px; position: relative; overflow: hidden;
|
||
}
|
||
.tg-hero::before {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
background-image: radial-gradient(circle, rgba(15,23,42,0.035) 1px, transparent 1px);
|
||
background-size: 20px 20px; pointer-events: none;
|
||
}
|
||
.tg-hero-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: rgba(155,93,229,0.1); border: 1px solid rgba(155,93,229,0.25);
|
||
color: #7c3aed; font-size: 0.7rem; font-weight: 700;
|
||
letter-spacing: 0.1em; text-transform: uppercase;
|
||
padding: 4px 12px; border-radius: 99px; margin-bottom: 16px;
|
||
}
|
||
.tg-hero-title {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800;
|
||
line-height: 1.25; color: #0F172A; margin-bottom: 12px;
|
||
}
|
||
.tg-hero-title span {
|
||
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||
}
|
||
.tg-hero-sub { font-size: 0.9rem; color: #5a6a8a; line-height: 1.65; margin-bottom: 24px; max-width: 560px; }
|
||
.tg-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.tg-hero-chip {
|
||
display: flex; align-items: center; gap: 6px;
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
|
||
color: #3D4F6B; font-size: 0.76rem; font-weight: 600;
|
||
padding: 5px 12px; border-radius: 99px;
|
||
box-shadow: 0 1px 4px rgba(15,23,42,0.05);
|
||
}
|
||
.tg-hero-chip svg { width: 13px; height: 13px; }
|
||
|
||
/* Chapter */
|
||
.tg-chapter { margin-bottom: 0; display: none; }
|
||
.tg-chapter.tg-active { display: block; animation: tgFadeIn 0.28s ease; }
|
||
@keyframes tgFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
|
||
/* Search mode: reveal all chapters so matches are visible */
|
||
.tg-content.tg-search-mode .tg-chapter { display: block; margin-bottom: 32px; }
|
||
.tg-content.tg-search-mode .tg-chapter.search-hidden { display: none; }
|
||
.tg-chapter-header {
|
||
display: flex; align-items: center; gap: 16px;
|
||
padding: 28px 0 18px;
|
||
border-bottom: 2px solid rgba(155,93,229,0.12);
|
||
margin-bottom: 28px;
|
||
}
|
||
.tg-chapter-icon {
|
||
width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
|
||
background: rgba(155,93,229,0.1); border: 1.5px solid rgba(155,93,229,0.2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tg-chapter-icon svg { width: 24px; height: 24px; color: #9B5DE5; stroke: #9B5DE5; }
|
||
.tg-chapter-meta { flex: 1; }
|
||
.tg-chapter-num {
|
||
font-size: 0.66rem; font-weight: 700; color: var(--text-3);
|
||
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;
|
||
}
|
||
.tg-chapter-title {
|
||
font-family: 'Unbounded', sans-serif;
|
||
font-size: 1.25rem; font-weight: 800; color: #0F172A; line-height: 1.25;
|
||
}
|
||
.tg-chapter-try {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
padding: 8px 16px; border-radius: 99px;
|
||
background: rgba(155,93,229,0.1); border: 1.5px solid rgba(155,93,229,0.25);
|
||
color: #7c3aed; font-size: 0.78rem; font-weight: 700;
|
||
text-decoration: none; transition: all 0.18s; flex-shrink: 0;
|
||
}
|
||
.tg-chapter-try:hover { background: #9B5DE5; color: #fff; }
|
||
.tg-chapter-try svg { width: 14px; height: 14px; }
|
||
|
||
/* Section */
|
||
.tg-section { margin-bottom: 36px; scroll-margin-top: 24px; }
|
||
.tg-section-title {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
|
||
color: #0F172A; margin-bottom: 16px;
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.tg-section-title::before {
|
||
content: ''; display: block; width: 3px; height: 18px;
|
||
background: linear-gradient(180deg, #9B5DE5, #06D6E0);
|
||
border-radius: 99px; flex-shrink: 0;
|
||
}
|
||
.tg-section p { font-size: 0.88rem; color: #3D4F6B; line-height: 1.7; margin-bottom: 14px; }
|
||
|
||
/* Steps */
|
||
.tg-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
|
||
.tg-step {
|
||
display: flex; align-items: flex-start; gap: 14px;
|
||
padding: 14px 18px; background: #fff;
|
||
border: 1.5px solid rgba(15,23,42,0.07); border-radius: 14px;
|
||
box-shadow: 0 1px 4px rgba(15,23,42,0.04);
|
||
}
|
||
.tg-step-num {
|
||
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
|
||
background: rgba(155,93,229,0.1); border: 1.5px solid rgba(155,93,229,0.25);
|
||
color: #9B5DE5; font-family: 'Unbounded', sans-serif;
|
||
font-size: 0.68rem; font-weight: 800;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tg-step-body { flex: 1; font-size: 0.86rem; line-height: 1.6; color: #0F172A; }
|
||
.tg-step-body b { font-weight: 700; }
|
||
.tg-step-body code {
|
||
font-family: monospace; background: rgba(155,93,229,0.09);
|
||
padding: 1px 7px; border-radius: 6px; font-size: 0.83rem; color: #7c3aed;
|
||
}
|
||
|
||
/* Note boxes */
|
||
.tg-tip, .tg-warning, .tg-success, .tg-note {
|
||
display: flex; align-items: flex-start; gap: 12px;
|
||
padding: 14px 18px; border-radius: 14px; margin: 12px 0;
|
||
}
|
||
.tg-tip { background: rgba(6,214,224,0.06); border: 1.5px solid rgba(6,214,224,0.2); border-left: 4px solid #06D6E0; }
|
||
.tg-warning{ background: rgba(241,91,181,0.05); border: 1.5px solid rgba(241,91,181,0.2); border-left: 4px solid #F15BB5; }
|
||
.tg-success{ background: rgba(6,214,100,0.06); border: 1.5px solid rgba(6,214,100,0.2); border-left: 4px solid #06D664; }
|
||
.tg-note { background: rgba(155,93,229,0.05); border: 1.5px solid rgba(155,93,229,0.18); border-left: 4px solid #9B5DE5; }
|
||
.tg-box-icon { flex-shrink: 0; margin-top: 1px; }
|
||
.tg-box-icon svg { width: 18px; height: 18px; }
|
||
.tg-tip .tg-box-icon svg { color: #0891b2; stroke: #0891b2; }
|
||
.tg-warning .tg-box-icon svg { color: #db2777; stroke: #db2777; }
|
||
.tg-success .tg-box-icon svg { color: #059669; stroke: #059669; }
|
||
.tg-note .tg-box-icon svg { color: #9B5DE5; stroke: #9B5DE5; }
|
||
.tg-box-body { flex: 1; font-size: 0.84rem; line-height: 1.6; color: #0F172A; }
|
||
.tg-box-label { font-weight: 700; margin-bottom: 3px; font-size: 0.8rem; }
|
||
.tg-tip .tg-box-label { color: #0891b2; }
|
||
.tg-warning .tg-box-label { color: #db2777; }
|
||
.tg-success .tg-box-label { color: #059669; }
|
||
.tg-note .tg-box-label { color: #9B5DE5; }
|
||
|
||
/* Accordion (type cards, block types) */
|
||
.tg-accordion { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||
.tg-acc-item { background: #fff; border: 1.5px solid rgba(15,23,42,0.07); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(15,23,42,0.04); }
|
||
.tg-acc-head {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 13px 18px; cursor: pointer; user-select: none;
|
||
transition: background 0.15s;
|
||
}
|
||
.tg-acc-head:hover { background: rgba(155,93,229,0.04); }
|
||
.tg-acc-badge {
|
||
font-family: 'Unbounded', sans-serif; font-size: 0.65rem; font-weight: 800;
|
||
padding: 3px 9px; border-radius: 99px; flex-shrink: 0;
|
||
}
|
||
.tg-acc-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; flex: 1; }
|
||
.tg-acc-desc-short { font-size: 0.78rem; color: var(--text-3); }
|
||
.tg-acc-chevron { transition: transform 0.2s; }
|
||
.tg-acc-chevron svg { width: 14px; height: 14px; color: var(--text-3); stroke: var(--text-3); }
|
||
.tg-acc-item.open .tg-acc-chevron { transform: rotate(180deg); }
|
||
.tg-acc-body {
|
||
max-height: 0; overflow: hidden;
|
||
transition: max-height 0.25s ease, padding 0.25s;
|
||
padding: 0 18px;
|
||
}
|
||
.tg-acc-item.open .tg-acc-body { max-height: 400px; padding: 0 18px 16px; }
|
||
.tg-acc-body p { font-size: 0.83rem; color: #3D4F6B; line-height: 1.65; margin-top: 6px; }
|
||
.tg-acc-body ul { font-size: 0.83rem; color: #3D4F6B; line-height: 1.8; padding-left: 18px; margin-top: 6px; }
|
||
|
||
/* Checklist */
|
||
.tg-checklist { background: #fff; border: 1.5px solid rgba(15,23,42,0.07); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,0.04); }
|
||
.tg-checklist-header { padding: 18px 22px 14px; border-bottom: 1px solid rgba(15,23,42,0.07); display: flex; align-items: center; justify-content: space-between; }
|
||
.tg-checklist-title { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #0F172A; }
|
||
.tg-checklist-prog { font-size: 0.72rem; color: var(--text-3); }
|
||
.tg-checklist-bar { height: 4px; background: rgba(15,23,42,0.07); }
|
||
.tg-checklist-bar-inner { height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0); width: 0%; transition: width 0.4s; }
|
||
.tg-checklist-items { padding: 10px 12px 12px; }
|
||
.tg-cl-item {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 9px 10px; border-radius: 10px; transition: background 0.15s; cursor: pointer;
|
||
}
|
||
.tg-cl-item:hover { background: rgba(155,93,229,0.05); }
|
||
.tg-cl-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: #9B5DE5; cursor: pointer; flex-shrink: 0; }
|
||
.tg-cl-label { flex: 1; font-size: 0.84rem; color: #0F172A; font-weight: 500; }
|
||
.tg-cl-item.checked .tg-cl-label { text-decoration: line-through; color: var(--text-3); }
|
||
.tg-cl-link { font-size: 0.72rem; color: #9B5DE5; text-decoration: none; white-space: nowrap; }
|
||
.tg-cl-link:hover { text-decoration: underline; }
|
||
|
||
/* Keyboard shortcuts table */
|
||
.tg-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-bottom: 14px; }
|
||
.tg-kbd {
|
||
font-family: monospace; font-size: 0.78rem; font-weight: 700;
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.12);
|
||
border-bottom-width: 3px; border-radius: 7px;
|
||
padding: 3px 9px; color: #0F172A; white-space: nowrap;
|
||
align-self: center;
|
||
}
|
||
.tg-kbd-desc { font-size: 0.82rem; color: #3D4F6B; align-self: center; line-height: 1.4; }
|
||
|
||
/* UI mock */
|
||
.tg-mock {
|
||
background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
|
||
border-radius: 16px; overflow: hidden; margin: 16px 0;
|
||
box-shadow: 0 4px 16px rgba(15,23,42,0.07);
|
||
}
|
||
.tg-mock-bar {
|
||
height: 36px; background: rgba(15,23,42,0.04);
|
||
border-bottom: 1px solid rgba(15,23,42,0.07);
|
||
display: flex; align-items: center; gap: 7px; padding: 0 14px;
|
||
}
|
||
.tg-mock-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||
.tg-mock-body { padding: 16px 20px; }
|
||
.tg-mock-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
|
||
.tg-mock-skel { background: rgba(15,23,42,0.07); border-radius: 6px; }
|
||
|
||
/* Tools grid */
|
||
.tg-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
|
||
.tg-tool-card {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 11px 14px; background: #fff;
|
||
border: 1.5px solid rgba(15,23,42,0.07); border-radius: 12px;
|
||
box-shadow: 0 1px 4px rgba(15,23,42,0.04);
|
||
}
|
||
.tg-tool-icon {
|
||
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
|
||
background: rgba(155,93,229,0.09); display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tg-tool-icon svg { width: 16px; height: 16px; color: #9B5DE5; stroke: #9B5DE5; }
|
||
.tg-tool-name { font-size: 0.8rem; font-weight: 700; color: #0F172A; }
|
||
.tg-tool-desc { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
|
||
|
||
/* Chapter nav */
|
||
.tg-chapter-nav { display: flex; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1.5px solid rgba(15,23,42,0.08); }
|
||
.tg-ch-nav-btn {
|
||
flex: 1; display: flex; align-items: center; gap: 12px;
|
||
padding: 16px 20px; background: #fff;
|
||
border: 1.5px solid rgba(15,23,42,0.08); border-radius: 16px;
|
||
text-decoration: none; color: inherit; cursor: pointer;
|
||
transition: all 0.18s; box-shadow: 0 1px 6px rgba(15,23,42,0.04);
|
||
}
|
||
.tg-ch-nav-btn:hover { border-color: rgba(155,93,229,0.3); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
|
||
.tg-ch-nav-btn.next { flex-direction: row-reverse; text-align: right; }
|
||
.tg-ch-nav-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(155,93,229,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.tg-ch-nav-icon svg { width: 16px; height: 16px; color: #9B5DE5; stroke: #9B5DE5; }
|
||
.tg-ch-nav-label { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
|
||
.tg-ch-nav-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; margin-top: 2px; }
|
||
|
||
/* Divider */
|
||
.tg-divider { height: 1px; background: rgba(15,23,42,0.08); margin: 20px 0; }
|
||
|
||
/* Badge colors per question type */
|
||
.badge-single { background: rgba(155,93,229,0.12); color: #7c3aed; }
|
||
.badge-multiple { background: rgba(6,214,224,0.12); color: #0891b2; }
|
||
.badge-text { background: rgba(241,91,181,0.12); color: #db2777; }
|
||
.badge-number { background: rgba(6,214,100,0.12); color: #059669; }
|
||
.badge-order { background: rgba(255,179,71,0.12); color: #d97706; }
|
||
.badge-match { background: rgba(15,23,42,0.08); color: #3D4F6B; }
|
||
|
||
/* Highlight search matches */
|
||
mark { background: rgba(155,93,229,0.18); color: #7c3aed; border-radius: 3px; padding: 0 2px; }
|
||
|
||
/* Hidden by search filter */
|
||
.tg-section.search-hidden { display: none; }
|
||
.tg-chapter.search-hidden { display: none; }
|
||
|
||
/* Mobile */
|
||
@media (max-width: 1024px) {
|
||
.tg-layout { padding: 0 16px 60px; gap: 0; }
|
||
.tg-nav { display: none; }
|
||
.tg-content { padding: 20px 0; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.tg-hero { padding: 28px 22px; }
|
||
.tg-tools-grid { grid-template-columns: 1fr 1fr; }
|
||
.tg-chapter-nav { flex-direction: column; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-layout">
|
||
<aside class="sidebar" id="app-sidebar"></aside>
|
||
<div class="notif-drop" id="notif-drop"></div>
|
||
<div class="sb-content" id="tg-scroll">
|
||
|
||
<div class="tg-layout">
|
||
|
||
<!-- ══ LEFT NAV ══ -->
|
||
<nav class="tg-nav" id="tg-nav">
|
||
<div class="tg-nav-header">
|
||
<div class="tg-nav-title">Содержание</div>
|
||
<div class="tg-progress-wrap">
|
||
<div class="tg-progress-bar-outer"><div class="tg-progress-bar-inner" id="tg-prog-bar"></div></div>
|
||
<div class="tg-progress-text" id="tg-prog-text">0 из 10 глав прочитано</div>
|
||
</div>
|
||
</div>
|
||
<div class="tg-nav-search">
|
||
<input type="text" id="tg-search" placeholder="Поиск по руководству..." />
|
||
</div>
|
||
<div id="tg-nav-chapters"></div>
|
||
</nav>
|
||
|
||
<!-- ══ CONTENT ══ -->
|
||
<main class="tg-content">
|
||
|
||
<!-- Hero -->
|
||
<div class="tg-hero">
|
||
<div class="tg-hero-badge"><i data-lucide="book-marked" style="width:12px;height:12px"></i> Руководство для учителей</div>
|
||
<h1 class="tg-hero-title">Полное руководство по<br><span>LearnSpace</span></h1>
|
||
<p class="tg-hero-sub">Пошаговые инструкции по всем возможностям платформы — от создания первого класса до проведения онлайн-уроков в реальном времени.</p>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 1 ═══ -->
|
||
<div class="tg-chapter" id="ch-1">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="rocket"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 1</div>
|
||
<div class="tg-chapter-title">Быстрый старт</div>
|
||
</div>
|
||
<a href="/dashboard" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Открыть</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-1-1">
|
||
<div class="tg-section-title">1.1 Первый вход и настройка профиля</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Откройте LearnSpace и войдите, используя email и пароль, выданные администратором.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">После входа вы попадёте на <b>Дашборд</b>. Перейдите в раздел <b>«Профиль»</b> через боковое меню.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Укажите полное имя — ученики будут видеть его в классах и на уроках.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="lightbulb"></i></div><div class="tg-box-body"><div class="tg-box-label">Подсказка</div>Аватар генерируется автоматически из инициалов. Загрузить своё фото можно в настройках профиля.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-1-2">
|
||
<div class="tg-section-title">1.2 Знакомство с интерфейсом</div>
|
||
<p><b>Боковое меню (sidebar)</b> — доступ ко всем модулям. Учительские разделы (Аналитика, Банк вопросов, Live-квиз, Журнал) видны только при роли «Учитель».</p>
|
||
<div class="tg-shortcuts">
|
||
<span class="tg-kbd">Ctrl + K</span><span class="tg-kbd-desc">Быстрый поиск по урокам, вопросам, файлам</span>
|
||
<span class="tg-kbd">←</span><span class="tg-kbd-desc">Свернуть боковое меню (кнопка-шеврон вверху sidebar)</span>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="smartphone"></i></div><div class="tg-box-body"><div class="tg-box-label">Мобильная версия</div>На мобильных sidebar открывается кнопкой в нижней панели навигации.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-1-3">
|
||
<div class="tg-section-title">1.3 Ваш первый класс за 5 минут</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в раздел <b>«Классы»</b> через боковое меню.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Нажмите кнопку <b>«+»</b> в верхнем правом углу списка классов.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Заполните название, выберите предмет, добавьте описание (необязательно). Нажмите <b>«Создать»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Скопируйте код приглашения и отправьте ученикам.</div></div>
|
||
</div>
|
||
<div class="tg-success"><div class="tg-box-icon"><i data-lucide="check-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Готово!</div>Ученики смогут вступить в класс, введя код на своём дашборде в кнопке «Вступить в класс».</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-1-4">
|
||
<div class="tg-section-title">1.4 Контрольный список готовности</div>
|
||
<p>Отметьте выполненные шаги — прогресс сохраняется автоматически.</p>
|
||
<div class="tg-checklist">
|
||
<div class="tg-checklist-header">
|
||
<div class="tg-checklist-title">Чеклист нового учителя</div>
|
||
<div class="tg-checklist-prog" id="cl-prog">0 / 6</div>
|
||
</div>
|
||
<div class="tg-checklist-bar"><div class="tg-checklist-bar-inner" id="cl-bar"></div></div>
|
||
<div class="tg-checklist-items">
|
||
<label class="tg-cl-item" data-id="profile"><input type="checkbox" /><span class="tg-cl-label">Профиль настроен (имя, фото)</span><a href="/profile" class="tg-cl-link">Профиль →</a></label>
|
||
<label class="tg-cl-item" data-id="class"><input type="checkbox" /><span class="tg-cl-label">Первый класс создан</span><a href="/classes" class="tg-cl-link">Классы →</a></label>
|
||
<label class="tg-cl-item" data-id="students"><input type="checkbox" /><span class="tg-cl-label">Ученики приглашены</span><a href="/classes" class="tg-cl-link">Классы →</a></label>
|
||
<label class="tg-cl-item" data-id="question"><input type="checkbox" /><span class="tg-cl-label">Первый вопрос добавлен в банк</span><a href="/question-bank" class="tg-cl-link">Банк →</a></label>
|
||
<label class="tg-cl-item" data-id="assignment"><input type="checkbox" /><span class="tg-cl-label">Первое задание назначено</span><a href="/classes" class="tg-cl-link">Классы →</a></label>
|
||
<label class="tg-cl-item" data-id="library"><input type="checkbox" /><span class="tg-cl-label">Первый файл загружен в библиотеку</span><a href="/library" class="tg-cl-link">Библиотека →</a></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-2')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Управление классами</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 2 ═══ -->
|
||
<div class="tg-chapter" id="ch-2">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="graduation-cap"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 2</div>
|
||
<div class="tg-chapter-title">Управление классами</div>
|
||
</div>
|
||
<a href="/classes" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Классы</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-2-1">
|
||
<div class="tg-section-title">2.1 Создание класса</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Откройте раздел <b>«Классы»</b> → нажмите <b>«+»</b> в левой панели.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Введите <b>название</b>, выберите <b>предмет</b> из выпадающего списка, добавьте описание.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Нажмите <b>«Создать»</b>. Класс появится в списке слева.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="lightbulb"></i></div><div class="tg-box-body"><div class="tg-box-label">Подсказка</div>Название видят ученики — используйте понятные: <code>8-Б Биология</code> или <code>Физика 10 класс</code>.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-2-2">
|
||
<div class="tg-section-title">2.2 Приглашение учеников</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Выберите класс из списка слева → в детальной панели найдите <b>блок с кодом</b> приглашения.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Нажмите на код — он автоматически скопируется в буфер обмена.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Отправьте код ученикам (мессенджер, на доске). Ученики вводят его через <b>«Вступить в класс»</b> на своём дашборде.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="link"></i></div><div class="tg-box-body"><div class="tg-box-label">Ссылка-приглашение</div>Кнопка «Копировать ссылку» рядом с кодом — ученик перейдёт по ней и автоматически вступит в класс.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-2-3">
|
||
<div class="tg-section-title">2.3 Просмотр состава и удаление ученика</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Откройте класс → вкладка <b>«Ученики»</b>. Таблица: имя, email, средний балл, дата вступления.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Для удаления — нажмите кнопку <b>«X»</b> справа от имени ученика и подтвердите.</div></div>
|
||
</div>
|
||
<div class="tg-warning"><div class="tg-box-icon"><i data-lucide="alert-triangle"></i></div><div class="tg-box-body"><div class="tg-box-label">Внимание</div>Удалённый ученик потеряет доступ к заданиям и материалам класса. Его результаты сохранятся в аналитике.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-2-4">
|
||
<div class="tg-section-title">2.4 Обновление кода приглашения</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">В детальной панели класса нажмите <b>«Обновить код»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Старый код станет недействительным, новый будет сгенерирован и скопирован.</div></div>
|
||
</div>
|
||
<div class="tg-warning"><div class="tg-box-icon"><i data-lucide="alert-triangle"></i></div><div class="tg-box-body"><div class="tg-box-label">Внимание</div>Все ранее отправленные ссылки и коды перестанут работать. Убедитесь, что нужные ученики уже вступили.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-1')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Быстрый старт</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-3')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Банк вопросов</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 3 ═══ -->
|
||
<div class="tg-chapter" id="ch-3">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="database"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 3</div>
|
||
<div class="tg-chapter-title">Банк вопросов</div>
|
||
</div>
|
||
<a href="/question-bank" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Банк вопросов</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-3-1">
|
||
<div class="tg-section-title">3.1 Создание вопроса</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Нажмите <b>«Создать вопрос»</b> в правом верхнем углу страницы.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите <b>тип вопроса</b> (см. раздел 3.2 ниже).</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Введите текст вопроса. LaTeX-формулы — оборачивайте в <code>$...$</code> или <code>$$...$$</code>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Добавьте варианты ответов и отметьте правильные.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">5</div><div class="tg-step-body">Укажите <b>предмет</b> и <b>тему</b>. Нажмите <b>«Сохранить»</b>.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-3-2">
|
||
<div class="tg-section-title">3.2 Типы вопросов</div>
|
||
<div class="tg-accordion">
|
||
<div class="tg-acc-item open">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-single">single</span>
|
||
<span class="tg-acc-name">Один правильный ответ</span>
|
||
<span class="tg-acc-desc-short">Радиокнопки</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик выбирает один вариант из нескольких предложенных. Используйте для вопросов с однозначным ответом.</p><ul><li>Минимум 2 варианта, один правильный</li><li>Можно добавить изображение к вопросу</li></ul></div>
|
||
</div>
|
||
<div class="tg-acc-item">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-multiple">multiple</span>
|
||
<span class="tg-acc-name">Несколько правильных ответов</span>
|
||
<span class="tg-acc-desc-short">Чекбоксы</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик отмечает все правильные варианты. Частичное попадание засчитывается пропорционально.</p><ul><li>Минимум 2 правильных варианта</li><li>Балл = доля правильно отмеченных</li></ul></div>
|
||
</div>
|
||
<div class="tg-acc-item">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-text">text</span>
|
||
<span class="tg-acc-name">Свободный текстовый ответ</span>
|
||
<span class="tg-acc-desc-short">Поле ввода</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик вводит текст. Проверяется точное совпадение (регистр не учитывается).</p><ul><li>Укажите эталонный ответ и допустимые синонимы через запятую</li></ul></div>
|
||
</div>
|
||
<div class="tg-acc-item">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-number">number</span>
|
||
<span class="tg-acc-name">Числовой ответ</span>
|
||
<span class="tg-acc-desc-short">С погрешностью</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик вводит число. Вы задаёте правильный ответ и допустимую погрешность.</p><ul><li>Пример: ответ 9.8, погрешность ±0.1 — принимает 9.7–9.9</li></ul></div>
|
||
</div>
|
||
<div class="tg-acc-item">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-order">order</span>
|
||
<span class="tg-acc-name">Расположи в порядке</span>
|
||
<span class="tg-acc-desc-short">Drag & Drop</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик перетаскивает элементы в правильном порядке (хронология, последовательность реакций и т.д.).</p></div>
|
||
</div>
|
||
<div class="tg-acc-item">
|
||
<div class="tg-acc-head" onclick="toggleAcc(this)">
|
||
<span class="tg-acc-badge badge-match">match</span>
|
||
<span class="tg-acc-name">Сопоставление</span>
|
||
<span class="tg-acc-desc-short">Два столбца</span>
|
||
<span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span>
|
||
</div>
|
||
<div class="tg-acc-body"><p>Ученик соединяет элементы левого столбца с правым. Идеально для терминов и определений, органов и функций.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="lightbulb"></i></div><div class="tg-box-body"><div class="tg-box-label">Совет</div>Комбинируйте разные типы в одном тесте — это даёт более объективную оценку знаний.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-3-3">
|
||
<div class="tg-section-title">3.3 Дублирование и импорт CSV</div>
|
||
<p><b>Дублировать</b> — нажмите кнопку копирования рядом с вопросом. Откроется редактор с копией — измените текст или варианты и сохраните.</p>
|
||
<div class="tg-divider"></div>
|
||
<p><b>Импорт из CSV:</b></p>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Подготовьте CSV в кодировке <code>UTF-8</code>, разделитель — точка с запятой <code>;</code>. Формат: <code>тип;вопрос;варианты;ответ;предмет;тема</code></div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Нажмите <b>«Импорт CSV»</b> в шапке страницы, выберите файл.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Система покажет превью. Подтвердите импорт.</div></div>
|
||
</div>
|
||
<div class="tg-warning"><div class="tg-box-icon"><i data-lucide="alert-triangle"></i></div><div class="tg-box-body"><div class="tg-box-label">Внимание</div>Обязательно UTF-8, иначе кириллица отобразится некорректно. При ошибке используйте Excel «Сохранить как → CSV UTF-8».</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-2')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Управление классами</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-4')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Задания и тесты</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 4 ═══ -->
|
||
<div class="tg-chapter" id="ch-4">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="clipboard-check"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 4</div>
|
||
<div class="tg-chapter-title">Задания и тесты</div>
|
||
</div>
|
||
<a href="/classes" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Классы</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-4-1">
|
||
<div class="tg-section-title">4.1 Создание задания</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в <b>«Классы»</b> → выберите класс → вкладка <b>«Задания»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Нажмите <b>«Создать задание»</b>, введите название.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Добавьте вопросы из банка — используйте поиск и фильтры по предмету/теме.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Настройте параметры (дедлайн, время, попытки) → нажмите <b>«Опубликовать»</b>.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-4-2">
|
||
<div class="tg-section-title">4.2 Параметры задания</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Дедлайн</b> — дата и время, после которых задание нельзя начать. Оставьте пустым для бессрочного задания.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Время на прохождение</b> — лимит в минутах. Таймер начинается при открытии теста учеником.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Количество попыток</b> — сколько раз ученик может пройти тест. По умолчанию — 1.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="lightbulb"></i></div><div class="tg-box-body"><div class="tg-box-label">Рекомендация</div>Для домашних работ — 2–3 попытки без ограничения времени. Для контрольных — 1 попытка с таймером.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-4-3">
|
||
<div class="tg-section-title">4.3 Результаты и статистика</div>
|
||
<p>Откройте задание из вкладки «Задания» → таблица: ученик, балл (%), дата сдачи, номер попытки.</p>
|
||
<p>Нажмите на ученика для детализации — ответы по каждому вопросу, время выполнения.</p>
|
||
<div class="tg-note"><div class="tg-box-icon"><i data-lucide="bar-chart-2"></i></div><div class="tg-box-body"><div class="tg-box-label">Статистика по вопросам</div>Процент правильных ответов по каждому вопросу. Вопросы с низким процентом подсвечены красным — они требуют дополнительного объяснения на уроке.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-3')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Банк вопросов</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-5')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Онлайн-урок</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 5 ═══ -->
|
||
<div class="tg-chapter" id="ch-5">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="presentation"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 5</div>
|
||
<div class="tg-chapter-title">Онлайн-урок</div>
|
||
</div>
|
||
<a href="/classroom" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Онлайн-урок</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-1">
|
||
<div class="tg-section-title">5.1 Запуск и завершение урока</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в <b>«Онлайн-урок»</b> → нажмите <b>«Начать урок»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите класс. Урок запущен — ученики из класса получат уведомление и смогут присоединиться.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Для завершения — красная кнопка <b>«Завершить урок»</b> в шапке. Урок сохранится в архиве.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="archive"></i></div><div class="tg-box-body"><div class="tg-box-label">Архив уроков</div>Все прошедшие уроки с доской, чатом и посещаемостью доступны в разделе «Архив уроков».</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-2">
|
||
<div class="tg-section-title">5.2 Инструменты доски</div>
|
||
<div class="tg-tools-grid">
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="pencil"></i></div><div><div class="tg-tool-name">Карандаш</div><div class="tg-tool-desc">Свободное рисование</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="highlighter"></i></div><div><div class="tg-tool-name">Маркер</div><div class="tg-tool-desc">Полупрозрачное выделение</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="zap"></i></div><div><div class="tg-tool-name">Лазер</div><div class="tg-tool-desc">Указка, не сохраняется</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="eraser"></i></div><div><div class="tg-tool-name">Ластик</div><div class="tg-tool-desc">Стирает штрихи</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="shapes"></i></div><div><div class="tg-tool-name">Фигуры (11)</div><div class="tg-tool-desc">Прямоугольник, круг, стрелка и др.</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="git-merge"></i></div><div><div class="tg-tool-name">Коннектор</div><div class="tg-tool-desc">Линия между объектами</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="sticky-note"></i></div><div><div class="tg-tool-name">Стикер</div><div class="tg-tool-desc">Цветная заметка</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="type"></i></div><div><div class="tg-tool-name">Текст</div><div class="tg-tool-desc">Текстовый блок</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="image"></i></div><div><div class="tg-tool-name">Изображение</div><div class="tg-tool-desc">Загрузка картинки</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="sigma"></i></div><div><div class="tg-tool-name">Формула LaTeX</div><div class="tg-tool-desc">Математические формулы</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="table"></i></div><div><div class="tg-tool-name">Таблица</div><div class="tg-tool-desc">Интерактивная таблица</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="axis-3d"></i></div><div><div class="tg-tool-name">Координатная ось</div><div class="tg-tool-desc">Система с графиками</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="minus"></i></div><div><div class="tg-tool-name">Числовая прямая</div><div class="tg-tool-desc">Прямая с делениями</div></div></div>
|
||
<div class="tg-tool-card"><div class="tg-tool-icon"><i data-lucide="circle"></i></div><div><div class="tg-tool-name">Циркуль</div><div class="tg-tool-desc">Дуги и окружности</div></div></div>
|
||
</div>
|
||
<div class="tg-shortcuts">
|
||
<span class="tg-kbd">Ctrl+Z</span><span class="tg-kbd-desc">Отменить</span>
|
||
<span class="tg-kbd">Ctrl+Y</span><span class="tg-kbd-desc">Повторить</span>
|
||
<span class="tg-kbd">Ctrl+C / Ctrl+V</span><span class="tg-kbd-desc">Копировать / Вставить объект</span>
|
||
<span class="tg-kbd">Del</span><span class="tg-kbd-desc">Удалить выделенный объект</span>
|
||
<span class="tg-kbd">Ctrl+A</span><span class="tg-kbd-desc">Выделить всё на странице</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-3">
|
||
<div class="tg-section-title">5.3 Страницы, шаблоны и экспорт</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Нажмите <b>«+»</b> в панели миниатюр слева → выберите шаблон: <b>Пустая, Клетка, Линейка, Точки, Координатная плоскость</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Переключайтесь между страницами кликом по миниатюре. Ученики видят текущую страницу учителя в реальном времени.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body"><b>Экспорт в PNG</b> — кнопка с иконкой загрузки в шапке. Текущая страница сохраняется как изображение.</div></div>
|
||
</div>
|
||
<div class="tg-tip"><div class="tg-box-icon"><i data-lucide="layout-template"></i></div><div class="tg-box-body"><div class="tg-box-label">Подготовка заранее</div>Создайте несколько страниц с нужными шаблонами до начала урока — это сэкономит время во время объяснения.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-4">
|
||
<div class="tg-section-title">5.4 Zoom, Pan и темы доски</div>
|
||
<div class="tg-shortcuts">
|
||
<span class="tg-kbd">Колесо мыши</span><span class="tg-kbd-desc">Zoom in / out к курсору</span>
|
||
<span class="tg-kbd">Ctrl+0</span><span class="tg-kbd-desc">Сбросить масштаб</span>
|
||
<span class="tg-kbd">Space + drag</span><span class="tg-kbd-desc">Прокрутка (pan) доски</span>
|
||
</div>
|
||
<p>При zoom > 1 в правом нижнем углу появляется <b>минимап</b> — кликните или перетащите для навигации по доске.</p>
|
||
<p><b>Темы доски</b> (переключение через меню настроек): <b>Chalkboard</b> (зелёная меловая), <b>Blackboard</b> (чёрная), <b>Corkboard</b> (пробковая), <b>Whiteboard</b> (белая маркерная).</p>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-5">
|
||
<div class="tg-section-title">5.5 Чат, видеосвязь и управление учениками</div>
|
||
<p><b>Чат</b> — правая панель, сообщения в реальном времени. Ученики видят сообщения учителя и других учеников.</p>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Видеосвязь (WebRTC)</b> — нажмите кнопку камеры/микрофона в шапке. Браузер запросит разрешение при первом включении.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Поднятая рука</b> — уведомление в шапке при поднятии руки учеником. Нажмите для ответа.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">—</div><div class="tg-step-body"><b>Разрешить рисование</b> — в списке участников переключите тогл рядом с именем ученика.</div></div>
|
||
</div>
|
||
<div class="tg-warning"><div class="tg-box-icon"><i data-lucide="alert-triangle"></i></div><div class="tg-box-body"><div class="tg-box-label">Видеосвязь</div>Требует разрешения браузера на камеру и микрофон. Для стабильной связи за NAT рекомендуется использование TURN-сервера.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-5-6">
|
||
<div class="tg-section-title">5.6 Гостевая ссылка и Live-квиз</div>
|
||
<p><b>Гостевая ссылка</b> — нажмите «Гостевая ссылка» в шапке урока. Любой человек по ссылке увидит доску в режиме просмотра без регистрации. Удобно для открытых вебинаров.</p>
|
||
<div class="tg-divider"></div>
|
||
<p><b>Live-квиз во время урока:</b></p>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Нажмите кнопку <b>«Live-квиз»</b> в шапке урока.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите вопросы из банка, настройте время на вопрос.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Запустите — ученики увидят вопросы на своих экранах. Результаты отображаются в реальном времени.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-4')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Задания и тесты</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-6')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Библиотека материалов</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 6 ═══ -->
|
||
<div class="tg-chapter" id="ch-6">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="book-open"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 6</div>
|
||
<div class="tg-chapter-title">Библиотека материалов</div>
|
||
</div>
|
||
<a href="/library" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Библиотека</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-6-1">
|
||
<div class="tg-section-title">6.1 Загрузка файлов</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Нажмите <b>«Загрузить»</b> в шапке страницы.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите файл(ы). Поддерживаются: PDF, DOCX, PPTX, изображения, видео.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Опционально выберите класс(ы) для предоставления доступа прямо при загрузке.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-6-2">
|
||
<div class="tg-section-title">6.2 Папки и управление доступом</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body"><b>Новая папка</b> — нажмите «Новая папка», введите название. Перетаскивайте файлы в папки.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body"><b>Доступ по классу</b> — нажмите на файл/папку → «Доступ» → выберите классы.</div></div>
|
||
</div>
|
||
<div class="tg-note"><div class="tg-box-icon"><i data-lucide="eye-off"></i></div><div class="tg-box-body"><div class="tg-box-label">Приватность</div>Файлы без назначенного класса видны только вам. Ученики видят только те материалы, к которым им выдан доступ.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-5')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Онлайн-урок</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-7')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Редактор уроков</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 7 ═══ -->
|
||
<div class="tg-chapter" id="ch-7">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="file-edit"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 7</div>
|
||
<div class="tg-chapter-title">Редактор уроков</div>
|
||
</div>
|
||
<a href="/my-lessons" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Мои уроки</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-7-1">
|
||
<div class="tg-section-title">7.1 Создание урока</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в <b>«Мои уроки»</b> → нажмите <b>«Создать урок»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Введите название, выберите предмет и тему.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Добавляйте блоки контента кнопкой <b>«+»</b> между блоками.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">4</div><div class="tg-step-body">Нажмите <b>«Опубликовать»</b> → выберите класс(ы). Урок появится в «Теории» у учеников.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-7-2">
|
||
<div class="tg-section-title">7.2 Типы блоков</div>
|
||
<div class="tg-accordion">
|
||
<div class="tg-acc-item open"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-single">Текст</span><span class="tg-acc-name">Параграф</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Форматированный текст с поддержкой жирного, курсива, подчёркивания. Оптимально для основного содержания урока.</p></div></div>
|
||
<div class="tg-acc-item"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-multiple">H2/H3</span><span class="tg-acc-name">Заголовок</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Структурные заголовки второго и третьего уровня. Используйте для разделения темы на подтемы.</p></div></div>
|
||
<div class="tg-acc-item"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-text">Изображение</span><span class="tg-acc-name">Картинка</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Загрузка файла или вставка URL. Поддерживаются JPG, PNG, GIF, SVG. Подпись необязательна.</p></div></div>
|
||
<div class="tg-acc-item"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-number">Видео</span><span class="tg-acc-name">Видео</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Вставка YouTube/Vimeo по URL или загрузка видеофайла. Поддерживает embed с плеером.</p></div></div>
|
||
<div class="tg-acc-item"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-order">LaTeX</span><span class="tg-acc-name">Формула</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Блок формулы с live-превью через KaTeX. Введите LaTeX-код — формула отобразится в реальном времени.</p></div></div>
|
||
<div class="tg-acc-item"><div class="tg-acc-head" onclick="toggleAcc(this)"><span class="tg-acc-badge badge-match">Тест</span><span class="tg-acc-name">Встроенный тест</span><span class="tg-acc-chevron"><i data-lucide="chevron-down"></i></span></div><div class="tg-acc-body"><p>Встроенный мини-тест из банка вопросов прямо в теле урока. Ученик проходит его не выходя из урока.</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-6')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Библиотека материалов</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-8')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Аналитика</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 8 ═══ -->
|
||
<div class="tg-chapter" id="ch-8">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="bar-chart-2"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 8</div>
|
||
<div class="tg-chapter-title">Аналитика</div>
|
||
</div>
|
||
<a href="/analytics" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Аналитика</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-8-1">
|
||
<div class="tg-section-title">8.1 Дашборд аналитики</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в <b>«Аналитика»</b> → выберите класс из выпадающего списка в шапке.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Сводные карточки: средний балл, количество учеников, выполненных заданий, активность за неделю.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Графики успеваемости по времени и распределение оценок по диапазонам.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-8-2">
|
||
<div class="tg-section-title">8.2 Профиль ученика и слабые темы</div>
|
||
<p>Нажмите на имя ученика в таблице — откроется детализация: результаты по каждому заданию, динамика прогресса, слабые темы.</p>
|
||
<div class="tg-note"><div class="tg-box-icon"><i data-lucide="trending-down"></i></div><div class="tg-box-body"><div class="tg-box-label">Слабые темы</div>Система автоматически выделяет темы с наименьшим процентом правильных ответов. Создайте дополнительное задание по ним или уделите время на объяснение.</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-7')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Редактор уроков</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-9')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Журнал оценок</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 9 ═══ -->
|
||
<div class="tg-chapter" id="ch-9">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="table"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 9</div>
|
||
<div class="tg-chapter-title">Журнал оценок</div>
|
||
</div>
|
||
<a href="/gradebook" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Журнал</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-9-1">
|
||
<div class="tg-section-title">9.1 Чтение таблицы и экспорт</div>
|
||
<p>Перейдите в <b>«Журнал»</b> → выберите класс. Строки — ученики, столбцы — задания.</p>
|
||
<p><b>Цветовая кодировка ячеек:</b></p>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num" style="background:rgba(6,214,100,0.15);border-color:rgba(6,214,100,0.3);color:#059669">✓</div><div class="tg-step-body"><b>Зелёный</b> — выше 70%. Отличный результат.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num" style="background:rgba(255,179,71,0.15);border-color:rgba(255,179,71,0.3);color:#d97706">~</div><div class="tg-step-body"><b>Жёлтый</b> — 40–70%. Удовлетворительно, требует внимания.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num" style="background:rgba(241,91,181,0.15);border-color:rgba(241,91,181,0.3);color:#db2777">!</div><div class="tg-step-body"><b>Розовый</b> — ниже 40%. Тема не усвоена.</div></div>
|
||
</div>
|
||
<div class="tg-steps" style="margin-top:14px">
|
||
<div class="tg-step"><div class="tg-step-num">→</div><div class="tg-step-body"><b>Экспорт CSV</b> — нажмите кнопку в шапке журнала. Откройте в Excel или Google Sheets для дальнейшей обработки.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-8')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Аналитика</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-10')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-right"></i></div>
|
||
<div><div class="tg-ch-nav-label">Следующая глава</div><div class="tg-ch-nav-title">Live-квиз</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ CHAPTER 10 ═══ -->
|
||
<div class="tg-chapter" id="ch-10">
|
||
<div class="tg-chapter-header">
|
||
<div class="tg-chapter-icon"><i data-lucide="radio"></i></div>
|
||
<div class="tg-chapter-meta">
|
||
<div class="tg-chapter-num">Глава 10</div>
|
||
<div class="tg-chapter-title">Live-квиз</div>
|
||
</div>
|
||
<a href="/live-quiz" class="tg-chapter-try" target="_blank"><i data-lucide="external-link"></i> Live-квиз</a>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-10-1">
|
||
<div class="tg-section-title">10.1 Создание и запуск сессии</div>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">1</div><div class="tg-step-body">Перейдите в <b>«Live-квиз»</b> → нажмите <b>«Создать сессию»</b>.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">2</div><div class="tg-step-body">Выберите вопросы из банка, настройте время на вопрос (по умолчанию 30 сек.).</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">3</div><div class="tg-step-body">Нажмите <b>«Запустить»</b>. Ученики, находящиеся в классе, автоматически подключатся.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tg-section" id="s-10-2">
|
||
<div class="tg-section-title">10.2 Управление в реальном времени</div>
|
||
<p>На экране — текущий вопрос и таймер. Счётчик ответивших учеников обновляется в реальном времени.</p>
|
||
<div class="tg-steps">
|
||
<div class="tg-step"><div class="tg-step-num">→</div><div class="tg-step-body">Переходите к следующему вопросу <b>вручную</b> (кнопка «Далее») или автоматически по истечении времени.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">→</div><div class="tg-step-body">После каждого вопроса — <b>мгновенная статистика</b>: сколько % ответили правильно, распределение ответов.</div></div>
|
||
<div class="tg-step"><div class="tg-step-num">→</div><div class="tg-step-body">После завершения — <b>таблица лидеров</b> и полная статистика по всем вопросам.</div></div>
|
||
</div>
|
||
<div class="tg-success"><div class="tg-box-icon"><i data-lucide="check-circle"></i></div><div class="tg-box-body"><div class="tg-box-label">Поздравляем!</div>Вы прошли всё руководство. Теперь вы знаете все возможности LearnSpace. Удачных уроков!</div></div>
|
||
</div>
|
||
|
||
<div class="tg-chapter-nav">
|
||
<div class="tg-ch-nav-btn prev" onclick="scrollToChapter('ch-9')">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="arrow-left"></i></div>
|
||
<div><div class="tg-ch-nav-label">Предыдущая глава</div><div class="tg-ch-nav-title">Журнал оценок</div></div>
|
||
</div>
|
||
<div class="tg-ch-nav-btn next" onclick="scrollToChapter('ch-1')" style="text-align:right">
|
||
<div class="tg-ch-nav-icon"><i data-lucide="rotate-ccw"></i></div>
|
||
<div><div class="tg-ch-nav-label">Вернуться к началу</div><div class="tg-ch-nav-title">Быстрый старт</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
</div><!-- .sb-content -->
|
||
</div><!-- .app-layout -->
|
||
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/sidebar.js"></script>
|
||
<script src="/js/notifications.js"></script>
|
||
<script src="/js/search.js"></script>
|
||
<script src="/js/mobile.js"></script>
|
||
<script>
|
||
LS.initPage();
|
||
lucide.createIcons();
|
||
|
||
/* ── Chapter metadata ── */
|
||
const CHAPTERS = [
|
||
{ id:'ch-1', label:'Быстрый старт', icon:'rocket', sections:['s-1-1','s-1-2','s-1-3','s-1-4'], sLabels:['Первый вход','Интерфейс','Первый класс','Чеклист'] },
|
||
{ id:'ch-2', label:'Управление классами', icon:'graduation-cap', sections:['s-2-1','s-2-2','s-2-3','s-2-4'], sLabels:['Создание класса','Приглашение','Состав и удаление','Обновление кода'] },
|
||
{ id:'ch-3', label:'Банк вопросов', icon:'database', sections:['s-3-1','s-3-2','s-3-3'], sLabels:['Создание вопроса','Типы вопросов','Дублирование и импорт'] },
|
||
{ id:'ch-4', label:'Задания и тесты', icon:'clipboard-check', sections:['s-4-1','s-4-2','s-4-3'], sLabels:['Создание задания','Параметры','Результаты и статистика'] },
|
||
{ id:'ch-5', label:'Онлайн-урок', icon:'presentation', sections:['s-5-1','s-5-2','s-5-3','s-5-4','s-5-5','s-5-6'], sLabels:['Запуск и завершение','Инструменты доски','Страницы и шаблоны','Zoom и темы','Чат и видеосвязь','Гостевая ссылка'] },
|
||
{ id:'ch-6', label:'Библиотека материалов', icon:'book-open', sections:['s-6-1','s-6-2'], sLabels:['Загрузка файлов','Папки и доступ'] },
|
||
{ id:'ch-7', label:'Редактор уроков', icon:'file-edit', sections:['s-7-1','s-7-2'], sLabels:['Создание урока','Типы блоков'] },
|
||
{ id:'ch-8', label:'Аналитика', icon:'bar-chart-2', sections:['s-8-1','s-8-2'], sLabels:['Дашборд аналитики','Профиль ученика'] },
|
||
{ id:'ch-9', label:'Журнал оценок', icon:'table', sections:['s-9-1'], sLabels:['Таблица и экспорт'] },
|
||
{ id:'ch-10', label:'Live-квиз', icon:'radio', sections:['s-10-1','s-10-2'], sLabels:['Создание сессии','Управление'] },
|
||
];
|
||
|
||
/* ── Render nav ── */
|
||
const navContainer = document.getElementById('tg-nav-chapters');
|
||
CHAPTERS.forEach((ch, ci) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'tg-nav-chapter';
|
||
div.dataset.ch = ch.id;
|
||
div.innerHTML = `
|
||
<button class="tg-nav-ch-btn" onclick="navChapterClick('${ch.id}',this)">
|
||
<span class="tg-nav-ch-icon"><i data-lucide="${ch.icon}"></i></span>
|
||
<span class="tg-nav-ch-label">${ci+1}. ${ch.label}</span>
|
||
<span class="tg-nav-ch-status"><i data-lucide="check"></i></span>
|
||
<span class="tg-nav-ch-chevron"><i data-lucide="chevron-right"></i></span>
|
||
</button>
|
||
<div class="tg-nav-sections">
|
||
${ch.sections.map((sid, si) => `<a class="tg-nav-sec-link" data-sec="${sid}" onclick="scrollToSection('${sid}')">${ch.sLabels[si]}</a>`).join('')}
|
||
</div>`;
|
||
navContainer.appendChild(div);
|
||
});
|
||
lucide.createIcons();
|
||
|
||
/* ── Chapter switching ── */
|
||
const scrollEl = document.getElementById('tg-scroll');
|
||
const progBar = document.getElementById('tg-prog-bar');
|
||
const tgContent = document.querySelector('.tg-content');
|
||
let _activeChId = null;
|
||
|
||
function showChapter(chId, sectionId) {
|
||
const newEl = document.getElementById(chId);
|
||
if (!newEl) return;
|
||
if (_activeChId) {
|
||
const prev = document.getElementById(_activeChId);
|
||
if (prev) prev.classList.remove('tg-active');
|
||
}
|
||
newEl.classList.add('tg-active');
|
||
_activeChId = chId;
|
||
history.replaceState(null, '', '#' + chId);
|
||
scrollEl.scrollTop = 0;
|
||
if (sectionId) {
|
||
requestAnimationFrame(() => {
|
||
const sec = document.getElementById(sectionId);
|
||
if (sec) {
|
||
const top = sec.offsetTop - 80;
|
||
scrollEl.scrollTo({ top, behavior: 'smooth' });
|
||
}
|
||
});
|
||
}
|
||
// Nav: highlight active chapter, open its sub-list
|
||
document.querySelectorAll('.tg-nav-chapter').forEach(div => {
|
||
const isThis = div.dataset.ch === chId;
|
||
div.querySelector('.tg-nav-ch-btn').classList.toggle('active', isThis);
|
||
if (isThis && !div.classList.contains('open')) div.classList.add('open');
|
||
});
|
||
document.querySelectorAll('.tg-nav-sec-link').forEach(a => a.classList.remove('active'));
|
||
markRead(chId);
|
||
}
|
||
|
||
function scrollToChapter(chId) { showChapter(chId); }
|
||
function scrollToSection(secId) {
|
||
const ch = CHAPTERS.find(c => c.sections.includes(secId));
|
||
if (ch) showChapter(ch.id, secId);
|
||
}
|
||
|
||
function navChapterClick(chId, btn) {
|
||
btn.closest('.tg-nav-chapter').classList.toggle('open');
|
||
showChapter(chId);
|
||
}
|
||
|
||
/* ── Read tracking ── */
|
||
const READ_KEY = 'ls_tg_read';
|
||
let readChapters = JSON.parse(localStorage.getItem(READ_KEY) || '[]');
|
||
|
||
function markRead(chId) {
|
||
if (!readChapters.includes(chId)) {
|
||
readChapters.push(chId);
|
||
localStorage.setItem(READ_KEY, JSON.stringify(readChapters));
|
||
}
|
||
updateReadUI();
|
||
}
|
||
|
||
function updateReadUI() {
|
||
document.querySelectorAll('.tg-nav-chapter').forEach(div => {
|
||
div.querySelector('.tg-nav-ch-btn').classList.toggle('read', readChapters.includes(div.dataset.ch));
|
||
});
|
||
const n = readChapters.length;
|
||
document.getElementById('tg-prog-text').textContent = `${n} из ${CHAPTERS.length} глав прочитано`;
|
||
progBar.style.width = Math.round(n / CHAPTERS.length * 100) + '%';
|
||
}
|
||
updateReadUI();
|
||
|
||
/* ── Checklist ── */
|
||
const CL_KEY = 'ls_tg_checklist';
|
||
const clState = JSON.parse(localStorage.getItem(CL_KEY) || '{}');
|
||
|
||
document.querySelectorAll('.tg-cl-item').forEach(item => {
|
||
const id = item.dataset.id;
|
||
const cb = item.querySelector('input');
|
||
if (clState[id]) { cb.checked = true; item.classList.add('checked'); }
|
||
cb.addEventListener('change', () => {
|
||
clState[id] = cb.checked;
|
||
item.classList.toggle('checked', cb.checked);
|
||
localStorage.setItem(CL_KEY, JSON.stringify(clState));
|
||
updateChecklist();
|
||
});
|
||
item.querySelector('.tg-cl-link')?.addEventListener('click', e => e.stopPropagation());
|
||
});
|
||
|
||
function updateChecklist() {
|
||
const total = document.querySelectorAll('.tg-cl-item').length;
|
||
const done = document.querySelectorAll('.tg-cl-item input:checked').length;
|
||
document.getElementById('cl-prog').textContent = `${done} / ${total}`;
|
||
document.getElementById('cl-bar').style.width = Math.round(done / total * 100) + '%';
|
||
}
|
||
updateChecklist();
|
||
|
||
/* ── Accordion ── */
|
||
function toggleAcc(head) {
|
||
head.closest('.tg-acc-item').classList.toggle('open');
|
||
}
|
||
|
||
/* ── Search: show all chapters matching query ── */
|
||
document.getElementById('tg-search').addEventListener('input', function() {
|
||
const q = this.value.trim().toLowerCase();
|
||
if (!q) {
|
||
tgContent.classList.remove('tg-search-mode');
|
||
document.querySelectorAll('.tg-chapter, .tg-section').forEach(el => el.classList.remove('search-hidden'));
|
||
return;
|
||
}
|
||
tgContent.classList.add('tg-search-mode');
|
||
document.querySelectorAll('.tg-section').forEach(sec => {
|
||
sec.classList.toggle('search-hidden', !sec.textContent.toLowerCase().includes(q));
|
||
});
|
||
document.querySelectorAll('.tg-chapter').forEach(ch => {
|
||
ch.classList.toggle('search-hidden', ch.querySelectorAll('.tg-section:not(.search-hidden)').length === 0);
|
||
});
|
||
});
|
||
|
||
/* ── Init from hash or default ch-1 ── */
|
||
const initHash = location.hash.replace('#', '');
|
||
showChapter(CHAPTERS.find(c => c.id === initHash) ? initHash : 'ch-1');
|
||
</script>
|
||
</body>
|
||
</html>
|