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

feat(geom8): Wave 5 — финал Главы 4 (ПОСЛЕДНИЙ параграф Геометрии 8!)

Browse Source 
Часть 1: 16 mini-cards со SVG-иконками и формулами в KaTeX
для всех §1-§16 (касательные, дуги, вписанные углы, произведения).

Часть 2: интерактивная карта связей (SVG 620×360):
центральный узел 'ОКРУЖНОСТЬ' → 3 ветви (Касательные §1-7,
Углы §8-14, Отрезки §15-16). Кликабельные узлы с формулами.

Часть 3: 7 интегрированных боссов (по 10 XP):
  Босс 1 (§1+§3): R=5, OP=13 → PT=12, периметр=34
  Босс 2 (§9+§11): диаметр AB, ∠CAB=35° → ∠ACB=90°, ∠ABC=55°
  Босс 3 (§10+§13): хорды, дуги 70°/50° → ∠P=60°, ∠ADC=35°
  Босс 4 (§14): две секущие, дуги 100°/40° → ∠P=30°
  Босс 5 (§15): PA=4 PB=9 PC=6 → PD=6
  Босс 6 (§16): PT=8 AB=12 → PA=4, PB=16
  Босс 7 (§7): R₁=6 R₂=2 d=10 → ℓ=√84≈9.17

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

File: 6712 → 7381 LOC. ГЛАВА 4 ПОЛНОСТЬЮ ЗАВЕРШЕНА.

🎉 ВСЯ ГЕОМЕТРИЯ 8 ЗАВЕРШЕНА:
  Глава 1 (Многоугольники, 16§+финал): 5560 LOC
  Глава 2 (Площади, 15§+финал): 7144 LOC
  Глава 3 (Подобие, 9§+финал): 4709 LOC
  Глава 4 (Окружности, 16§+финал): 7381 LOC

