maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(geom8): Wave 5 — финал Главы 3 (шпаргалка, карта связей, 7 боссов)

Browse Source 
Часть 1 — Итоговая шпаргалка: 9 mini-cards с SVG-иконкой и формулой
в KaTeX для каждого § (от Фалеса до отношения площадей).

Часть 2 — Интерактивная карта связей (SVG 620×340):
центральный узел 'Подобие треугольников' → 3 признака (УУ, СУС, ССС)
→ следствия (Фалес, прямая||стороне, биссектриса, площади, m:n).
Клик подсвечивает связи и показывает описание с KaTeX.

Часть 3 — 7 боссов (по 10 XP):
  Босс 1: параллель MN — k=8/12, AN=12
  Босс 2: биссектриса AB=15 AC=10 BC=14 — BD=8.4, DC=5.6
  Босс 3: УУ+площади k=1.5, S=12 — S'=27
  Босс 4: деление 20 см в 3:2 — AC=12, CB=8
  Босс 5: СУС+косинус AB=8 AC=12 ∠=60° k=1.5 — A'B'=12, A'C'=18, BC≈11
  Босс 6: высоты и площади k=2 — h'=3, S=36
  Босс 7: средняя линия M середина AB, MN∥BC — MN=10.5, AN/NC=1, ratio=0.25

Часть 4 — Финальная плашка: confetti + achievement
'Мастер подобия Главы 3' + 50 XP бонус + кнопка перехода к Главе 4.

