feat(math6): ещё 2 canvas-демо — прыжки по прямой (±) и машинка+график

Math6Anim расширен: numberLineWalk (анимированные стрелки-шаги a→b на
числовой прямой для сложения рациональных) и carGraph (машина едет по
дороге, а график «путь–время» вычерчивается синхронно; горизонталь = стоянка).
Вшито: Гл.4 §4 (прыжки, ползунки a,b) и Гл.5 §2 (машинка+график).
Headless-safe. Тесты math6: 19/19 (анимации в Гл.1/4/5/6 монтируются).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/textbooks/math_6_ch4.html

@@ -17,6 +17,7 @@
 <script src="/js/api.js" defer></script>
 <script src="/js/xp.js" defer></script>
 <script src="/js/math6_svg.js" defer></script>
+<script src="/js/math6_anim.js" defer></script>
 <script src="/js/math6_engine.js" defer></script>
 <style>:root{--pri:#e11d48;--pri2:#be123c;--pri-soft:#ffe4e6;--acc:#f43f5e;--acc2:#e11d48;--acc-soft:#fff1f2}</style>
 </head>
@@ -307,7 +308,7 @@ function buildP4(){
   h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Сложение на прямой</div></div>'
     +'<div class="wg-help">Двигай слагаемые — результат отмечается на координатной прямой.</div>'
     +'<div class="sliders"><label>$a$ = <b id="p4-av">-3</b><input type="range" id="p4-asl" min="-6" max="6" value="-3"></label><label>$b$ = <b id="p4-bv">5</b><input type="range" id="p4-bsl" min="-6" max="6" value="5"></label></div>'
-    +'<div id="p4-fig"></div><div id="p4-out" class="qbox"></div></div>';
+    +'<div id="p4-fig"></div><div id="p4-walk" style="margin-top:8px"></div><div id="p4-out" class="qbox"></div></div>';
   h+='<div class="wg" id="p4-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Тренажёр сложения</div></div>'
     +'<div class="wg-help">Сложи рациональные числа.</div>'
     +'<div class="score-display"><span>Пример <b id="p4-i">1</b> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
@@ -318,10 +319,11 @@ function buildP4(){
   box.innerHTML=h; renderMath(box);
 
   (function(){
-    var asl=document.getElementById('p4-asl'), bsl=document.getElementById('p4-bsl'), fig=document.getElementById('p4-fig'), out=document.getElementById('p4-out');
+    var asl=document.getElementById('p4-asl'), bsl=document.getElementById('p4-bsl'), fig=document.getElementById('p4-fig'), out=document.getElementById('p4-out'), walk=null;
     function render(){ var a=+asl.value,b=+bsl.value,s=a+b; document.getElementById('p4-av').textContent=a; document.getElementById('p4-bv').textContent=b;
       fig.innerHTML=Math6.numberLine({min:-12,max:12,minor:1,major:2,width:580,marks:[{v:a,label:'a',color:'#4f46e5'},{v:s,label:'a+b',color:'#059669',above:false}]});
-      out.innerHTML='<div style="font-size:1.3rem;font-weight:800;color:var(--pri2)">$'+a+' + '+_par(b)+' = '+s+'$</div>'; renderMath(out); }
+      out.innerHTML='<div style="font-size:1.3rem;font-weight:800;color:var(--pri2)">$'+a+' + '+_par(b)+' = '+s+'$</div>'; renderMath(out);
+      if(window.Math6Anim){ if(walk)walk.stop(); walk=Math6Anim.numberLineWalk(document.getElementById('p4-walk'),{a:a,b:b}); } }
     asl.oninput=render; bsl.oninput=render; render();
   })();
 

frontend/textbooks/math_6_ch5.html

@@ -17,6 +17,7 @@
 <script src="/js/api.js" defer></script>
 <script src="/js/xp.js" defer></script>
 <script src="/js/math6_svg.js" defer></script>
+<script src="/js/math6_anim.js" defer></script>
 <script src="/js/math6_engine.js" defer></script>
 <style>:root{--pri:#059669;--pri2:#047857;--pri-soft:#d1fae5;--acc:#10b981;--acc2:#059669;--acc-soft:#ecfdf5}</style>
 </head>
@@ -218,9 +219,14 @@ function buildP2(){
     +'<div id="p2-dq" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-dv="up">Растёт</button><button class="btn primary" data-dv="flat">Стоит</button><button class="btn primary" data-dv="down">Падает</button></div>'
     +'<div class="feedback" id="p2-dfb"></div></div>';
+  h+='<div class="wg" id="p2-anim"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Машинка едет — график рисуется сам</div></div>'
+    +'<div class="wg-help">Смотри, как движение машины по дороге превращается в линию на графике «путь–время». Горизонтальный участок — машина стоит.</div>'
+    +'<div id="p2-car"></div></div>';
   h+=secNav('p1','p3')+readBtn('p2');
   box.innerHTML=h; renderMath(box);
 
+  (function(){ if(window.Math6Anim) Math6Anim.carGraph(document.getElementById('p2-car'),{}); })();
+
   var G=[{x:0,y:2},{x:1,y:4},{x:2,y:4},{x:3,y:6},{x:4,y:5},{x:5,y:5},{x:6,y:3}];
   function gy(x){ for(var k=0;k<G.length;k++) if(G[k].x===x) return G[k].y; return null; }
   function fig(){ return Math6.plane({xmin:0,xmax:7,ymin:0,ymax:7,size:340,polyline:G,polylineColor:'#059669',polylineDots:true}); }