feat(phys9 ch1): добавлены 14 виджетов Wave A — Глава 1 «Основы кинематики»

Новый модуль frontend/js/phys9_ch1_widgets.js — экспортирует window.PHYS9_CH1_WIDGETS = { p1..p14: fn }. Каждая функция инжектится в pN-body через расширенный ensureBuilt hook после оригинального билда и блока POOLS-задач. Идемпотентно (проверка class wg-phys9-extra-<id>). Виджеты: - §1 DnD: 8 объектов → точка / не точка - §2 CALC: скорость катера отн. берега (slider v_катера, v_течения, направление) - §3 DnD: 8 величин → вектор / скаляр - §4 CALC + SVG: проекции вектора по углу с тригокружностью - §5 DnD: 6 траекторий → s=|Δr| или s>|Δr| - §6 CALC: v=s/t с переводом в км/ч + бытовая аналогия - §7 CALC: средневзвешенная ⟨v⟩ + ловушка «среднее арифметическое» - §8 DnD: 6 уравнений x(t) → характер движения - §9 CALC: время и место встречи двух тел - §10 DnD: 6 признаков → знак мгновенной v - §11 CALC: режим движения (ускорение/торможение/равномерное) - §12 CALC: тормозной путь автомобиля - §13 CALC: Δx и v при равноуск. + проверка v²−v₀²=2aΔx - §14 DnD: 6 графиков v(t) → знак ускорения Все виджеты используют: - стандартные CSS-классы .wg, .sliders, .score-display, .drop-box (из phys-textbook-widgets.css) - палитру PHYS9_COLORS (тёмная тема работает автоматически) - KaTeX для формул - единый DnD движок через wireDnd В ch1.html подключён скрипт + расширен hook _injectTasks вызывать PHYS9_CH1_WIDGETS[id] после рендера задач. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-30 09:44:28 +03:00
parent 8a480c8ead
commit bf788c1c3a
2 changed files with 505 additions and 1 deletions
@@ -0,0 +1,503 @@
+// phys9_ch1_widgets.js — дополнительные виджеты для Физики 9, Глава 1 (§1-§14).
+// Калькуляторы, DnD-сортировки, SVG-визуализации, дополняющие legacy-контент.
+// Экспорт: window.PHYS9_CH1_WIDGETS = { p1: fn, p2: fn, ... }.
+(function(){
+'use strict';
+
+const C = () => window.PHYS9_COLORS || {};
+const PI = Math.PI;
+
+/* === Общие хелперы === */
+
+function svg(content, vbW, vbH){
+  return '<svg viewBox="0 0 '+vbW+' '+vbH+'" style="width:100%;height:auto;max-width:560px;background:var(--bg-subtle,#f8fafc);border:1px solid var(--border,#e2e8f0);border-radius:9px">'+content+'</svg>';
+}
+
+function arrow(x1, y1, x2, y2, color, w){
+  const dx = x2-x1, dy = y2-y1, len = Math.hypot(dx,dy);
+  if(len < 1e-6) return '';
+  const ux = dx/len, uy = dy/len, h = 10, hw = 6;
+  const bx = x2 - ux*h, by = y2 - uy*h;
+  const lx = bx - uy*hw, ly = by + ux*hw;
+  const rx = bx + uy*hw, ry = by - ux*hw;
+  return '<line x1="'+x1.toFixed(1)+'" y1="'+y1.toFixed(1)+'" x2="'+bx.toFixed(1)+'" y2="'+by.toFixed(1)+'" stroke="'+color+'" stroke-width="'+(w||2.5)+'" stroke-linecap="round"/>'
+    + '<polygon points="'+x2.toFixed(1)+','+y2.toFixed(1)+' '+lx.toFixed(1)+','+ly.toFixed(1)+' '+rx.toFixed(1)+','+ry.toFixed(1)+'" fill="'+color+'"/>';
+}
+
+function dndPool(secId, items, cats){
+  let pool = '<div class="dnd-pool" id="'+secId+'-pool" style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1.5px dashed var(--border);border-radius:10px;margin-bottom:10px">';
+  items.forEach(it=>{
+    pool += '<div class="dnd-chip" draggable="true" data-id="'+it.id+'" data-cat="'+it.cat+'" style="padding:6px 11px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);cursor:grab;font-size:.92rem">'+it.html+'</div>';
+  });
+  pool += '</div>';
+  let boxes = '<div style="display:grid;grid-template-columns:repeat('+cats.length+',1fr);gap:10px">';
+  cats.forEach(c=>{
+    boxes += '<div class="drop-box" data-cat="'+c.cat+'" style="border:1.5px dashed var(--border);border-radius:10px;padding:10px;min-height:80px"><h5 style="font-size:.78rem;font-weight:800;margin-bottom:6px;color:var(--sec-acc-d,var(--pri-d))">'+c.label+'</h5><div class="drop-items"></div></div>';
+  });
+  boxes += '</div>';
+  return pool + boxes;
+}
+
+function wireDnd(scopeId, items, onCheck){
+  const scope = document.querySelector('#'+scopeId);
+  if(!scope) return;
+  scope.querySelectorAll('.dnd-chip').forEach(chip=>{
+    chip.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', chip.dataset.id); chip.style.opacity='0.5'; });
+    chip.addEventListener('dragend', e=>{ chip.style.opacity='1'; });
+  });
+  scope.querySelectorAll('.drop-box').forEach(box=>{
+    box.addEventListener('dragover', e=>{ e.preventDefault(); box.style.borderColor=C().force||'#10b981'; });
+    box.addEventListener('dragleave', e=>{ box.style.borderColor=''; });
+    box.addEventListener('drop', e=>{
+      e.preventDefault(); box.style.borderColor='';
+      const id = e.dataTransfer.getData('text/plain');
+      const chip = scope.querySelector('.dnd-chip[data-id="'+id+'"]');
+      if(chip) box.querySelector('.drop-items').appendChild(chip);
+    });
+  });
+  const checkBtn = scope.querySelector('.dnd-check');
+  if(checkBtn) checkBtn.addEventListener('click', ()=>{
+    let wrong = 0, total = items.length;
+    scope.querySelectorAll('.drop-box').forEach(box=>{
+      const cat = box.dataset.cat;
+      box.querySelectorAll('.dnd-chip').forEach(chip=>{
+        if(chip.dataset.cat !== cat) wrong++;
+      });
+    });
+    /* посчитать placed */
+    let placed = 0; scope.querySelectorAll('.drop-box .dnd-chip').forEach(()=>placed++);
+    const fb = scope.querySelector('.dnd-fb');
+    if(placed < total){ fb.className='feedback fail'; fb.innerHTML='Распредели все чипы — осталось '+(total-placed)+'.'; return; }
+    if(wrong===0){ fb.className='feedback ok'; fb.innerHTML='&#10003; Идеально! Правильное распределение.'; if(onCheck) onCheck(true); }
+    else { fb.className='feedback fail'; fb.innerHTML='&#10007; Ошибок: '+wrong+'. Перетащи неверные чипы в другие зоны.'; if(onCheck) onCheck(false); }
+  });
+}
+
+function wgWrapper(secId, badge, title, help, body){
+  return '<div class="wg" id="'+secId+'">'
+    +'<div class="wg-header"><span class="wg-badge">'+badge+'</span><div class="wg-title">'+title+'</div></div>'
+    +'<div class="wg-help">'+help+'</div>'
+    + body
+    +'</div>';
+}
+
+function appendTo(secId, html){
+  const box = document.getElementById(secId + '-body');
+  if(!box) return false;
+  if(box.querySelector('.wg-phys9-extra-'+secId)) return false; /* idempotent */
+  const div = document.createElement('div');
+  div.className = 'wg-phys9-extra-'+secId;
+  div.innerHTML = html;
+  box.appendChild(div);
+  try { if(window.renderMathInElement) window.renderMathInElement(box); } catch(e){}
+  return true;
+}
+
+/* ====== §1 — Точка / не точка ====== */
+function add_p1(){
+  const items = [
+    {id:'i1', cat:'pt',  html:'Самолёт в перелёте Москва-Сочи'},
+    {id:'i2', cat:'pt',  html:'Земля вокруг Солнца'},
+    {id:'i3', cat:'pt',  html:'Молекула газа'},
+    {id:'i4', cat:'pt',  html:'Корабль в океане'},
+    {id:'i5', cat:'no',  html:'Самолёт на посадке'},
+    {id:'i6', cat:'no',  html:'Земля при вращении вокруг оси'},
+    {id:'i7', cat:'no',  html:'Колесо поезда'},
+    {id:'i8', cat:'no',  html:'Человек при беге'}
+  ];
+  const body = dndPool('p1ex', items, [
+    {cat:'pt', label:'Можно как точку'},
+    {cat:'no', label:'Нельзя как точку'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p1', wgWrapper('p1-extra', 'DnD', 'Точка или нет?', 'Подсказка: тело можно считать точкой, если его размеры много меньше, чем изучаемое расстояние.', body))){
+    wireDnd('p1-extra', items);
+  }
+}
+
+/* ====== §2 — Относительность скорости ====== */
+function add_p2(){
+  /* Калькулятор скорости относительно берега */
+  const body = '<div class="sliders">'
+    +'<label>$v_к$ катер отн. воды, м/с: <b id="p2w-vk">5</b><input type="range" id="p2w-vk-r" min="1" max="15" step="0.5" value="5"></label>'
+    +'<label>$v_р$ течение, м/с: <b id="p2w-vr">2</b><input type="range" id="p2w-vr-r" min="0" max="8" step="0.5" value="2"></label>'
+    +'<label>Направление: <select id="p2w-dir" class="tinp" style="width:auto;padding:6px 10px"><option value="1">по течению</option><option value="-1">против течения</option></select></label>'
+    +'</div>'
+    +'<div class="score-display"><span>Скорость отн. берега: <b id="p2w-res">7</b> м/с</span></div>';
+  if(appendTo('p2', wgWrapper('p2-extra', 'CALC', 'Относительная скорость', 'По течению скорости складываются, против — вычитаются.', body))){
+    const upd = ()=>{
+      const vk = +document.getElementById('p2w-vk-r').value;
+      const vr = +document.getElementById('p2w-vr-r').value;
+      const dir = +document.getElementById('p2w-dir').value;
+      document.getElementById('p2w-vk').textContent = vk;
+      document.getElementById('p2w-vr').textContent = vr;
+      document.getElementById('p2w-res').textContent = (vk + dir*vr).toFixed(1);
+    };
+    document.getElementById('p2w-vk-r').addEventListener('input', upd);
+    document.getElementById('p2w-vr-r').addEventListener('input', upd);
+    document.getElementById('p2w-dir').addEventListener('change', upd);
+    upd();
+  }
+}
+
+/* ====== §3 — Вектор / скаляр ====== */
+function add_p3(){
+  const items = [
+    {id:'i1', cat:'v', html:'скорость $\\vec v$'},
+    {id:'i2', cat:'v', html:'сила $\\vec F$'},
+    {id:'i3', cat:'v', html:'перемещение $\\Delta\\vec r$'},
+    {id:'i4', cat:'v', html:'ускорение $\\vec a$'},
+    {id:'i5', cat:'s', html:'масса $m$'},
+    {id:'i6', cat:'s', html:'время $t$'},
+    {id:'i7', cat:'s', html:'длина $L$'},
+    {id:'i8', cat:'s', html:'температура $T$'}
+  ];
+  const body = dndPool('p3ex', items, [
+    {cat:'v', label:'Вектор'},
+    {cat:'s', label:'Скаляр'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p3', wgWrapper('p3-extra', 'DnD', 'Вектор или скаляр?', 'Векторная величина имеет направление, скалярная — только число.', body))){
+    wireDnd('p3-extra', items);
+  }
+}
+
+/* ====== §4 — Знак проекции вектора ====== */
+function add_p4(){
+  /* Калькулятор: дан a и угол → проекции */
+  const body = '<div class="sliders">'
+    +'<label>$|a|$: <b id="p4w-av">10</b><input type="range" id="p4w-a-r" min="1" max="20" step="1" value="10"></label>'
+    +'<label>$\\alpha$, &#176;: <b id="p4w-an">37</b><input type="range" id="p4w-an-r" min="0" max="360" step="5" value="37"></label>'
+    +'</div>'
+    +'<svg id="p4w-svg" viewBox="0 0 360 240" style="width:100%;height:auto;background:var(--bg-subtle,#f8fafc);border:1px solid var(--border);border-radius:9px"></svg>'
+    +'<div class="score-display"><span>$a_x$ = <b id="p4w-ax">8.0</b></span><span>$a_y$ = <b id="p4w-ay">6.0</b></span><span>$|a| = \\sqrt{a_x^2+a_y^2}$ = <b id="p4w-mod">10</b></span></div>';
+  if(appendTo('p4', wgWrapper('p4-extra', 'CALC', 'Проекции вектора', 'Меняй модуль и угол — проекции рассчитываются по $a_x = a\\cos\\alpha$, $a_y = a\\sin\\alpha$.', body))){
+    const cx = 180, cy = 120, R = 60;
+    const upd = ()=>{
+      const a = +document.getElementById('p4w-a-r').value;
+      const an = +document.getElementById('p4w-an-r').value;
+      document.getElementById('p4w-av').textContent = a;
+      document.getElementById('p4w-an').textContent = an;
+      const ax = a * Math.cos(an*PI/180);
+      const ay = -a * Math.sin(an*PI/180);  /* SVG y вниз */
+      document.getElementById('p4w-ax').textContent = ax.toFixed(1);
+      document.getElementById('p4w-ay').textContent = (-ay).toFixed(1);
+      document.getElementById('p4w-mod').textContent = a;
+      let s = '';
+      /* оси */
+      const col = C();
+      s += '<line x1="30" y1="'+cy+'" x2="330" y2="'+cy+'" stroke="'+(col.axis||'#1e293b')+'" stroke-width="1.5"/>';
+      s += '<line x1="'+cx+'" y1="20" x2="'+cx+'" y2="220" stroke="'+(col.axis||'#1e293b')+'" stroke-width="1.5"/>';
+      s += '<text x="332" y="'+(cy+4)+'" font-size="13" font-weight="700" fill="'+(col.text||'#0f172a')+'">x</text>';
+      s += '<text x="'+(cx+4)+'" y="18" font-size="13" font-weight="700" fill="'+(col.text||'#0f172a')+'">y</text>';
+      /* окружность r=60 */
+      s += '<circle cx="'+cx+'" cy="'+cy+'" r="'+R+'" fill="none" stroke="'+(col.grid||'#e2e8f0')+'" stroke-dasharray="3 3"/>';
+      /* вектор */
+      const tipX = cx + R * (ax/a);
+      const tipY = cy + R * (ay/a);
+      s += arrow(cx, cy, tipX, tipY, col.acceleration||'#ea580c', 3);
+      /* проекции */
+      s += '<line x1="'+cx+'" y1="'+cy+'" x2="'+tipX+'" y2="'+cy+'" stroke="'+(col.displacement||'#2563eb')+'" stroke-width="2"/>';
+      s += '<line x1="'+tipX+'" y1="'+cy+'" x2="'+tipX+'" y2="'+tipY+'" stroke="'+(col.force||'#10b981')+'" stroke-width="2" stroke-dasharray="4 3"/>';
+      s += '<text x="'+(cx+tipX)/2+'" y="'+(cy+18)+'" text-anchor="middle" font-size="12" font-weight="700" fill="'+(col.displacement||'#2563eb')+'">$a_x$='+ax.toFixed(1)+'</text>';
+      s += '<text x="'+(tipX+14)+'" y="'+(cy+tipY)/2+'" font-size="12" font-weight="700" fill="'+(col.force||'#10b981')+'">$a_y$='+(-ay).toFixed(1)+'</text>';
+      document.getElementById('p4w-svg').innerHTML = s;
+      try { if(window.renderMathInElement) window.renderMathInElement(document.getElementById('p4-extra').parentNode); } catch(e){}
+    };
+    document.getElementById('p4w-a-r').addEventListener('input', upd);
+    document.getElementById('p4w-an-r').addEventListener('input', upd);
+    upd();
+  }
+}
+
+/* ====== §5 — Путь vs перемещение ====== */
+function add_p5(){
+  /* Сравнение для типичных траекторий */
+  const items = [
+    {id:'i1', cat:'eq', html:'Поезд 100 км по прямой'},
+    {id:'i2', cat:'eq', html:'Луч света 1 м'},
+    {id:'i3', cat:'gt', html:'Бегун: круг по стадиону'},
+    {id:'i4', cat:'gt', html:'Авто туда и обратно (50 км в каждую сторону)'},
+    {id:'i5', cat:'gt', html:'Шарик по дуге радиуса 5 м'},
+    {id:'i6', cat:'gt', html:'Спутник 1 оборот по орбите'}
+  ];
+  const body = dndPool('p5ex', items, [
+    {cat:'eq', label:'$s = |\\Delta\\vec r|$'},
+    {cat:'gt', label:'$s > |\\Delta\\vec r|$'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p5', wgWrapper('p5-extra', 'DnD', 'Когда $s = |\\Delta\\vec r|$?', 'Только при прямолинейном движении в одном направлении.', body))){
+    wireDnd('p5-extra', items);
+  }
+}
+
+/* ====== §6 — Калькулятор v = s/t + перевод ед. ====== */
+function add_p6(){
+  const body = '<div class="sliders">'
+    +'<label>$s$, м: <b id="p6w-s">1000</b><input type="range" id="p6w-s-r" min="10" max="10000" step="10" value="1000"></label>'
+    +'<label>$t$, с: <b id="p6w-t">100</b><input type="range" id="p6w-t-r" min="1" max="1000" step="1" value="100"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>$v$ = $s/t$ = <b id="p6w-v">10.0</b> м/с</span>'
+      +'<span>= <b id="p6w-kmh">36.0</b> км/ч</span>'
+      +'<span style="font-size:.86rem;color:var(--muted)">Аналог: <b id="p6w-cmp">скорость автомобиля в городе</b></span>'
+    +'</div>';
+  if(appendTo('p6', wgWrapper('p6-extra', 'CALC', 'Калькулятор $v = s/t$', 'Меняй путь и время — получи скорость и сравни с привычными объектами.', body))){
+    const upd = ()=>{
+      const s = +document.getElementById('p6w-s-r').value;
+      const t = +document.getElementById('p6w-t-r').value;
+      document.getElementById('p6w-s').textContent = s;
+      document.getElementById('p6w-t').textContent = t;
+      const v = s/t;
+      document.getElementById('p6w-v').textContent = v.toFixed(2);
+      document.getElementById('p6w-kmh').textContent = (v*3.6).toFixed(1);
+      let cmp;
+      if(v < 2) cmp = 'медленный пешеход';
+      else if(v < 5) cmp = 'быстрый шаг';
+      else if(v < 15) cmp = 'велосипедист';
+      else if(v < 30) cmp = 'городской автомобиль';
+      else if(v < 100) cmp = 'автомобиль на трассе';
+      else if(v < 350) cmp = 'самолёт';
+      else cmp = 'сверхзвук';
+      document.getElementById('p6w-cmp').textContent = cmp;
+    };
+    document.getElementById('p6w-s-r').addEventListener('input', upd);
+    document.getElementById('p6w-t-r').addEventListener('input', upd);
+    upd();
+  }
+}
+
+/* ====== §7 — Средняя скорость, ловушки ====== */
+function add_p7(){
+  /* Калькулятор: 2 участка с разной v и t. */
+  const body = '<div class="sliders">'
+    +'<label>$v_1$, м/с: <b id="p7w-v1">20</b><input type="range" id="p7w-v1-r" min="1" max="50" step="1" value="20"></label>'
+    +'<label>$t_1$, с: <b id="p7w-t1">60</b><input type="range" id="p7w-t1-r" min="5" max="300" step="5" value="60"></label>'
+    +'<label>$v_2$, м/с: <b id="p7w-v2">10</b><input type="range" id="p7w-v2-r" min="1" max="50" step="1" value="10"></label>'
+    +'<label>$t_2$, с: <b id="p7w-t2">120</b><input type="range" id="p7w-t2-r" min="5" max="300" step="5" value="120"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>$\\langle v\\rangle = (v_1 t_1 + v_2 t_2)/(t_1+t_2)$ = <b id="p7w-vavg">13.3</b> м/с</span>'
+      +'<span style="font-size:.86rem;color:var(--muted)">Ловушка: ($v_1+v_2)/2$ = <b id="p7w-trap">15.0</b> м/с — <span id="p7w-trap-lbl" style="font-weight:700;color:var(--fail)">НЕВЕРНО</span></span>'
+    +'</div>';
+  if(appendTo('p7', wgWrapper('p7-extra', 'CALC', 'Средняя скорость', 'Меняй $v$ и $t$ на двух участках. Сравни средневзвешенное и арифметическое.', body))){
+    const upd = ()=>{
+      const v1 = +document.getElementById('p7w-v1-r').value;
+      const t1 = +document.getElementById('p7w-t1-r').value;
+      const v2 = +document.getElementById('p7w-v2-r').value;
+      const t2 = +document.getElementById('p7w-t2-r').value;
+      document.getElementById('p7w-v1').textContent = v1;
+      document.getElementById('p7w-t1').textContent = t1;
+      document.getElementById('p7w-v2').textContent = v2;
+      document.getElementById('p7w-t2').textContent = t2;
+      const vavg = (v1*t1 + v2*t2)/(t1+t2);
+      const arith = (v1+v2)/2;
+      document.getElementById('p7w-vavg').textContent = vavg.toFixed(2);
+      document.getElementById('p7w-trap').textContent = arith.toFixed(2);
+      document.getElementById('p7w-trap-lbl').textContent = Math.abs(vavg-arith) < 0.01 ? 'СОВПАЛО (t₁=t₂)' : 'НЕВЕРНО';
+      document.getElementById('p7w-trap-lbl').style.color = Math.abs(vavg-arith) < 0.01 ? 'var(--ok,#10b981)' : 'var(--fail,#dc2626)';
+    };
+    ['p7w-v1-r','p7w-t1-r','p7w-v2-r','p7w-t2-r'].forEach(id => document.getElementById(id).addEventListener('input', upd));
+    upd();
+  }
+}
+
+/* ====== §8 — Графики при равном. движении (4 ситуации) ====== */
+function add_p8(){
+  const items = [
+    {id:'i1', cat:'stay', html:'$x = 5$ м (горизонталь)'},
+    {id:'i2', cat:'go+',  html:'$x = 2 + 3t$'},
+    {id:'i3', cat:'go-',  html:'$x = 20 - 5t$'},
+    {id:'i4', cat:'go+',  html:'$x = 4t$ (стартовала из 0)'},
+    {id:'i5', cat:'stay', html:'$x = -3$ (стоит слева)'},
+    {id:'i6', cat:'go-',  html:'$x = -2t + 10$'}
+  ];
+  const body = dndPool('p8ex', items, [
+    {cat:'stay', label:'Стоит на месте'},
+    {cat:'go+',  label:'Движется в + направл.'},
+    {cat:'go-',  label:'Движется в − направл.'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p8', wgWrapper('p8-extra', 'DnD', 'Что делает тело?', 'По уравнению $x(t) = x_0 + v_x t$ определи характер движения.', body))){
+    wireDnd('p8-extra', items);
+  }
+}
+
+/* ====== §9 — Встреча двух тел ====== */
+function add_p9(){
+  const body = '<div class="sliders">'
+    +'<label>$x_{01}$, м: <b id="p9w-x1">0</b><input type="range" id="p9w-x1-r" min="-50" max="50" step="5" value="0"></label>'
+    +'<label>$v_1$, м/с: <b id="p9w-v1">10</b><input type="range" id="p9w-v1-r" min="-15" max="15" step="1" value="10"></label>'
+    +'<label>$x_{02}$, м: <b id="p9w-x2">100</b><input type="range" id="p9w-x2-r" min="-50" max="200" step="5" value="100"></label>'
+    +'<label>$v_2$, м/с: <b id="p9w-v2">-5</b><input type="range" id="p9w-v2-r" min="-15" max="15" step="1" value="-5"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>Время встречи: $t_{в} = (x_{02}-x_{01})/(v_1-v_2)$ = <b id="p9w-t">6.7</b> с</span>'
+      +'<span>Точка встречи: $x_в = x_{01} + v_1 t_в$ = <b id="p9w-x">66.7</b> м</span>'
+    +'</div>';
+  if(appendTo('p9', wgWrapper('p9-extra', 'CALC', 'Встреча двух тел', 'Меняй параметры — рассчитай время и место встречи.', body))){
+    const upd = ()=>{
+      const x1 = +document.getElementById('p9w-x1-r').value;
+      const v1 = +document.getElementById('p9w-v1-r').value;
+      const x2 = +document.getElementById('p9w-x2-r').value;
+      const v2 = +document.getElementById('p9w-v2-r').value;
+      document.getElementById('p9w-x1').textContent = x1;
+      document.getElementById('p9w-v1').textContent = v1;
+      document.getElementById('p9w-x2').textContent = x2;
+      document.getElementById('p9w-v2').textContent = v2;
+      const dv = v1 - v2;
+      if(Math.abs(dv) < 1e-6){
+        document.getElementById('p9w-t').textContent = 'нет встречи';
+        document.getElementById('p9w-x').textContent = '—';
+      } else {
+        const t = (x2 - x1)/dv;
+        const x = x1 + v1 * t;
+        document.getElementById('p9w-t').textContent = t.toFixed(2);
+        document.getElementById('p9w-x').textContent = x.toFixed(2);
+      }
+    };
+    ['p9w-x1-r','p9w-v1-r','p9w-x2-r','p9w-v2-r'].forEach(id => document.getElementById(id).addEventListener('input', upd));
+    upd();
+  }
+}
+
+/* ====== §10 — Мгновенная скорость, направление ====== */
+function add_p10(){
+  const items = [
+    {id:'i1', cat:'fwd', html:'$x$ растёт со временем'},
+    {id:'i2', cat:'fwd', html:'график идёт круто вверх'},
+    {id:'i3', cat:'back',html:'$x$ убывает'},
+    {id:'i4', cat:'back',html:'график идёт вниз'},
+    {id:'i5', cat:'zero',html:'горизонтальная касательная'},
+    {id:'i6', cat:'zero',html:'максимум или минимум на графике $x(t)$'}
+  ];
+  const body = dndPool('p10ex', items, [
+    {cat:'fwd', label:'$v > 0$'},
+    {cat:'zero',label:'$v = 0$'},
+    {cat:'back',label:'$v < 0$'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p10', wgWrapper('p10-extra', 'DnD', 'Направление $v$', 'Мгновенная скорость = тангенс угла наклона касательной к $x(t)$.', body))){
+    wireDnd('p10-extra', items);
+  }
+}
+
+/* ====== §11 — Ускорение или торможение ====== */
+function add_p11(){
+  const body = '<div class="sliders">'
+    +'<label>$v_0$, м/с: <b id="p11w-v0">5</b><input type="range" id="p11w-v0-r" min="-20" max="20" step="1" value="5"></label>'
+    +'<label>$a$, м/с²: <b id="p11w-a">2</b><input type="range" id="p11w-a-r" min="-10" max="10" step="0.5" value="2"></label>'
+    +'<label>$t$, с: <b id="p11w-t">3</b><input type="range" id="p11w-t-r" min="0" max="20" step="0.5" value="3"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>$v = v_0 + at$ = <b id="p11w-v">11</b> м/с</span>'
+      +'<span>Режим: <b id="p11w-mode" style="color:var(--ok)">УСКОРЕНИЕ</b></span>'
+    +'</div>';
+  if(appendTo('p11', wgWrapper('p11-extra', 'CALC', 'Ускорение или торможение?', 'Если $\\vec a$ и $\\vec v$ сонаправлены — ускорение. Если противоположны — торможение.', body))){
+    const upd = ()=>{
+      const v0 = +document.getElementById('p11w-v0-r').value;
+      const a = +document.getElementById('p11w-a-r').value;
+      const t = +document.getElementById('p11w-t-r').value;
+      document.getElementById('p11w-v0').textContent = v0;
+      document.getElementById('p11w-a').textContent = a;
+      document.getElementById('p11w-t').textContent = t;
+      const v = v0 + a*t;
+      document.getElementById('p11w-v').textContent = v.toFixed(2);
+      const mode = document.getElementById('p11w-mode');
+      if(Math.abs(a) < 0.05){ mode.textContent = 'РАВНОМЕРНОЕ'; mode.style.color = 'var(--muted)'; }
+      else if(v0*a > 0 || (v0 === 0 && Math.abs(a) > 0.05)){ mode.textContent = 'УСКОРЕНИЕ'; mode.style.color = 'var(--ok,#10b981)'; }
+      else if(Math.sign(v) !== Math.sign(v0) && v0 !== 0){ mode.textContent = 'ТОРМОЖЕНИЕ → РАЗГОН В ОБРАТНУЮ'; mode.style.color = 'var(--warn,#f59e0b)'; }
+      else { mode.textContent = 'ТОРМОЖЕНИЕ'; mode.style.color = 'var(--fail,#dc2626)'; }
+    };
+    ['p11w-v0-r','p11w-a-r','p11w-t-r'].forEach(id => document.getElementById(id).addEventListener('input', upd));
+    upd();
+  }
+}
+
+/* ====== §12 — Момент остановки при торможении ====== */
+function add_p12(){
+  const body = '<div class="sliders">'
+    +'<label>$v_0$, м/с: <b id="p12w-v0">20</b><input type="range" id="p12w-v0-r" min="5" max="40" step="1" value="20"></label>'
+    +'<label>$a$, м/с² (тормоз): <b id="p12w-a">-5</b><input type="range" id="p12w-a-r" min="-10" max="-0.5" step="0.5" value="-5"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>Время до остановки $t_{ост} = -v_0/a$ = <b id="p12w-t">4.0</b> с</span>'
+      +'<span>Тормозной путь $s_{ост} = v_0^2 / (2|a|)$ = <b id="p12w-s">40</b> м</span>'
+    +'</div>';
+  if(appendTo('p12', wgWrapper('p12-extra', 'CALC', 'Тормозной путь автомобиля', 'Через какое время остановится и какой пройдёт путь?', body))){
+    const upd = ()=>{
+      const v0 = +document.getElementById('p12w-v0-r').value;
+      const a = +document.getElementById('p12w-a-r').value;
+      document.getElementById('p12w-v0').textContent = v0;
+      document.getElementById('p12w-a').textContent = a;
+      const t = -v0/a;
+      const s = v0*v0/(2*Math.abs(a));
+      document.getElementById('p12w-t').textContent = t.toFixed(2);
+      document.getElementById('p12w-s').textContent = s.toFixed(2);
+    };
+    document.getElementById('p12w-v0-r').addEventListener('input', upd);
+    document.getElementById('p12w-a-r').addEventListener('input', upd);
+    upd();
+  }
+}
+
+/* ====== §13 — Перемещение при равноуск. движении ====== */
+function add_p13(){
+  const body = '<div class="sliders">'
+    +'<label>$v_0$, м/с: <b id="p13w-v0">0</b><input type="range" id="p13w-v0-r" min="0" max="30" step="1" value="0"></label>'
+    +'<label>$a$, м/с²: <b id="p13w-a">2</b><input type="range" id="p13w-a-r" min="0.5" max="10" step="0.5" value="2"></label>'
+    +'<label>$t$, с: <b id="p13w-t">5</b><input type="range" id="p13w-t-r" min="1" max="20" step="0.5" value="5"></label>'
+    +'</div>'
+    +'<div class="score-display" style="flex-direction:column;align-items:flex-start;gap:5px">'
+      +'<span>$\\Delta x = v_0 t + \\frac{at^2}{2}$ = <b id="p13w-dx">25</b> м</span>'
+      +'<span>$v = v_0 + at$ = <b id="p13w-v">10</b> м/с</span>'
+      +'<span>Проверка: $v^2 - v_0^2 = 2a\\Delta x$ → <b id="p13w-chk">100 = 100</b> ✓</span>'
+    +'</div>';
+  if(appendTo('p13', wgWrapper('p13-extra', 'CALC', 'Калькулятор $\\Delta x$ при $a = $ const', 'Меняй параметры. Обе формулы сверены автоматически.', body))){
+    const upd = ()=>{
+      const v0 = +document.getElementById('p13w-v0-r').value;
+      const a = +document.getElementById('p13w-a-r').value;
+      const t = +document.getElementById('p13w-t-r').value;
+      document.getElementById('p13w-v0').textContent = v0;
+      document.getElementById('p13w-a').textContent = a;
+      document.getElementById('p13w-t').textContent = t;
+      const dx = v0*t + a*t*t/2;
+      const v = v0 + a*t;
+      const lhs = v*v - v0*v0;
+      const rhs = 2*a*dx;
+      document.getElementById('p13w-dx').textContent = dx.toFixed(2);
+      document.getElementById('p13w-v').textContent = v.toFixed(2);
+      document.getElementById('p13w-chk').textContent = lhs.toFixed(1)+' = '+rhs.toFixed(1);
+    };
+    ['p13w-v0-r','p13w-a-r','p13w-t-r'].forEach(id => document.getElementById(id).addEventListener('input', upd));
+    upd();
+  }
+}
+
+/* ====== §14 — Знак ускорения по графику $v(t)$ ====== */
+function add_p14(){
+  const items = [
+    {id:'i1', cat:'pos', html:'$v(t)$ растёт линейно из $v_0 > 0$'},
+    {id:'i2', cat:'pos', html:'$v(t)$ растёт из 0 (старт)'},
+    {id:'i3', cat:'neg', html:'$v(t)$ убывает (тормозим)'},
+    {id:'i4', cat:'neg', html:'$v(t)$ становится отрицательной'},
+    {id:'i5', cat:'zero',html:'$v(t)$ — горизонтальная линия'},
+    {id:'i6', cat:'zero',html:'постоянная скорость 30 м/с'}
+  ];
+  const body = dndPool('p14ex', items, [
+    {cat:'pos', label:'$a > 0$'},
+    {cat:'zero',label:'$a = 0$'},
+    {cat:'neg', label:'$a < 0$'}
+  ]) + '<div class="actions"><button class="btn primary dnd-check">Проверить</button></div>'
+     + '<div class="feedback dnd-fb"></div>';
+  if(appendTo('p14', wgWrapper('p14-extra', 'DnD', 'Знак ускорения по $v(t)$', 'Угол наклона графика $v(t)$ = ускорение. Растёт — $a > 0$, убывает — $a < 0$, горизонталь — $a = 0$.', body))){
+    wireDnd('p14-extra', items);
+  }
+}
+
+window.PHYS9_CH1_WIDGETS = {
+  p1: add_p1, p2: add_p2, p3: add_p3, p4: add_p4, p5: add_p5, p6: add_p6, p7: add_p7,
+  p8: add_p8, p9: add_p9, p10: add_p10, p11: add_p11, p12: add_p12, p13: add_p13, p14: add_p14
+};
+
+})();
@@ -17,6 +17,7 @@
 <script src="/js/phys.js" defer></script>
 <script src="/js/phys9_palette.js" defer></script>
 <script src="/js/phys9_legacy.js" defer></script>
+<script src="/js/phys9_ch1_widgets.js" defer></script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800;900&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
 <style>
 :root{
@@ -802,7 +803,7 @@ function _injectTasks(id){
  var body = document.getElementById(id + '-body');
  if(!body || body.querySelector('.legacy-tasks')) return;
  body.insertAdjacentHTML('beforeend', _makeTaskBlock(id));
-  setTimeout(function(){ try { if(window.renderTask) window.renderTask(id); if(window.renderNav) window.renderNav(id); } catch(e){} }, 60);
+  setTimeout(function(){ try { if(window.renderTask) window.renderTask(id); if(window.renderNav) window.renderNav(id); } catch(e){} try { if(window.PHYS9_CH1_WIDGETS && window.PHYS9_CH1_WIDGETS[id]) window.PHYS9_CH1_WIDGETS[id](); } catch(e){ console.warn('phys9 widget init:', e.message); } }, 60);
 }
 var _origEnsureBuilt = ensureBuilt;
 ensureBuilt = function(id){ _origEnsureBuilt(id); _injectTasks(id); };