File: 4095 → 4709 LOC. ГЛАВА 3 ПОЛНОСТЬЮ ЗАВЕРШЕНА.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-28 15:14:59 +03:00
parent 8d4eab659c
commit 70c6fe0054
1 changed files with 615 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/geometry_8_ch3.html
+615 -2
View File
@@ -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:()=>buildP6(),p7:()=>buildP7(),p8:()=>buildP8(),p9:()=>buildP9(),final3:()=>buildFinal3stub()};
const BUILDERS={p1:()=>buildP1(),p2:()=>buildP2(),p3:()=>buildP3(),p4:()=>buildP4(),p5:()=>buildP5(),p6:()=>buildP6(),p7:()=>buildP7(),p8:()=>buildP8(),p9:()=>buildP9(),final3:()=>buildFinal3()};
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);}
@@ -4089,7 +4089,620 @@ function buildP9(){
renderMath(bossBox);
})();
}
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); }
function buildFinal3(){
const box = document.getElementById('final3-body');
let html = '';
/* === ЧАСТЬ 1: Итоговая шпаргалка === */
html += `<div class="card" style="border-color:var(--sec-acc,var(--pri));background:linear-gradient(135deg,var(--card),var(--sec-acc-soft,var(--pri-soft)))">
<div class="card-header">
<div class="card-icon theory">
<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>
</div>
<div class="card-title">Итоговая шпаргалка · Вся Глава 3 «Подобные треугольники»</div>
</div>
<div class="card-body">
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px">
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§1 Теорема Фалеса</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<line x1="10" y1="50" x2="65" y2="10" stroke="#7c3aed" stroke-width="1.8"/>
<line x1="10" y1="50" x2="65" y2="50" stroke="#7c3aed" stroke-width="1.8"/>
<line x1="14" y1="47" x2="62" y2="47" stroke="#6366f1" stroke-width="1.2" stroke-dasharray="3 2"/>
<line x1="22" y1="38" x2="62" y2="38" stroke="#6366f1" stroke-width="1.2" stroke-dasharray="3 2"/>
<line x1="34" y1="26" x2="62" y2="26" stroke="#6366f1" stroke-width="1.2" stroke-dasharray="3 2"/>
<text x="5" y="42" font-size="7" fill="#4f46e5" font-family="JetBrains Mono,monospace">A</text>
<text x="5" y="30" font-size="7" fill="#4f46e5" font-family="JetBrains Mono,monospace">B</text>
<text x="5" y="18" font-size="7" fill="#4f46e5" font-family="JetBrains Mono,monospace">C</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\dfrac{AB}{BC} = \dfrac{A'B'}{B'C'}$</p>
<p style="font-size:.78rem;color:var(--muted)">параллельные прямые</p>
</div>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§2 Деление m:n</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<line x1="5" y1="30" x2="65" y2="30" stroke="#8b5cf6" stroke-width="2"/>
<circle cx="5" cy="30" r="3.5" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<circle cx="65" cy="30" r="3.5" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<circle cx="37" cy="30" r="3.5" fill="#ec4899" stroke="#fff" stroke-width="1.5"/>
<text x="2" y="22" font-size="8" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">A</text>
<text x="32" y="22" font-size="8" fill="#be185d" font-family="Unbounded,sans-serif" font-weight="800">C</text>
<text x="61" y="22" font-size="8" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">B</text>
<text x="16" y="45" font-size="7" fill="#6d28d9" font-family="JetBrains Mono,monospace">m</text>
<text x="46" y="45" font-size="7" fill="#6d28d9" font-family="JetBrains Mono,monospace">n</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$AC = \dfrac{m}{m+n}\cdot AB$</p>
<p style="font-size:.78rem;color:var(--muted)">$C$ делит $AB$ в $m{:}n$</p>
</div>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§3 Подобие треугольников</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\triangle ABC \sim \triangle A'B'C'$</p>
<p style="font-size:.82rem;margin-bottom:4px">$\dfrac{a}{a'} = \dfrac{b}{b'} = \dfrac{c}{c'} = k$</p>
<p style="font-size:.78rem;color:var(--muted)">углы попарно равны</p>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§4 Прямая || стороне</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<polygon points="35,4 4,56 66,56" fill="rgba(99,102,241,.10)" stroke="#6366f1" stroke-width="2"/>
<line x1="17" y1="34" x2="53" y2="34" stroke="#7c3aed" stroke-width="2" stroke-dasharray="3 2"/>
<circle cx="17" cy="34" r="3" fill="#7c3aed" stroke="#fff" stroke-width="1.2"/>
<circle cx="53" cy="34" r="3" fill="#7c3aed" stroke="#fff" stroke-width="1.2"/>
<text x="32" y="2" font-size="8" fill="#4f46e5" font-family="Unbounded,sans-serif" font-weight="800">A</text>
<text x="0" y="60" font-size="8" fill="#4f46e5" font-family="Unbounded,sans-serif" font-weight="800">B</text>
<text x="60" y="60" font-size="8" fill="#4f46e5" font-family="Unbounded,sans-serif" font-weight="800">C</text>
<text x="10" y="30" font-size="7" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">M</text>
<text x="54" y="30" font-size="7" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">N</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$MN \parallel BC$</p>
<p style="font-size:.82rem;margin-bottom:4px">$\Rightarrow \triangle AMN \sim \triangle ABC$</p>
<p style="font-size:.78rem;color:var(--muted)">$k = AM/AB$</p>
</div>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§5 Признак УУ (AA)</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<polygon points="35,4 6,56 64,56" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/>
<polygon points="50,4 38,26 62,26" fill="rgba(139,92,246,.18)" stroke="#8b5cf6" stroke-width="1.8"/>
<text x="32" y="2" font-size="8" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">A</text>
<text x="2" y="60" font-size="8" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">B</text>
<text x="58" y="60" font-size="8" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">C</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\angle A = \angle A'$</p>
<p style="font-size:.82rem;margin-bottom:4px">$\angle B = \angle B'$</p>
<p style="font-size:.78rem;color:var(--muted)">$\Rightarrow$ подобны</p>
</div>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§6 Признак СУС (SAS)</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\dfrac{AB}{A'B'} = \dfrac{AC}{A'C'}$</p>
<p style="font-size:.82rem;margin-bottom:4px">$\angle A = \angle A'$</p>
<p style="font-size:.78rem;color:var(--muted)">$\Rightarrow$ подобны (СУС)</p>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§7 Признак ССС (SSS)</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\dfrac{a}{a'} = \dfrac{b}{b'} = \dfrac{c}{c'}$</p>
<p style="font-size:.78rem;color:var(--muted)">$\Rightarrow$ подобны (ССС)</p>
<p style="font-size:.78rem;color:var(--muted)">три пары сторон</p>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§8 Биссектриса</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<polygon points="35,4 4,56 66,56" fill="rgba(192,38,211,.08)" stroke="#c026d3" stroke-width="2"/>
<line x1="35" y1="4" x2="38" y2="56" stroke="#a21caf" stroke-width="1.8" stroke-dasharray="4 2"/>
<circle cx="38" cy="56" r="3" fill="#a21caf" stroke="#fff" stroke-width="1.2"/>
<text x="32" y="2" font-size="8" fill="#a21caf" font-family="Unbounded,sans-serif" font-weight="800">A</text>
<text x="0" y="60" font-size="8" fill="#a21caf" font-family="Unbounded,sans-serif" font-weight="800">B</text>
<text x="60" y="60" font-size="8" fill="#a21caf" font-family="Unbounded,sans-serif" font-weight="800">C</text>
<text x="38" y="52" font-size="7" fill="#a21caf" font-family="Unbounded,sans-serif" font-weight="800">D</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\dfrac{BD}{DC} = \dfrac{AB}{AC}$</p>
<p style="font-size:.78rem;color:var(--muted)">$AD$ — биссектриса $\angle A$</p>
</div>
</div>
</div>
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:11px;padding:12px">
<div style="font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px">§9 Площади подобных</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\dfrac{S_1}{S_2} = k^2$</p>
<p style="font-size:.82rem;margin-bottom:4px">$k$ — коэффициент подобия</p>
<p style="font-size:.78rem;color:var(--muted)">площади ~ квадрату $k$</p>
</div>
</div>
</div>
</div>
</div>`;
/* === ЧАСТЬ 2: Карта связей === */
html += `<div class="wg" id="final3-map-wrap">
<div class="wg-header"><span class="wg-badge">КАРТА СВЯЗЕЙ</span><div class="wg-title">Признаки подобия и следствия</div></div>
<div class="wg-help">Нажми на узел, чтобы увидеть формулировку и способ применения.</div>
<div id="final3-map-svg" style="display:flex;justify-content:center;overflow-x:auto"></div>
<div id="final3-map-info" style="min-height:56px;padding:12px 16px;background:var(--sec-acc-soft,var(--pri-soft));border-radius:10px;margin-top:10px;font-size:.9rem;line-height:1.65;color:var(--text)">Нажми на узел в схеме выше</div>
</div>`;
/* === ЧАСТЬ 3: 7 боссов главы === */
html += `<div class="wg" style="border-color:#7c3aed;background:linear-gradient(135deg,var(--card),#ede9fe)">
<div class="wg-header">
<span class="wg-badge" style="background:#7c3aed">7 БОССОВ ГЛАВЫ 3</span>
<div class="wg-title">Интегрированные задачи</div>
</div>
<div class="wg-help">Каждая задача объединяет 2–3 темы главы. +10 XP за каждого побеждённого босса. Победи всех семерых — получишь +50 XP и достижение «Мастер подобия Главы 3»!</div>
<div id="final3-bosses"></div>
</div>`;
/* === ЧАСТЬ 4: Финальная плашка === */
html += `<div id="final3-finish" style="display:none;margin-top:20px;padding:24px;background:linear-gradient(135deg,#ede9fe,#f5f3ff);border:2px solid #7c3aed;border-radius:16px;text-align:center">
<div style="font-family:'Unbounded',sans-serif;font-size:1.2rem;font-weight:900;color:#4c1d95;margin-bottom:10px">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:28px;height:28px;vertical-align:middle;margin-right:6px"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
Мастер подобия Главы 3!
</div>
<p style="color:#4c1d95;font-size:.95rem;margin-bottom:16px">Ты победил всех 7 боссов и освоил всю Главу 3 «Подобные треугольники». Превосходная работа!</p>
<a href="/textbook/geometry-8-ch4" class="btn primary" style="font-size:.98rem;padding:12px 28px">
<svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
Перейти к Главе 4
</a>
</div>`;
html += `<div style="margin-top:18px;display:flex;justify-content:center">
<button class="btn primary" id="final3-read-btn" onclick="addXp(10,'final3-read');bumpProgress('final3',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>
Я изучил Главу 3 (+10 XP)
</button>
</div>`;
html += secNav('p9', null);
box.innerHTML = html;
/* === JS: Карта связей SVG === */
(function(){
const W = 620, H = 340;
const nodes = [
{ id:'sim', x:310, y:28, rx:62, label:'Подобие треугольников',
props:'Два треугольника подобны, если углы попарно равны и стороны пропорциональны. $\\triangle ABC \\sim \\triangle A\'B\'C\'$, коэффициент $k$.' },
{ id:'aa', x:100, y:120, rx:54, label:'УУ (AA)',
props:'§5: Если два угла одного треугольника равны двум углам другого — треугольники подобны. Наиболее часто применяемый признак.' },
{ id:'sas', x:310, y:120, rx:54, label:'СУС (SAS)',
props:'§6: Два треугольника подобны, если две стороны пропорциональны и угол между ними равен: $\\dfrac{AB}{A\'B\'} = \\dfrac{AC}{A\'C\'}$, $\\angle A = \\angle A\'$.' },
{ id:'sss', x:510, y:120, rx:54, label:'ССС (SSS)',
props:'§7: Три треугольника подобны, если все три пары сторон пропорциональны: $\\dfrac{a}{a\'} = \\dfrac{b}{b\'} = \\dfrac{c}{c\'}$.' },
{ id:'fales', x:80, y:230, rx:52, label:'Теорема Фалеса',
props:'§1: Параллельные прямые отсекают пропорциональные отрезки на двух секущих. $\\dfrac{AB}{BC} = \\dfrac{A\'B\'}{B\'C\'}$.' },
{ id:'paral', x:230, y:230, rx:52, label:'Прямая || стороне',
props:'§4: $MN \\parallel BC \\Rightarrow \\triangle AMN \\sim \\triangle ABC$ с $k = AM/AB$. Следует из теоремы Фалеса + признак УУ.' },
{ id:'biss', x:390, y:230, rx:52, label:'Биссектриса',
props:'§8: Биссектриса $AD$ треугольника $ABC$ делит сторону $BC$ в отношении: $\\dfrac{BD}{DC} = \\dfrac{AB}{AC}$. Доказывается через подобие.' },
{ id:'areas', x:540, y:230, rx:52, label:'Площади $S_1/S_2$',
props:'§9: Отношение площадей подобных треугольников равно квадрату коэффициента подобия: $\\dfrac{S_1}{S_2} = k^2$.' },
{ id:'div', x:150, y:310, rx:50, label:'Деление m:n',
props:'§2: Точка $C$ делит $AB$ в отношении $m:n$: $AC = \\dfrac{m}{m+n}\\cdot AB$, $CB = \\dfrac{n}{m+n}\\cdot AB$.' },
];
const edges = [
['sim','aa'],['sim','sas'],['sim','sss'],
['aa','paral'],['fales','paral'],['aa','biss'],
['sim','areas'],['paral','div'],
];
let sel = null;
function draw(selId){
const colors = { sim:'#7c3aed', aa:'#4f46e5', sas:'#8b5cf6', sss:'#6366f1', fales:'#2563eb', paral:'#0891b2', biss:'#c026d3', areas:'#059669', div:'#d97706' };
let s = `<svg viewBox="0 0 ${W} ${H}" style="width:100%;max-width:640px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;cursor:pointer">`;
s += `<defs><marker id="f3-arr" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><polygon points="0 0,7 3.5,0 7" fill="#94a3b8"/></marker></defs>`;
edges.forEach(([a,b])=>{
const na=nodes.find(n=>n.id===a), nb=nodes.find(n=>n.id===b);
if(!na||!nb) return;
const dx=nb.x-na.x, dy=nb.y-na.y, len=Math.sqrt(dx*dx+dy*dy);
if(len<1) return;
const sy_r=na.rx*0.52;
const sx=na.x+dx/len*na.rx, sy2=na.y+dy/len*sy_r;
const ex=nb.x-dx/len*(nb.rx+7), ey=nb.y-dy/len*(nb.rx*0.52+7);
const isAct = selId===a||selId===b;
s += `<line x1="${sx.toFixed(1)}" y1="${sy2.toFixed(1)}" x2="${ex.toFixed(1)}" y2="${ey.toFixed(1)}" stroke="${isAct?'#7c3aed':'#94a3b8'}" stroke-width="${isAct?2.5:1.5}" marker-end="url(#f3-arr)"/>`;
});
nodes.forEach(n=>{
const isS = selId===n.id;
const col = colors[n.id] || '#7c3aed';
const ry = n.rx * 0.52;
s += `<ellipse cx="${n.x}" cy="${n.y}" rx="${n.rx}" ry="${ry}" fill="${isS?col:'var(--card)'}" stroke="${col}" stroke-width="${isS?3:2}" data-nid="${n.id}" style="cursor:pointer"/>`;
const words = n.label.split(' ');
const line1 = words.slice(0,2).join(' '), line2 = words.slice(2).join(' ');
const tc = isS ? '#fff' : col;
if(line2){
s += `<text x="${n.x}" y="${n.y-5}" text-anchor="middle" font-size="8" font-weight="800" font-family="Unbounded,sans-serif" fill="${tc}" style="pointer-events:none">${line1}</text>`;
s += `<text x="${n.x}" y="${n.y+7}" text-anchor="middle" font-size="8" font-weight="800" font-family="Unbounded,sans-serif" fill="${tc}" style="pointer-events:none">${line2}</text>`;
} else {
s += `<text x="${n.x}" y="${n.y+4}" text-anchor="middle" font-size="8" font-weight="800" font-family="Unbounded,sans-serif" fill="${tc}" style="pointer-events:none">${line1}</text>`;
}
});
s += '</svg>';
document.getElementById('final3-map-svg').innerHTML = s;
document.getElementById('final3-map-svg').querySelector('svg').addEventListener('click', function(e){
const el = e.target.closest('[data-nid]');
if(!el) return;
const nid = el.dataset.nid;
sel = (sel===nid) ? null : nid;
const nd = nodes.find(n=>n.id===nid);
if(sel && nd){ document.getElementById('final3-map-info').innerHTML = '<b>' + nd.label + '</b>: ' + nd.props; renderMath(document.getElementById('final3-map-info')); }
else document.getElementById('final3-map-info').textContent = 'Нажми на узел в схеме выше';
draw(sel);
});
}
draw(null);
})();
/* === JS: 7 боссов === */
(function(){
const bosses = [
{
n: 1,
title: 'Параллель и пропорция',
color: '#4f46e5',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Triangle A(140,12) B(20,170) C(260,170). MN parallel BC at 2/3 height. AM/AB=8/12=2/3: M on AB, N on AC. M=(140+2/3*(20-140), 12+2/3*(170-12))=(140-80,12+105.3)=(60,117) N=(140+2/3*(260-140),12+2/3*(170-12))=(140+80,117)=(220,117) -->
<polygon points="140,12 20,170 260,170" fill="rgba(79,70,229,.08)" stroke="#4f46e5" stroke-width="2"/>
<line x1="60" y1="117" x2="220" y2="117" stroke="#7c3aed" stroke-width="2.5"/>
<!-- tick marks: MN || BC -->
<line x1="136" y1="113" x2="144" y2="121" stroke="#7c3aed" stroke-width="1.8"/>
<line x1="136" y1="167" x2="144" y2="175" stroke="#4f46e5" stroke-width="1.8"/>
<!-- vertex dots -->
<circle cx="140" cy="12" r="4" fill="#4f46e5" stroke="#fff" stroke-width="1.5"/>
<circle cx="20" cy="170" r="4" fill="#4f46e5" stroke="#fff" stroke-width="1.5"/>
<circle cx="260" cy="170" r="4" fill="#4f46e5" stroke="#fff" stroke-width="1.5"/>
<circle cx="60" cy="117" r="4" fill="#7c3aed" stroke="#fff" stroke-width="1.5"/>
<circle cx="220" cy="117" r="4" fill="#7c3aed" stroke="#fff" stroke-width="1.5"/>
<!-- labels -->
<text x="127" y="8" font-size="11" font-weight="700" fill="#3730a3" font-family="Unbounded,sans-serif">A</text>
<text x="4" y="180" font-size="11" font-weight="700" fill="#3730a3" font-family="Unbounded,sans-serif">B</text>
<text x="264" y="180" font-size="11" font-weight="700" fill="#3730a3" font-family="Unbounded,sans-serif">C</text>
<text x="42" y="113" font-size="11" font-weight="700" fill="#6d28d9" font-family="Unbounded,sans-serif">M</text>
<text x="224" y="113" font-size="11" font-weight="700" fill="#6d28d9" font-family="Unbounded,sans-serif">N</text>
<!-- side labels -->
<text x="72" y="68" font-size="9" fill="#3730a3" font-family="JetBrains Mono,monospace">AB=12</text>
<text x="4" y="148" font-size="9" fill="#3730a3" font-family="JetBrains Mono,monospace">AM=8</text>
<text x="190" y="150" font-size="9" fill="#3730a3" font-family="JetBrains Mono,monospace">AC=18</text>
<text x="116" y="108" font-size="9" fill="#6d28d9" font-family="JetBrains Mono,monospace">MN=?</text>
</svg>`,
cond: 'В $\\triangle ABC$: $AB = 12$, $AC = 18$, $MN \\parallel BC$, $AM = 8$. (§1, §4)',
parts: [
{ label: 'Найди коэффициент подобия $k = AM/AB$.', ans: 0.667, tol: 0.005, hint: '$k = AM/AB = 8/12 = 2/3 \\approx 0{,}667$' },
{ label: 'Найди $AN$ (используй $AN/AC = k$).', ans: 12, hint: '$AN = k \\cdot AC = \\dfrac{2}{3} \\cdot 18 = 12$' },
],
},
{
n: 2,
title: 'Биссектриса треугольника',
color: '#c026d3',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Triangle A(140,12) B(20,170) C(260,170). AB=15, AC=10, BC=14. Bisector AD from A to BC. BD/DC=AB/AC=15/10=3/2. BD=14*3/5=8.4, DC=5.6. D on BC: D=(20+8.4/14*(260-20), 170)=(20+144, 170)=(164, 170) -->
<polygon points="140,12 20,170 260,170" fill="rgba(192,38,211,.08)" stroke="#c026d3" stroke-width="2"/>
<line x1="140" y1="12" x2="164" y2="170" stroke="#a21caf" stroke-width="2" stroke-dasharray="5 3"/>
<!-- vertex dots -->
<circle cx="140" cy="12" r="4" fill="#c026d3" stroke="#fff" stroke-width="1.5"/>
<circle cx="20" cy="170" r="4" fill="#c026d3" stroke="#fff" stroke-width="1.5"/>
<circle cx="260" cy="170" r="4" fill="#c026d3" stroke="#fff" stroke-width="1.5"/>
<circle cx="164" cy="170" r="4" fill="#a21caf" stroke="#fff" stroke-width="1.5"/>
<!-- labels -->
<text x="130" y="8" font-size="11" font-weight="700" fill="#86198f" font-family="Unbounded,sans-serif">A</text>
<text x="4" y="180" font-size="11" font-weight="700" fill="#86198f" font-family="Unbounded,sans-serif">B</text>
<text x="264" y="180" font-size="11" font-weight="700" fill="#86198f" font-family="Unbounded,sans-serif">C</text>
<text x="162" y="163" font-size="11" font-weight="700" fill="#86198f" font-family="Unbounded,sans-serif">D</text>
<!-- angle bisector arc mark at A -->
<path d="M126,30 A18,18 0 0,1 155,30" stroke="#c026d3" stroke-width="1.8" fill="rgba(192,38,211,.12)"/>
<!-- side labels -->
<text x="58" y="90" font-size="9" fill="#86198f" font-family="JetBrains Mono,monospace">AB=15</text>
<text x="186" y="90" font-size="9" fill="#86198f" font-family="JetBrains Mono,monospace">AC=10</text>
<text x="80" y="185" font-size="9" fill="#86198f" font-family="JetBrains Mono,monospace">BC=14</text>
<text x="148" y="155" font-size="9" fill="#86198f" font-family="JetBrains Mono,monospace">D=?</text>
</svg>`,
cond: 'В $\\triangle ABC$: $AB = 15$, $AC = 10$, $BC = 14$. $AD$ — биссектриса угла $A$. (§8)',
parts: [
{ label: 'Найди $BD$ (используй $BD/DC = AB/AC = 15/10$, $BD + DC = 14$).', ans: 8.4, tol: 0.05, hint: '$BD/DC = 3/2$, $BD = 14 \\cdot 3/5 = 8{,}4$' },
{ label: 'Найди $DC$.', ans: 5.6, tol: 0.05, hint: '$DC = 14 - BD = 14 - 8{,}4 = 5{,}6$' },
],
},
{
n: 3,
title: 'Признак УУ и площади',
color: '#059669',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Large triangle A(140,12) B(20,170) C(260,170), k=9/6=1.5. Small triangle A'(180,90) B'(130,170) C'(230,170) -->
<polygon points="140,12 20,170 260,170" fill="rgba(5,150,105,.08)" stroke="#059669" stroke-width="2"/>
<polygon points="180,90 130,170 230,170" fill="rgba(16,185,129,.18)" stroke="#10b981" stroke-width="2"/>
<!-- vertex dots large -->
<circle cx="140" cy="12" r="4" fill="#059669" stroke="#fff" stroke-width="1.5"/>
<circle cx="20" cy="170" r="4" fill="#059669" stroke="#fff" stroke-width="1.5"/>
<circle cx="260" cy="170" r="4" fill="#059669" stroke="#fff" stroke-width="1.5"/>
<!-- vertex dots small -->
<circle cx="180" cy="90" r="3.5" fill="#10b981" stroke="#fff" stroke-width="1.5"/>
<circle cx="130" cy="170" r="3.5" fill="#10b981" stroke="#fff" stroke-width="1.5"/>
<circle cx="230" cy="170" r="3.5" fill="#10b981" stroke="#fff" stroke-width="1.5"/>
<!-- labels large -->
<text x="128" y="8" font-size="11" font-weight="700" fill="#065f46" font-family="Unbounded,sans-serif">A</text>
<text x="4" y="180" font-size="11" font-weight="700" fill="#065f46" font-family="Unbounded,sans-serif">B</text>
<text x="264" y="180" font-size="11" font-weight="700" fill="#065f46" font-family="Unbounded,sans-serif">C</text>
<!-- labels small -->
<text x="184" y="88" font-size="9" font-weight="700" fill="#047857" font-family="Unbounded,sans-serif">A'</text>
<text x="116" y="180" font-size="9" font-weight="700" fill="#047857" font-family="Unbounded,sans-serif">B'</text>
<text x="232" y="180" font-size="9" font-weight="700" fill="#047857" font-family="Unbounded,sans-serif">C'</text>
<!-- side labels -->
<text x="55" y="85" font-size="9" fill="#065f46" font-family="JetBrains Mono,monospace">AB=6</text>
<text x="194" y="128" font-size="9" fill="#047857" font-family="JetBrains Mono,monospace">A'B'=9</text>
<text x="60" y="175" font-size="9" fill="#065f46" font-family="JetBrains Mono,monospace">S=12</text>
</svg>`,
cond: '$\\triangle ABC \\sim \\triangle A\'B\'C\'$ по двум углам. $AB = 6$, $A\'B\' = 9$, $S_{\\triangle ABC} = 12$ см². (§5, §9)',
parts: [
{ label: 'Найди коэффициент подобия $k = A\'B\'/AB$.', ans: 1.5, tol: 0.01, hint: '$k = 9/6 = 1{,}5$' },
{ label: 'Найди $S_{\\triangle A\'B\'C\'}$ (используй $S\'/S = k^2$).', ans: 27, hint: '$S\' = k^2 \\cdot S = 2{,}25 \\cdot 12 = 27$ см²' },
],
},
{
n: 4,
title: 'Деление отрезка в отношении',
color: '#d97706',
svg: `<svg viewBox="0 0 280 120" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Segment A(20,60) B(260,60). Total=240. m:n=3:2. AC=240*3/5=144. C=(20+144, 60)=(164, 60). -->
<line x1="20" y1="60" x2="260" y2="60" stroke="#d97706" stroke-width="2.5"/>
<circle cx="20" cy="60" r="5" fill="#d97706" stroke="#fff" stroke-width="2"/>
<circle cx="260" cy="60" r="5" fill="#d97706" stroke="#fff" stroke-width="2"/>
<circle cx="164" cy="60" r="5" fill="#b45309" stroke="#fff" stroke-width="2"/>
<!-- tick marks -->
<line x1="92" y1="50" x2="92" y2="70" stroke="#d97706" stroke-width="1.5"/>
<line x1="92" y1="50" x2="92" y2="70" stroke="#d97706" stroke-width="1.5"/>
<line x1="212" y1="50" x2="212" y2="70" stroke="#d97706" stroke-width="1.5"/>
<!-- brace AC label -->
<text x="20" y="44" font-size="11" font-weight="700" fill="#92400e" font-family="Unbounded,sans-serif">A</text>
<text x="158" y="44" font-size="11" font-weight="700" fill="#92400e" font-family="Unbounded,sans-serif">C</text>
<text x="254" y="44" font-size="11" font-weight="700" fill="#92400e" font-family="Unbounded,sans-serif">B</text>
<!-- distance labels -->
<text x="76" y="82" font-size="9" fill="#92400e" font-family="JetBrains Mono,monospace">AC=?</text>
<text x="185" y="82" font-size="9" fill="#92400e" font-family="JetBrains Mono,monospace">CB=?</text>
<!-- ratio label -->
<text x="78" y="100" text-anchor="middle" font-size="9" fill="#b45309" font-family="JetBrains Mono,monospace">3</text>
<text x="208" y="100" text-anchor="middle" font-size="9" fill="#b45309" font-family="JetBrains Mono,monospace">2</text>
<text x="140" y="30" text-anchor="middle" font-size="9" fill="#92400e" font-family="JetBrains Mono,monospace">AB = 20 см, AC:CB = 3:2</text>
</svg>`,
cond: 'Отрезок $AB = 20$ см. Точка $C$ делит $AB$ в отношении $AC{:}CB = 3{:}2$. (§2)',
parts: [
{ label: 'Найди $AC$ (см).', ans: 12, hint: '$AC = \\dfrac{3}{3+2} \\cdot 20 = 12$ см' },
{ label: 'Найди $CB$ (см).', ans: 8, hint: '$CB = \\dfrac{2}{5} \\cdot 20 = 8$ см' },
],
},
{
n: 5,
title: 'СУС: стороны и косинус',
color: '#8b5cf6',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Triangle ABC: AB=8, AC=12, angle A=60deg. Large. A'B'C' similar with k=1.5: A'B'=12, A'C'=18. Triangle A(40,160) B(200,160) C=A+AC*cos60deg, A+AC*sin60deg = (40+12*0.5*12, 160-12*sin60*12)... scale: AB=8 -> 120px, so 1cm=15px. A(30,155) B(30+120,155)=(150,155). C=A+(AC*cos60*15, -AC*sin60*15)=(30+90, 155-156)=(120, 0)... too tall. Use AB=8->100px scale (12.5px/cm). A(30,155) B(30+100,155)=(130,155). C=(30+12*0.5*12.5, 155-12*sin60*12.5)=(30+75, 155-129.9)=(105,25). -->
<polygon points="30,155 130,155 105,25" fill="rgba(139,92,246,.08)" stroke="#8b5cf6" stroke-width="2"/>
<!-- angle at A: arc -->
<path d="M52,155 A22,22 0 0,1 44,131" stroke="#8b5cf6" stroke-width="1.8" fill="rgba(139,92,246,.15)"/>
<text x="56" y="148" font-size="9" fill="#6d28d9" font-weight="700" font-family="JetBrains Mono,monospace">60°</text>
<!-- vertex dots -->
<circle cx="30" cy="155" r="4" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<circle cx="130" cy="155" r="4" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<circle cx="105" cy="25" r="4" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<!-- labels -->
<text x="16" y="151" font-size="11" font-weight="700" fill="#5b21b6" font-family="Unbounded,sans-serif">A</text>
<text x="134" y="168" font-size="11" font-weight="700" fill="#5b21b6" font-family="Unbounded,sans-serif">B</text>
<text x="94" y="18" font-size="11" font-weight="700" fill="#5b21b6" font-family="Unbounded,sans-serif">C</text>
<!-- side labels -->
<text x="72" y="172" text-anchor="middle" font-size="9" fill="#5b21b6" font-family="JetBrains Mono,monospace">AB=8</text>
<text x="62" y="92" font-size="9" fill="#5b21b6" font-family="JetBrains Mono,monospace">AC=12</text>
<!-- similar triangle labels -->
<text x="155" y="60" font-size="9" fill="#7c3aed" font-family="JetBrains Mono,monospace">k=1.5</text>
<text x="155" y="75" font-size="9" fill="#7c3aed" font-family="JetBrains Mono,monospace">A'B'=?</text>
<text x="155" y="90" font-size="9" fill="#7c3aed" font-family="JetBrains Mono,monospace">A'C'=?</text>
<text x="155" y="105" font-size="9" fill="#7c3aed" font-family="JetBrains Mono,monospace">B'C'=?</text>
</svg>`,
cond: '$\\triangle ABC \\sim \\triangle A\'B\'C\'$ (по СУС). $AB = 8$, $AC = 12$, $\\angle A = 60°$, $k = 1{,}5$. (§6)',
parts: [
{ label: 'Найди $A\'B\'$ (см).', ans: 12, hint: '$A\'B\' = k \\cdot AB = 1{,}5 \\cdot 8 = 12$' },
{ label: 'Найди $A\'C\'$ (см).', ans: 18, hint: '$A\'C\' = k \\cdot AC = 1{,}5 \\cdot 12 = 18$' },
{ label: 'Найди $BC$ по теореме косинусов: $BC^2 = AB^2+AC^2-2\\cdot AB\\cdot AC\\cdot\\cos60°$. Введи $BC$ (целое).', ans: 4, tol: 0.5, hint: '$BC^2 = 64+144-2\\cdot8\\cdot12\\cdot0{,}5 = 208-96=112$. Нет, пересчитаем: $BC^2=64+144-96=112 \\Rightarrow BC\\approx 10{,}58$. Округли до $11$.', _override: true, _ans_exact: 11, _tol_exact: 0.5, _hint_fix: 'По теореме косинусов: $BC^2 = 8^2+12^2-2\\cdot8\\cdot12\\cdot\\cos60° = 64+144-96=112$, $BC=\\sqrt{112}\\approx 10{,}58 \\approx 11$' },
],
},
{
n: 6,
title: 'Высоты и площади подобных',
color: '#0891b2',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Two similar triangles: large ABC (k=2 wrt small A'B'C') -->
<!-- Small A'B'C': A'(190,155) B'(130,155) C'(170,90). h'=65px -->
<!-- Large ABC: A(250,155) B(40,155) C(140,25). h=130px, k=2 -->
<polygon points="140,25 40,155 250,155" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="2"/>
<polygon points="170,90 130,155 210,155" fill="rgba(6,182,212,.20)" stroke="#06b6d4" stroke-width="1.8"/>
<!-- height of large -->
<line x1="140" y1="25" x2="140" y2="155" stroke="#0891b2" stroke-width="1.5" stroke-dasharray="4 2"/>
<path d="M140,155 L140,147 L148,147" fill="none" stroke="#0891b2" stroke-width="1.5"/>
<!-- height of small -->
<line x1="170" y1="90" x2="170" y2="155" stroke="#06b6d4" stroke-width="1.5" stroke-dasharray="3 2"/>
<path d="M170,155 L170,149 L176,149" fill="none" stroke="#06b6d4" stroke-width="1.5"/>
<!-- vertex dots large -->
<circle cx="140" cy="25" r="4" fill="#0891b2" stroke="#fff" stroke-width="1.5"/>
<circle cx="40" cy="155" r="4" fill="#0891b2" stroke="#fff" stroke-width="1.5"/>
<circle cx="250" cy="155" r="4" fill="#0891b2" stroke="#fff" stroke-width="1.5"/>
<!-- vertex dots small -->
<circle cx="170" cy="90" r="3.5" fill="#06b6d4" stroke="#fff" stroke-width="1.5"/>
<circle cx="130" cy="155" r="3.5" fill="#06b6d4" stroke="#fff" stroke-width="1.5"/>
<circle cx="210" cy="155" r="3.5" fill="#06b6d4" stroke="#fff" stroke-width="1.5"/>
<!-- labels large -->
<text x="126" y="20" font-size="11" font-weight="700" fill="#164e63" font-family="Unbounded,sans-serif">A</text>
<text x="24" y="167" font-size="11" font-weight="700" fill="#164e63" font-family="Unbounded,sans-serif">B</text>
<text x="254" y="167" font-size="11" font-weight="700" fill="#164e63" font-family="Unbounded,sans-serif">C</text>
<!-- labels small -->
<text x="174" y="88" font-size="9" font-weight="700" fill="#0e7490" font-family="Unbounded,sans-serif">A'</text>
<text x="116" y="166" font-size="9" font-weight="700" fill="#0e7490" font-family="Unbounded,sans-serif">B'</text>
<text x="212" y="166" font-size="9" font-weight="700" fill="#0e7490" font-family="Unbounded,sans-serif">C'</text>
<!-- height labels -->
<text x="144" y="88" font-size="9" fill="#164e63" font-family="JetBrains Mono,monospace">h=6</text>
<text x="174" y="128" font-size="9" fill="#0e7490" font-family="JetBrains Mono,monospace">h'=?</text>
<text x="4" y="130" font-size="9" fill="#0e7490" font-family="JetBrains Mono,monospace">S'=9</text>
<text x="4" y="144" font-size="9" fill="#164e63" font-family="JetBrains Mono,monospace">S=?</text>
<text x="4" y="158" font-size="9" fill="#164e63" font-family="JetBrains Mono,monospace">k=2</text>
</svg>`,
cond: '$\\triangle ABC \\sim \\triangle A\'B\'C\'$ с коэффициентом $k = 2$ (большой к малому). Высота $h_{ABC} = 6$ см, $S_{A\'B\'C\'} = 9$ см². (§9)',
parts: [
{ label: 'Найди $h\'$ (высоту малого треугольника).', ans: 3, hint: '$h\' = h/k = 6/2 = 3$ см (высоты подобных ~ $k$)' },
{ label: 'Найди $S_{ABC}$ (площадь большего треугольника).', ans: 36, hint: '$S/S\' = k^2 = 4 \\Rightarrow S = 4 \\cdot 9 = 36$ см²' },
],
},
{
n: 7,
title: 'Средняя линия и площади',
color: '#16a34a',
svg: `<svg viewBox="0 0 280 185" style="width:100%;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;display:block;margin:10px auto">
<!-- Triangle ABC: AB=14, BC=21. M midpoint AB. MN||BC, N on AC. k=AM/AB=1/2. MN=BC/2=10.5. A(140,12) B(20,170) C(260,170). M=midpoint(A,B)=(80,91). N=midpoint(A,C)=(200,91). -->
<polygon points="140,12 20,170 260,170" fill="rgba(22,163,74,.08)" stroke="#16a34a" stroke-width="2"/>
<line x1="80" y1="91" x2="200" y2="91" stroke="#15803d" stroke-width="2.5"/>
<!-- vertex dots -->
<circle cx="140" cy="12" r="4" fill="#16a34a" stroke="#fff" stroke-width="1.5"/>
<circle cx="20" cy="170" r="4" fill="#16a34a" stroke="#fff" stroke-width="1.5"/>
<circle cx="260" cy="170" r="4" fill="#16a34a" stroke="#fff" stroke-width="1.5"/>
<circle cx="80" cy="91" r="4" fill="#15803d" stroke="#fff" stroke-width="1.5"/>
<circle cx="200" cy="91" r="4" fill="#15803d" stroke="#fff" stroke-width="1.5"/>
<!-- tick marks M midpoint -->
<line x1="108" y1="48" x2="116" y2="56" stroke="#16a34a" stroke-width="1.8"/>
<line x1="37" y1="126" x2="45" y2="134" stroke="#16a34a" stroke-width="1.8"/>
<!-- labels -->
<text x="128" y="8" font-size="11" font-weight="700" fill="#14532d" font-family="Unbounded,sans-serif">A</text>
<text x="4" y="180" font-size="11" font-weight="700" fill="#14532d" font-family="Unbounded,sans-serif">B</text>
<text x="264" y="180" font-size="11" font-weight="700" fill="#14532d" font-family="Unbounded,sans-serif">C</text>
<text x="60" y="88" font-size="11" font-weight="700" fill="#14532d" font-family="Unbounded,sans-serif">M</text>
<text x="204" y="88" font-size="11" font-weight="700" fill="#14532d" font-family="Unbounded,sans-serif">N</text>
<!-- side labels -->
<text x="48" y="126" font-size="9" fill="#14532d" font-family="JetBrains Mono,monospace">AB=14</text>
<text x="108" y="185" font-size="9" fill="#14532d" font-family="JetBrains Mono,monospace">BC=21</text>
<text x="110" y="82" font-size="9" fill="#14532d" font-family="JetBrains Mono,monospace">MN=?</text>
</svg>`,
cond: 'В $\\triangle ABC$: $AB = 14$, $BC = 21$. $M$ — середина $AB$, $N$ на $AC$ так, что $MN \\parallel BC$. (§4, §9)',
parts: [
{ label: 'Найди $MN$ (используй $k = AM/AB = 1/2$, $MN = k \\cdot BC$).', ans: 10.5, tol: 0.05, hint: '$k = 7/14 = 1/2$, $MN = 1/2 \\cdot 21 = 10{,}5$ см' },
{ label: 'Найди $AN/NC$ (какое оно?).', ans: 1, hint: '$M$ — середина $AB \\Rightarrow k = 1/2 \\Rightarrow AN/NC = AM/MB = 1/1$, т.е. $N$ — середина $AC$' },
{ label: 'Найди отношение $S_{\\triangle AMN}/S_{\\triangle ABC}$ (введи как десятичную дробь).', ans: 0.25, tol: 0.01, hint: '$S_{AMN}/S_{ABC} = k^2 = (1/2)^2 = 0{,}25$' },
],
},
];
window.final3BossSolved = new Set();
const bossBox = document.getElementById('final3-bosses');
bossBox.innerHTML = bosses.map(b => {
const partsHtml = b.parts.map((p,pi) => {
return `<div style="padding:10px 0;border-top:1px dashed var(--border)">
<div style="font-size:.9rem;margin-bottom:7px">${p.label}</div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<input type="number" step="any" class="tinp final3-boss-inp" data-b="${b.n-1}" data-p="${pi}" placeholder="Ответ" style="width:120px">
<button class="btn primary final3-boss-check" data-b="${b.n-1}" data-p="${pi}" style="background:${b.color};border-color:${b.color}">Проверить</button>
<span class="final3-boss-ok" data-b="${b.n-1}" data-p="${pi}" style="display:none;color:var(--ok);font-weight:700">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:16px;height:16px;vertical-align:middle"><polyline points="20 6 9 17 4 12"/></svg>
</span>
</div>
<div class="feedback final3-boss-fb" data-b="${b.n-1}" data-p="${pi}" style="display:none;margin-top:6px"></div>
</div>`;
}).join('');
const svgHtml = b.svg ? `<div style="display:flex;justify-content:center;margin:10px 0">${b.svg}</div>` : '';
return `<div style="padding:16px;background:var(--card);border-radius:12px;border:2px solid ${b.color};margin-bottom:14px" id="final3-boss-card-${b.n-1}">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap">
<span style="background:${b.color};color:#fff;padding:4px 10px;border-radius:6px;font-family:'Unbounded',sans-serif;font-size:.7rem;font-weight:800">БОСС ${b.n}</span>
<span style="font-family:'Unbounded',sans-serif;font-size:.88rem;font-weight:800;color:${b.color}">${b.title}</span>
<span id="final3-boss-xp-${b.n-1}" style="margin-left:auto;display:none;background:var(--ok-bg);color:#065f46;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:800">+10 XP</span>
</div>
<div style="padding:10px 14px;background:linear-gradient(135deg,#ede9fe,#fff);border-left:4px solid ${b.color};border-radius:9px;font-size:.92rem;line-height:1.6;margin-bottom:4px">${b.cond}</div>
${svgHtml}
${partsHtml}
</div>`;
}).join('');
function checkPart(bi, pi){
const boss = bosses[bi];
const part = boss.parts[pi];
const inp = bossBox.querySelector(`.final3-boss-inp[data-b="${bi}"][data-p="${pi}"]`);
const fb = bossBox.querySelector(`.final3-boss-fb[data-b="${bi}"][data-p="${pi}"]`);
const ok = bossBox.querySelector(`.final3-boss-ok[data-b="${bi}"][data-p="${pi}"]`);
if(!inp) return;
const val = parseFloat(inp.value);
const useExact = part._override && part._ans_exact !== undefined;
const ansCheck = useExact ? part._ans_exact : part.ans;
const tolCheck = useExact ? part._tol_exact : (part.tol !== undefined ? part.tol : 0);
const hintText = useExact ? part._hint_fix : part.hint;
if(Math.abs(val - ansCheck) <= tolCheck){
feedback(fb, true, 'Верно! ' + (hintText ? '<br><span style="font-size:.82rem;opacity:.85">' + hintText + '</span>' : ''));
inp.disabled = true;
const btn = bossBox.querySelector(`.final3-boss-check[data-b="${bi}"][data-p="${pi}"]`);
if(btn) btn.disabled = true;
if(ok) ok.style.display = 'inline';
const allDone = boss.parts.every((_,pj) => {
const el = bossBox.querySelector(`.final3-boss-inp[data-b="${bi}"][data-p="${pj}"]`);
return el && el.disabled;
});
if(allDone && !window.final3BossSolved.has(bi)){
window.final3BossSolved.add(bi);
addXp(10, 'final3-boss-' + (bi+1));
const xpBadge = document.getElementById('final3-boss-xp-' + bi);
if(xpBadge) xpBadge.style.display = 'inline';
bumpProgress('final3', 8);
if(window.final3BossSolved.size === bosses.length){
setTimeout(()=>{
confetti();
if(!STATE.achievements.has('final3-master')){
STATE.achievements.set('final3-master', 'Мастер подобия Главы 3');
saveProgress();
const pop = document.getElementById('ach-popup');
if(pop){ document.getElementById('ach-text').textContent = 'Мастер подобия Главы 3!'; pop.classList.add('show'); setTimeout(()=>pop.classList.remove('show'), 4000); }
}
addXp(50, 'final3-all-bosses');
bumpProgress('final3', 20);
const fin = document.getElementById('final3-finish');
if(fin) fin.style.display = 'block';
}, 500);
}
}
} else {
feedback(fb, false, 'Неверно. Подсказка: ' + (hintText || part.hint));
}
}
bossBox.querySelectorAll('.final3-boss-check').forEach(btn=>{
btn.addEventListener('click', ()=>{ checkPart(+btn.dataset.b, +btn.dataset.p); });
});
bossBox.querySelectorAll('.final3-boss-inp').forEach(inp=>{
inp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ const btn=bossBox.querySelector(`.final3-boss-check[data-b="${inp.dataset.b}"][data-p="${inp.dataset.p}"]`); if(btn)btn.click(); } });
});
})();
renderMath(box);
}
</script>
</body>
</html>