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();
   })();