diff --git a/frontend/textbooks/geometry_8_ch3.html b/frontend/textbooks/geometry_8_ch3.html index 5c8297f..b765d68 100644 --- a/frontend/textbooks/geometry_8_ch3.html +++ b/frontend/textbooks/geometry_8_ch3.html @@ -339,7 +339,7 @@ const PARAS=[ function buildParaSelector(){const g=document.getElementById('psel-grid');g.innerHTML='';PARAS.forEach(p=>{const card=document.createElement('div');card.className='psel-card'+(p.final?' final':'');card.dataset.id=p.id;card.dataset.progCard=p.id;card.innerHTML=`
${p.num}
${p.name}
`;card.addEventListener('click',()=>goTo(p.id));g.appendChild(card);});} const BUILT=new Set(); -const BUILDERS={p1:()=>buildP1(),p2:()=>buildP2(),p3:()=>buildP3(),p4:()=>buildP4(),p5:()=>buildP5(),p6:()=>buildP6stub(),p7:()=>buildP7stub(),p8:()=>buildP8stub(),p9:()=>buildP9stub(),final3:()=>buildFinal3stub()}; +const BUILDERS={p1:()=>buildP1(),p2:()=>buildP2(),p3:()=>buildP3(),p4:()=>buildP4(),p5:()=>buildP5(),p6:()=>buildP6(),p7:()=>buildP7(),p8:()=>buildP8stub(),p9:()=>buildP9stub(),final3:()=>buildFinal3stub()}; function ensureBuilt(id){if(BUILT.has(id))return;const fn=BUILDERS[id];if(fn){fn();BUILT.add(id);}} function goTo(id){STATE.current=id;ensureBuilt(id);document.querySelectorAll('.sec').forEach(s=>s.classList.remove('active'));const el=document.getElementById('sec-'+id);if(el)el.classList.add('active');document.querySelectorAll('.psel-card').forEach(c=>c.classList.toggle('active',c.dataset.id===id));buildSidebar(id);window.scrollTo({top:0,behavior:'smooth'});if((STATE.progress[id]||0)<10)bumpProgress(id,10);if(window.renderMathInElement)setTimeout(()=>renderMath(el),0);setTimeout(()=>{try{wrapGlossary(el);}catch(e){}},60);markLastPara(id);} @@ -2327,8 +2327,853 @@ function buildP5(){ renderMath(bossBox); })(); } -function buildP6stub(){ document.getElementById('p6-body').innerHTML='

§6 — Волна 1: содержимое появится в следующем обновлении.

'+secNav('p5','p7'); } -function buildP7stub(){ document.getElementById('p7-body').innerHTML='

§7 — Волна 1: содержимое появится в следующем обновлении.

'+secNav('p6','p8'); } +function buildP6(){ + const box=document.getElementById('p6-body'); + let html=''; + + /* ---- Theory cards ---- */ + html+=makeCard('theory','Второй признак подобия треугольников (СУС — сторона-угол-сторона)','6.1',` +

Теорема (2-й признак подобия, СУС). Если две стороны одного треугольника пропорциональны двум сторонам другого треугольника, а углы между этими сторонами равны, то такие треугольники подобны.

+

Если $\\dfrac{AB}{A'B'} = \\dfrac{AC}{A'C'} = k$ и $\\angle A = \\angle A'$, то $\\triangle ABC \\sim \\triangle A'B'C'$.

+

Это означает: двух пропорциональных сторон и равного угла между ними достаточно для подобия — третью сторону и остальные углы можно не проверять.

+
+ + + + + + + A + B + C + AB + AC + + + + + A' + B' + C' + A'B' + A'C' + + ∠A = ∠A' + AB/A'B' = AC/A'C' = k → △ABC∼△A'B'C' + +
`); + + html+=makeCard('rule','Доказательство 2-го признака — схема','6.2',` +

На луче $A'B'$ откладываем $A'M = AB$. Через $M$ проводим прямую $MN \\parallel B'C'$, встречающую $A'C'$ в точке $N$.

+

По теореме о прямой, параллельной стороне (§4): $\\dfrac{A'M}{A'B'} = \\dfrac{A'N}{A'C'}$, то есть $A'N = A'C' \\cdot \\dfrac{A'M}{A'B'} = A'C' \\cdot \\dfrac{AB}{A'B'} = AC$.

+

Итак $A'M=AB$, $A'N=AC$, $\\angle A' = \\angle A$ → по признаку SAS: $\\triangle A'MN \\cong \\triangle ABC$.

+

Также $\\triangle A'MN \\sim \\triangle A'B'C'$ (§4). Значит $\\triangle ABC \\sim \\triangle A'B'C'$. QED.

+
+ + + + + + + + + A' + B' + C' + M + N + MN ∥ B'C' + △A'MN≅△ABC и △A'MN∼△A'B'C' + +
`); + + html+=makeCard('example','Примеры применения признака СУС','6.3',` +

Пример 1. $AB=6$, $AC=9$, $A'B'=4$, $A'C'=6$, $\\angle A=\\angle A'=50°$. Подобны ли треугольники?

+

$\\dfrac{AB}{A'B'}=\\dfrac{6}{4}=1{,}5$; $\\dfrac{AC}{A'C'}=\\dfrac{9}{6}=1{,}5$. Отношения равны, углы между ними равны → по СУС: $\\triangle ABC \\sim \\triangle A'B'C'$, $k=1{,}5$.

+

Пример 2. $PQ=10$, $PR=15$, $P'Q'=6$, $P'R'=9$, $\\angle P=\\angle P'$. $PQ/P'Q'=10/6=5/3$, $PR/P'R'=15/9=5/3$. Подобны ($k=5/3$).

+

