|
|
@@ -0,0 +1,472 @@
|
|
|
+'use strict';
|
|
|
+/* ===== Утилиты ===== */
|
|
|
+const $ = (s, r = document) => r.querySelector(s);
|
|
|
+const rnd = (a, b) => a + Math.random() * (b - a);
|
|
|
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
|
|
|
+const el = (tag, attrs = {}, ...kids) => {
|
|
|
+ const e = document.createElement(tag);
|
|
|
+ for (const [k, v] of Object.entries(attrs)) {
|
|
|
+ if (v == null || v === false) continue;
|
|
|
+ if (k === 'class') e.className = v;
|
|
|
+ else if (k === 'html') e.innerHTML = v;
|
|
|
+ else if (k.startsWith('on')) e.addEventListener(k.slice(2), v);
|
|
|
+ else e.setAttribute(k, v);
|
|
|
+ }
|
|
|
+ kids.flat().forEach(c => { if (c != null && c !== false) e.append(c.nodeType ? c : document.createTextNode(c)); });
|
|
|
+ return e;
|
|
|
+};
|
|
|
+const store = {
|
|
|
+ get(k, d) { try { const v = localStorage.getItem(k); return v == null ? d : JSON.parse(v); } catch (e) { return d; } },
|
|
|
+ set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) { /* нет доступа к хранилищу */ } }
|
|
|
+};
|
|
|
+
|
|
|
+/* ===== Звук (Web Audio + синтез речи) ===== */
|
|
|
+const Snd = {
|
|
|
+ ctx: null, on: store.get('sound', true), sirenTimer: null, sirenOsc: null,
|
|
|
+ init() {
|
|
|
+ if (!this.ctx) { const A = window.AudioContext || window.webkitAudioContext; if (A) this.ctx = new A(); }
|
|
|
+ if (this.ctx && this.ctx.state === 'suspended') this.ctx.resume();
|
|
|
+ return this.ctx;
|
|
|
+ },
|
|
|
+ tone(f = 600, d = .12, type = 'sine', v = .07, when = 0) {
|
|
|
+ if (!this.on) return; const c = this.init(); if (!c) return;
|
|
|
+ const t = c.currentTime + when, o = c.createOscillator(), g = c.createGain();
|
|
|
+ o.type = type; o.frequency.setValueAtTime(f, t);
|
|
|
+ g.gain.setValueAtTime(v, t); g.gain.exponentialRampToValueAtTime(.0001, t + d);
|
|
|
+ o.connect(g); g.connect(c.destination); o.start(t); o.stop(t + d + .02);
|
|
|
+ },
|
|
|
+ click() { this.tone(520, .06, 'triangle', .05); },
|
|
|
+ ok() { this.tone(660, .12, 'sine', .08); this.tone(990, .18, 'sine', .08, .1); },
|
|
|
+ bad() { this.tone(180, .25, 'sawtooth', .06); },
|
|
|
+ beep() { this.tone(2900, .12, 'square', .035); },
|
|
|
+ siren(start) {
|
|
|
+ if (!start) {
|
|
|
+ clearInterval(this.sirenTimer); this.sirenTimer = null;
|
|
|
+ if (this.sirenOsc) { try { this.sirenOsc.stop(); } catch (e) { } this.sirenOsc = null; }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.on || this.sirenTimer) return;
|
|
|
+ const c = this.init(); if (!c) return;
|
|
|
+ const o = c.createOscillator(), g = c.createGain();
|
|
|
+ o.type = 'sawtooth'; g.gain.value = .05; o.connect(g); g.connect(c.destination); o.start();
|
|
|
+ this.sirenOsc = o; let hi = false;
|
|
|
+ const tick = () => { o.frequency.setTargetAtTime(hi ? 980 : 720, c.currentTime, .03); hi = !hi; };
|
|
|
+ tick(); this.sirenTimer = setInterval(tick, 420);
|
|
|
+ },
|
|
|
+ speak(text) {
|
|
|
+ if (!this.on || !('speechSynthesis' in window)) return;
|
|
|
+ try { speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(text); u.lang = 'ru-RU'; u.rate = .95; speechSynthesis.speak(u); } catch (e) { }
|
|
|
+ },
|
|
|
+ stopAll() { this.siren(false); try { speechSynthesis && speechSynthesis.cancel(); } catch (e) { } }
|
|
|
+};
|
|
|
+
|
|
|
+/* ===== Мини-тест внутри сцены ===== */
|
|
|
+function miniQuiz(q, onRight) {
|
|
|
+ const box = el('div', { class: 'card quiz' });
|
|
|
+ const fb = el('div', { class: 'msg' }, 'Проверь себя: выбери ответ.');
|
|
|
+ box.append(el('h3', {}, '❓ ' + q.t));
|
|
|
+ const btns = q.o.map((txt, i) => {
|
|
|
+ const b = el('button', { class: 'opt' }, txt);
|
|
|
+ b.onclick = () => {
|
|
|
+ if (i === q.a) {
|
|
|
+ Snd.ok(); b.classList.add('right'); btns.forEach(x => x.disabled = true);
|
|
|
+ fb.className = 'msg good'; fb.textContent = '✔ Верно. ' + q.e; onRight && onRight();
|
|
|
+ } else { Snd.bad(); b.classList.add('wrong'); b.disabled = true; fb.className = 'msg bad'; fb.textContent = '✖ Не совсем. Подумай ещё и попробуй другой вариант.'; }
|
|
|
+ };
|
|
|
+ return b;
|
|
|
+ });
|
|
|
+ box.append(...btns, fb);
|
|
|
+ return box;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 1: Старт ===== */
|
|
|
+function sceneStart(root, ctx) {
|
|
|
+ const cv = el('canvas', { width: 560, height: 280 });
|
|
|
+ const hero = el('div', { class: 'hero' },
|
|
|
+ cv,
|
|
|
+ el('span', { class: 'pill' }, 'Технические средства защиты информации и объектов · ТЗИ'),
|
|
|
+ el('h1', { html: 'Как «видит» пожар <span class="grad">пожарная сигнализация</span>' }),
|
|
|
+ el('p', { class: 'lead' }, 'Интерактивный курс на 5–10 минут: соберёшь в голове принцип работы дымового и теплового извещателей, подберёшь прибор для помещения, запустишь пожарный пост и пройдёшь итоговое тестирование.'),
|
|
|
+ el('button', { class: 'btn primary big', onclick: () => { Snd.init(); Snd.ok(); ctx.next(); } }, '▶ Начать курс'),
|
|
|
+ el('p', { class: 'hint' }, 'Включи звук: в курсе есть сирена и голосовое оповещение 🔊')
|
|
|
+ );
|
|
|
+ root.append(hero); ctx.unlock();
|
|
|
+ return fireLoop(cv, () => 78, true);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Анимация «видео» пожара на canvas ===== */
|
|
|
+function fireLoop(canvas, getLevel, ambient) {
|
|
|
+ const c = canvas.getContext('2d'); let ps = [], raf, run = true;
|
|
|
+ function frame() {
|
|
|
+ if (!run) return;
|
|
|
+ const W = canvas.width, H = canvas.height, L = getLevel();
|
|
|
+ c.globalCompositeOperation = 'source-over';
|
|
|
+ const g = c.createLinearGradient(0, 0, 0, H); g.addColorStop(0, '#0b0f1a'); g.addColorStop(1, '#1b1f33');
|
|
|
+ c.fillStyle = g; c.fillRect(0, 0, W, H);
|
|
|
+ c.fillStyle = '#242b45'; c.fillRect(0, H - 34, W, 34);
|
|
|
+ c.fillStyle = '#394260'; c.fillRect(W / 2 - 60, H - 64, 120, 30); // «мебель»
|
|
|
+ if (L > 8 && Math.random() < L / 40) for (let i = 0; i < Math.ceil(L / 25); i++) ps.push({ t: 's', x: W / 2 + rnd(-40, 40), y: H - 70, vx: rnd(-.35, .35), vy: -rnd(.6, 1.7), r: rnd(6, 12), a: .32, l: 1 });
|
|
|
+ if (L > 40) for (let i = 0; i < Math.ceil((L - 35) / 12); i++) ps.push({ t: 'f', x: W / 2 + rnd(-30 - L / 3, 30 + L / 3), y: H - 66, vx: rnd(-.5, .5), vy: -rnd(1.5, 3.2), r: rnd(6, 14), a: 1, l: 1 });
|
|
|
+ if (L > 8) { const ca = clamp(L / 140, 0, .55); const sg = c.createLinearGradient(0, 0, 0, H * .55); sg.addColorStop(0, `rgba(160,170,190,${ca})`); sg.addColorStop(1, 'rgba(160,170,190,0)'); c.fillStyle = sg; c.fillRect(0, 0, W, H * .55); }
|
|
|
+ for (const p of ps) {
|
|
|
+ p.x += p.vx; p.y += p.vy; p.l -= p.t === 'f' ? .028 : .006; p.r += p.t === 'f' ? -.15 : .13;
|
|
|
+ if (p.t === 's') { c.fillStyle = `rgba(150,158,176,${p.a * p.l})`; c.beginPath(); c.arc(p.x, p.y, Math.max(p.r, 0), 0, 7); c.fill(); }
|
|
|
+ }
|
|
|
+ c.globalCompositeOperation = 'lighter';
|
|
|
+ for (const p of ps) if (p.t === 'f') { const rr = Math.max(p.r, .1); const gr = c.createRadialGradient(p.x, p.y, 0, p.x, p.y, rr * 2); gr.addColorStop(0, `rgba(255,210,90,${.7 * p.l})`); gr.addColorStop(.5, `rgba(255,90,30,${.45 * p.l})`); gr.addColorStop(1, 'rgba(255,40,0,0)'); c.fillStyle = gr; c.beginPath(); c.arc(p.x, p.y, rr * 2, 0, 7); c.fill(); }
|
|
|
+ c.globalCompositeOperation = 'source-over';
|
|
|
+ ps = ps.filter(p => p.l > 0 && p.r > 0 && p.y > -20); if (ps.length > 700) ps.splice(0, 100);
|
|
|
+ if (!ambient) { // потолочные извещатели
|
|
|
+ [[W * .2, 'Д'], [W * .5, 'Т'], [W * .8, 'П']].forEach(([x, s]) => { c.fillStyle = '#d7dcef'; c.beginPath(); c.arc(x, 16, 13, 0, 7); c.fill(); c.fillStyle = '#0b1020'; c.font = 'bold 13px sans-serif'; c.textAlign = 'center'; c.fillText(s, x, 21); });
|
|
|
+ }
|
|
|
+ raf = requestAnimationFrame(frame);
|
|
|
+ }
|
|
|
+ frame();
|
|
|
+ return () => { run = false; cancelAnimationFrame(raf); };
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 2: Стадии пожара ===== */
|
|
|
+function sceneStages(root, ctx) {
|
|
|
+ let level = 0;
|
|
|
+ const cv = el('canvas', { class: 'cv', width: 640, height: 320 });
|
|
|
+ const stageName = el('div', { class: 'msg' });
|
|
|
+ const lamps = { smoke: el('span', { class: 'lamp' }, el('i'), 'Дымовой «Д»'), heat: el('span', { class: 'lamp' }, el('i'), 'Тепловой «Т»'), flame: el('span', { class: 'lamp' }, el('i'), 'Пламени «П»') };
|
|
|
+ const th = { smoke: 18, heat: 55, flame: 70 }; const fired = {}; let maxL = 0;
|
|
|
+ const slider = el('input', { type: 'range', min: 0, max: 100, value: 0 });
|
|
|
+ const info = el('div', { class: 'msg' }, 'Двигай ползунок и наблюдай, какой извещатель сработает раньше.');
|
|
|
+ const upd = () => {
|
|
|
+ level = +slider.value; maxL = Math.max(maxL, level);
|
|
|
+ const n = level < 8 ? 'Норма' : level < 35 ? 'Тление: появляются невидимые аэрозоли и первый дым' : level < 60 ? 'Задымление, растёт температура под потолком' : level < 80 ? 'Открытое горение, видно пламя' : 'Развитый пожар';
|
|
|
+ stageName.textContent = `Стадия: ${n} (${level}%)`;
|
|
|
+ for (const k in lamps) {
|
|
|
+ const on = level >= th[k]; lamps[k].classList.toggle('on', on);
|
|
|
+ if (on && !fired[k]) { fired[k] = 1; Snd.beep(); Snd.beep(); info.className = 'msg good'; info.textContent = { smoke: '🌫 Дымовой извещатель сработал первым — он ловит самые ранние признаки пожара (тление).', heat: '🌡 Тепловой извещатель сработал позже — когда температура уже заметно выросла.', flame: '🔥 Извещатель пламени сработал на излучение факела — им защищают помещения, где дыма мало, а огонь возникает быстро.' }[k]; }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ slider.oninput = upd;
|
|
|
+ root.append(
|
|
|
+ el('h2', {}, 'Как развивается пожар'),
|
|
|
+ el('p', { class: 'lead' }, 'У огня есть «лестница» признаков: сначала дым, потом тепло, потом пламя. Каждый тип извещателя реагирует на свой признак. Подними ползунок «Развитие пожара» до конца.'),
|
|
|
+ el('div', { class: 'grid2' },
|
|
|
+ el('div', { class: 'card' }, cv, stageName),
|
|
|
+ el('div', { class: 'card' }, el('h3', {}, 'Развитие пожара'), slider, el('button', { class: 'btn sm', onclick: () => { Snd.click(); slider.value = 0; upd(); for (const k in fired) delete fired[k]; info.className = 'msg'; info.textContent = 'Ползунок сброшен. Смотри заново.'; } }, '↺ Сбросить ползунок'),
|
|
|
+ el('div', { class: 'row' }, lamps.smoke, lamps.heat, lamps.flame), info,
|
|
|
+ el('ul', { class: 'steps', html: '<li><b>Дымовой</b> — раннее обнаружение тления.</li><li><b>Тепловой</b> — для запылённых, парящих помещений.</li><li><b>Пламени</b> — ИК/УФ датчик на излучение факела.</li>' })))
|
|
|
+ );
|
|
|
+ const stop = fireLoop(cv, () => level);
|
|
|
+ const q = miniQuiz({ t: 'Какой тип извещателя обычно срабатывает самым первым при тлении кабеля?', o: ['Тепловой', 'Дымовой', 'Пламени', 'Ручной'], a: 1, e: 'При тлении много дыма, но мало тепла и нет пламени.' });
|
|
|
+ root.append(q);
|
|
|
+ ctx.gate(() => maxL >= 75 && q.querySelector('.right'));
|
|
|
+ return stop;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 3: Оптический дымовой извещатель ===== */
|
|
|
+function sceneSmoke(root, ctx) {
|
|
|
+ const svgBox = el('div', { class: 'card' });
|
|
|
+ svgBox.innerHTML = `<svg viewBox="0 0 440 280" class="svg" aria-label="Модель дымовой камеры">
|
|
|
+ <circle cx="220" cy="140" r="112" fill="#0e1424" stroke="#3b4a6b" stroke-width="4"/>
|
|
|
+ <circle cx="220" cy="140" r="100" fill="none" stroke="#26314f" stroke-dasharray="4 6"/>
|
|
|
+ <rect x="84" y="128" width="24" height="24" rx="4" fill="#ffcf33"/><text x="96" y="120" text-anchor="middle">ИК-светодиод</text>
|
|
|
+ <line id="beam" x1="108" y1="140" x2="326" y2="140" stroke="#ffd166" stroke-width="3" opacity=".85"/>
|
|
|
+ <rect x="326" y="130" width="10" height="20" fill="#444"/><text x="332" y="170" text-anchor="middle">Поглотитель</text>
|
|
|
+ <rect x="250" y="206" width="28" height="14" rx="3" fill="#5ec8ff"/><text x="264" y="240" text-anchor="middle">Фотодиод</text>
|
|
|
+ <g id="sc"></g><g id="ps" fill="#c3cbe0"></g>
|
|
|
+ <circle id="alarmLed" cx="390" cy="36" r="9" fill="#394260"/><text x="390" y="64" text-anchor="middle">Индикатор</text>
|
|
|
+ <text x="220" y="272" text-anchor="middle">Дымовая камера (вид сверху)</text></svg>`;
|
|
|
+ const svg = svgBox.firstElementChild, ps = svg.querySelector('#ps'), sc = svg.querySelector('#sc'), led = svg.querySelector('#alarmLed');
|
|
|
+ const slider = el('input', { type: 'range', min: 0, max: 100, value: 0 });
|
|
|
+ const bar = el('div', { class: 'bar' }, el('div'), el('span', { class: 'thr', style: 'left:40%' }));
|
|
|
+ const msg = el('div', { class: 'msg' }, 'Выбери источник частиц или двигай ползунок плотности.');
|
|
|
+ let source = 'manual', density = 0, sig = 0, hold = 0, alarm = false, lastBeep = 0, gotTrue = false, gotFalse = false, quizShown = false;
|
|
|
+ const sourceBtns = [['Чистый воздух', 0, 'air'], ['Тление (дым)', 58, 'smoke'], ['Пар из ванной', 66, 'steam'], ['Строительная пыль', 52, 'dust']].map(([n, v, s]) =>
|
|
|
+ el('button', { class: 'btn sm', onclick: () => { Snd.click(); slider.value = v; source = s; density = v; } }, n));
|
|
|
+ slider.oninput = () => { source = 'manual'; density = +slider.value; };
|
|
|
+ const parts = []; let raf, last = performance.now();
|
|
|
+ const NS = 'http://www.w3.org/2000/svg';
|
|
|
+ const quizHolder = el('div');
|
|
|
+ function loop(now) {
|
|
|
+ const dt = (now - last) / 1000; last = now;
|
|
|
+ const target = Math.round(density * .7);
|
|
|
+ while (parts.length < target) { const a = rnd(0, 6.28), r = Math.sqrt(Math.random()) * 92; const e = document.createElementNS(NS, 'circle'); e.setAttribute('r', rnd(1.5, 3.2)); ps.append(e); parts.push({ x: 220 + Math.cos(a) * r, y: 140 + Math.sin(a) * r, vx: rnd(-.5, .5), vy: rnd(-.5, .5), e }); }
|
|
|
+ while (parts.length > target) parts.pop().e.remove();
|
|
|
+ let rays = '', n = 0;
|
|
|
+ for (const p of parts) {
|
|
|
+ p.x += p.vx; p.y += p.vy; if (Math.hypot(p.x - 220, p.y - 140) > 98) { p.vx *= -1; p.vy *= -1; p.x += p.vx * 3; p.y += p.vy * 3; }
|
|
|
+ p.e.setAttribute('cx', p.x.toFixed(1)); p.e.setAttribute('cy', p.y.toFixed(1));
|
|
|
+ const inb = Math.abs(p.y - 140) < 12 && p.x > 110 && p.x < 326; p.e.setAttribute('fill', inb ? '#ffe9a8' : '#c3cbe0');
|
|
|
+ if (inb && n < 14) { n++; rays += `<line x1="${p.x.toFixed(1)}" y1="${p.y.toFixed(1)}" x2="264" y2="206" stroke="#5ec8ff" stroke-width="1.4" opacity=".6"/>`; }
|
|
|
+ }
|
|
|
+ sc.innerHTML = rays;
|
|
|
+ const tgt = clamp(density / 100 * 1.02 + rnd(-.015, .015), 0, 1); sig += (tgt - sig) * .12;
|
|
|
+ bar.firstChild.style.width = (sig * 100).toFixed(0) + '%';
|
|
|
+ if (sig >= .4) { hold += dt; if (hold > .7 && !alarm) { alarm = true; onAlarm(); } } else if (sig < .35) { hold = 0; if (alarm) { alarm = false; led.setAttribute('fill', '#394260'); } }
|
|
|
+ if (alarm) { led.setAttribute('fill', Math.floor(now / 250) % 2 ? '#ff5470' : '#5a1f2c'); if (now - lastBeep > 520) { Snd.beep(); Snd.beep(); lastBeep = now; } }
|
|
|
+ raf = requestAnimationFrame(loop);
|
|
|
+ }
|
|
|
+ function onAlarm() {
|
|
|
+ if (source === 'steam' || source === 'dust') { gotFalse = true; msg.className = 'msg bad'; msg.textContent = '⚠ ЛОЖНАЯ ТРЕВОГА! Частицы пара/пыли рассеивают свет так же, как дым — оптический датчик их не различает. Поэтому такие помещения защищают тепловыми или комбинированными извещателями.'; }
|
|
|
+ else { gotTrue = true; msg.className = 'msg good'; msg.textContent = '🔔 Тревога! Частицы дыма рассеяли луч на фотодиод — сигнал превысил порог (красная метка) и держался дольше 0,7 с.'; }
|
|
|
+ if (gotTrue && gotFalse && !quizShown) {
|
|
|
+ quizShown = true;
|
|
|
+ quizHolder.append(miniQuiz({ t: 'Почему в чистой камере фотодиод «молчит», хотя светодиод светит?', o: ['Фотодиод выключен до пожара', 'Он стоит вне прямого луча — свет попадает на него только после рассеяния на частицах', 'Светодиод включается только при пожаре', 'Луч поглощается стенками камеры полностью'], a: 1, e: 'Это эффект рассеяния (Тиндаля): нет частиц — нет рассеянного света — нет сигнала.' }));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ raf = requestAnimationFrame(loop);
|
|
|
+ root.append(el('h2', {}, 'Оптический дымовой извещатель'),
|
|
|
+ el('p', { class: 'lead' }, 'Внутри — тёмная камера, светодиод и фотодиод, расположенный в стороне от луча. Дым рассеивает свет, часть его попадает на фотодиод. Вызови настоящую и ложную тревогу.'),
|
|
|
+ el('div', { class: 'grid2' }, svgBox,
|
|
|
+ el('div', { class: 'card' }, el('h3', {}, 'Источник частиц'), el('div', { class: 'row' }, sourceBtns),
|
|
|
+ el('p', {}, 'Плотность частиц:'), slider, el('p', {}, 'Сигнал фотодиода / порог:'), bar, msg)),
|
|
|
+ quizHolder);
|
|
|
+ ctx.gate(() => gotTrue && gotFalse && quizHolder.querySelector('.right'));
|
|
|
+ return () => cancelAnimationFrame(raf);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 4: Тепловой извещатель ===== */
|
|
|
+function sceneHeat(root, ctx) {
|
|
|
+ const cv = el('canvas', { class: 'cv', width: 640, height: 280 });
|
|
|
+ const g = cv.getContext('2d');
|
|
|
+ const lampMax = el('span', { class: 'lamp' }, el('i'), 'Максимальный (≥ 70 °C)');
|
|
|
+ const lampDif = el('span', { class: 'lamp' }, el('i'), 'Дифференциальный (≥ 8 °C/мин)');
|
|
|
+ const info = el('div', { class: 'msg' }, 'Запусти оба сценария по очереди.');
|
|
|
+ const readout = el('div', { class: 'lamp' }, 'T = — · скорость = —');
|
|
|
+ const ran = { sun: false, fire: false }; let timer, quizDone = false; const quizHolder = el('div');
|
|
|
+ function draw(T, tmax) {
|
|
|
+ const W = cv.width, H = cv.height; g.clearRect(0, 0, W, H); g.fillStyle = '#0b0f1a'; g.fillRect(0, 0, W, H);
|
|
|
+ g.strokeStyle = '#26314f'; g.fillStyle = '#7f8db0'; g.font = '12px sans-serif';
|
|
|
+ for (let t = 20; t <= 140; t += 20) { const y = H - 20 - (t - 20) / 120 * (H - 40); g.beginPath(); g.moveTo(40, y); g.lineTo(W, y); g.stroke(); g.fillText(t + '°', 6, y + 4); }
|
|
|
+ const y70 = H - 20 - 50 / 120 * (H - 40); g.strokeStyle = '#ff5470'; g.setLineDash([6, 5]); g.beginPath(); g.moveTo(40, y70); g.lineTo(W, y70); g.stroke(); g.setLineDash([]);
|
|
|
+ g.strokeStyle = '#ffd166'; g.lineWidth = 3; g.beginPath();
|
|
|
+ T.forEach((v, i) => { const x = 40 + i / (tmax * 10) * (W - 50), y = H - 20 - (clamp(v, 20, 140) - 20) / 120 * (H - 40); i ? g.lineTo(x, y) : g.moveTo(x, y); }); g.stroke(); g.lineWidth = 1;
|
|
|
+ }
|
|
|
+ function run(kind) {
|
|
|
+ clearInterval(timer); Snd.click(); lampMax.classList.remove('on'); lampDif.classList.remove('on');
|
|
|
+ const f = kind === 'sun' ? t => 20 + 2 * t : t => 22 + 14 * t, tmax = kind === 'sun' ? 30 : 6;
|
|
|
+ const T = [f(0)]; let n = 0, mA = null, dA = null; draw(T, tmax);
|
|
|
+ info.className = 'msg'; info.textContent = kind === 'sun' ? '☀ Солнце нагревает помещение медленно: ~2 °C в минуту…' : '🔥 Загорелась мебель: температура растёт ~14 °C в минуту…';
|
|
|
+ timer = setInterval(() => {
|
|
|
+ n++; const t = n / 10; T.push(f(t)); draw(T, tmax);
|
|
|
+ const k = Math.max(0, n - 10), rate = (T[n] - T[k]) / ((n - k) / 10);
|
|
|
+ readout.textContent = `T = ${T[n].toFixed(0)} °C · скорость = ${rate.toFixed(1)} °C/мин · t = ${t.toFixed(1)} мин`;
|
|
|
+ if (T[n] >= 70 && mA == null) { mA = t; lampMax.classList.add('on'); Snd.beep(); Snd.beep(); }
|
|
|
+ if (rate >= 8 && dA == null) { dA = t; lampDif.classList.add('on'); Snd.beep(); Snd.beep(); }
|
|
|
+ if (n >= tmax * 10) {
|
|
|
+ clearInterval(timer); ran[kind] = true;
|
|
|
+ if (kind === 'sun') { info.className = 'msg bad'; info.textContent = `Максимальный извещатель сработал на ${mA.toFixed(1)}-й минуте — ЛОЖНАЯ тревога от нагрева солнцем. Дифференциальный промолчал: скорость роста мала.`; }
|
|
|
+ else { info.className = 'msg good'; info.textContent = `Дифференциальный сработал уже на ${dA.toFixed(1)} мин, максимальный — только на ${mA.toFixed(1)} мин: по скорости роста пожар виден раньше.`; }
|
|
|
+ if (ran.sun && ran.fire && !quizDone) { quizDone = true; quizHolder.append(miniQuiz({ t: 'Какой извещатель сработает при быстром росте температуры, даже если порог 70 °C ещё не достигнут?', o: ['Максимальный', 'Дифференциальный', 'Дымовой оптический', 'Ни один'], a: 1, e: 'Дифференциальный измеряет скорость нарастания температуры (°C/мин).' })); }
|
|
|
+ }
|
|
|
+ }, 40);
|
|
|
+ }
|
|
|
+ draw([20], 30);
|
|
|
+ root.append(el('h2', {}, 'Тепловые извещатели'),
|
|
|
+ el('p', { class: 'lead' }, 'Термистор в корпусе измеряет температуру воздуха под потолком. Максимальный реагирует на порог, дифференциальный — на скорость роста. Сравни их.'),
|
|
|
+ el('div', { class: 'grid2' }, el('div', { class: 'card' }, cv, readout),
|
|
|
+ el('div', { class: 'card' }, el('h3', {}, 'Сценарии'),
|
|
|
+ el('div', { class: 'row' }, el('button', { class: 'btn', onclick: () => run('sun') }, '☀ Солнечный день'), el('button', { class: 'btn', onclick: () => run('fire') }, '🔥 Пожар')),
|
|
|
+ el('div', { class: 'row', style: 'margin-top:12px' }, lampMax, lampDif), info)),
|
|
|
+ quizHolder);
|
|
|
+ ctx.gate(() => ran.sun && ran.fire && quizHolder.querySelector('.right'));
|
|
|
+ return () => clearInterval(timer);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 5: Подбор извещателя ===== */
|
|
|
+function scenePick(root, ctx) {
|
|
|
+ const cases = [
|
|
|
+ ['🖥 Серверная', 'Кабели могут тлеть, дыма много, пламени нет. Чистый воздух.', 0, 'Дымовой: тление кабелей даёт дым задолго до тепла.'],
|
|
|
+ ['🍳 Кухня ресторана', 'Пар, жир, дым от жарки.', 1, 'Тепловой: дым и пар вызывали бы ложные тревоги.'],
|
|
|
+ ['⛽ Склад ЛВЖ (бензин, спирты)', 'Горит быстро, почти без дыма, высокие потолки.', 2, 'Пламени: реагирует на излучение факела мгновенно.'],
|
|
|
+ ['🚪 Коридор общежития', 'Чистое помещение, люди спят, нужно раннее оповещение.', 0, 'Дымовой: самое раннее обнаружение — время на эвакуацию.'],
|
|
|
+ ['🧖 Сауна / парная', 'Постоянный пар и высокая температура.', 1, 'Тепловой (с повышенным порогом): пар «обманул» бы оптический.']
|
|
|
+ ];
|
|
|
+ const names = ['Дымовой', 'Тепловой', 'Пламени']; let done = 0, ok = 0;
|
|
|
+ const score = el('div', { class: 'pill' }, 'Верно: 0 из 5');
|
|
|
+ const list = cases.map(([t, d, a, e]) => {
|
|
|
+ const fb = el('div', { class: 'msg' }, 'Выбери извещатель'); const row = el('div', { class: 'row' });
|
|
|
+ const b = names.map((n, i) => el('button', { class: 'btn sm', onclick: () => {
|
|
|
+ b.forEach(x => x.disabled = true); done++;
|
|
|
+ if (i === a) { ok++; Snd.ok(); fb.className = 'msg good'; fb.textContent = '✔ ' + e; } else { Snd.bad(); fb.className = 'msg bad'; fb.textContent = `✖ Лучше — «${names[a]}». ${e}`; }
|
|
|
+ score.textContent = `Верно: ${ok} из 5`; if (done === cases.length) ctx.unlock();
|
|
|
+ } }, n)); row.append(...b);
|
|
|
+ return el('div', { class: 'card' }, el('h3', {}, t), el('small', { class: 'lead' }, d), row, fb);
|
|
|
+ });
|
|
|
+ root.append(el('h2', {}, 'Подбери извещатель'), el('p', { class: 'lead' }, 'Для каждого помещения выбери тип извещателя. Ошибки не страшны — после ответа будет объяснение.'), el('div', { class: 'row' }, score, el('button', { class: 'btn sm', onclick: () => ctx.reset() }, '↺ Пройти заново')), el('div', { class: 'grid3', style: 'margin-top:10px' }, list));
|
|
|
+ ctx.gate(() => done === cases.length);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 6: ППКП и здание ===== */
|
|
|
+function scenePanel(root, ctx) {
|
|
|
+ const rooms = [{ n: 'Кухня', d: 'Тепловой', t: 2400, ic: '🍳' }, { n: 'Серверная', d: 'Дымовой', t: 1300, ic: '🖥' }, { n: 'Склад ЛВЖ', d: 'Пламени', t: 700, ic: '⛽' }, { n: 'Коридор', d: 'Дымовой', t: 1500, ic: '🚪' }];
|
|
|
+ const lcd = el('div', { class: 'lcd' }, 'ДЕЖУРНЫЙ РЕЖИМ\nВсе шлейфы в норме');
|
|
|
+ const log = el('div', { class: 'log' }); const zoneLamps = rooms.map((r, i) => el('span', { class: 'lamp' }, el('i'), 'ЗОНА ' + (i + 1)));
|
|
|
+ const alarms = new Set(); let acked = false, everAcked = false, timers = [];
|
|
|
+ const L = m => { const d = new Date(); log.prepend(el('div', {}, d.toLocaleTimeString('ru-RU') + ' — ' + m)); };
|
|
|
+ const refresh = () => {
|
|
|
+ if (!alarms.size) { lcd.className = 'lcd'; lcd.textContent = 'ДЕЖУРНЫЙ РЕЖИМ\nВсе шлейфы в норме'; return; }
|
|
|
+ lcd.className = 'lcd alert'; lcd.textContent = (acked ? 'ПОЖАР (квитировано)\n' : '*** ПОЖАР ***\n') + [...alarms].map(i => `Зона ${i + 1}: ${rooms[i].n}`).join('\n');
|
|
|
+ };
|
|
|
+ const cards = rooms.map((r, i) => {
|
|
|
+ const c = el('div', { class: 'card room' }, el('h4', {}, `${r.ic} ${r.n}`), el('small', {}, 'Извещатель: ' + r.d), el('div', {}, el('button', { class: 'btn sm', style: 'margin-top:8px', onclick: () => ignite(i) }, '🔥 Поджечь')), el('div', { class: 'flame' }, '🔥'));
|
|
|
+ return c;
|
|
|
+ });
|
|
|
+ function ignite(i, manual) {
|
|
|
+ if (alarms.has(i) || cards[i].classList.contains('burn')) return; Snd.click(); cards[i].classList.add('burn'); L(`Возгорание в «${rooms[i].n}»`);
|
|
|
+ timers.push(setTimeout(() => trigger(i, manual ? 'ручной извещатель' : rooms[i].d.toLowerCase() + ' извещатель'), manual ? 0 : rooms[i].t));
|
|
|
+ }
|
|
|
+ function trigger(i, by) {
|
|
|
+ alarms.add(i); acked = false; cards[i].classList.add('alarm'); zoneLamps[i].classList.add('on'); L(`Сработал ${by}, зона ${i + 1}`); refresh();
|
|
|
+ Snd.siren(true); Snd.speak(`Внимание! Пожар! Зона ${i + 1}. ${rooms[i].n}. Покиньте помещение.`);
|
|
|
+ check();
|
|
|
+ }
|
|
|
+ const ackBtn = el('button', { class: 'btn', onclick: () => { if (!alarms.size) return; Snd.click(); acked = true; everAcked = true; Snd.stopAll(); L('Дежурный квитировал сигнал'); refresh(); check(); } }, '🔕 Квитировать');
|
|
|
+ const resetBtn = el('button', { class: 'btn', onclick: () => { Snd.click(); timers.forEach(clearTimeout); timers = []; alarms.clear(); acked = false; Snd.stopAll(); cards.forEach(c => c.classList.remove('burn', 'alarm')); zoneLamps.forEach(z => z.classList.remove('on')); L('Сброс ППКП: пожар ликвидирован'); refresh(); } }, '♻ Сброс');
|
|
|
+ const manualBtn = el('button', { class: 'btn', onclick: () => { ignite(3, true); } }, '🧯 Ручной извещатель (коридор)');
|
|
|
+ function check() { if (alarms.size >= 2 && everAcked) { ctx.unlock(); } }
|
|
|
+ root.append(el('h2', {}, 'Пожарный пост: ППКП'),
|
|
|
+ el('p', { class: 'lead' }, 'Прибор приёмно-контрольный пожарный (ППКП) опрашивает шлейфы с извещателями, показывает зону пожара, включает сирену и голосовое оповещение. Подожги два разных помещения, затем квитируй сигнал, а потом сделай сброс.'),
|
|
|
+ el('div', { class: 'grid2' }, el('div', { class: 'grid3', style: 'grid-template-columns:1fr 1fr' }, cards),
|
|
|
+ el('div', { class: 'panel' }, lcd, el('div', { class: 'row', style: 'margin:10px 0' }, zoneLamps), el('div', { class: 'row' }, ackBtn, resetBtn, manualBtn), log)));
|
|
|
+ ctx.gate(() => alarms.size >= 2 && everAcked || ctx.isUnlocked());
|
|
|
+ return () => { timers.forEach(clearTimeout); Snd.stopAll(); };
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 7: Алгоритм ===== */
|
|
|
+function sceneAlgo(root, ctx) {
|
|
|
+ const correct = ['Извещатель обнаруживает признак пожара и передаёт сигнал на ППКП', 'ППКП определяет зону и включает сирену и оповещение', 'Дежурный квитирует сигнал и проверяет зону (камеры, обход)', 'Пожар подтверждён: вызов 101/112 и эвакуация людей', 'Запуск пожаротушения и дымоудаления, отключение вентиляции', 'После ликвидации — сброс ППКП и восстановление шлейфа'];
|
|
|
+ const pool = correct.map((t, i) => ({ t, i })).sort(() => Math.random() - .5); let next = 0;
|
|
|
+ const target = el('div', { class: 'chips' }), poolBox = el('div', { class: 'chips' }); const msg = el('div', { class: 'msg' }, 'Нажимай шаги в правильной последовательности.');
|
|
|
+ pool.forEach(p => { const b = el('button', { class: 'chip' }, p.t); b.onclick = () => {
|
|
|
+ if (p.i === next) { Snd.ok(); next++; b.classList.add('ok'); b.disabled = true; target.append(el('div', { class: 'chip ok' }, `${next}. ${p.t}`)); b.remove(); msg.className = 'msg good'; msg.textContent = 'Верно!'; if (next === correct.length) { msg.textContent = '🎉 Алгоритм собран правильно!'; ctx.unlock(); } }
|
|
|
+ else { Snd.bad(); b.classList.add('no'); setTimeout(() => b.classList.remove('no'), 400); msg.className = 'msg bad'; msg.textContent = 'Это ещё рано — подумай, что должно произойти раньше.'; }
|
|
|
+ }; poolBox.append(b); });
|
|
|
+ root.append(el('h2', {}, 'Порядок действий при тревоге'), el('p', { class: 'lead' }, 'Расставь этапы от срабатывания до возврата в дежурный режим.'), el('h3', {}, 'Перемешанные шаги'), poolBox, el('h3', {}, 'Твоя последовательность'), target, msg, el('button', { class: 'btn sm', onclick: () => ctx.reset() }, '↺ Перемешать и начать заново'));
|
|
|
+ ctx.gate(() => next === correct.length);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Вопросы итогового теста ===== */
|
|
|
+const TEST = [
|
|
|
+ { q: 'На каком физическом явлении основан оптико-электронный дымовой извещатель?', o: ['Ионизация воздуха альфа-излучением', 'Рассеяние света частицами дыма (эффект Тиндаля)', 'Изменение сопротивления при нагреве', 'Приём ультрафиолета пламени'], a: 1, e: 'Свет светодиода рассеивается частицами дыма на фотодиод.' },
|
|
|
+ { q: 'Почему фотодиод в дымовой камере не стоит на линии луча светодиода?', o: ['Чтобы он не перегревался', 'Чтобы в чистом воздухе сигнал был близок к нулю', 'Чтобы увеличить ток светодиода', 'Из-за требований дизайна корпуса'], a: 1, e: 'Фотодиод должен «видеть» только рассеянный свет.' },
|
|
|
+ { q: 'Максимальный тепловой извещатель срабатывает, когда…', o: ['температура растёт быстрее 8 °C/мин', 'температура достигла порогового значения', 'в воздухе появился дым', 'нажата кнопка'], a: 1, e: 'Он сравнивает температуру с фиксированным порогом.' },
|
|
|
+ { q: 'На что реагирует дифференциальный тепловой извещатель?', o: ['На абсолютную температуру', 'На скорость роста температуры', 'На влажность воздуха', 'На яркость света'], a: 1, e: 'Он оценивает градиент °C/мин, поэтому быстрее видит пожар.' },
|
|
|
+ { q: 'Какой извещатель лучше для кухни с паром и жиром?', o: ['Дымовой оптический', 'Тепловой', 'Любой, разницы нет', 'Только звуковой'], a: 1, e: 'Пар и дым вызвали бы ложные срабатывания оптического датчика.' },
|
|
|
+ { q: 'Что выбрать для склада ЛВЖ, где огонь распространяется быстро и почти без дыма?', o: ['Извещатель пламени', 'Максимальный тепловой с порогом 90 °C', 'Дымовой оптический', 'Ионизационный'], a: 0, e: 'ИК/УФ датчик реагирует на излучение факела.' },
|
|
|
+ { q: 'Что такое ППКП?', o: ['Прибор приёмно-контрольный пожарный', 'Пульт пожарного координатора', 'Преобразователь питания', 'Плата предварительной калибровки'], a: 0, e: 'Это «мозг» системы: опрашивает шлейфы и управляет оповещением.' },
|
|
|
+ { q: 'Что вызовет ложную тревогу оптического дымового извещателя?', o: ['Плотный пар или пыль', 'Выключенный свет', 'Низкая температура', 'Тишина'], a: 0, e: 'Частицы пара и пыли тоже рассеивают свет.' },
|
|
|
+ { q: 'Что означает «квитировать» сигнал?', o: ['Полностью устранить пожар', 'Подтвердить приём сигнала дежурным и заглушить звук', 'Отключить шлейф навсегда', 'Сбросить прибор в заводские настройки'], a: 1, e: 'Квитирование — подтверждение приёма. Пожар при этом остаётся в памяти ППКП до сброса.' }
|
|
|
+];
|
|
|
+
|
|
|
+/* ===== Сцена 8: Финал ===== */
|
|
|
+function sceneFinal(root, ctx) {
|
|
|
+ const best = store.get('best', null);
|
|
|
+ root.append(el('div', { class: 'hero' }, el('div', { style: 'font-size:72px' }, '🎓'), el('h1', { html: 'Материал <span class="grad">пройден</span>' }),
|
|
|
+ el('p', { class: 'lead' }, 'Ты познакомился с принципами работы дымового, теплового извещателей и ППКП. Осталось проверить, как усвоился материал: 9 вопросов с мгновенной проверкой.'),
|
|
|
+ el('button', { class: 'btn primary big', onclick: () => { Snd.ok(); ctx.go(8); } }, '📝 Итоговое Тестирование'),
|
|
|
+ best ? el('p', { class: 'hint' }, `Лучший результат: ${best.s} из ${best.t} (оценка ${best.g})`) : null));
|
|
|
+ ctx.unlock();
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Сцена 9: Тест ===== */
|
|
|
+function sceneTest(root, ctx) {
|
|
|
+ let i = 0, score = 0; const wrongs = [];
|
|
|
+ const box = el('div'); root.append(box);
|
|
|
+ function show() {
|
|
|
+ box.innerHTML = ''; const q = TEST[i];
|
|
|
+ const fb = el('div', { class: 'msg' }, 'Выбери ответ'); const nxt = el('button', { class: 'btn primary', style: 'display:none', onclick: () => { Snd.click(); i++; i < TEST.length ? show() : finish(); } }, i === TEST.length - 1 ? 'Показать результат' : 'Следующий вопрос →');
|
|
|
+ const opts = q.o.map((t, k) => el('button', { class: 'opt', onclick: () => {
|
|
|
+ opts.forEach(o => o.disabled = true); opts[q.a].classList.add('right');
|
|
|
+ if (k === q.a) { score++; Snd.ok(); fb.className = 'msg good'; fb.textContent = '✔ Верно. ' + q.e; } else { opts[k].classList.add('wrong'); Snd.bad(); wrongs.push({ q: q.q, you: t, right: q.o[q.a], e: q.e }); fb.className = 'msg bad'; fb.textContent = '✖ Неверно. ' + q.e; }
|
|
|
+ nxt.style.display = '';
|
|
|
+ } }, t));
|
|
|
+ box.append(el('div', { class: 'pill' }, `Вопрос ${i + 1} из ${TEST.length}`), el('div', { class: 'prog' }, el('div', { style: `width:${i / TEST.length * 100}%` })), el('div', { class: 'card' }, el('h2', {}, q.q), opts, fb, el('div', { class: 'row', style: 'margin-top:10px' }, nxt)));
|
|
|
+ }
|
|
|
+ function finish() {
|
|
|
+ const p = score / TEST.length, g = p >= .9 ? 5 : p >= .75 ? 4 : p >= .55 ? 3 : 2;
|
|
|
+ const prev = store.get('best', null); if (!prev || score > prev.s) store.set('best', { s: score, t: TEST.length, g });
|
|
|
+ box.innerHTML = ''; (g >= 4 ? (Snd.ok(), confetti()) : Snd.bad());
|
|
|
+ box.append(el('div', { class: 'hero' }, el('div', { class: 'score grad' }, `${score} / ${TEST.length}`), el('h2', {}, `Оценка: ${g}`),
|
|
|
+ el('p', { class: 'lead' }, g === 5 ? 'Отлично! Материал усвоен.' : g === 4 ? 'Хорошо! Загляни в разбор ошибок.' : g === 3 ? 'Удовлетворительно. Рекомендуется повторить сцены с моделями.' : 'Нужно повторить материал и пересдать.'),
|
|
|
+ el('div', { class: 'row' }, el('button', { class: 'btn primary', onclick: () => { i = 0; score = 0; wrongs.length = 0; show(); } }, '↻ Пересдать'), el('button', { class: 'btn', onclick: () => ctx.go(1) }, '📚 Повторить курс'))),
|
|
|
+ wrongs.length ? el('div', {}, el('h3', {}, 'Разбор ошибок'), wrongs.map(w => el('div', { class: 'rev' }, el('b', {}, w.q), el('div', {}, 'Твой ответ: ' + w.you), el('div', {}, 'Верно: ' + w.right), el('small', {}, w.e)))) : el('div', { class: 'rev g' }, 'Ошибок нет — отличная работа!'));
|
|
|
+ }
|
|
|
+ show(); ctx.gate(() => false);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Тосты, модальное меню, конфетти ===== */
|
|
|
+let toastT;
|
|
|
+function toast(msg) { const t = $('#toast'); t.textContent = msg; t.classList.add('show'); clearTimeout(toastT); toastT = setTimeout(() => t.classList.remove('show'), 2600); }
|
|
|
+function modal(title, body, actions = []) {
|
|
|
+ const m = $('#modal'); m.innerHTML = ''; m.hidden = false;
|
|
|
+ const close = () => { m.hidden = true; m.innerHTML = ''; };
|
|
|
+ m.append(el('div', { class: 'sheet card' }, el('div', { class: 'sheet-h' }, el('h3', {}, title), el('button', { class: 'icon-btn', onclick: close, 'aria-label': 'Закрыть' }, '✕')), body, el('div', { class: 'row', style: 'margin-top:14px' }, actions.map(([t, f, cls]) => el('button', { class: 'btn ' + (cls || ''), onclick: () => { f(); close(); } }, t)))));
|
|
|
+ m.onclick = e => { if (e.target === m) close(); };
|
|
|
+ return close;
|
|
|
+}
|
|
|
+function confetti() {
|
|
|
+ const cv = $('#confetti'), c = cv.getContext('2d'); cv.width = innerWidth; cv.height = innerHeight; cv.style.display = 'block';
|
|
|
+ const cols = ['#ff7a3d', '#ffd166', '#5ec8ff', '#42d392', '#ff5470'];
|
|
|
+ const ps = Array.from({ length: 140 }, () => ({ x: rnd(0, cv.width), y: rnd(-cv.height, 0), s: rnd(5, 10), v: rnd(2, 5), r: rnd(0, 6), c: cols[Math.floor(rnd(0, 5))] }));
|
|
|
+ let f = 0; (function tick() { c.clearRect(0, 0, cv.width, cv.height); ps.forEach(p => { p.y += p.v; p.x += Math.sin(p.y / 30); p.r += .1; c.save(); c.translate(p.x, p.y); c.rotate(p.r); c.fillStyle = p.c; c.fillRect(-p.s / 2, -p.s / 4, p.s, p.s / 2); c.restore(); }); if (++f < 220) requestAnimationFrame(tick); else { c.clearRect(0, 0, cv.width, cv.height); cv.style.display = 'none'; } })();
|
|
|
+}
|
|
|
+const HINTS = ['Нажми «Начать курс». Звук можно выключить кнопкой 🔊.',
|
|
|
+ 'Двигай ползунок до конца (≥ 75 %) и ответь на вопрос внизу: что видно первым при тлении — дым.',
|
|
|
+ 'Нажми «Тление (дым)» и дождись тревоги, затем «Пар из ванной» — это ложная тревога. После этого ответь на вопрос.',
|
|
|
+ 'Запусти оба сценария: «Солнечный день» и «Пожар» (ждать до конца графика), затем ответь на вопрос.',
|
|
|
+ 'Ответь на все 5 карточек. Дым — тление и чистые помещения, тепло — пар и жир, пламя — ЛВЖ.',
|
|
|
+ 'Подожги два разных помещения, дождись сирены, нажми «Квитировать». Потом можно сделать «Сброс».',
|
|
|
+ 'Порядок: сигнал → ППКП/оповещение → проверка дежурным → вызов 101/112 → тушение и дымоудаление → сброс.',
|
|
|
+ 'Нажми «Итоговое Тестирование». В тесте 9 вопросов, на каждый сразу даётся пояснение.',
|
|
|
+ 'Выбирай один вариант. Верный ответ подсвечивается сразу после выбора.'];
|
|
|
+function showMenu() {
|
|
|
+ const list = el('div', { class: 'menu-list' });
|
|
|
+ const furthest = SCENES.reduce((m, s, k) => S.done.has(k) ? Math.max(m, k + 1) : m, 0);
|
|
|
+ SCENES.forEach((s, k) => { const open = k <= Math.max(furthest, S.i) || S.done.has(k); const b = el('button', { class: 'menu-item' + (k === S.i ? ' cur' : ''), disabled: open ? null : '', onclick: () => { $('#modal').hidden = true; Snd.click(); go(k); } }, el('span', { class: 'num' }, S.done.has(k) ? '✔' : String(k + 1)), el('span', {}, s.hidden ? 'Итоговое тестирование' : s.n)); list.append(b); });
|
|
|
+ const best = store.get('best', null);
|
|
|
+ modal('Сцены курса', el('div', {}, list, el('p', { class: 'hint', style: 'text-align:left' }, best ? `Лучший результат теста: ${best.s} из ${best.t} (оценка ${best.g})` : 'Тест ещё не пройден')),
|
|
|
+ [['↺ Сбросить весь прогресс', () => { S.done.clear(); toast('Прогресс сброшен'); go(0); }], ['🗑 Стереть результат теста', () => { store.set('best', null); toast('Результат теста стёрт'); }, 'ghost']]);
|
|
|
+}
|
|
|
+function resetScene() { Snd.click(); S.done.delete(S.i); go(S.i); toast('Сцена сброшена'); }
|
|
|
+function showTip() { Snd.click(); modal('💡 Подсказка', el('p', { class: 'lead', style: 'margin:0' }, HINTS[S.i])); }
|
|
|
+
|
|
|
+/* ===== Каркас приложения ===== */
|
|
|
+const SCENES = [
|
|
|
+ { n: 'Старт', f: sceneStart }, { n: 'Стадии пожара', f: sceneStages }, { n: 'Дымовой', f: sceneSmoke }, { n: 'Тепловой', f: sceneHeat },
|
|
|
+ { n: 'Подбор', f: scenePick }, { n: 'ППКП', f: scenePanel }, { n: 'Алгоритм', f: sceneAlgo }, { n: 'Финал', f: sceneFinal }, { n: 'Тест', f: sceneTest, hidden: true }
|
|
|
+];
|
|
|
+const S = { i: 0, cleanup: null, done: new Set(), gate: null };
|
|
|
+const stage = $('#stage'), prev = $('#prev'), next = $('#next'), hint = $('#hint'), dots = $('#dots');
|
|
|
+
|
|
|
+function updateNav() {
|
|
|
+ const sc = SCENES[S.i], ok = S.done.has(S.i) || (S.gate && S.gate());
|
|
|
+ if (ok && !S.done.has(S.i) && S.i > 0 && S.i < 8) toast('✔ Задание выполнено — можно идти дальше');
|
|
|
+ if (ok) S.done.add(S.i);
|
|
|
+ next.disabled = !ok || S.i >= 7; prev.disabled = S.i === 0 || S.i === 8;
|
|
|
+ next.style.visibility = S.i >= 7 ? 'hidden' : '';
|
|
|
+ hint.className = 'hint' + (ok ? ' ok' : ''); hint.textContent = S.i === 8 ? '' : ok ? '✔ Задание выполнено — можно идти дальше' : (S.i === 0 ? '' : 'Выполни задание сцены, чтобы продолжить');
|
|
|
+ $('#step').textContent = S.i === 8 ? 'Итоговое тестирование' : `Сцена ${S.i + 1} из 8 · ${sc.n}`;
|
|
|
+ dots.innerHTML = ''; SCENES.filter(s => !s.hidden).forEach((s, k) => dots.append(el('button', { class: 'dot' + (S.done.has(k) ? ' done' : '') + (k === S.i ? ' cur' : ''), title: s.n, 'aria-label': s.n, disabled: !(S.done.has(k) || k < S.i) || S.i === 8 ? '' : null, onclick: () => { if (k !== S.i) { Snd.click(); go(k); } } })));
|
|
|
+}
|
|
|
+function go(i) {
|
|
|
+ if (S.cleanup) { try { S.cleanup(); } catch (e) { } S.cleanup = null; } Snd.stopAll();
|
|
|
+ S.i = i; S.gate = null; $('#app').classList.toggle('first', i === 0); stage.innerHTML = ''; if (i >= 1 && i <= 7) stage.append(el('div', { class: 'kicker' }, `СЦЕНА ${i + 1} · ${SCENES[i].n.toUpperCase()}`)); stage.style.animation = 'none'; void stage.offsetWidth; stage.style.animation = '';
|
|
|
+ const ctx = { next: () => go(S.i + 1), go, reset: () => { S.done.delete(S.i); go(S.i); }, unlock() { S.done.add(S.i); updateNav(); }, isUnlocked: () => S.done.has(S.i), gate(fn) { S.gate = fn; updateNav(); } };
|
|
|
+ S.cleanup = SCENES[i].f(stage, ctx) || null; updateNav(); window.scrollTo(0, 0);
|
|
|
+}
|
|
|
+setInterval(updateNav, 150);
|
|
|
+prev.onclick = () => { Snd.click(); go(S.i - 1); };
|
|
|
+next.onclick = () => { Snd.click(); go(S.i + 1); };
|
|
|
+const sb = $('#sound'); sb.textContent = Snd.on ? '🔊' : '🔇';
|
|
|
+sb.onclick = () => { Snd.on = !Snd.on; store.set('sound', Snd.on); sb.textContent = Snd.on ? '🔊' : '🔇'; if (!Snd.on) Snd.stopAll(); else Snd.click(); };
|
|
|
+if ('serviceWorker' in navigator && location.protocol.startsWith('http')) navigator.serviceWorker.register('sw.js').catch(() => { });
|
|
|
+$('#menu').onclick = showMenu; $('#tip').onclick = showTip; $('#reset').onclick = resetScene;
|
|
|
+$('#full').onclick = () => { try { document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen(); } catch (e) { toast('Полноэкранный режим недоступен'); } };
|
|
|
+document.addEventListener('keydown', e => {
|
|
|
+ if (e.target.matches('input,textarea') || e.ctrlKey || e.metaKey || e.altKey) return;
|
|
|
+ if (!$('#modal').hidden) { if (e.key === 'Escape') $('#modal').hidden = true; return; }
|
|
|
+ const k = e.key.toLowerCase();
|
|
|
+ if (e.key === 'ArrowRight' && !next.disabled && next.style.visibility !== 'hidden') next.click();
|
|
|
+ else if (e.key === 'ArrowLeft' && !prev.disabled) prev.click();
|
|
|
+ else if (k === 'm' || k === 'ь') showMenu(); else if (k === 'h' || k === 'р') showTip(); else if (k === 'r' || k === 'к') resetScene(); else if (k === 'f' || k === 'а') $('#full').click();
|
|
|
+});
|
|
|
+window.__go = go; // для отладки/автотестов
|
|
|
+go(0);
|