Итого: 56 параграфов + 4 финала = 60 разделов, 24,794 LOC.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-28 20:33:48 +03:00
parent 9b6a9adaf9
commit ac10ebdd21
1 changed files with 665 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/geometry_8_ch4.html
+665 -2
View File
@@ -359,7 +359,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(),p10:()=>buildP10(),p11:()=>buildP11(),p12:()=>buildP12(),p13:()=>buildP13(),p14:()=>buildP14(),p15:()=>buildP15(),p16:()=>buildP16(),final4:()=>buildFinal4stub()};
const BUILDERS={p1:()=>buildP1(),p2:()=>buildP2(),p3:()=>buildP3(),p4:()=>buildP4(),p5:()=>buildP5(),p6:()=>buildP6(),p7:()=>buildP7(),p8:()=>buildP8(),p9:()=>buildP9(),p10:()=>buildP10(),p11:()=>buildP11(),p12:()=>buildP12(),p13:()=>buildP13(),p14:()=>buildP14(),p15:()=>buildP15(),p16:()=>buildP16(),final4:()=>buildFinal4()};
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);}
@@ -6712,7 +6712,670 @@ function buildP16(){
if(window.renderMathInElement) try{renderMath(cont);}catch(e){}
})();
}
function buildFinal4stub(){ document.getElementById('final4-body').innerHTML='<div class="card"><div class="card-body"><p><b>Финал главы 4 — Волна 1</b>: боссы и итоги появятся в следующем обновлении.</p></div></div>'+secNav('p16',null); }
function buildFinal4(){
const box = document.getElementById('final4-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"><circle cx="12" cy="12" r="10"/><line x1="12" y1="2" x2="12" y2="12"/><line x1="12" y1="12" x2="18" y2="16"/></svg>
</div>
<div class="card-title">Итоговая шпаргалка · Вся Глава 4 «Окружности»</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">
<circle cx="28" cy="34" r="18" fill="rgba(8,145,178,.10)" stroke="#0891b2" stroke-width="2"/>
<line x1="10" y1="34" x2="66" y2="34" stroke="#0e7490" stroke-width="2"/>
<line x1="28" y1="34" x2="28" y2="16" stroke="#0891b2" stroke-width="1.8" stroke-dasharray="3 2"/>
<path d="M28,34 L34,34 L34,28" fill="none" stroke="#0e7490" stroke-width="1.5"/>
<circle cx="28" cy="34" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<text x="20" y="13" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">R</text>
<text x="48" y="31" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">t</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$t \\perp R \\Leftrightarrow d = R$</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 Свойство касательной</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$OT \\perp t,\\; OT = R$</p>
<p style="font-size:.82rem;margin-bottom:4px">расстояние $d(O,t) = R$</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">§3 Касательные из точки</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="28" cy="30" r="16" fill="rgba(8,145,178,.10)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="60" y1="30" x2="15" y2="16" stroke="#0e7490" stroke-width="1.8"/>
<line x1="60" y1="30" x2="15" y2="44" stroke="#0e7490" stroke-width="1.8"/>
<circle cx="60" cy="30" r="3" fill="#0e7490" stroke="#fff" stroke-width="1.2"/>
<circle cx="15" cy="16" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<circle cx="15" cy="44" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<text x="62" y="28" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">A</text>
<text x="4" y="14" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">T1</text>
<text x="4" y="48" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">T2</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$AT_1 = AT_2$</p>
<p style="font-size:.78rem;color:var(--muted)">равны, $OA$ — биссектриса</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">§4 Построение касательной</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">окружность на $OA$ как диаметре</p>
<p style="font-size:.82rem;margin-bottom:4px">точки пересечения $T_1, T_2$</p>
<p style="font-size:.78rem;color:var(--muted)">$\\angle OT_1A = 90°$ (Фалес)</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">§5 Окружность в угол</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">центр на биссектрисе угла</p>
<p style="font-size:.82rem;margin-bottom:4px">$R = d(O, \\ \\ \text{стор})$</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">§6 Два круга: 5 случаев</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="22" cy="30" r="16" fill="none" stroke="#0891b2" stroke-width="1.8"/>
<circle cx="48" cy="30" r="12" fill="none" stroke="#0e7490" stroke-width="1.8"/>
<circle cx="22" cy="30" r="2.5" fill="#0891b2"/>
<circle cx="48" cy="30" r="2.5" fill="#0e7490"/>
<line x1="22" y1="30" x2="48" y2="30" stroke="#64748b" stroke-width="1" stroke-dasharray="2 2"/>
<text x="14" y="12" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">O1</text>
<text x="42" y="12" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">O2</text>
</svg>
<div>
<p style="font-size:.82rem;margin-bottom:4px">$d > R_1{+}R_2$: нет точек</p>
<p style="font-size:.82rem;margin-bottom:4px">$d = R_1{+}R_2$: вн. касание</p>
<p style="font-size:.78rem;color:var(--muted)">5 взаим. расположений</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">§7 Общая касательная</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">внешняя: $\\ell = \\sqrt{d^2-(R_1-R_2)^2}$</p>
<p style="font-size:.82rem;margin-bottom:4px">внутренняя: $\\ell = \\sqrt{d^2-(R_1+R_2)^2}$</p>
<p style="font-size:.78rem;color:var(--muted)">$d$ — расст. между центрами</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">
<circle cx="35" cy="33" r="22" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="35" y1="33" x2="52" y2="14" stroke="#0e7490" stroke-width="1.8"/>
<line x1="35" y1="33" x2="55" y2="42" stroke="#0e7490" stroke-width="1.8"/>
<path d="M49,16 A18,18 0 0,1 54,41" stroke="#e07b00" stroke-width="2.5" fill="none"/>
<circle cx="35" cy="33" r="2.5" fill="#0891b2"/>
<text x="30" y="30" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">O</text>
<text x="53" y="12" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">A</text>
<text x="57" y="46" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">B</text>
<text x="58" y="28" font-size="7" fill="#e07b00" font-family="JetBrains Mono,monospace">&#x2322;</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle AOB$ — центр. угол</p>
<p style="font-size:.78rem;color:var(--muted)">дуга $\\smile AB = \\angle AOB$</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 style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="35" cy="32" r="22" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="14" y1="43" x2="56" y2="14" stroke="#0e7490" stroke-width="1.8"/>
<line x1="14" y1="43" x2="56" y2="51" stroke="#0e7490" stroke-width="1.8"/>
<circle cx="14" cy="43" r="3" fill="#0e7490" stroke="#fff" stroke-width="1.2"/>
<circle cx="56" cy="14" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<circle cx="56" cy="51" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<text x="2" y="42" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">C</text>
<text x="59" y="12" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">A</text>
<text x="59" y="54" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">B</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle ACB = \\dfrac{1}{2}\\angle AOB$</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">§10 Углы на одну дугу</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle ACB = \\angle ADB$</p>
<p style="font-size:.82rem;margin-bottom:4px">$C, D$ на одной стороне от $AB$</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">§11 Угол на диаметр</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="35" cy="33" r="22" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="13" y1="33" x2="57" y2="33" stroke="#0e7490" stroke-width="2"/>
<line x1="13" y1="33" x2="35" y2="11" stroke="#0891b2" stroke-width="1.8"/>
<line x1="57" y1="33" x2="35" y2="11" stroke="#0891b2" stroke-width="1.8"/>
<path d="M31,18 L35,15 L39,18" fill="none" stroke="#e07b00" stroke-width="1.5"/>
<circle cx="13" cy="33" r="3" fill="#0e7490" stroke="#fff" stroke-width="1.2"/>
<circle cx="57" cy="33" r="3" fill="#0e7490" stroke="#fff" stroke-width="1.2"/>
<circle cx="35" cy="11" r="3" fill="#0891b2" stroke="#fff" stroke-width="1.2"/>
<text x="2" y="44" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">A</text>
<text x="60" y="44" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">B</text>
<text x="32" y="8" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">C</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle ACB = 90°$</p>
<p style="font-size:.78rem;color:var(--muted)">$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">§12 Угол касат. и хорды</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle(t, AB) = \\dfrac{1}{2}\\smile AB$</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">§13 Угол двух хорд</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle P = \\dfrac{1}{2}(\\smile AC + \\smile BD)$</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">§14 Угол двух секущих</div>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$\\angle P = \\dfrac{1}{2}|\\smile AC - \\smile BD|$</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">§15 Произведение хорд</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="35" cy="30" r="22" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="13" y1="42" x2="60" y2="20" stroke="#0e7490" stroke-width="1.8"/>
<line x1="16" y1="16" x2="57" y2="46" stroke="#0891b2" stroke-width="1.8"/>
<circle cx="36" cy="32" r="3" fill="#e07b00" stroke="#fff" stroke-width="1.2"/>
<text x="31" y="29" font-size="7" fill="#e07b00" font-family="JetBrains Mono,monospace">P</text>
<text x="2" y="46" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">A</text>
<text x="62" y="18" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">B</text>
<text x="8" y="14" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">C</text>
<text x="59" y="50" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">D</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$PA \\cdot PB = PC \\cdot PD$</p>
<p style="font-size:.78rem;color:var(--muted)">хорды AB, CD пересеч. в P</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">§16 Касательная и секущая</div>
<div style="display:flex;align-items:center;gap:10px">
<svg viewBox="0 0 70 60" style="width:70px;height:60px;flex-shrink:0">
<circle cx="38" cy="30" r="20" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
<line x1="10" y1="50" x2="55" y2="12" stroke="#0e7490" stroke-width="2"/>
<line x1="10" y1="50" x2="63" y2="38" stroke="#0891b2" stroke-width="1.8"/>
<circle cx="10" cy="50" r="3" fill="#e07b00" stroke="#fff" stroke-width="1.2"/>
<circle cx="55" cy="12" r="3" fill="#0e7490" stroke="#fff" stroke-width="1.2"/>
<text x="3" y="49" font-size="7" fill="#e07b00" font-family="JetBrains Mono,monospace">P</text>
<text x="57" y="10" font-size="7" fill="#0e7490" font-family="JetBrains Mono,monospace">T</text>
<text x="50" y="56" font-size="7" fill="#0891b2" font-family="JetBrains Mono,monospace">A B</text>
</svg>
<div>
<p style="font-size:.88rem;margin-bottom:4px">$PT^2 = PA \\cdot PB$</p>
<p style="font-size:.78rem;color:var(--muted)">T — точка касания</p>
</div>
</div>
</div>
</div>
</div>
</div>`;
/* === ЧАСТЬ 2: Интерактивная карта связей === */
html += `<div class="wg" id="final4-map-wrap">
<div class="wg-header"><span class="wg-badge">КАРТА СВЯЗЕЙ</span><div class="wg-title">Окружность: касательные, углы, произведения отрезков</div></div>
<div class="wg-help">Нажми на узел, чтобы увидеть формулу и способ применения.</div>
<div id="final4-map-svg" style="display:flex;justify-content:center;overflow-x:auto"></div>
<div id="final4-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:#0891b2;background:linear-gradient(135deg,var(--card),#cffafe)">
<div class="wg-header">
<span class="wg-badge" style="background:#0891b2">7 БОССОВ ГЛАВЫ 4</span>
<div class="wg-title">Интегрированные задачи</div>
</div>
<div class="wg-help">Каждая задача объединяет 2–3 темы главы. +10 XP за каждого побеждённого босса. Победи всех семерых — получишь +50 XP и достижение «Мастер окружностей Главы 4»!</div>
<div id="final4-bosses"></div>
</div>`;
/* === ЧАСТЬ 4: Финальная плашка === */
html += `<div id="final4-finish" style="display:none;margin-top:20px;padding:24px;background:linear-gradient(135deg,#cffafe,#e0f2fe);border:2px solid #0891b2;border-radius:16px;text-align:center">
<div style="font-family:'Unbounded',sans-serif;font-size:1.2rem;font-weight:900;color:#164e63;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"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>
Мастер окружностей Главы 4!
</div>
<p style="color:#164e63;font-size:.95rem;margin-bottom:16px">Ты победил всех 7 боссов и освоил всю Главу 4 «Окружности». Геометрия 8 завершена — превосходная работа!</p>
<a href="/textbooks" 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>
К списку учебников
</a>
</div>`;
html += `<div style="margin-top:18px;display:flex;justify-content:center">
<button class="btn primary" id="final4-read-btn" onclick="addXp(10,'final4-read');bumpProgress('final4',40);this.textContent='Прочитано!';this.disabled=true;">
<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="2" x2="12" y2="12"/><line x1="12" y1="12" x2="18" y2="16"/></svg>
Я изучил Главу 4 (+10 XP)
</button>
</div>`;
html += secNav('p16', null);
box.innerHTML = html;
/* === JS: Карта связей SVG === */
(function(){
const W = 620, H = 360;
const nodes = [
{ id:'circ', x:310, y:30, rx:64, label:'ОКРУЖНОСТЬ',
props:'Центральная тема главы 4. Окружность радиуса $R$ с центром $O$ — множество точек, равноудалённых от $O$.' },
{ id:'tang', x:100, y:120, rx:60, label:'Касательные §1–7',
props:'§1–7: касательная $\\perp$ радиусу в точке касания; из внешней точки равны два отрезка касательных; 5 взаимных расположений окружностей; $\\ell = \\sqrt{d^2-(R_1{\\pm}R_2)^2}$.' },
{ id:'angl', x:310, y:120, rx:60, label:'Углы §8–14',
props:'§8–14: центральный угол = дуга; вписанный = ½ центрального; углы на одну дугу равны; угол на диаметр = 90°; угол (касательная, хорда) = ½ дуга; угол двух хорд = ½(дуга₁+дуга₂); угол двух секущих = ½|дуга₁−дуга₂|.' },
{ id:'prod', x:510, y:120, rx:60, label:'Отрезки §15–16',
props:'§15: хорды $PA\\cdot PB = PC\\cdot PD$. §16: касательная и секущая $PT^2 = PA\\cdot PB$. Оба факта доказываются через подобие треугольников.' },
{ id:'t13', x:80, y:230, rx:52, label:'§3 Равные касат.',
props:'§3: из внешней точки $A$ отрезки касательных равны: $AT_1 = AT_2$. Прямая $OA$ является биссектрисой угла $T_1AT_2$.' },
{ id:'t67', x:220, y:230, rx:52, label:'§6–7 Два круга',
props:'§6–7: 5 случаев взаимного расположения; длина внешней общей касательной $\\ell = \\sqrt{d^2-(R_1-R_2)^2}$, внутренней $\\ell = \\sqrt{d^2-(R_1+R_2)^2}$.' },
{ id:'t911', x:380, y:230, rx:52, label:'§9–11 Вписанный',
props:'§9: вписанный угол = ½ центрального. §10: вписанные на одну дугу равны. §11: вписанный угол, опирающийся на диаметр, равен 90°.' },
{ id:'t1214', x:530, y:230, rx:52, label:'§12–14 Угол и дуга',
props:'§12: угол между касательной и хордой = ½ дуга. §13: угол между двумя хордами = ½(дуга₁+дуга₂). §14: угол между двумя секущими из внешней точки = ½|дуга₁−дуга₂|.' },
{ id:'t15', x:200, y:320, rx:52, label:'§15 Хорды',
props:'§15: если хорды $AB$ и $CD$ пересекаются в точке $P$ внутри окружности, то $PA\\cdot PB = PC\\cdot PD$. Доказывается через подобие $\\triangle PAC\\sim\\triangle PDB$.' },
{ id:'t16', x:420, y:320, rx:52, label:'§16 Касат.+секущая',
props:'§16: если из точки $P$ проведены касательная $PT$ и секущая $PAB$, то $PT^2 = PA\\cdot PB$. Следствие подобия $\\triangle PTA\\sim\\triangle PBT$.' },
];
const edges = [
['circ','tang'],['circ','angl'],['circ','prod'],
['tang','t13'],['tang','t67'],
['angl','t911'],['angl','t1214'],
['prod','t15'],['prod','t16'],
];
let sel = null;
function draw(selId){
const colors = { circ:'#0891b2', tang:'#0e7490', angl:'#0284c7', prod:'#0369a1',
t13:'#06b6d4', t67:'#0891b2', t911:'#2563eb', t1214:'#7c3aed',
t15:'#0369a1', t16:'#0891b2' };
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="f4-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.50;
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.50+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?'#0891b2':'#94a3b8'}" stroke-width="${isAct?2.5:1.5}" marker-end="url(#f4-arr)"/>`;
});
nodes.forEach(n=>{
const isS = selId===n.id;
const col = colors[n.id] || '#0891b2';
const ry = n.rx * 0.50;
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('final4-map-svg').innerHTML = s;
document.getElementById('final4-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('final4-map-info').innerHTML = '<b>' + nd.label + '</b>: ' + nd.props; renderMath(document.getElementById('final4-map-info')); }
else document.getElementById('final4-map-info').textContent = 'Нажми на узел в схеме выше';
draw(sel);
});
}
draw(null);
})();
/* === JS: 7 боссов === */
(function(){
const bosses = [
{
n: 1,
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">
<circle cx="90" cy="92" r="50" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="2"/>
<circle cx="90" cy="92" r="2.5" fill="#0891b2"/>
<circle cx="240" cy="92" r="4" fill="#0e7490" stroke="#fff" stroke-width="1.5"/>
<line x1="90" y1="92" x2="48" y2="45" stroke="#0891b2" stroke-width="1.5" stroke-dasharray="3 2"/>
<line x1="90" y1="92" x2="48" y2="139" stroke="#0891b2" stroke-width="1.5" stroke-dasharray="3 2"/>
<line x1="240" y1="92" x2="48" y2="45" stroke="#0e7490" stroke-width="2"/>
<line x1="240" y1="92" x2="48" y2="139" stroke="#0e7490" stroke-width="2"/>
<path d="M52,53 L44,50 L44,58" fill="none" stroke="#0e7490" stroke-width="1.5"/>
<path d="M52,131 L44,134 L44,126" fill="none" stroke="#0e7490" stroke-width="1.5"/>
<circle cx="48" cy="45" r="3.5" fill="#0891b2" stroke="#fff" stroke-width="1.5"/>
<circle cx="48" cy="139" r="3.5" fill="#0891b2" stroke="#fff" stroke-width="1.5"/>
<text x="86" y="88" font-size="9" fill="#0e7490" font-family="Unbounded,sans-serif" font-weight="800">O</text>
<text x="243" y="96" font-size="10" fill="#0e7490" font-family="Unbounded,sans-serif" font-weight="800">P</text>
<text x="34" y="42" font-size="10" fill="#0891b2" font-family="Unbounded,sans-serif" font-weight="800">T1</text>
<text x="34" y="152" font-size="10" fill="#0891b2" font-family="Unbounded,sans-serif" font-weight="800">T2</text>
<text x="110" y="68" font-size="9" fill="#0e7490" font-family="JetBrains Mono,monospace">R=5</text>
<text x="155" y="80" font-size="9" fill="#0e7490" font-family="JetBrains Mono,monospace">|OP|=13</text>
</svg>`,
cond: 'Из точки $P$ к окружности с центром $O$ и радиусом $R = 5$ проведены две касательные $PT_1$ и $PT_2$. $|OP| = 13$. (§1, §3)',
parts: [
{ label: 'Найди длину касательной $PT_1$ (в единицах).', ans: 12, hint: '$OT_1 \\perp PT_1$, теорема Пифагора: $PT_1 = \\sqrt{OP^2 - R^2} = \\sqrt{169-25} = \\sqrt{144} = 12$' },
{ label: 'Найди периметр четырёхугольника $OT_1PT_2$.', ans: 34, hint: '$P = PT_1 + OT_1 + PT_2 + OT_2 = 12+5+12+5 = 34$. По §3: $PT_1=PT_2=12$.' },
],
},
{
n: 2,
title: 'Вписанный угол и диаметр',
color: '#0284c7',
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">
<circle cx="140" cy="95" r="76" fill="rgba(2,132,199,.08)" stroke="#0284c7" stroke-width="2"/>
<circle cx="140" cy="95" r="2.5" fill="#0284c7"/>
<line x1="64" y1="95" x2="216" y2="95" stroke="#0369a1" stroke-width="2.5"/>
<line x1="64" y1="95" x2="190" y2="28" stroke="#0284c7" stroke-width="1.8"/>
<line x1="216" y1="95" x2="190" y2="28" stroke="#0284c7" stroke-width="1.8"/>
<path d="M74,95 A12,12 0 0,0 68,84" fill="none" stroke="#e07b00" stroke-width="1.8"/>
<path d="M182,38 L182,28 L192,28" fill="none" stroke="#e07b00" stroke-width="1.5"/>
<circle cx="64" cy="95" r="4" fill="#0369a1" stroke="#fff" stroke-width="1.5"/>
<circle cx="216" cy="95" r="4" fill="#0369a1" stroke="#fff" stroke-width="1.5"/>
<circle cx="190" cy="28" r="4" fill="#0284c7" stroke="#fff" stroke-width="1.5"/>
<text x="48" y="110" font-size="11" font-weight="700" fill="#0369a1" font-family="Unbounded,sans-serif">A</text>
<text x="218" y="110" font-size="11" font-weight="700" fill="#0369a1" font-family="Unbounded,sans-serif">B</text>
<text x="192" y="24" font-size="11" font-weight="700" fill="#0284c7" font-family="Unbounded,sans-serif">C</text>
<text x="136" y="90" font-size="9" fill="#0369a1" font-family="Unbounded,sans-serif" font-weight="800">O</text>
<text x="67" y="82" font-size="9" fill="#e07b00" font-family="JetBrains Mono,monospace">35°</text>
<text x="103" y="175" font-size="9" fill="#0284c7" font-family="JetBrains Mono,monospace">AB — диаметр</text>
</svg>`,
cond: 'В окружности $AB$ — диаметр, $C$ — точка на окружности. $\\angle CAB = 35°$. (§9, §11)',
parts: [
{ label: 'Найди $\\angle ACB$ (в градусах).', ans: 90, hint: '$\\angle ACB = 90°$ — вписанный угол, опирающийся на диаметр $AB$ (§11).' },
{ label: 'Найди $\\angle ABC$ (в градусах).', ans: 55, hint: '$\\angle ACB = 90°$, $\\angle CAB = 35°$, $\\angle ABC = 180° - 90° - 35° = 55°$.' },
],
},
{
n: 3,
title: 'Вписанные углы + пересечение хорд',
color: '#7c3aed',
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">
<circle cx="140" cy="92" r="72" fill="rgba(124,58,237,.08)" stroke="#7c3aed" stroke-width="2"/>
<circle cx="140" cy="92" r="2.5" fill="#7c3aed"/>
<line x1="78" y1="52" x2="202" y2="145" stroke="#6d28d9" stroke-width="1.8"/>
<line x1="80" y1="148" x2="200" y2="48" stroke="#4f46e5" stroke-width="1.8"/>
<circle cx="142" cy="97" r="4" fill="#e07b00" stroke="#fff" stroke-width="1.5"/>
<circle cx="78" cy="52" r="4" fill="#6d28d9" stroke="#fff" stroke-width="1.5"/>
<circle cx="202" cy="145" r="4" fill="#6d28d9" stroke="#fff" stroke-width="1.5"/>
<circle cx="80" cy="148" r="4" fill="#4f46e5" stroke="#fff" stroke-width="1.5"/>
<circle cx="200" cy="48" r="4" fill="#4f46e5" stroke="#fff" stroke-width="1.5"/>
<text x="63" y="50" font-size="11" font-weight="700" fill="#6d28d9" font-family="Unbounded,sans-serif">A</text>
<text x="204" y="160" font-size="11" font-weight="700" fill="#6d28d9" font-family="Unbounded,sans-serif">C</text>
<text x="65" y="162" font-size="11" font-weight="700" fill="#4f46e5" font-family="Unbounded,sans-serif">B</text>
<text x="202" y="46" font-size="11" font-weight="700" fill="#4f46e5" font-family="Unbounded,sans-serif">D</text>
<text x="148" y="94" font-size="10" font-weight="700" fill="#e07b00" font-family="Unbounded,sans-serif">P</text>
<text x="90" y="20" font-size="9" fill="#6d28d9" font-family="JetBrains Mono,monospace">&#x2322;AC=70°</text>
<text x="172" y="175" font-size="9" fill="#4f46e5" font-family="JetBrains Mono,monospace">&#x2322;BD=50°</text>
</svg>`,
cond: 'В окружности хорды $AB$ и $CD$ пересекаются в точке $P$. Дуга $\\smile AC = 70°$, дуга $\\smile BD = 50°$. (§10, §13)',
parts: [
{ label: 'Найди угол при пересечении хорд в точке $P$ (в градусах).', ans: 60, hint: '$\\angle APD = \\dfrac{1}{2}(\\smile AC + \\smile BD) = \\dfrac{1}{2}(70+50) = 60°$ (§13).' },
{ label: 'Найди $\\angle ADC$ — вписанный угол, опирающийся на дугу $AC$ (в градусах).', ans: 35, hint: '$\\angle ADC = \\dfrac{1}{2}\\smile AC = \\dfrac{1}{2}\\cdot 70° = 35°$ (§10).' },
],
},
{
n: 4,
title: 'Две секущие из внешней точки',
color: '#0369a1',
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">
<circle cx="155" cy="90" r="62" fill="rgba(3,105,161,.08)" stroke="#0369a1" stroke-width="2"/>
<circle cx="155" cy="90" r="2.5" fill="#0369a1"/>
<line x1="20" y1="90" x2="217" y2="50" stroke="#0284c7" stroke-width="1.8"/>
<line x1="20" y1="90" x2="215" y2="132" stroke="#0369a1" stroke-width="1.8"/>
<circle cx="20" cy="90" r="4" fill="#0369a1" stroke="#fff" stroke-width="1.5"/>
<circle cx="95" cy="58" r="3.5" fill="#0284c7" stroke="#fff" stroke-width="1.5"/>
<circle cx="217" cy="50" r="3.5" fill="#0284c7" stroke="#fff" stroke-width="1.5"/>
<circle cx="97" cy="122" r="3.5" fill="#0369a1" stroke="#fff" stroke-width="1.5"/>
<circle cx="215" cy="132" r="3.5" fill="#0369a1" stroke="#fff" stroke-width="1.5"/>
<text x="4" y="103" font-size="11" font-weight="700" fill="#0369a1" font-family="Unbounded,sans-serif">P</text>
<text x="85" y="52" font-size="10" font-weight="700" fill="#0284c7" font-family="Unbounded,sans-serif">B</text>
<text x="220" y="48" font-size="10" font-weight="700" fill="#0284c7" font-family="Unbounded,sans-serif">A</text>
<text x="84" y="136" font-size="10" font-weight="700" fill="#0369a1" font-family="Unbounded,sans-serif">D</text>
<text x="218" y="146" font-size="10" font-weight="700" fill="#0369a1" font-family="Unbounded,sans-serif">C</text>
<path d="M94,66 A10,10 0 0,0 32,90" fill="none" stroke="#e07b00" stroke-width="1.5" stroke-dasharray="3 2"/>
<text x="28" y="76" font-size="9" fill="#e07b00" font-family="JetBrains Mono,monospace">?</text>
<text x="148" y="18" font-size="9" fill="#0284c7" font-family="JetBrains Mono,monospace">&#x2322;AC=100°</text>
<text x="148" y="175" font-size="9" fill="#0369a1" font-family="JetBrains Mono,monospace">&#x2322;BD=40°</text>
</svg>`,
cond: 'Из внешней точки $P$ проведены две секущие $PAC$ и $PBD$. Дуга $\\smile AC = 100°$, дуга $\\smile BD = 40°$. (§14)',
parts: [
{ label: 'Найди угол $\\angle APB$ при точке $P$ (в градусах).', ans: 30, hint: '$\\angle P = \\dfrac{1}{2}|\\smile AC - \\smile BD| = \\dfrac{1}{2}|100-40| = 30°$ (§14).' },
],
},
{
n: 5,
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">
<circle cx="140" cy="92" r="74" fill="rgba(5,150,105,.08)" stroke="#059669" stroke-width="2"/>
<circle cx="140" cy="92" r="2.5" fill="#059669"/>
<line x1="68" y1="62" x2="212" y2="142" stroke="#047857" stroke-width="1.8"/>
<line x1="70" y1="148" x2="210" y2="44" stroke="#10b981" stroke-width="1.8"/>
<circle cx="138" cy="100" r="4" fill="#e07b00" stroke="#fff" stroke-width="1.5"/>
<circle cx="68" cy="62" r="4" fill="#047857" stroke="#fff" stroke-width="1.5"/>
<circle cx="212" cy="142" r="4" fill="#047857" stroke="#fff" stroke-width="1.5"/>
<circle cx="70" cy="148" r="4" fill="#10b981" stroke="#fff" stroke-width="1.5"/>
<circle cx="210" cy="44" r="4" fill="#10b981" stroke="#fff" stroke-width="1.5"/>
<text x="54" y="60" font-size="11" font-weight="700" fill="#047857" font-family="Unbounded,sans-serif">A</text>
<text x="214" y="158" font-size="11" font-weight="700" fill="#047857" font-family="Unbounded,sans-serif">B</text>
<text x="56" y="162" font-size="11" font-weight="700" fill="#10b981" font-family="Unbounded,sans-serif">C</text>
<text x="212" y="42" font-size="11" font-weight="700" fill="#10b981" font-family="Unbounded,sans-serif">D</text>
<text x="144" y="98" font-size="10" font-weight="700" fill="#e07b00" font-family="Unbounded,sans-serif">P</text>
<text x="88" y="74" font-size="9" fill="#047857" font-family="JetBrains Mono,monospace">PA=4</text>
<text x="162" y="140" font-size="9" fill="#047857" font-family="JetBrains Mono,monospace">PB=9</text>
<text x="78" y="138" font-size="9" fill="#10b981" font-family="JetBrains Mono,monospace">PC=6</text>
<text x="160" y="62" font-size="9" fill="#10b981" font-family="JetBrains Mono,monospace">PD=?</text>
</svg>`,
cond: 'В окружности хорды $AB$ и $CD$ пересекаются в точке $P$. $PA = 4$, $PB = 9$, $PC = 6$. (§15)',
parts: [
{ label: 'Найди $PD$.', ans: 6, hint: '$PA \\cdot PB = PC \\cdot PD \\Rightarrow PD = \\dfrac{PA \\cdot PB}{PC} = \\dfrac{4 \\cdot 9}{6} = 6$.' },
],
},
{
n: 6,
title: 'Касательная и секущая',
color: '#d97706',
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">
<circle cx="155" cy="88" r="64" fill="rgba(217,119,6,.08)" stroke="#d97706" stroke-width="2"/>
<circle cx="155" cy="88" r="2.5" fill="#d97706"/>
<line x1="20" y1="165" x2="200" y2="28" stroke="#b45309" stroke-width="2"/>
<line x1="20" y1="165" x2="220" y2="110" stroke="#d97706" stroke-width="2"/>
<circle cx="20" cy="165" r="4" fill="#b45309" stroke="#fff" stroke-width="1.5"/>
<circle cx="136" cy="44" r="3.5" fill="#b45309" stroke="#fff" stroke-width="1.5"/>
<circle cx="100" cy="148" r="3.5" fill="#d97706" stroke="#fff" stroke-width="1.5"/>
<circle cx="218" cy="108" r="3.5" fill="#d97706" stroke="#fff" stroke-width="1.5"/>
<text x="4" y="175" font-size="11" font-weight="700" fill="#92400e" font-family="Unbounded,sans-serif">P</text>
<text x="134" y="40" font-size="11" font-weight="700" fill="#b45309" font-family="Unbounded,sans-serif">T</text>
<text x="82" y="164" font-size="11" font-weight="700" fill="#d97706" font-family="Unbounded,sans-serif">A</text>
<text x="220" y="124" font-size="11" font-weight="700" fill="#d97706" font-family="Unbounded,sans-serif">B</text>
<text x="52" y="96" font-size="9" fill="#b45309" font-family="JetBrains Mono,monospace">PT=8</text>
<text x="120" y="170" font-size="9" fill="#d97706" font-family="JetBrains Mono,monospace">AB=12</text>
<text x="135" y="155" font-size="9" fill="#d97706" font-family="JetBrains Mono,monospace">PA=?</text>
</svg>`,
cond: 'Из точки $P$ проведены касательная $PT$ и секущая $PAB$. $PT = 8$, $AB = 12$. (§16)',
parts: [
{ label: 'Найди $PA$ (внешний отрезок секущей). Подсказка: $PA(PA+12) = 64$.', ans: 4, hint: '$PT^2 = PA\\cdot PB$, $PB = PA+12$. Уравнение: $PA^2+12PA-64=0$. Корень: $PA = \\dfrac{-12+\\sqrt{144+256}}{2} = \\dfrac{-12+20}{2} = 4$.' },
{ label: 'Найди $PB$.', ans: 16, hint: '$PB = PA + AB = 4+12 = 16$. Проверка: $8^2 = 4\\cdot 16 = 64$ — верно.' },
],
},
{
n: 7,
title: 'Общая касательная двух окружностей',
color: '#6d28d9',
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">
<circle cx="80" cy="100" r="52" fill="rgba(109,40,217,.08)" stroke="#6d28d9" stroke-width="2"/>
<circle cx="200" cy="100" r="20" fill="rgba(139,92,246,.12)" stroke="#8b5cf6" stroke-width="2"/>
<circle cx="80" cy="100" r="2.5" fill="#6d28d9"/>
<circle cx="200" cy="100" r="2.5" fill="#8b5cf6"/>
<line x1="80" y1="100" x2="200" y2="100" stroke="#64748b" stroke-width="1.2" stroke-dasharray="3 2"/>
<line x1="68" y1="49" x2="208" y2="80" stroke="#6d28d9" stroke-width="2.2"/>
<circle cx="68" cy="49" r="3.5" fill="#6d28d9" stroke="#fff" stroke-width="1.5"/>
<circle cx="208" cy="80" r="3.5" fill="#8b5cf6" stroke="#fff" stroke-width="1.5"/>
<text x="70" y="95" font-size="9" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="800">O1</text>
<text x="194" y="95" font-size="9" fill="#8b5cf6" font-family="Unbounded,sans-serif" font-weight="800">O2</text>
<text x="22" y="96" font-size="9" fill="#6d28d9" font-family="JetBrains Mono,monospace">R1=6</text>
<text x="213" y="118" font-size="9" fill="#8b5cf6" font-family="JetBrains Mono,monospace">R2=2</text>
<text x="110" y="115" font-size="9" fill="#64748b" font-family="JetBrains Mono,monospace">d=10</text>
<text x="100" y="40" font-size="9" fill="#6d28d9" font-family="JetBrains Mono,monospace">&#x2113;=?</text>
<text x="56" y="42" font-size="9" fill="#6d28d9" font-family="Unbounded,sans-serif" font-weight="700">T1</text>
<text x="210" y="76" font-size="9" fill="#8b5cf6" font-family="Unbounded,sans-serif" font-weight="700">T2</text>
</svg>`,
cond: 'Две окружности с $R_1 = 6$, $R_2 = 2$. Расстояние между центрами $d = 10$. Найди длину общей внешней касательной. (§7)',
parts: [
{ label: 'Найди $\\ell = \\sqrt{d^2-(R_1-R_2)^2}$. Введи результат (округли до 2 знаков).', ans: 9.17, tol: 0.05, hint: '$\\ell = \\sqrt{10^2 - (6-2)^2} = \\sqrt{100-16} = \\sqrt{84} \\approx 9{,}17$.' },
],
},
];
window.final4BossSolved = new Set();
const bossBox = document.getElementById('final4-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 final4-boss-inp" data-b="${b.n-1}" data-p="${pi}" placeholder="Ответ" style="width:120px">
<button class="btn primary final4-boss-check" data-b="${b.n-1}" data-p="${pi}" style="background:${b.color};border-color:${b.color}">Проверить</button>
<span class="final4-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 final4-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="final4-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="final4-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,#cffafe,#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('.final4-boss-inp[data-b="'+bi+'"][data-p="'+pi+'"]');
const fb = bossBox.querySelector('.final4-boss-fb[data-b="'+bi+'"][data-p="'+pi+'"]');
const ok = bossBox.querySelector('.final4-boss-ok[data-b="'+bi+'"][data-p="'+pi+'"]');
if(!inp) return;
const val = parseFloat(inp.value);
const tol = part.tol !== undefined ? part.tol : 0;
if(Math.abs(val - part.ans) <= tol){
feedback(fb, true, 'Верно! ' + (part.hint ? '<br><span style="font-size:.82rem;opacity:.85">' + part.hint + '</span>' : ''));
inp.disabled = true;
const btn = bossBox.querySelector('.final4-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('.final4-boss-inp[data-b="'+bi+'"][data-p="'+pj+'"]');
return el && el.disabled;
});
if(allDone && !window.final4BossSolved.has(bi)){
window.final4BossSolved.add(bi);
addXp(10, 'final4-boss-' + (bi+1));
const xpBadge = document.getElementById('final4-boss-xp-' + bi);
if(xpBadge) xpBadge.style.display = 'inline';
bumpProgress('final4', 8);
if(window.final4BossSolved.size === bosses.length){
setTimeout(function(){
confetti();
if(!STATE.achievements.has('final4-master')){
STATE.achievements.set('final4-master', 'Мастер окружностей Главы 4');
saveProgress();
const pop = document.getElementById('ach-popup');
if(pop){ document.getElementById('ach-text').textContent = 'Мастер окружностей Главы 4!'; pop.classList.add('show'); setTimeout(function(){ pop.classList.remove('show'); }, 4000); }
}
addXp(50, 'final4-all-bosses');
bumpProgress('final4', 20);
const fin = document.getElementById('final4-finish');
if(fin) fin.style.display = 'block';
}, 500);
}
}
} else {
feedback(fb, false, 'Неверно. Подсказка: ' + part.hint);
}
}
bossBox.querySelectorAll('.final4-boss-check').forEach(function(btn){
btn.addEventListener('click', function(){ checkPart(+btn.dataset.b, +btn.dataset.p); });
});
bossBox.querySelectorAll('.final4-boss-inp').forEach(function(inp){
inp.addEventListener('keydown', function(e){ if(e.key==='Enter'){ var btn=bossBox.querySelector('.final4-boss-check[data-b="'+inp.dataset.b+'"][data-p="'+inp.dataset.p+'"]'); if(btn)btn.click(); } });
});
})();
renderMath(box);
}
</script>
</body>
</html>