Пример 3 (не подобны). $AB=8$, $AC=6$, $A'B'=4$, $A'C'=5$, $\\angle A=\\angle A'$. $AB/A'B'=2$, $AC/A'C'=1{,}2$ — отношения неравны → не подобны.

`); + + /* ---- ИНТЕРАКТИВ 1: SVG два треугольника, слайдер k ---- */ + html+=`
+
ИНТЕРАКТИВ 1
Два треугольника — признак СУС
+
Задай стороны $AB$, $AC$ и угол $\\angle A$ первого треугольника. Второй строится автоматически с тем же углом и пропорциональными сторонами. Меняй коэффициент $k$.
+
+ + + + +
+
+
+
`; + + /* ---- ИНТЕРАКТИВ 2: Пошаговое доказательство ---- */ + html+=`
+
ИНТЕРАКТИВ 2
Доказательство 2-го признака — по шагам
+
Нажимай «Далее» для каждого шага доказательства.
+
+
+
+ + +
+
`; + + /* ---- ИНТЕРАКТИВ 3: Калькулятор СУС ---- */ + html+=`
+
ИНТЕРАКТИВ 3
Калькулятор признака СУС
+
Введи $AB, AC, \\angle A$ первого треугольника и коэффициент $k$ — получи стороны и угол второго. Или введи стороны двух треугольников и угол — система проверит подобие.
+
+
AB
+
AC
+
∠A (°)
+
k
+
+
+ +
`; + + /* ---- ИНТЕРАКТИВ 4: Тренажёр ---- */ + html+=`
+
ИНТЕРАКТИВ 4
Тренажёр §6 — Признак СУС
+
5 задач на подобие по признаку СУС.
+
Задача 1 / 5Очки: 0
+
+
+ + + +
+ +
`; + + /* ---- ИНТЕРАКТИВ 5: DnD-сортер ---- */ + html+=`
+
ИНТЕРАКТИВ 5
Подобны по СУС или нет? — Сортировка
+
Перетащи каждую пару в нужную колонку.
+
+
+
Подобны (СУС)
+
Не подобны
+
+
+ +
`; + + /* ---- ИНТЕРАКТИВ 6: Босс §6 ---- */ + html+=`
+
БОСС §6
Итоговые задачи
+
4 задачи — каждая верная даёт +5 XP.
+
+
`; + + html+=`
+ +
`; + html+=secNav('p5','p7'); + box.innerHTML=html; + if(window.renderMathInElement) setTimeout(()=>renderMath(box),0); + + /* == INIT ИНТЕРАКТИВ 1: SVG слайдеры СУС == */ + (function(){ + const abSl=document.getElementById('p6-ab-sl'); + const acSl=document.getElementById('p6-ac-sl'); + const angSl=document.getElementById('p6-ang-sl'); + const kSl=document.getElementById('p6-k-sl'); + const abVal=document.getElementById('p6-ab-val'); + const acVal=document.getElementById('p6-ac-val'); + const angVal=document.getElementById('p6-ang-val'); + const kVal=document.getElementById('p6-k-val'); + const svgOut=document.getElementById('p6-svg-out'); + const infoEl=document.getElementById('p6-svg-info'); + + function triFromSAS(ab,ac,angRad,ox,oy){ + const Ax=ox, Ay=oy; + const Bx=ox+ab, By=oy; + const Cx=ox+ac*Math.cos(angRad); + const Cy=oy-ac*Math.sin(angRad); + return {Ax,Ay,Bx,By,Cx,Cy}; + } + + function draw(){ + const ab=+abSl.value; + const ac=+acSl.value; + const angDeg=+angSl.value; + const k=+kSl.value/10; + abVal.textContent=ab; + acVal.textContent=ac; + angVal.textContent=angDeg; + kVal.textContent=k.toFixed(1); + + const scale=14; + const angRad=angDeg*Math.PI/180; + const W=380, H=180; + + const t1=triFromSAS(ab*scale,ac*scale,angRad,24,155); + const ab2=ab/k, ac2=ac/k; + const t2=triFromSAS(ab2*scale,ac2*scale,angRad,220,155); + + let s=``; + s+=``; + s+=`A`; + s+=`B`; + s+=`C`; + const mABx1=(t1.Ax+t1.Bx)/2, mABx1y=(t1.Ay+t1.By)/2; + const mACx1=(t1.Ax+t1.Cx)/2, mACy1=(t1.Ay+t1.Cy)/2; + s+=`${ab}`; + s+=`${ac}`; + s+=``; + + s+=``; + s+=`A'`; + s+=`B'`; + s+=`C'`; + const mABx2=(t2.Ax+t2.Bx)/2, mABy2=(t2.Ay+t2.By)/2; + const mACx2=(t2.Ax+t2.Cx)/2, mACy2=(t2.Ay+t2.Cy)/2; + s+=`${fmt(ab2)}`; + s+=`${fmt(ac2)}`; + s+=``; + + s+=`k = ${k.toFixed(1)}`; + s+=''; + svgOut.innerHTML=s; + infoEl.innerHTML=`$AB=${ab}$, $AC=${ac}$, $\\angle A=${angDeg}°$. Второй треугольник: $A'B'=${fmt(ab2)}$, $A'C'=${fmt(ac2)}$, $\\angle A'=${angDeg}°$. Отношение сторон $k=${k.toFixed(1)}$ — треугольники подобны по признаку СУС.`; + renderMath(infoEl); + addXp(1,'p6-svg'); + } + abSl.addEventListener('input',draw); + acSl.addEventListener('input',draw); + angSl.addEventListener('input',draw); + kSl.addEventListener('input',draw); + draw(); + })(); + + /* == INIT ИНТЕРАКТИВ 2: пошаговое доказательство == */ + (function(){ + const steps=[ + {desc:'Шаг 1. Дано: $\\dfrac{AB}{A\'B\'} = \\dfrac{AC}{A\'C\'} = k$ и $\\angle A = \\angle A\'$. Нужно доказать: $\\triangle ABC \\sim \\triangle A\'B\'C\'$.', + svg:`ABCA'B'C'AB/A'B'=AC/A'C'=k, ∠A=∠A'`}, + {desc:'Шаг 2. На луче $A\'B\'$ откладываем точку $M$ так, что $A\'M = AB$. Через $M$ проводим прямую $MN \\parallel B\'C\'$, где $N$ на луче $A\'C\'$.', + svg:`A'B'C'MNA'M=AB, MN∥B'C'`}, + {desc:'Шаг 3. По теореме о прямой, параллельной стороне (§4): $\\dfrac{A\'M}{A\'B\'} = \\dfrac{A\'N}{A\'C\'}$. Так как $A\'M = AB$ и $\\dfrac{AB}{A\'B\'} = k$, получаем $A\'N = A\'C\' \\cdot \\dfrac{AB}{A\'B\'}= AC$.', + svg:`A'M/A'B' = A'N/A'C' (§4, пропорция)A'M=AB → A'N=ACИтак: A'M=AB, A'N=AC, ∠A'=∠A`}, + {desc:'Шаг 4. Теперь: $A\'M = AB$, $A\'N = AC$, $\\angle A\' = \\angle A$. По признаку равенства треугольников (SAS): $\\triangle A\'MN \\cong \\triangle ABC$. Кроме того, $\\triangle A\'MN \\sim \\triangle A\'B\'C\'$ (§4).', + svg:`△A'MN ≅ △ABC (SAS)△A'MN ∼ △A'B'C' (§4)По транзитивности подобия:`}, + {desc:'Шаг 5. По транзитивности: $\\triangle ABC \\cong \\triangle A\'MN \\sim \\triangle A\'B\'C\'$ → $\\triangle ABC \\sim \\triangle A\'B\'C\'$. Второй признак подобия (СУС) доказан.', + svg:`AB/A'B'=AC/A'C'=k, ∠A=∠A' → △ABC∼△A'B'C'Признак СУС — второй признак подобияQED ∎`}, + ]; + let step=0; + const svgEl=document.getElementById('p6-proof-svg'); + const descEl=document.getElementById('p6-proof-desc'); + function show(){svgEl.innerHTML=steps[step].svg;descEl.innerHTML=steps[step].desc;renderMath(descEl);} + document.getElementById('p6-proof-next').addEventListener('click',()=>{ + if(step{step=0;show();}); + show(); + })(); + + /* == INIT ИНТЕРАКТИВ 3: калькулятор == */ + (function(){ + document.getElementById('p6-ccalc').addEventListener('click',()=>{ + const AB=parseFloat(document.getElementById('p6-cAB').value); + const AC=parseFloat(document.getElementById('p6-cAC').value); + const ang=parseFloat(document.getElementById('p6-cAng').value); + const k=parseFloat(document.getElementById('p6-ck').value); + const out=document.getElementById('p6-ccalc-out'); + if([AB,AC,ang,k].some(v=>!isFinite(v)||v<=0)){ + out.style.display='block';out.innerHTML='Введи все поля (положительные числа).';return; + } + if(ang>=180){out.style.display='block';out.innerHTML='Угол должен быть меньше 180°.';return;} + const AB2=AB/k, AC2=AC/k; + const angRad=ang*Math.PI/180; + const BC=Math.sqrt(AB*AB+AC*AC-2*AB*AC*Math.cos(angRad)); + const BC2=BC/k; + out.style.display='block'; + out.innerHTML=`Второй треугольник: $A'B'=\\dfrac{AB}{k}=\\dfrac{${fmt(AB)}}{${fmt(k)}}=${fmt(AB2)}$, $A'C'=\\dfrac{AC}{k}=\\dfrac{${fmt(AC)}}{${fmt(k)}}=${fmt(AC2)}$, $\\angle A'=${fmt(ang)}°$.
По теореме косинусов: $BC=${fmt(BC)}$, $B'C'=${fmt(BC2)}$.
Треугольники подобны по признаку СУС с $k=${fmt(k)}$.`; + renderMath(out); + addXp(3,'p6-calc');bumpProgress('p6',5); + }); + })(); + + /* == INIT ИНТЕРАКТИВ 4: тренажёр == */ + (function(){ + const tasks=[ + {q:'$AB=12$, $AC=8$, $A\'B\'=6$, $A\'C\'=4$, $\\angle A=\\angle A\'=40°$. Найди коэффициент подобия $k=AB/A\'B\'$.',ans:2,hint:'k=12/6=2. Проверь: AC/A\'C\'=8/4=2. ✓'}, + {q:'$PQ=15$, $PR=9$, $P\'Q\'=5$, $P\'R\'=3$, $\\angle P=\\angle P\'$. Подобны ли треугольники? Введи $k$ (или 0 если не подобны).',ans:3,hint:'PQ/P\'Q\'=15/5=3, PR/P\'R\'=9/3=3. Подобны, k=3.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по СУС, $k=2.5$. $A\'B\'=6$. Найди $AB$.',ans:15,hint:'AB=k·A\'B\'=2.5·6=15.'}, + {q:'$AB=10$, $AC=6$, $A\'B\'=4$, $A\'C\'=3$, $\\angle A=\\angle A\'$. Проверь подобие: $AB/A\'B\'=?$ (введи значение)',ans:2.5,hint:'AB/A\'B\'=10/4=2.5, AC/A\'C\'=6/3=2. Отношения разные → не подобны по СУС.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по СУС, $k=3$. Стороны второго: $A\'B\'=4$, $A\'C\'=5$. Найди $AB+AC$.',ans:27,hint:'AB=3·4=12, AC=3·5=15. AB+AC=27.'}, + ]; + let idx=0,score=0; + function show(){ + document.getElementById('p6-tr-i').textContent=idx+1; + const t=document.getElementById('p6-tr-task'); + t.innerHTML=tasks[idx].q; + renderMath(t); + document.getElementById('p6-tr-ans').value=''; + document.getElementById('p6-tr-fb').style.display='none'; + } + document.getElementById('p6-tr-start').addEventListener('click',()=>{idx=0;score=0;document.getElementById('p6-tr-score').textContent=0;show();}); + document.getElementById('p6-tr-go').addEventListener('click',()=>{ + if(idx>=tasks.length)return; + const ans=+document.getElementById('p6-tr-ans').value; + const fb=document.getElementById('p6-tr-fb'); + if(Math.abs(ans-tasks[idx].ans)<0.05){ + score++;document.getElementById('p6-tr-score').textContent=score; + addXp(3,'p6-tr-'+idx);bumpProgress('p6',4); + if(idxshow(),900);} + else{feedback(fb,true,'Все задачи решены! +5 XP');addXp(5,'p6-tr-all');bumpProgress('p6',10);confetti();} + } else { + feedback(fb,false,'Неверно. '+tasks[idx].hint); + } + }); + document.getElementById('p6-tr-ans').addEventListener('keydown',e=>{if(e.key==='Enter')document.getElementById('p6-tr-go').click();}); + show(); + })(); + + /* == INIT ИНТЕРАКТИВ 5: DnD-сортер == */ + (function(){ + const items=[ + {text:'AB=6,AC=9,A\'B\'=4,A\'C\'=6, ∠A=∠A\'',yes:true}, + {text:'AB=8,AC=6,A\'B\'=4,A\'C\'=4, ∠A=∠A\'',yes:false}, + {text:'PQ=15,PR=10,P\'Q\'=6,P\'R\'=4, ∠P=∠P\'',yes:true}, + {text:'AB=10,AC=6,A\'B\'=5,A\'C\'=4, ∠A=∠A\'',yes:false}, + {text:'MK=12,ML=8,M\'K\'=9,M\'L\'=6, ∠M=∠M\'',yes:true}, + ]; + const pool=document.getElementById('p6-dnd-pool'); + const yesBox=document.getElementById('p6-drop-yes-items'); + const noBox=document.getElementById('p6-drop-no-items'); + let dragging=null; + function makeChip(it,idx){ + const chip=document.createElement('div'); + chip.className='dnd-chip'; + chip.dataset.idx=idx; + chip.textContent=it.text; + chip.draggable=true; + chip.addEventListener('dragstart',e=>{dragging=chip;chip.classList.add('dragging');e.dataTransfer.effectAllowed='move';}); + chip.addEventListener('dragend',()=>{chip.classList.remove('dragging');dragging=null;}); + return chip; + } + items.forEach((it,i)=>pool.appendChild(makeChip(it,i))); + [document.getElementById('p6-drop-yes'),document.getElementById('p6-drop-no'),pool].forEach(box=>{ + box.addEventListener('dragover',e=>{e.preventDefault();box.classList.add('over');}); + box.addEventListener('dragleave',()=>box.classList.remove('over')); + box.addEventListener('drop',e=>{ + e.preventDefault();box.classList.remove('over'); + if(!dragging)return; + const target=box===document.getElementById('p6-drop-yes')?yesBox:box===document.getElementById('p6-drop-no')?noBox:pool; + target.appendChild(dragging); + }); + }); + document.getElementById('p6-dnd-check').addEventListener('click',()=>{ + const fb=document.getElementById('p6-dnd-fb'); + const yChips=[...yesBox.querySelectorAll('.dnd-chip')]; + const nChips=[...noBox.querySelectorAll('.dnd-chip')]; + if(yChips.length+nChips.length{if(!items[+c.dataset.idx].yes)ok=false;}); + nChips.forEach(c=>{if(items[+c.dataset.idx].yes)ok=false;}); + if(ok){feedback(fb,true,'Верно! +5 XP');addXp(5,'p6-dnd');bumpProgress('p6',8);} + else{feedback(fb,false,'Есть ошибки. Проверь равенство отношений двух пар сторон и равенство углов между ними.');} + }); + document.getElementById('p6-dnd-reset').addEventListener('click',()=>{ + [...yesBox.children].forEach(c=>pool.appendChild(c)); + [...noBox.children].forEach(c=>pool.appendChild(c)); + document.getElementById('p6-dnd-fb').style.display='none'; + }); + })(); + + /* == INIT: Босс §6 == */ + (function(){ + const tasks=[ + {q:'ABCA\'B\'C\'AB=9, AC=12, A\'B\'=6, A\'C\'=8, ∠A=∠A\'$AB=9$, $AC=12$, $A\'B\'=6$, $A\'C\'=8$, $\\angle A=\\angle A\'$. Найди $k=AB/A\'B\'$.',ans:1.5,hint:'k=9/6=1.5. Проверь: 12/8=1.5. ✓ Признак СУС выполнен.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по СУС, $k=4$. Стороны второго: $A\'B\'=3$, $A\'C\'=5$. Чему равно $AB+AC$?',ans:32,hint:'AB=4·3=12, AC=4·5=20. Сумма 32.'}, + {q:'$AB=10$, $AC=15$, $\\angle A=60°$. По признаку СУС треугольник подобен другому с $k=2.5$. Найди $A\'B\'$.',ans:4,hint:'A\'B\'=AB/k=10/2.5=4.'}, + {q:'Даны два треугольника: $AB=18$, $AC=12$, $A\'B\'=6$, $A\'C\'=4$, $\\angle A=\\angle A\'=75°$. Найди $BC$, если $B\'C\'=5$.',ans:15,hint:'k=18/6=3. BC=k·B\'C\'=3·5=15.'}, + ]; + const bossBox=document.getElementById('p6-boss-tasks'); + bossBox.innerHTML=tasks.map((t,i)=>` +
+
${t.q}
+
+ + +
+ +
`).join(''); + window.p6BossSolved=new Set(); + renderMath(bossBox); + })(); +} + +function buildP7(){ + const box=document.getElementById('p7-body'); + let html=''; + + /* ---- Theory cards ---- */ + html+=makeCard('theory','Третий признак подобия треугольников (ССС — три стороны)','7.1',` +

Теорема (3-й признак подобия, ССС). Если три стороны одного треугольника пропорциональны трём сторонам другого треугольника, то такие треугольники подобны.

+

Если $\\dfrac{a}{a'} = \\dfrac{b}{b'} = \\dfrac{c}{c'} = k$, то $\\triangle ABC \\sim \\triangle A'B'C'$.

+

Здесь $a=BC$, $b=AC$, $c=AB$ и аналогично для второго треугольника. Это самый сильный признак — он не требует проверки углов.

+
+ + + + A + B + C + + c=AB + a=BC + b=AC + + + A' + B' + C' + + c' + a' + b' + + a/a' = b/b' = c/c' = k → △ABC∼△A'B'C' + +
`); + + html+=makeCard('rule','Доказательство 3-го признака — схема','7.2',` +

Доказательство сводится к 2-му признаку (СУС).

+

Пусть $\\dfrac{a}{a'}=\\dfrac{b}{b'}=\\dfrac{c}{c'}=k$. На стороне $A'B'$ откладываем $A'M=AB=kA'B'$. Через $M \\parallel B'C'$ строим точку $N$ на $A'C'$, тогда $\\triangle A'MN \\sim \\triangle A'B'C'$ и все стороны $\\triangle A'MN$ равны сторонам $\\triangle ABC$.

+

По признаку равенства SSS: $\\triangle A'MN \\cong \\triangle ABC$. Значит $\\triangle ABC \\sim \\triangle A'B'C'$ (транзитивность). QED.

+
+ + + + + A' + B' + C' + M + N + △A'MN∼△A'B'C', △A'MN≅△ABC → △ABC∼△A'B'C' + +
`); + + html+=makeCard('example','Примеры применения признака ССС','7.3',` +

Пример 1. $a=6$, $b=8$, $c=10$; $a'=3$, $b'=4$, $c'=5$. Подобны ли треугольники?

+

$a/a'=6/3=2$, $b/b'=8/4=2$, $c/c'=10/5=2$. Все отношения равны $k=2$ → по ССС: подобны.

+

Пример 2. $a=9$, $b=12$, $c=6$; $a'=6$, $b'=8$, $c'=4$. $9/6=1{,}5$, $12/8=1{,}5$, $6/4=1{,}5$. $k=1{,}5$ — подобны.

+

Пример 3 (не подобны). $a=5$, $b=7$, $c=9$; $a'=5$, $b'=7$, $c'=10$. $5/5=1$, $7/7=1$, $9/10=0{,}9$. Отношения различны → не подобны.

`); + + /* ---- ИНТЕРАКТИВ 1: SVG три стороны + слайдер k ---- */ + html+=`
+
ИНТЕРАКТИВ 1
Два треугольника — признак ССС
+
Задай три стороны первого треугольника и коэффициент $k$. Второй строится автоматически: все стороны уменьшены в $k$ раз. Треугольное неравенство проверяется автоматически.
+
+ + + + +
+
+
+
`; + + /* ---- ИНТЕРАКТИВ 2: Пошаговое доказательство ---- */ + html+=`
+
ИНТЕРАКТИВ 2
Доказательство 3-го признака — по шагам
+
Нажимай «Далее» для каждого шага доказательства признака ССС.
+
+
+
+ + +
+
`; + + /* ---- ИНТЕРАКТИВ 3: Калькулятор ССС ---- */ + html+=`
+
ИНТЕРАКТИВ 3
Калькулятор: проверка подобия по трём сторонам
+
Введи стороны двух треугольников — система проверит пропорциональность и найдёт $k$.
+
+
a (BC)
+
b (AC)
+
c (AB)
+
a' (B'C')
+
b' (A'C')
+
c' (A'B')
+
+
+ +
`; + + /* ---- ИНТЕРАКТИВ 4: Тренажёр ---- */ + html+=`
+
ИНТЕРАКТИВ 4
Тренажёр §7 — Признак ССС
+
5 задач на проверку подобия по сторонам и нахождение коэффициента.
+
Задача 1 / 5Очки: 0
+
+
+ + + +
+ +
`; + + /* ---- ИНТЕРАКТИВ 5: DnD-сортер ---- */ + html+=`
+
ИНТЕРАКТИВ 5
Подобны по ССС или нет? — Сортировка
+
Перетащи каждую пару троек сторон в нужную колонку.
+
+
+
Подобны (ССС)
+
Не подобны
+
+
+ +
`; + + /* ---- ИНТЕРАКТИВ 6: Мини-квиз (три признака) ---- */ + html+=`
+
ИНТЕРАКТИВ 6
Мини-квиз: все три признака подобия
+
5 вопросов о трёх признаках подобия. Выбери правильный ответ.
+
+
+ +
`; + + /* ---- ИНТЕРАКТИВ 7: Босс §7 ---- */ + html+=`
+
БОСС §7
Итоговые задачи
+
4 задачи — каждая верная даёт +5 XP.
+
+
`; + + html+=`
+ +
`; + html+=secNav('p6','p8'); + box.innerHTML=html; + if(window.renderMathInElement) setTimeout(()=>renderMath(box),0); + + /* == INIT ИНТЕРАКТИВ 1: SVG по трём сторонам == */ + (function(){ + const aSl=document.getElementById('p7-a-sl'); + const bSl=document.getElementById('p7-b-sl'); + const cSl=document.getElementById('p7-c-sl'); + const kSl=document.getElementById('p7-k-sl'); + const aVal=document.getElementById('p7-a-val'); + const bVal=document.getElementById('p7-b-val'); + const cVal=document.getElementById('p7-c-val'); + const kVal=document.getElementById('p7-k-val'); + const svgOut=document.getElementById('p7-svg-out'); + const infoEl=document.getElementById('p7-svg-info'); + + function triFromSSS(aa,bb,cc,ox,oy){ + // a=BC, b=AC, c=AB. Place B=(ox,oy), C=(ox+a,oy) + // Find A using law of cosines: cosB=(c²+a²-b²)/(2ca) + const cosB=(cc*cc+aa*aa-bb*bb)/(2*cc*aa); + if(cosB<-1||cosB>1) return null; + const Bx=ox, By=oy; + const Cx=ox+aa, Cy=oy; + const Ax=ox+cc*cosB; + const Ay=oy-cc*Math.sqrt(1-cosB*cosB); + return {Ax,Ay,Bx,By,Cx,Cy}; + } + + function draw(){ + const a=+aSl.value, b=+bSl.value, c=+cSl.value; + const k=+kSl.value/10; + aVal.textContent=a; bVal.textContent=b; cVal.textContent=c; + kVal.textContent=k.toFixed(1); + + // Triangle inequality check + if(a+b<=c||a+c<=b||b+c<=a){ + svgOut.innerHTML='
Нарушено треугольное неравенство. Измени стороны.
'; + infoEl.innerHTML='Треугольное неравенство нарушено.'; + return; + } + + const scale=13; + const a2=a/k, b2=b/k, c2=c/k; + const W=400, H=185; + + const t1=triFromSSS(a*scale,b*scale,c*scale,18,165); + if(!t1){svgOut.innerHTML='';return;} + const t2=triFromSSS(a2*scale,b2*scale,c2*scale,230,165); + if(!t2){svgOut.innerHTML='';return;} + + let s=``; + s+=``; + s+=`A`; + s+=`B`; + s+=`C`; + const mBCx=(t1.Bx+t1.Cx)/2, mBCy=(t1.By+t1.Cy)/2; + const mACx=(t1.Ax+t1.Cx)/2, mACy=(t1.Ay+t1.Cy)/2; + const mABx=(t1.Ax+t1.Bx)/2, mABy=(t1.Ay+t1.By)/2; + s+=`a=${a}`; + s+=`b=${b}`; + s+=`c=${c}`; + + s+=``; + s+=`A'`; + s+=`B'`; + s+=`C'`; + const mBCx2=(t2.Bx+t2.Cx)/2, mBCy2=(t2.By+t2.Cy)/2; + const mACx2=(t2.Ax+t2.Cx)/2, mACy2=(t2.Ay+t2.Cy)/2; + const mABx2=(t2.Ax+t2.Bx)/2, mABy2=(t2.Ay+t2.By)/2; + s+=`a'=${fmt(a2)}`; + s+=`b'=${fmt(b2)}`; + s+=`c'=${fmt(c2)}`; + + s+=`k = ${k.toFixed(1)}`; + s+=''; + svgOut.innerHTML=s; + infoEl.innerHTML=`$a=${a}$, $b=${b}$, $c=${c}$. Второй: $a'=${fmt(a2)}$, $b'=${fmt(b2)}$, $c'=${fmt(c2)}$. $\\dfrac{a}{a'}=\\dfrac{b}{b'}=\\dfrac{c}{c'}=${k.toFixed(1)}$ → по признаку ССС треугольники подобны.`; + renderMath(infoEl); + addXp(1,'p7-svg'); + } + aSl.addEventListener('input',draw); + bSl.addEventListener('input',draw); + cSl.addEventListener('input',draw); + kSl.addEventListener('input',draw); + draw(); + })(); + + /* == INIT ИНТЕРАКТИВ 2: пошаговое доказательство == */ + (function(){ + const steps=[ + {desc:'Шаг 1. Дано: $\\dfrac{a}{a\'}=\\dfrac{b}{b\'}=\\dfrac{c}{c\'}=k$. Нужно доказать: $\\triangle ABC \\sim \\triangle A\'B\'C\'$.', + svg:`ABCA'B'C'a/a'=b/b'=c/c'=k — условие`}, + {desc:'Шаг 2. На луче $A\'B\'$ откладываем $A\'M = AB = k \\cdot A\'B\'$. Через $M$ проводим $MN \\parallel B\'C\'$, $N$ на $A\'C\'$. По теореме §4: $\\triangle A\'MN \\sim \\triangle A\'B\'C\'$.', + svg:`A'B'C'MNA'M=AB, MN∥B'C'`}, + {desc:'Шаг 3. Поскольку $\\triangle A\'MN \\sim \\triangle A\'B\'C\'$ с коэффициентом $k$, все стороны $\\triangle A\'MN$ равны соответствующим сторонам $\\triangle ABC$: $A\'M=AB$, $MN=a$, $A\'N=b$.', + svg:`△A'MN∼△A'B'C' с коэфф. kA'M=AB=c, MN=BC=a, A'N=AC=bВсе стороны △A'MN = сторонам △ABC`}, + {desc:'Шаг 4. По признаку равенства треугольников (SSS): $\\triangle A\'MN \\cong \\triangle ABC$ (у них равны все три пары сторон).', + svg:`△A'MN ≅ △ABC (SSS)Три стороны равны попарно → конгруэнтны△A'MN∼△A'B'C' также выполнено`}, + {desc:'Шаг 5. По транзитивности: $\\triangle ABC \\cong \\triangle A\'MN \\sim \\triangle A\'B\'C\'$ → $\\triangle ABC \\sim \\triangle A\'B\'C\'$. Третий признак подобия (ССС) доказан.', + svg:`a/a'=b/b'=c/c'=k → △ABC∼△A'B'C'Признак ССС — третий признак подобияQED ∎`}, + ]; + let step=0; + const svgEl=document.getElementById('p7-proof-svg'); + const descEl=document.getElementById('p7-proof-desc'); + function show(){svgEl.innerHTML=steps[step].svg;descEl.innerHTML=steps[step].desc;renderMath(descEl);} + document.getElementById('p7-proof-next').addEventListener('click',()=>{ + if(step{step=0;show();}); + show(); + })(); + + /* == INIT ИНТЕРАКТИВ 3: калькулятор ССС == */ + (function(){ + document.getElementById('p7-ccalc').addEventListener('click',()=>{ + const a=parseFloat(document.getElementById('p7-ca').value); + const b=parseFloat(document.getElementById('p7-cb').value); + const c=parseFloat(document.getElementById('p7-cc').value); + const a2=parseFloat(document.getElementById('p7-ca2').value); + const b2=parseFloat(document.getElementById('p7-cb2').value); + const c2=parseFloat(document.getElementById('p7-cc2').value); + const out=document.getElementById('p7-ccalc-out'); + if([a,b,c,a2,b2,c2].some(v=>!isFinite(v)||v<=0)){ + out.style.display='block';out.innerHTML='Введи все шесть сторон.';return; + } + const k1=a/a2, k2=b/b2, k3=c/c2; + const tol=0.001; + const ok=Math.abs(k1-k2)Все отношения равны $k=${fmt(k1)}$ → треугольники подобны по признаку ССС.`; + addXp(3,'p7-calc');bumpProgress('p7',5); + } else { + out.innerHTML=`$\\dfrac{a}{a'}=${fmt(k1)}$, $\\dfrac{b}{b'}=${fmt(k2)}$, $\\dfrac{c}{c'}=${fmt(k3)}$.
Отношения не равны → треугольники не подобны по признаку ССС.`; + } + renderMath(out); + }); + })(); + + /* == INIT ИНТЕРАКТИВ 4: тренажёр == */ + (function(){ + const tasks=[ + {q:'$a=9$, $b=12$, $c=6$; $a\'=3$, $b\'=4$, $c\'=2$. Найди коэффициент подобия $k=a/a\'$.',ans:3,hint:'9/3=12/4=6/2=3. k=3.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по ССС, $k=2.5$. Стороны первого: $a=10$, $b=15$. Найди $a\'$.',ans:4,hint:'a\'=a/k=10/2.5=4.'}, + {q:'Стороны: $(6,8,10)$ и $(3,4,5)$. Подобны ли? Введи $k$ (или 0 если нет).',ans:2,hint:'6/3=8/4=10/5=2. Подобны, k=2.'}, + {q:'$a=5$, $b=7$, $c=9$; $a\'=5$, $b\'=7$, $c\'=10$. Подобны ли? Введи $k$ (или 0 если нет).',ans:0,hint:'5/5=1, 7/7=1, но 9/10≠1. Не подобны. Ответ 0.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по ССС, $k=4$. Периметр $\\triangle A\'B\'C\'=21$. Найди периметр $\\triangle ABC$.',ans:84,hint:'P=k·P\'=4·21=84.'}, + ]; + let idx=0,score=0; + function show(){ + document.getElementById('p7-tr-i').textContent=idx+1; + const t=document.getElementById('p7-tr-task'); + t.innerHTML=tasks[idx].q; + renderMath(t); + document.getElementById('p7-tr-ans').value=''; + document.getElementById('p7-tr-fb').style.display='none'; + } + document.getElementById('p7-tr-start').addEventListener('click',()=>{idx=0;score=0;document.getElementById('p7-tr-score').textContent=0;show();}); + document.getElementById('p7-tr-go').addEventListener('click',()=>{ + if(idx>=tasks.length)return; + const ans=+document.getElementById('p7-tr-ans').value; + const fb=document.getElementById('p7-tr-fb'); + if(Math.abs(ans-tasks[idx].ans)<0.05){ + score++;document.getElementById('p7-tr-score').textContent=score; + addXp(3,'p7-tr-'+idx);bumpProgress('p7',4); + if(idxshow(),900);} + else{feedback(fb,true,'Все задачи решены! +5 XP');addXp(5,'p7-tr-all');bumpProgress('p7',10);confetti();} + } else { + feedback(fb,false,'Неверно. '+tasks[idx].hint); + } + }); + document.getElementById('p7-tr-ans').addEventListener('keydown',e=>{if(e.key==='Enter')document.getElementById('p7-tr-go').click();}); + show(); + })(); + + /* == INIT ИНТЕРАКТИВ 5: DnD-сортер ССС == */ + (function(){ + const items=[ + {text:'(6,8,10) и (3,4,5)',yes:true}, + {text:'(5,7,9) и (5,7,10)',yes:false}, + {text:'(9,12,6) и (6,8,4)',yes:true}, + {text:'(4,6,8) и (3,5,8)',yes:false}, + {text:'(15,10,5) и (6,4,2)',yes:true}, + ]; + const pool=document.getElementById('p7-dnd-pool'); + const yesBox=document.getElementById('p7-drop-yes-items'); + const noBox=document.getElementById('p7-drop-no-items'); + let dragging=null; + function makeChip(it,idx){ + const chip=document.createElement('div'); + chip.className='dnd-chip'; + chip.dataset.idx=idx; + chip.textContent=it.text; + chip.draggable=true; + chip.addEventListener('dragstart',e=>{dragging=chip;chip.classList.add('dragging');e.dataTransfer.effectAllowed='move';}); + chip.addEventListener('dragend',()=>{chip.classList.remove('dragging');dragging=null;}); + return chip; + } + items.forEach((it,i)=>pool.appendChild(makeChip(it,i))); + [document.getElementById('p7-drop-yes'),document.getElementById('p7-drop-no'),pool].forEach(box=>{ + box.addEventListener('dragover',e=>{e.preventDefault();box.classList.add('over');}); + box.addEventListener('dragleave',()=>box.classList.remove('over')); + box.addEventListener('drop',e=>{ + e.preventDefault();box.classList.remove('over'); + if(!dragging)return; + const target=box===document.getElementById('p7-drop-yes')?yesBox:box===document.getElementById('p7-drop-no')?noBox:pool; + target.appendChild(dragging); + }); + }); + document.getElementById('p7-dnd-check').addEventListener('click',()=>{ + const fb=document.getElementById('p7-dnd-fb'); + const yChips=[...yesBox.querySelectorAll('.dnd-chip')]; + const nChips=[...noBox.querySelectorAll('.dnd-chip')]; + if(yChips.length+nChips.length{if(!items[+c.dataset.idx].yes)ok=false;}); + nChips.forEach(c=>{if(items[+c.dataset.idx].yes)ok=false;}); + if(ok){feedback(fb,true,'Верно! +5 XP');addXp(5,'p7-dnd');bumpProgress('p7',8);} + else{feedback(fb,false,'Есть ошибки. Проверь: все три отношения a/a\', b/b\', c/c\' должны быть равны.');} + }); + document.getElementById('p7-dnd-reset').addEventListener('click',()=>{ + [...yesBox.children].forEach(c=>pool.appendChild(c)); + [...noBox.children].forEach(c=>pool.appendChild(c)); + document.getElementById('p7-dnd-fb').style.display='none'; + }); + })(); + + /* == INIT ИНТЕРАКТИВ 6: мини-квиз == */ + (function(){ + const qs=[ + {q:'По какому признаку два угла одного треугольника равны двум углам другого?',opts:['ДД','СУС','ССС','Нет такого признака'],ans:0}, + {q:'Сколько признаков подобия треугольников есть в курсе 8 класса?',opts:['1','2','3','4'],ans:2}, + {q:'Признак СУС требует равенства...',opts:['двух углов','двух сторон и угла между ними','трёх сторон','двух сторон и угла напротив'],ans:1}, + {q:'Если $a/a\'=2$, $b/b\'=2$, $c/c\'=2$, то треугольники подобны по признаку...',opts:['ДД','СУС','ССС','Нельзя определить'],ans:2}, + {q:'По признаку ССС требуется проверить...',opts:['2 угла','2 стороны и угол','3 стороны','1 угол и 2 стороны'],ans:2}, + ]; + const wrap=document.getElementById('p7-quiz-wrap'); + wrap.innerHTML=qs.map((q,qi)=>` +
+
${qi+1}. ${q.q}
+
+ ${q.opts.map((o,oi)=>``).join('')} +
+
`).join(''); + document.getElementById('p7-quiz-check').addEventListener('click',()=>{ + const fb=document.getElementById('p7-quiz-fb'); + let correct=0; + qs.forEach((q,qi)=>{ + const sel=document.querySelector(`input[name="p7q${qi}"]:checked`); + if(sel&&+sel.value===q.ans)correct++; + }); + if(correct===qs.length){ + feedback(fb,true,`Все ${qs.length} ответов верны! +8 XP`); + addXp(8,'p7-quiz');bumpProgress('p7',12);confetti(); + } else { + feedback(fb,false,`Верных ответов: ${correct} из ${qs.length}. Повтори параграфы с признаками.`); + } + }); + })(); + + /* == INIT: Босс §7 == */ + (function(){ + const tasks=[ + {q:'ABCA\'B\'C\'a=12,b=9,c=15; a\'=8,b\'=6,c\'=10$a=12$, $b=9$, $c=15$; $a\'=8$, $b\'=6$, $c\'=10$. Найди $k=a/a\'$.',ans:1.5,hint:'12/8=9/6=15/10=1.5. k=1.5. Признак ССС выполнен.'}, + {q:'$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по ССС, $k=3$. Периметр $\\triangle A\'B\'C\'=28$. Найди периметр $\\triangle ABC$.',ans:84,hint:'P=3·28=84.'}, + {q:'Стороны первого: $4, 6, 8$. Стороны второго: $6, 9, 12$. По какому признаку они подобны? Введи $k$ (большего к меньшему).',ans:1.5,hint:'6/4=9/6=12/8=1.5. Признак ССС. k=1.5.'}, + {q:'$\\triangle DEF$: $DE=10$, $EF=24$, $DF=26$ (прямоугольный). $\\triangle D\'E\'F\'$: $D\'E\'=5$, $E\'F\'=12$, $D\'F\'=13$. Найди $k$.',ans:2,hint:'10/5=24/12=26/13=2. k=2. Признак ССС.'}, + ]; + const bossBox=document.getElementById('p7-boss-tasks'); + bossBox.innerHTML=tasks.map((t,i)=>` +
+
${t.q}
+
+ + +
+ +
`).join(''); + window.p7BossSolved=new Set(); + renderMath(bossBox); + })(); +} function buildP8stub(){ document.getElementById('p8-body').innerHTML='

§8 — Волна 1: содержимое появится в следующем обновлении.

'+secNav('p7','p9'); } function buildP9stub(){ document.getElementById('p9-body').innerHTML='

§9 — Волна 1: содержимое появится в следующем обновлении.

'+secNav('p8','final3'); } function buildFinal3stub(){ document.getElementById('final3-body').innerHTML='

Финал главы 3 — Волна 1: боссы и итоги появятся в следующем обновлении.

'+secNav('p9',null); }