feat(geom8): Wave 3 Главы 3 — §6-§7 (второй СУС и третий ССС признаки подобия)
§6 Второй признак (СУС — сторона-угол-сторона): SVG двух треугольников с 4 слайдерами (AB, AC, угол A, k), второй автомасштабируется через SAS; 5-шаговое доказательство; калькулятор через теорему косинусов; DnD подобны/не подобны (5 пар); тренажёр; босс. §7 Третий признак (ССС — три стороны): SVG двух треугольников с 4 слайдерами (a, b, c, k), оба строятся через теорему косинусов с проверкой неравенства треугольника; 5-шаговое доказательство; калькулятор проверки пропорциональности 6 сторон; DnD; mini-quiz из 5 вопросов на все 3 признака (УУ, СУС, ССС); тренажёр; босс. File: 2338 → 3182 LOC. 7 of 9 §§ Главы 3 готовы. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -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=`<div class="psel-num">${p.num}</div><div class="psel-name">${p.name}</div><div class="psel-prog"><div class="psel-prog-fill"></div></div>`;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='<div class="card"><div class="card-body"><p><b>§6 — Волна 1</b>: содержимое появится в следующем обновлении.</p></div></div>'+secNav('p5','p7'); }
|
||||
function buildP7stub(){ document.getElementById('p7-body').innerHTML='<div class="card"><div class="card-body"><p><b>§7 — Волна 1</b>: содержимое появится в следующем обновлении.</p></div></div>'+secNav('p6','p8'); }
|
||||
function buildP6(){
|
||||
const box=document.getElementById('p6-body');
|
||||
let html='';
|
||||
|
||||
/* ---- Theory cards ---- */
|
||||
html+=makeCard('theory','Второй признак подобия треугольников (СУС — сторона-угол-сторона)','6.1',`
|
||||
<p><b>Теорема (2-й признак подобия, СУС).</b> Если две стороны одного треугольника пропорциональны двум сторонам другого треугольника, а углы между этими сторонами равны, то такие треугольники подобны.</p>
|
||||
<p style="margin-top:8px">Если $\\dfrac{AB}{A'B'} = \\dfrac{AC}{A'C'} = k$ и $\\angle A = \\angle A'$, то $\\triangle ABC \\sim \\triangle A'B'C'$.</p>
|
||||
<p style="margin-top:8px">Это означает: двух пропорциональных сторон и равного угла между ними <b>достаточно</b> для подобия — третью сторону и остальные углы можно не проверять.</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:14px">
|
||||
<svg viewBox="0 0 300 160" style="max-width:320px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- Triangle 1: A=(100,20) B=(30,140) C=(195,140) -->
|
||||
<polygon points="100,20 30,140 195,140" fill="rgba(124,58,237,.11)" stroke="#7c3aed" stroke-width="2"/>
|
||||
<!-- Angle mark at A -->
|
||||
<path d="M100,20 Q118,38 108,52" fill="none" stroke="#f59e0b" stroke-width="2"/>
|
||||
<!-- Side labels -->
|
||||
<text x="100" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">A</text>
|
||||
<text x="20" y="150" font-size="11" font-weight="800" fill="#6d28d9">B</text>
|
||||
<text x="198" y="150" font-size="11" font-weight="800" fill="#6d28d9">C</text>
|
||||
<text x="54" y="90" text-anchor="middle" font-size="10" fill="#7c3aed" font-style="italic">AB</text>
|
||||
<text x="155" y="88" text-anchor="middle" font-size="10" fill="#7c3aed" font-style="italic">AC</text>
|
||||
<!-- Triangle 2: A'=(235,48) B'=(208,118) C'=(275,118) -->
|
||||
<polygon points="235,48 208,118 275,118" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/>
|
||||
<!-- Angle mark at A' -->
|
||||
<path d="M235,48 Q246,59 241,68" fill="none" stroke="#f59e0b" stroke-width="1.8"/>
|
||||
<text x="235" y="42" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text>
|
||||
<text x="199" y="127" font-size="10" font-weight="800" fill="#4f46e5">B'</text>
|
||||
<text x="277" y="127" font-size="10" font-weight="800" fill="#4f46e5">C'</text>
|
||||
<text x="218" y="87" text-anchor="middle" font-size="9" fill="#6366f1" font-style="italic">A'B'</text>
|
||||
<text x="262" y="85" text-anchor="middle" font-size="9" fill="#6366f1" font-style="italic">A'C'</text>
|
||||
<!-- Equal angle label -->
|
||||
<text x="150" y="12" text-anchor="middle" font-size="9" fill="#f59e0b" font-weight="800">∠A = ∠A'</text>
|
||||
<text x="150" y="24" text-anchor="middle" font-size="9" fill="#7c3aed">AB/A'B' = AC/A'C' = k → △ABC∼△A'B'C'</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
html+=makeCard('rule','Доказательство 2-го признака — схема','6.2',`
|
||||
<p>На луче $A'B'$ откладываем $A'M = AB$. Через $M$ проводим прямую $MN \\parallel B'C'$, встречающую $A'C'$ в точке $N$.</p>
|
||||
<p style="margin-top:6px">По теореме о прямой, параллельной стороне (§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$.</p>
|
||||
<p style="margin-top:6px">Итак $A'M=AB$, $A'N=AC$, $\\angle A' = \\angle A$ → по признаку SAS: $\\triangle A'MN \\cong \\triangle ABC$.</p>
|
||||
<p style="margin-top:6px">Также $\\triangle A'MN \\sim \\triangle A'B'C'$ (§4). Значит $\\triangle ABC \\sim \\triangle A'B'C'$. <b>QED.</b></p>
|
||||
<div style="display:flex;justify-content:center;margin-top:12px">
|
||||
<svg viewBox="0 0 280 140" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- large triangle A'B'C': A'=(140,15) B'=(30,130) C'=(250,130) -->
|
||||
<polygon points="140,15 30,130 250,130" fill="rgba(99,102,241,.10)" stroke="#6366f1" stroke-width="1.5"/>
|
||||
<!-- inner triangle A'MN: M on A'B', N on A'C' -->
|
||||
<!-- M on A'B' at ratio 0.55: M=(140+(30-140)*0.55, 15+(130-15)*0.55)=(79.5, 78.25) -->
|
||||
<!-- N on A'C' at ratio 0.55: N=(140+(250-140)*0.55, 15+(130-15)*0.55)=(200.5, 78.25) -->
|
||||
<polygon points="140,15 80,78 200,78" fill="rgba(124,58,237,.22)" stroke="#7c3aed" stroke-width="2"/>
|
||||
<line x1="80" y1="78" x2="200" y2="78" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5,3"/>
|
||||
<text x="140" y="10" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text>
|
||||
<text x="20" y="138" font-size="10" font-weight="800" fill="#4f46e5">B'</text>
|
||||
<text x="252" y="138" font-size="10" font-weight="800" fill="#4f46e5">C'</text>
|
||||
<text x="74" y="88" font-size="10" font-weight="800" fill="#7c3aed">M</text>
|
||||
<text x="202" y="88" font-size="10" font-weight="800" fill="#7c3aed">N</text>
|
||||
<text x="140" y="125" text-anchor="middle" font-size="8" fill="#6366f1">MN ∥ B'C'</text>
|
||||
<text x="30" y="14" font-size="8" fill="#7c3aed">△A'MN≅△ABC и △A'MN∼△A'B'C'</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
html+=makeCard('example','Примеры применения признака СУС','6.3',`
|
||||
<p><b>Пример 1.</b> $AB=6$, $AC=9$, $A'B'=4$, $A'C'=6$, $\\angle A=\\angle A'=50°$. Подобны ли треугольники?</p>
|
||||
<p style="margin-top:4px">$\\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$.</p>
|
||||
<p style="margin-top:8px"><b>Пример 2.</b> $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$).</p>
|
||||
<p style="margin-top:8px"><b>Пример 3 (не подобны).</b> $AB=8$, $AC=6$, $A'B'=4$, $A'C'=5$, $\\angle A=\\angle A'$. $AB/A'B'=2$, $AC/A'C'=1{,}2$ — отношения неравны → <b>не подобны</b>.</p>`);
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 1: SVG два треугольника, слайдер k ---- */
|
||||
html+=`<div class="wg" id="p6-svg-wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Два треугольника — признак СУС</div></div>
|
||||
<div class="wg-help">Задай стороны $AB$, $AC$ и угол $\\angle A$ первого треугольника. Второй строится автоматически с тем же углом и пропорциональными сторонами. Меняй коэффициент $k$.</div>
|
||||
<div class="sliders">
|
||||
<label>Сторона $AB$: <b id="p6-ab-val">8</b>
|
||||
<input type="range" min="4" max="14" value="8" id="p6-ab-sl" step="1">
|
||||
</label>
|
||||
<label>Сторона $AC$: <b id="p6-ac-val">10</b>
|
||||
<input type="range" min="4" max="14" value="10" id="p6-ac-sl" step="1">
|
||||
</label>
|
||||
<label>Угол $\\angle A$ (°): <b id="p6-ang-val">55</b>°
|
||||
<input type="range" min="20" max="140" value="55" id="p6-ang-sl" step="1">
|
||||
</label>
|
||||
<label>Коэффициент $k$: <b id="p6-k-val">2.0</b>
|
||||
<input type="range" min="12" max="35" value="20" id="p6-k-sl" step="1">
|
||||
</label>
|
||||
</div>
|
||||
<div id="p6-svg-out" style="display:flex;justify-content:center"></div>
|
||||
<div id="p6-svg-info" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.92rem;line-height:1.8"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 2: Пошаговое доказательство ---- */
|
||||
html+=`<div class="wg" id="p6-proof-wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Доказательство 2-го признака — по шагам</div></div>
|
||||
<div class="wg-help">Нажимай «Далее» для каждого шага доказательства.</div>
|
||||
<div id="p6-proof-svg" style="display:flex;justify-content:center;margin-bottom:10px"></div>
|
||||
<div id="p6-proof-desc" style="padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.95rem;line-height:1.6;margin-bottom:10px;min-height:60px"></div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button class="btn primary" id="p6-proof-next">Далее</button>
|
||||
<button class="btn" id="p6-proof-reset">Сначала</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 3: Калькулятор СУС ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Калькулятор признака СУС</div></div>
|
||||
<div class="wg-help">Введи $AB, AC, \\angle A$ первого треугольника и коэффициент $k$ — получи стороны и угол второго. Или введи стороны двух треугольников и угол — система проверит подобие.</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:10px">
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">AB</span><input type="number" id="p6-cAB" class="tinp" placeholder="напр. 6" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">AC</span><input type="number" id="p6-cAC" class="tinp" placeholder="напр. 9" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">∠A (°)</span><input type="number" id="p6-cAng" class="tinp" placeholder="напр. 55" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">k</span><input type="number" id="p6-ck" class="tinp" placeholder="напр. 1.5" style="width:100%"></div>
|
||||
<div style="display:flex;align-items:flex-end"><button class="btn primary" id="p6-ccalc" style="width:100%">Найти</button></div>
|
||||
</div>
|
||||
<div id="p6-ccalc-out" style="display:none;padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.95rem;line-height:1.7"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 4: Тренажёр ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр §6 — Признак СУС</div></div>
|
||||
<div class="wg-help">5 задач на подобие по признаку СУС.</div>
|
||||
<div class="score-display"><span>Задача <b id="p6-tr-i">1</b> / 5</span><span>Очки: <b id="p6-tr-score">0</b></span></div>
|
||||
<div id="p6-tr-task" style="padding:14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:1.02rem;margin-bottom:10px"></div>
|
||||
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
|
||||
<input type="number" id="p6-tr-ans" class="tinp" placeholder="Ответ" style="width:130px">
|
||||
<button class="btn primary" id="p6-tr-go">Проверить</button>
|
||||
<button class="btn" id="p6-tr-start">Начать</button>
|
||||
</div>
|
||||
<div class="feedback" id="p6-tr-fb" style="display:none"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 5: DnD-сортер ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 5</span><div class="wg-title">Подобны по СУС или нет? — Сортировка</div></div>
|
||||
<div class="wg-help">Перетащи каждую пару в нужную колонку.</div>
|
||||
<div id="p6-dnd-pool" class="dnd-pool"></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px">
|
||||
<div class="drop-box" id="p6-drop-yes"><h5>Подобны (СУС)</h5><div class="drop-items" id="p6-drop-yes-items"></div></div>
|
||||
<div class="drop-box" id="p6-drop-no"><h5>Не подобны</h5><div class="drop-items" id="p6-drop-no-items"></div></div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="p6-dnd-check">Проверить</button><button class="btn" id="p6-dnd-reset">Сбросить</button></div>
|
||||
<div class="feedback" id="p6-dnd-fb" style="display:none"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 6: Босс §6 ---- */
|
||||
html+=`<div class="wg" style="border-color:var(--sec-acc-d,var(--pri2))">
|
||||
<div class="wg-header"><span class="wg-badge" style="background:var(--sec-acc-d,var(--pri2))">БОСС §6</span><div class="wg-title">Итоговые задачи</div></div>
|
||||
<div class="wg-help">4 задачи — каждая верная даёт +5 XP.</div>
|
||||
<div id="p6-boss-tasks"></div>
|
||||
</div>`;
|
||||
|
||||
html+=`<div style="margin-top:18px;display:flex;justify-content:center">
|
||||
<button class="btn primary" id="p6-read-btn" onclick="addXp(10,'p6-read');bumpProgress('p6',40);this.textContent='Прочитано!';this.disabled=true;">
|
||||
<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
Я прочитал §6 (+10 XP)
|
||||
</button>
|
||||
</div>`;
|
||||
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=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">`;
|
||||
s+=`<polygon points="${t1.Ax},${t1.Ay} ${t1.Bx},${t1.By} ${t1.Cx},${t1.Cy}" fill="rgba(124,58,237,.12)" stroke="#7c3aed" stroke-width="2"/>`;
|
||||
s+=`<text x="${t1.Ax-3}" y="${t1.Ay+4}" text-anchor="end" font-size="11" font-weight="800" fill="#6d28d9">A</text>`;
|
||||
s+=`<text x="${t1.Bx+4}" y="${t1.By+4}" font-size="11" font-weight="800" fill="#6d28d9">B</text>`;
|
||||
s+=`<text x="${t1.Cx}" y="${t1.Cy-5}" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">C</text>`;
|
||||
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+=`<text x="${mABx1}" y="${mABx1y+12}" text-anchor="middle" font-size="9" fill="#7c3aed">${ab}</text>`;
|
||||
s+=`<text x="${mACx1-8}" y="${mACy1}" text-anchor="end" font-size="9" fill="#7c3aed">${ac}</text>`;
|
||||
s+=`<path d="M${t1.Ax+14},${t1.Ay} Q${t1.Ax+10+8*Math.cos(angRad/2)},${t1.Ay-8*Math.sin(angRad/2)} ${t1.Ax+8*Math.cos(angRad)},${t1.Ay-8*Math.sin(angRad)}" fill="none" stroke="#f59e0b" stroke-width="1.8"/>`;
|
||||
|
||||
s+=`<polygon points="${t2.Ax},${t2.Ay} ${t2.Bx},${t2.By} ${t2.Cx},${t2.Cy}" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/>`;
|
||||
s+=`<text x="${t2.Ax-3}" y="${t2.Ay+4}" text-anchor="end" font-size="10" font-weight="800" fill="#4f46e5">A'</text>`;
|
||||
s+=`<text x="${t2.Bx+4}" y="${t2.By+4}" font-size="10" font-weight="800" fill="#4f46e5">B'</text>`;
|
||||
s+=`<text x="${t2.Cx}" y="${t2.Cy-5}" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">C'</text>`;
|
||||
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+=`<text x="${mABx2}" y="${mABy2+12}" text-anchor="middle" font-size="9" fill="#6366f1">${fmt(ab2)}</text>`;
|
||||
s+=`<text x="${mACx2-6}" y="${mACy2}" text-anchor="end" font-size="9" fill="#6366f1">${fmt(ac2)}</text>`;
|
||||
s+=`<path d="M${t2.Ax+10},${t2.Ay} Q${t2.Ax+8+6*Math.cos(angRad/2)},${t2.Ay-6*Math.sin(angRad/2)} ${t2.Ax+6*Math.cos(angRad)},${t2.Ay-6*Math.sin(angRad)}" fill="none" stroke="#f59e0b" stroke-width="1.5"/>`;
|
||||
|
||||
s+=`<text x="${W/2}" y="12" text-anchor="middle" font-size="10" font-weight="800" fill="#7c3aed">k = ${k.toFixed(1)}</text>`;
|
||||
s+='</svg>';
|
||||
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:'<b>Шаг 1.</b> Дано: $\\dfrac{AB}{A\'B\'} = \\dfrac{AC}{A\'C\'} = k$ и $\\angle A = \\angle A\'$. Нужно доказать: $\\triangle ABC \\sim \\triangle A\'B\'C\'$.',
|
||||
svg:`<svg viewBox="0 0 280 140" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><polygon points="100,20 30,130 200,130" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/><polygon points="210,48 185,115 255,115" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/><text x="100" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">A</text><text x="20" y="138" font-size="11" font-weight="800" fill="#6d28d9">B</text><text x="202" y="138" font-size="11" font-weight="800" fill="#6d28d9">C</text><text x="210" y="43" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text><text x="177" y="124" font-size="10" font-weight="800" fill="#4f46e5">B'</text><text x="257" y="124" font-size="10" font-weight="800" fill="#4f46e5">C'</text><text x="140" y="12" text-anchor="middle" font-size="9" fill="#f59e0b" font-weight="800">AB/A'B'=AC/A'C'=k, ∠A=∠A'</text></svg>`},
|
||||
{desc:'<b>Шаг 2.</b> На луче $A\'B\'$ откладываем точку $M$ так, что $A\'M = AB$. Через $M$ проводим прямую $MN \\parallel B\'C\'$, где $N$ на луче $A\'C\'$.',
|
||||
svg:`<svg viewBox="0 0 280 140" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><polygon points="140,15 30,130 250,130" fill="rgba(99,102,241,.10)" stroke="#6366f1" stroke-width="1.5"/><polygon points="140,15 80,78 200,78" fill="rgba(124,58,237,.22)" stroke="#7c3aed" stroke-width="2"/><line x1="80" y1="78" x2="200" y2="78" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5,3"/><text x="140" y="10" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text><text x="20" y="138" font-size="10" font-weight="800" fill="#4f46e5">B'</text><text x="252" y="138" font-size="10" font-weight="800" fill="#4f46e5">C'</text><text x="74" y="88" font-size="10" font-weight="800" fill="#7c3aed">M</text><text x="202" y="88" font-size="10" font-weight="800" fill="#7c3aed">N</text><text x="140" y="110" text-anchor="middle" font-size="9" fill="#7c3aed">A'M=AB, MN∥B'C'</text></svg>`},
|
||||
{desc:'<b>Шаг 3.</b> По теореме о прямой, параллельной стороне (§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:`<svg viewBox="0 0 280 90" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="22" text-anchor="middle" font-size="11" fill="#4f46e5" font-weight="700">A'M/A'B' = A'N/A'C' (§4, пропорция)</text><text x="140" y="44" text-anchor="middle" font-size="11" fill="#7c3aed" font-weight="700">A'M=AB → A'N=AC</text><text x="140" y="70" text-anchor="middle" font-size="10" fill="#10b981" font-weight="800">Итак: A'M=AB, A'N=AC, ∠A'=∠A</text></svg>`},
|
||||
{desc:'<b>Шаг 4.</b> Теперь: $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:`<svg viewBox="0 0 280 80" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="22" text-anchor="middle" font-size="11" fill="#4338ca" font-weight="700">△A'MN ≅ △ABC (SAS)</text><text x="140" y="44" text-anchor="middle" font-size="11" fill="#7c3aed" font-weight="700">△A'MN ∼ △A'B'C' (§4)</text><text x="140" y="66" text-anchor="middle" font-size="10" fill="#6366f1">По транзитивности подобия:</text></svg>`},
|
||||
{desc:'<b>Шаг 5.</b> По транзитивности: $\\triangle ABC \\cong \\triangle A\'MN \\sim \\triangle A\'B\'C\'$ → $\\triangle ABC \\sim \\triangle A\'B\'C\'$. <b>Второй признак подобия (СУС) доказан.</b>',
|
||||
svg:`<svg viewBox="0 0 280 80" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="26" text-anchor="middle" font-size="12" fill="#7c3aed" font-weight="800">AB/A'B'=AC/A'C'=k, ∠A=∠A' → △ABC∼△A'B'C'</text><text x="140" y="50" text-anchor="middle" font-size="10" fill="#6366f1">Признак СУС — второй признак подобия</text><text x="140" y="70" text-anchor="middle" font-size="12" fill="#10b981" font-weight="900">QED ∎</text></svg>`},
|
||||
];
|
||||
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<steps.length-1){step++;show();addXp(1,'p6-proof-step');}
|
||||
else{addXp(5,'p6-proof-done');bumpProgress('p6',10);}
|
||||
});
|
||||
document.getElementById('p6-proof-reset').addEventListener('click',()=>{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='<span style="color:var(--bad)">Введи все поля (положительные числа).</span>';return;
|
||||
}
|
||||
if(ang>=180){out.style.display='block';out.innerHTML='<span style="color:var(--bad)">Угол должен быть меньше 180°.</span>';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)}°$.<br>По теореме косинусов: $BC=${fmt(BC)}$, $B'C'=${fmt(BC2)}$.<br>Треугольники подобны по признаку СУС с $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(idx<tasks.length-1){feedback(fb,true,'Верно! +3 XP');idx++;setTimeout(()=>show(),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<items.length){feedback(fb,false,'Разложи все карточки.');return;}
|
||||
let ok=true;
|
||||
yChips.forEach(c=>{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:'<svg viewBox="0 0 240 130" style="display:block;max-width:240px;margin:0 auto 8px;background:#ede9fe;border:1px solid #c4b5fd;border-radius:8px"><polygon points="100,15 25,120 205,120" fill="rgba(124,58,237,.12)" stroke="#7c3aed" stroke-width="2"/><polygon points="196,42 168,105 250,105" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/><text x="100" y="10" text-anchor="middle" font-size="10" fill="#6d28d9" font-weight="800">A</text><text x="16" y="128" font-size="10" fill="#6d28d9" font-weight="800">B</text><text x="207" y="128" font-size="10" fill="#6d28d9" font-weight="800">C</text><text x="196" y="37" text-anchor="middle" font-size="9" fill="#4f46e5" font-weight="800">A\'</text><text x="160" y="114" font-size="9" fill="#4f46e5" font-weight="800">B\'</text><text x="252" y="114" font-size="9" fill="#4f46e5" font-weight="800">C\'</text><text x="120" y="10" text-anchor="middle" font-size="8" fill="#7c3aed">AB=9, AC=12, A\'B\'=6, A\'C\'=8, ∠A=∠A\'</text></svg>$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)=>`
|
||||
<div style="padding:14px;background:var(--card);border-radius:10px;border:1px solid var(--border);margin-bottom:10px">
|
||||
<div style="margin-bottom:8px;font-size:.95rem">${t.q}</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
|
||||
<input type="number" class="tinp" id="p6b-a${i}" placeholder="Ответ" style="width:110px">
|
||||
<button class="btn primary small" onclick="(function(){
|
||||
const v=+document.getElementById('p6b-a${i}').value;
|
||||
const fb=document.getElementById('p6b-fb${i}');
|
||||
if(Math.abs(v-${t.ans})<0.05){
|
||||
feedback(fb,true,'Верно! +5 XP');
|
||||
if(!window.p6BossSolved.has(${i})){ window.p6BossSolved.add(${i}); addXp(5,'p6-boss${i}'); bumpProgress('p6',8); }
|
||||
} else feedback(fb,false,'Неверно. ${t.hint}');
|
||||
})()">Проверить</button>
|
||||
</div>
|
||||
<div class="feedback" id="p6b-fb${i}" style="display:none;margin-top:8px"></div>
|
||||
</div>`).join('');
|
||||
window.p6BossSolved=new Set();
|
||||
renderMath(bossBox);
|
||||
})();
|
||||
}
|
||||
|
||||
function buildP7(){
|
||||
const box=document.getElementById('p7-body');
|
||||
let html='';
|
||||
|
||||
/* ---- Theory cards ---- */
|
||||
html+=makeCard('theory','Третий признак подобия треугольников (ССС — три стороны)','7.1',`
|
||||
<p><b>Теорема (3-й признак подобия, ССС).</b> Если три стороны одного треугольника пропорциональны трём сторонам другого треугольника, то такие треугольники подобны.</p>
|
||||
<p style="margin-top:8px">Если $\\dfrac{a}{a'} = \\dfrac{b}{b'} = \\dfrac{c}{c'} = k$, то $\\triangle ABC \\sim \\triangle A'B'C'$.</p>
|
||||
<p style="margin-top:8px">Здесь $a=BC$, $b=AC$, $c=AB$ и аналогично для второго треугольника. Это самый сильный признак — он <b>не требует</b> проверки углов.</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:14px">
|
||||
<svg viewBox="0 0 300 165" style="max-width:320px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- Triangle 1: A=(100,18) B=(28,140) C=(205,140) -->
|
||||
<polygon points="100,18 28,140 205,140" fill="rgba(124,58,237,.11)" stroke="#7c3aed" stroke-width="2"/>
|
||||
<text x="100" y="12" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">A</text>
|
||||
<text x="18" y="149" font-size="11" font-weight="800" fill="#6d28d9">B</text>
|
||||
<text x="208" y="149" font-size="11" font-weight="800" fill="#6d28d9">C</text>
|
||||
<!-- Side labels t1 -->
|
||||
<text x="55" y="96" text-anchor="middle" font-size="10" fill="#7c3aed" font-style="italic">c=AB</text>
|
||||
<text x="115" y="155" text-anchor="middle" font-size="10" fill="#7c3aed" font-style="italic">a=BC</text>
|
||||
<text x="160" y="93" text-anchor="middle" font-size="10" fill="#7c3aed" font-style="italic">b=AC</text>
|
||||
<!-- Triangle 2: A'=(238,42) B'=(212,122) C'=(278,122) -->
|
||||
<polygon points="238,42 212,122 278,122" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/>
|
||||
<text x="238" y="36" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text>
|
||||
<text x="202" y="131" font-size="10" font-weight="800" fill="#4f46e5">B'</text>
|
||||
<text x="280" y="131" font-size="10" font-weight="800" fill="#4f46e5">C'</text>
|
||||
<!-- Side labels t2 -->
|
||||
<text x="221" y="87" text-anchor="middle" font-size="9" fill="#6366f1" font-style="italic">c'</text>
|
||||
<text x="245" y="131" text-anchor="middle" font-size="9" fill="#6366f1" font-style="italic">a'</text>
|
||||
<text x="263" y="86" text-anchor="middle" font-size="9" fill="#6366f1" font-style="italic">b'</text>
|
||||
<!-- Ratio text -->
|
||||
<text x="150" y="12" text-anchor="middle" font-size="9" fill="#f59e0b" font-weight="800">a/a' = b/b' = c/c' = k → △ABC∼△A'B'C'</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
html+=makeCard('rule','Доказательство 3-го признака — схема','7.2',`
|
||||
<p>Доказательство сводится к 2-му признаку (СУС).</p>
|
||||
<p style="margin-top:6px">Пусть $\\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$.</p>
|
||||
<p style="margin-top:6px">По признаку равенства SSS: $\\triangle A'MN \\cong \\triangle ABC$. Значит $\\triangle ABC \\sim \\triangle A'B'C'$ (транзитивность). <b>QED.</b></p>
|
||||
<div style="display:flex;justify-content:center;margin-top:10px">
|
||||
<svg viewBox="0 0 280 130" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<polygon points="140,14 30,122 250,122" fill="rgba(99,102,241,.10)" stroke="#6366f1" stroke-width="1.5"/>
|
||||
<polygon points="140,14 82,72 198,72" fill="rgba(124,58,237,.22)" stroke="#7c3aed" stroke-width="2"/>
|
||||
<line x1="82" y1="72" x2="198" y2="72" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5,3"/>
|
||||
<text x="140" y="9" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text>
|
||||
<text x="20" y="130" font-size="10" font-weight="800" fill="#4f46e5">B'</text>
|
||||
<text x="252" y="130" font-size="10" font-weight="800" fill="#4f46e5">C'</text>
|
||||
<text x="76" y="82" font-size="10" font-weight="800" fill="#7c3aed">M</text>
|
||||
<text x="200" y="82" font-size="10" font-weight="800" fill="#7c3aed">N</text>
|
||||
<text x="140" y="105" text-anchor="middle" font-size="8" fill="#6366f1">△A'MN∼△A'B'C', △A'MN≅△ABC → △ABC∼△A'B'C'</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
html+=makeCard('example','Примеры применения признака ССС','7.3',`
|
||||
<p><b>Пример 1.</b> $a=6$, $b=8$, $c=10$; $a'=3$, $b'=4$, $c'=5$. Подобны ли треугольники?</p>
|
||||
<p style="margin-top:4px">$a/a'=6/3=2$, $b/b'=8/4=2$, $c/c'=10/5=2$. Все отношения равны $k=2$ → по ССС: подобны.</p>
|
||||
<p style="margin-top:8px"><b>Пример 2.</b> $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$ — подобны.</p>
|
||||
<p style="margin-top:8px"><b>Пример 3 (не подобны).</b> $a=5$, $b=7$, $c=9$; $a'=5$, $b'=7$, $c'=10$. $5/5=1$, $7/7=1$, $9/10=0{,}9$. Отношения различны → <b>не подобны</b>.</p>`);
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 1: SVG три стороны + слайдер k ---- */
|
||||
html+=`<div class="wg" id="p7-svg-wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Два треугольника — признак ССС</div></div>
|
||||
<div class="wg-help">Задай три стороны первого треугольника и коэффициент $k$. Второй строится автоматически: все стороны уменьшены в $k$ раз. Треугольное неравенство проверяется автоматически.</div>
|
||||
<div class="sliders">
|
||||
<label>Сторона $a$: <b id="p7-a-val">6</b>
|
||||
<input type="range" min="3" max="14" value="6" id="p7-a-sl" step="1">
|
||||
</label>
|
||||
<label>Сторона $b$: <b id="p7-b-val">8</b>
|
||||
<input type="range" min="3" max="14" value="8" id="p7-b-sl" step="1">
|
||||
</label>
|
||||
<label>Сторона $c$: <b id="p7-c-val">9</b>
|
||||
<input type="range" min="3" max="14" value="9" id="p7-c-sl" step="1">
|
||||
</label>
|
||||
<label>Коэффициент $k$: <b id="p7-k-val">2.0</b>
|
||||
<input type="range" min="12" max="35" value="20" id="p7-k-sl" step="1">
|
||||
</label>
|
||||
</div>
|
||||
<div id="p7-svg-out" style="display:flex;justify-content:center"></div>
|
||||
<div id="p7-svg-info" style="margin-top:10px;padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.92rem;line-height:1.8"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 2: Пошаговое доказательство ---- */
|
||||
html+=`<div class="wg" id="p7-proof-wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Доказательство 3-го признака — по шагам</div></div>
|
||||
<div class="wg-help">Нажимай «Далее» для каждого шага доказательства признака ССС.</div>
|
||||
<div id="p7-proof-svg" style="display:flex;justify-content:center;margin-bottom:10px"></div>
|
||||
<div id="p7-proof-desc" style="padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.95rem;line-height:1.6;margin-bottom:10px;min-height:60px"></div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button class="btn primary" id="p7-proof-next">Далее</button>
|
||||
<button class="btn" id="p7-proof-reset">Сначала</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 3: Калькулятор ССС ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 3</span><div class="wg-title">Калькулятор: проверка подобия по трём сторонам</div></div>
|
||||
<div class="wg-help">Введи стороны двух треугольников — система проверит пропорциональность и найдёт $k$.</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-bottom:10px">
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">a (BC)</span><input type="number" id="p7-ca" class="tinp" placeholder="напр. 6" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">b (AC)</span><input type="number" id="p7-cb" class="tinp" placeholder="напр. 8" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">c (AB)</span><input type="number" id="p7-cc" class="tinp" placeholder="напр. 10" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">a' (B'C')</span><input type="number" id="p7-ca2" class="tinp" placeholder="напр. 3" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">b' (A'C')</span><input type="number" id="p7-cb2" class="tinp" placeholder="напр. 4" style="width:100%"></div>
|
||||
<div><span style="font-size:.8rem;color:var(--muted);display:block">c' (A'B')</span><input type="number" id="p7-cc2" class="tinp" placeholder="напр. 5" style="width:100%"></div>
|
||||
<div style="display:flex;align-items:flex-end"><button class="btn primary" id="p7-ccalc" style="width:100%">Проверить</button></div>
|
||||
</div>
|
||||
<div id="p7-ccalc-out" style="display:none;padding:10px 14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:.95rem;line-height:1.7"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 4: Тренажёр ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 4</span><div class="wg-title">Тренажёр §7 — Признак ССС</div></div>
|
||||
<div class="wg-help">5 задач на проверку подобия по сторонам и нахождение коэффициента.</div>
|
||||
<div class="score-display"><span>Задача <b id="p7-tr-i">1</b> / 5</span><span>Очки: <b id="p7-tr-score">0</b></span></div>
|
||||
<div id="p7-tr-task" style="padding:14px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;font-size:1.02rem;margin-bottom:10px"></div>
|
||||
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
|
||||
<input type="number" id="p7-tr-ans" class="tinp" placeholder="Ответ" style="width:130px">
|
||||
<button class="btn primary" id="p7-tr-go">Проверить</button>
|
||||
<button class="btn" id="p7-tr-start">Начать</button>
|
||||
</div>
|
||||
<div class="feedback" id="p7-tr-fb" style="display:none"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 5: DnD-сортер ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 5</span><div class="wg-title">Подобны по ССС или нет? — Сортировка</div></div>
|
||||
<div class="wg-help">Перетащи каждую пару троек сторон в нужную колонку.</div>
|
||||
<div id="p7-dnd-pool" class="dnd-pool"></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px">
|
||||
<div class="drop-box" id="p7-drop-yes"><h5>Подобны (ССС)</h5><div class="drop-items" id="p7-drop-yes-items"></div></div>
|
||||
<div class="drop-box" id="p7-drop-no"><h5>Не подобны</h5><div class="drop-items" id="p7-drop-no-items"></div></div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="p7-dnd-check">Проверить</button><button class="btn" id="p7-dnd-reset">Сбросить</button></div>
|
||||
<div class="feedback" id="p7-dnd-fb" style="display:none"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 6: Мини-квиз (три признака) ---- */
|
||||
html+=`<div class="wg">
|
||||
<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 6</span><div class="wg-title">Мини-квиз: все три признака подобия</div></div>
|
||||
<div class="wg-help">5 вопросов о трёх признаках подобия. Выбери правильный ответ.</div>
|
||||
<div id="p7-quiz-wrap"></div>
|
||||
<div class="actions"><button class="btn primary" id="p7-quiz-check">Проверить</button></div>
|
||||
<div class="feedback" id="p7-quiz-fb" style="display:none"></div>
|
||||
</div>`;
|
||||
|
||||
/* ---- ИНТЕРАКТИВ 7: Босс §7 ---- */
|
||||
html+=`<div class="wg" style="border-color:var(--sec-acc-d,var(--pri2))">
|
||||
<div class="wg-header"><span class="wg-badge" style="background:var(--sec-acc-d,var(--pri2))">БОСС §7</span><div class="wg-title">Итоговые задачи</div></div>
|
||||
<div class="wg-help">4 задачи — каждая верная даёт +5 XP.</div>
|
||||
<div id="p7-boss-tasks"></div>
|
||||
</div>`;
|
||||
|
||||
html+=`<div style="margin-top:18px;display:flex;justify-content:center">
|
||||
<button class="btn primary" id="p7-read-btn" onclick="addXp(10,'p7-read');bumpProgress('p7',40);this.textContent='Прочитано!';this.disabled=true;">
|
||||
<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
Я прочитал §7 (+10 XP)
|
||||
</button>
|
||||
</div>`;
|
||||
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='<div style="color:var(--bad);padding:10px">Нарушено треугольное неравенство. Измени стороны.</div>';
|
||||
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=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">`;
|
||||
s+=`<polygon points="${t1.Ax},${t1.Ay} ${t1.Bx},${t1.By} ${t1.Cx},${t1.Cy}" fill="rgba(124,58,237,.12)" stroke="#7c3aed" stroke-width="2"/>`;
|
||||
s+=`<text x="${t1.Ax}" y="${t1.Ay-5}" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">A</text>`;
|
||||
s+=`<text x="${t1.Bx-8}" y="${t1.By+4}" font-size="11" font-weight="800" fill="#6d28d9">B</text>`;
|
||||
s+=`<text x="${t1.Cx+4}" y="${t1.Cy+4}" font-size="11" font-weight="800" fill="#6d28d9">C</text>`;
|
||||
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+=`<text x="${mBCx}" y="${mBCy+11}" text-anchor="middle" font-size="9" fill="#7c3aed">a=${a}</text>`;
|
||||
s+=`<text x="${mACx+8}" y="${mACy}" font-size="9" fill="#7c3aed">b=${b}</text>`;
|
||||
s+=`<text x="${mABx-8}" y="${mABy}" text-anchor="end" font-size="9" fill="#7c3aed">c=${c}</text>`;
|
||||
|
||||
s+=`<polygon points="${t2.Ax},${t2.Ay} ${t2.Bx},${t2.By} ${t2.Cx},${t2.Cy}" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/>`;
|
||||
s+=`<text x="${t2.Ax}" y="${t2.Ay-5}" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text>`;
|
||||
s+=`<text x="${t2.Bx-10}" y="${t2.By+4}" font-size="10" font-weight="800" fill="#4f46e5">B'</text>`;
|
||||
s+=`<text x="${t2.Cx+4}" y="${t2.Cy+4}" font-size="10" font-weight="800" fill="#4f46e5">C'</text>`;
|
||||
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+=`<text x="${mBCx2}" y="${mBCy2+11}" text-anchor="middle" font-size="9" fill="#6366f1">a'=${fmt(a2)}</text>`;
|
||||
s+=`<text x="${mACx2+6}" y="${mACy2}" font-size="9" fill="#6366f1">b'=${fmt(b2)}</text>`;
|
||||
s+=`<text x="${mABx2-6}" y="${mABy2}" text-anchor="end" font-size="9" fill="#6366f1">c'=${fmt(c2)}</text>`;
|
||||
|
||||
s+=`<text x="${W/2}" y="12" text-anchor="middle" font-size="10" font-weight="800" fill="#7c3aed">k = ${k.toFixed(1)}</text>`;
|
||||
s+='</svg>';
|
||||
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:'<b>Шаг 1.</b> Дано: $\\dfrac{a}{a\'}=\\dfrac{b}{b\'}=\\dfrac{c}{c\'}=k$. Нужно доказать: $\\triangle ABC \\sim \\triangle A\'B\'C\'$.',
|
||||
svg:`<svg viewBox="0 0 280 140" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><polygon points="100,18 28,132 210,132" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/><polygon points="210,46 188,112 258,112" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/><text x="100" y="13" text-anchor="middle" font-size="11" font-weight="800" fill="#6d28d9">A</text><text x="18" y="140" font-size="11" font-weight="800" fill="#6d28d9">B</text><text x="213" y="140" font-size="11" font-weight="800" fill="#6d28d9">C</text><text x="210" y="41" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text><text x="180" y="120" font-size="10" font-weight="800" fill="#4f46e5">B'</text><text x="260" y="120" font-size="10" font-weight="800" fill="#4f46e5">C'</text><text x="140" y="12" text-anchor="middle" font-size="9" fill="#f59e0b" font-weight="800">a/a'=b/b'=c/c'=k — условие</text></svg>`},
|
||||
{desc:'<b>Шаг 2.</b> На луче $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:`<svg viewBox="0 0 280 140" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><polygon points="140,14 30,126 250,126" fill="rgba(99,102,241,.10)" stroke="#6366f1" stroke-width="1.5"/><polygon points="140,14 82,70 198,70" fill="rgba(124,58,237,.22)" stroke="#7c3aed" stroke-width="2"/><line x1="82" y1="70" x2="198" y2="70" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5,3"/><text x="140" y="9" text-anchor="middle" font-size="10" font-weight="800" fill="#4f46e5">A'</text><text x="20" y="134" font-size="10" font-weight="800" fill="#4f46e5">B'</text><text x="252" y="134" font-size="10" font-weight="800" fill="#4f46e5">C'</text><text x="76" y="80" font-size="10" font-weight="800" fill="#7c3aed">M</text><text x="200" y="80" font-size="10" font-weight="800" fill="#7c3aed">N</text><text x="140" y="110" text-anchor="middle" font-size="9" fill="#7c3aed">A'M=AB, MN∥B'C'</text></svg>`},
|
||||
{desc:'<b>Шаг 3.</b> Поскольку $\\triangle A\'MN \\sim \\triangle A\'B\'C\'$ с коэффициентом $k$, все стороны $\\triangle A\'MN$ равны соответствующим сторонам $\\triangle ABC$: $A\'M=AB$, $MN=a$, $A\'N=b$.',
|
||||
svg:`<svg viewBox="0 0 280 90" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="22" text-anchor="middle" font-size="11" fill="#4f46e5" font-weight="700">△A'MN∼△A'B'C' с коэфф. k</text><text x="140" y="44" text-anchor="middle" font-size="11" fill="#7c3aed" font-weight="700">A'M=AB=c, MN=BC=a, A'N=AC=b</text><text x="140" y="68" text-anchor="middle" font-size="10" fill="#10b981" font-weight="800">Все стороны △A'MN = сторонам △ABC</text></svg>`},
|
||||
{desc:'<b>Шаг 4.</b> По признаку равенства треугольников (SSS): $\\triangle A\'MN \\cong \\triangle ABC$ (у них равны все три пары сторон).',
|
||||
svg:`<svg viewBox="0 0 280 80" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="26" text-anchor="middle" font-size="12" fill="#4338ca" font-weight="800">△A'MN ≅ △ABC (SSS)</text><text x="140" y="52" text-anchor="middle" font-size="10" fill="#6366f1">Три стороны равны попарно → конгруэнтны</text><text x="140" y="70" text-anchor="middle" font-size="9" fill="#7c3aed">△A'MN∼△A'B'C' также выполнено</text></svg>`},
|
||||
{desc:'<b>Шаг 5.</b> По транзитивности: $\\triangle ABC \\cong \\triangle A\'MN \\sim \\triangle A\'B\'C\'$ → $\\triangle ABC \\sim \\triangle A\'B\'C\'$. <b>Третий признак подобия (ССС) доказан.</b>',
|
||||
svg:`<svg viewBox="0 0 280 80" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px"><text x="140" y="26" text-anchor="middle" font-size="12" fill="#7c3aed" font-weight="800">a/a'=b/b'=c/c'=k → △ABC∼△A'B'C'</text><text x="140" y="50" text-anchor="middle" font-size="10" fill="#6366f1">Признак ССС — третий признак подобия</text><text x="140" y="70" text-anchor="middle" font-size="12" fill="#10b981" font-weight="900">QED ∎</text></svg>`},
|
||||
];
|
||||
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<steps.length-1){step++;show();addXp(1,'p7-proof-step');}
|
||||
else{addXp(5,'p7-proof-done');bumpProgress('p7',10);}
|
||||
});
|
||||
document.getElementById('p7-proof-reset').addEventListener('click',()=>{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='<span style="color:var(--bad)">Введи все шесть сторон.</span>';return;
|
||||
}
|
||||
const k1=a/a2, k2=b/b2, k3=c/c2;
|
||||
const tol=0.001;
|
||||
const ok=Math.abs(k1-k2)<tol&&Math.abs(k2-k3)<tol;
|
||||
out.style.display='block';
|
||||
if(ok){
|
||||
out.innerHTML=`$\\dfrac{a}{a'}=\\dfrac{${fmt(a)}}{${fmt(a2)}}=${fmt(k1)}$, $\\dfrac{b}{b'}=\\dfrac{${fmt(b)}}{${fmt(b2)}}=${fmt(k2)}$, $\\dfrac{c}{c'}=\\dfrac{${fmt(c)}}{${fmt(c2)}}=${fmt(k3)}$.<br><b>Все отношения равны $k=${fmt(k1)}$</b> → треугольники <b>подобны по признаку ССС</b>.`;
|
||||
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)}$.<br>Отношения <b>не равны</b> → треугольники <b>не подобны</b> по признаку ССС.`;
|
||||
}
|
||||
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(idx<tasks.length-1){feedback(fb,true,'Верно! +3 XP');idx++;setTimeout(()=>show(),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<items.length){feedback(fb,false,'Разложи все карточки.');return;}
|
||||
let ok=true;
|
||||
yChips.forEach(c=>{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)=>`
|
||||
<div style="margin-bottom:14px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:10px">
|
||||
<div style="font-weight:700;margin-bottom:8px;font-size:.95rem">${qi+1}. ${q.q}</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
${q.opts.map((o,oi)=>`<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.92rem"><input type="radio" name="p7q${qi}" value="${oi}" style="accent-color:var(--sec-acc,var(--pri))"> ${o}</label>`).join('')}
|
||||
</div>
|
||||
</div>`).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:'<svg viewBox="0 0 240 128" style="display:block;max-width:240px;margin:0 auto 8px;background:#ddd6fe;border:1px solid #c4b5fd;border-radius:8px"><polygon points="100,14 24,118 210,118" fill="rgba(124,58,237,.12)" stroke="#7c3aed" stroke-width="2"/><polygon points="196,40 168,108 252,108" fill="rgba(99,102,241,.18)" stroke="#6366f1" stroke-width="1.8"/><text x="100" y="9" text-anchor="middle" font-size="10" fill="#6d28d9" font-weight="800">A</text><text x="14" y="126" font-size="10" fill="#6d28d9" font-weight="800">B</text><text x="213" y="126" font-size="10" fill="#6d28d9" font-weight="800">C</text><text x="196" y="35" text-anchor="middle" font-size="9" fill="#4f46e5" font-weight="800">A\'</text><text x="160" y="116" font-size="9" fill="#4f46e5" font-weight="800">B\'</text><text x="254" y="116" font-size="9" fill="#4f46e5" font-weight="800">C\'</text><text x="120" y="9" text-anchor="middle" font-size="8" fill="#7c3aed">a=12,b=9,c=15; a\'=8,b\'=6,c\'=10</text></svg>$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)=>`
|
||||
<div style="padding:14px;background:var(--card);border-radius:10px;border:1px solid var(--border);margin-bottom:10px">
|
||||
<div style="margin-bottom:8px;font-size:.95rem">${t.q}</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
|
||||
<input type="number" class="tinp" id="p7b-a${i}" placeholder="Ответ" style="width:110px">
|
||||
<button class="btn primary small" onclick="(function(){
|
||||
const v=+document.getElementById('p7b-a${i}').value;
|
||||
const fb=document.getElementById('p7b-fb${i}');
|
||||
if(Math.abs(v-${t.ans})<0.05){
|
||||
feedback(fb,true,'Верно! +5 XP');
|
||||
if(!window.p7BossSolved.has(${i})){ window.p7BossSolved.add(${i}); addXp(5,'p7-boss${i}'); bumpProgress('p7',8); }
|
||||
} else feedback(fb,false,'Неверно. ${t.hint}');
|
||||
})()">Проверить</button>
|
||||
</div>
|
||||
<div class="feedback" id="p7b-fb${i}" style="display:none;margin-top:8px"></div>
|
||||
</div>`).join('');
|
||||
window.p7BossSolved=new Set();
|
||||
renderMath(bossBox);
|
||||
})();
|
||||
}
|
||||
function buildP8stub(){ document.getElementById('p8-body').innerHTML='<div class="card"><div class="card-body"><p><b>§8 — Волна 1</b>: содержимое появится в следующем обновлении.</p></div></div>'+secNav('p7','p9'); }
|
||||
function buildP9stub(){ document.getElementById('p9-body').innerHTML='<div class="card"><div class="card-body"><p><b>§9 — Волна 1</b>: содержимое появится в следующем обновлении.</p></div></div>'+secNav('p8','final3'); }
|
||||
function buildFinal3stub(){ document.getElementById('final3-body').innerHTML='<div class="card"><div class="card-body"><p><b>Финал главы 3 — Волна 1</b>: боссы и итоги появятся в следующем обновлении.</p></div></div>'+secNav('p9',null); }
|
||||
|
||||
Reference in New Issue
Block a user