From 6d7eafceb56151fb72ada21a049b810845c15b3d Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 28 May 2026 09:56:34 +0300 Subject: [PATCH] =?UTF-8?q?feat(textbook):=20complete=20visual=20enhanceme?= =?UTF-8?q?nt=20of=20geometry=5F8=5Fch2=20=C2=A71-=C2=A78?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added inline SVG diagrams to §7 boss tasks (right triangle shapes) - Added SVG visualizations to §8 theory cards 8.1, 8.2, 8.3 (h_c to hypotenuse) - Added SVG diagrams to §8 trainer tasks 1, 2, 3, 5 (triangle with altitude) - Added SVG diagrams to §8 boss tasks 1, 3, 4 - Added mini-interactive СЛАЙДЕР widgets to §2-§8 (one per section): §2: rectangle a×b slider, §3: parallelogram a×h slider §4: triangle a×h/2 slider, §5: trapezoid (a+b)/2×h slider §6: rhombus d₁×d₂/2 slider, §7: right triangle ab/2 slider §8: h_c=ab/c slider showing altitude to hypotenuse - Each slider is IIFE-encapsulated ~40 LOC, live SVG updates on input - §1 already had slider (ИНТЕРАКТИВ 1 grid); §2-§8 get new СЛАЙДЕР widget - Fixed duplicate x= attribute in §8.2 SVG proof diagram --- frontend/textbooks/geometry_8_ch2.html | 892 +++++++++++++++++++++++-- 1 file changed, 822 insertions(+), 70 deletions(-) diff --git a/frontend/textbooks/geometry_8_ch2.html b/frontend/textbooks/geometry_8_ch2.html index 984014f..8868464 100644 --- a/frontend/textbooks/geometry_8_ch2.html +++ b/frontend/textbooks/geometry_8_ch2.html @@ -512,13 +512,36 @@ function buildP1(){
  • Положительность: площадь любой фигуры $> 0$.
  • Равенство: у равных (конгруэнтных) фигур площади равны.
  • Аддитивность: площадь фигуры равна сумме площадей частей, на которые она разбита.
    • - `); + +
    + + + + + ${(()=>{let c='';for(let r=0;r<3;r++)for(let col=0;col<4;col++){const x=16+col*58,y=16+r*32;c+=`1`;}return c;})()} + S = 4·3 = 12 + +
    `); html += makeCard('rule','Площадь квадрата','1.2',`

    Если квадрат имеет сторону $a$, то его площадь:

    $$S = a^2$$

    Доказательство (идея): квадрат разбивается на $a \\times a = a^2$ единичных квадратов. По аксиоме аддитивности $S = a^2$.

    -

    Именно поэтому в математике «возведение в квадрат» называется так — это площадь квадрата.

    `); +

    Именно поэтому в математике «возведение в квадрат» называется так — это площадь квадрата.

    +
    + + + ${(()=>{let c='';for(let r=0;r<3;r++)for(let col=0;col<3;col++){const x=30+col*44,y=10+r*44;c+=``;}return c;})()} + + a = 3 + + a = 3 + + S=9 + + + +
    `); html += makeCard('rule','Единицы измерения площади','1.3',` @@ -530,7 +553,31 @@ function buildP1(){
    $1\\,\\text{см}^2$$100\\,\\text{мм}^2$
    -

    При переводе из крупной единицы в мелкую — умножать, из мелкой в крупную — делить.

    `); +

    При переводе из крупной единицы в мелкую — умножать, из мелкой в крупную — делить.

    +
    + + + + км² + + м² + + дм² + + см² + + ×10⁶ + + ×100 + + ×100 + + + → умножать (крупная → мелкая) + ← делить (мелкая → крупная) + 1 м² = 10 000 см² = 1 000 000 мм² + +
    `); html += makeCard('example','Пример','1.4',`

    Сторона квадрата 7 см. Площадь?
    $S = 7^2 = 49\\,\\text{см}^2$.

    @@ -701,10 +748,10 @@ function buildP1(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Сторона квадрата 9 см. Найди площадь (в см²).', ans:81, hint:'S = 9² = 81 см².'}, - {q:'Площадь квадрата 64 м². Найди сторону (в м).', ans:8, hint:'a = √64 = 8 м.'}, + {q:'S = ?a = 9 смa = 9Сторона квадрата 9 см. Найди площадь (в см²).', ans:81, hint:'S = 9² = 81 см².'}, + {q:'S = 64 м²a = ?Площадь квадрата 64 м². Найди сторону (в м).', ans:8, hint:'a = √64 = 8 м.'}, {q:'Переведи 3 м² в см². Ответ в см².', ans:30000, hint:'1 м² = 10 000 см², 3·10 000 = 30 000 см².'}, - {q:'Сторона квадрата 12 дм. Найди площадь в дм².', ans:144, hint:'S = 12² = 144 дм².'}, + {q:'S = ?a = 12 дмСторона квадрата 12 дм. Найди площадь в дм².', ans:144, hint:'S = 12² = 144 дм².'}, {q:'Площадь квадрата 225 мм². Найди сторону в мм.', ans:15, hint:'a = √225 = 15 мм.'}, ]; let idx=0,score=0; @@ -735,10 +782,10 @@ function buildP1(){ /* == INIT: Босс §1 == */ (function(){ const tasks=[ - {q:'Сторона квадрата 13 см. Площадь (в см²)?', ans:169, hint:'13² = 169.'}, - {q:'Площадь квадрата 196 м². Сторона (в м)?', ans:14, hint:'√196 = 14.'}, + {q:'S = ?a = 13 смСторона квадрата 13 см. Площадь (в см²)?', ans:169, hint:'13² = 169.'}, + {q:'S = 196 м²a = ?Площадь квадрата 196 м². Сторона (в м)?', ans:14, hint:'√196 = 14.'}, {q:'Переведи 50 000 см² в м². Ответ в м².', ans:5, hint:'50 000 / 10 000 = 5 м².'}, - {q:'Периметр квадрата 28 дм. Площадь в дм²?', ans:49, hint:'a = 28/4 = 7; S = 7² = 49.'}, + {q:'P = 28 дмS = ?a = P/4 = 7Периметр квадрата 28 дм. Площадь в дм²?', ans:49, hint:'a = 28/4 = 7; S = 7² = 49.'}, ]; const bossBox=document.getElementById('p1-boss-tasks'); bossBox.innerHTML=tasks.map((t,i)=>` @@ -772,17 +819,56 @@ function buildP2(){

    Теорема. Площадь прямоугольника со сторонами $a$ и $b$:

    $$S = a \\cdot b$$

    Доказательство: прямоугольник $a \\times b$ разбивается на $a \\cdot b$ единичных квадратов. По аксиоме аддитивности $S = a \\cdot b$.

    -

    Квадрат — частный случай прямоугольника при $a = b$: $S = a \\cdot a = a^2$.

    `); +

    Квадрат — частный случай прямоугольника при $a = b$: $S = a \\cdot a = a^2$.

    +
    + + + ${(()=>{let c='';for(let r=0;r<3;r++)for(let col=0;col<5;col++){const x=10+col*50,y=12+r*40;c+=``;}return c;})()} + + a = 5 + b = 3 + + S = 15 + +
    `); html += makeCard('rule','Периметр и площадь','2.2',`

    Прямоугольник со сторонами $a$ и $b$:

    $$S = a \\cdot b, \\quad P = 2(a + b)$$ -

    Связь: зная $P$ и одну сторону, можно найти вторую: $b = \\dfrac{P}{2} - a$.

    `); +

    Связь: зная $P$ и одну сторону, можно найти вторую: $b = \\dfrac{P}{2} - a$.

    +
    + + + + + a = 6 + + b = 4 + + S = 6·4 = 24 + + P = 2(6+4) = 20 + + + + + + +
    `); html += makeCard('example','Примеры','2.3',`

    Прямоугольник 6 × 4. Площадь?
    $S = 6 \\cdot 4 = 24\\,\\text{см}^2$.

    Площадь прямоугольника 36 м², одна сторона 9 м. Найти вторую.
    $b = 36 / 9 = 4\\,\\text{м}$.

    -

    Периметр 26 см, одна сторона 3 см. Площадь?
    $b = 26/2 - 3 = 10\\,\\text{см}$. $S = 3 \\cdot 10 = 30\\,\\text{см}^2$.

    `); +

    Периметр 26 см, одна сторона 3 см. Площадь?
    $b = 26/2 - 3 = 10\\,\\text{см}$. $S = 3 \\cdot 10 = 30\\,\\text{см}^2$.

    +
    + + + + S = 24 + a = 6 см + b = 4 + +
    `); /* --- INTERACTIVE 1: Draggable прямоугольник --- */ html += `
    @@ -831,6 +917,24 @@ function buildP2(){
    `; + /* --- MINI-SLIDER: Прямоугольник S = a·b --- */ + html += `
    +
    СЛАЙДЕР
    Прямоугольник — меняй стороны
    +
    Двигай слайдеры a и b — площадь $S = a \\cdot b$ пересчитывается мгновенно.
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* --- INTERACTIVE 4: Тренажёр --- */ html += `
    ИНТЕРАКТИВ 4
    Тренажёр §2
    @@ -964,10 +1068,10 @@ function buildP2(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Прямоугольник 7 × 5. Площадь?', ans:35, hint:'S = 7·5 = 35.'}, - {q:'Площадь прямоугольника 48 м², одна сторона 6 м. Вторая сторона?', ans:8, hint:'b = 48/6 = 8.'}, + {q:'S = ?a = 7b=5Прямоугольник 7 × 5. Площадь?', ans:35, hint:'S = 7·5 = 35.'}, + {q:'S = 48 м²a=6, b=?b = S/a = ?Площадь прямоугольника 48 м², одна сторона 6 м. Вторая сторона?', ans:8, hint:'b = 48/6 = 8.'}, {q:'Периметр прямоугольника 24 см, одна сторона 4 см. Площадь?', ans:32, hint:'b = 24/2 - 4 = 8; S = 4·8 = 32.'}, - {q:'Прямоугольник 11 × 3. Периметр?', ans:28, hint:'P = 2(11+3) = 28.'}, + {q:'P = ?a=11, b=3Прямоугольник 11 × 3. Периметр?', ans:28, hint:'P = 2(11+3) = 28.'}, {q:'Площадь комнаты 5 × 4 м. Количество плиток 50 × 50 см?', ans:80, hint:'S = 20 м² = 200 000 см². Плитка: 50×50=2500 см². 200 000/2500 = 80.'}, ]; let idx=0,score=0; @@ -998,8 +1102,8 @@ function buildP2(){ /* == INIT: Босс §2 == */ (function(){ const tasks=[ - {q:'Прямоугольник 13 × 8. Площадь?', ans:104, hint:'13·8 = 104.'}, - {q:'Площадь участка 360 м², ширина 15 м. Длина?', ans:24, hint:'360/15 = 24.'}, + {q:'S = ?a=13, b=8Прямоугольник 13 × 8. Площадь?', ans:104, hint:'13·8 = 104.'}, + {q:'S = 360 м²b=15, a=?a = S/b = ?Площадь участка 360 м², ширина 15 м. Длина?', ans:24, hint:'360/15 = 24.'}, {q:'Периметр прямоугольника 34 дм, одна сторона 9 дм. Площадь?', ans:72, hint:'b = 34/2 - 9 = 8; S = 9·8 = 72.'}, {q:'Квадрат и прямоугольник 9 × 4 имеют равные площади. Сторона квадрата?', ans:6, hint:'S = 36, a = √36 = 6.'}, ]; @@ -1022,6 +1126,32 @@ function buildP2(){
    `).join(''); window.p2BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Прямоугольник == */ + (function(){ + const W=260, H=180; + function draw(){ + const a=+document.getElementById('p2-sl-a').value; + const b=+document.getElementById('p2-sl-b').value; + document.getElementById('p2-sl-a-val').textContent=a; + document.getElementById('p2-sl-b-val').textContent=b; + const scX=Math.min(220/a,14), scY=Math.min(140/b,14); + const sc=Math.min(scX,scY); + const rw=Math.round(a*sc), rh=Math.round(b*sc); + const ox=Math.round((W-rw)/2), oy=Math.round((H-rh)/2); + let s=''; + s+=''; + s+='S='+(a*b)+''; + s+='a='+a+''; + s+='b='+b+''; + s+=''; + document.getElementById('p2-sl-svg-wrap').innerHTML=s; + document.getElementById('p2-sl-info').innerHTML='
    a = '+a+'
    b = '+b+'
    S = a·b = '+(a*b)+'
    P = 2(a+b) = '+2*(a+b)+'
    '; + } + document.getElementById('p2-sl-a').addEventListener('input',draw); + document.getElementById('p2-sl-b').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ @@ -1035,17 +1165,55 @@ function buildP3(){

    Высота параллелограмма — перпендикуляр, опущенный из любой точки одной стороны на другую (параллельную) сторону.

    Теорема. Площадь параллелограмма равна произведению основания на высоту:

    $$S = a \\cdot h$$ -

    где $a$ — основание (любая сторона), $h$ — высота, опущенная на это основание.

    `); +

    где $a$ — основание (любая сторона), $h$ — высота, опущенная на это основание.

    +
    + + + + + + + + + h + + a + + S = a·h + +
    `); html += makeCard('rule','Доказательство через прямоугольник','3.2',`

    Идея: от параллелограмма отрезаем боковой прямоугольный треугольник и переносим его на другой конец — получается прямоугольник с теми же основанием $a$ и высотой $h$.

    По аксиоме аддитивности площади параллелограмм и прямоугольник равновелики:

    $$S_{\\text{пар}} = S_{\\text{прямоуг}} = a \\cdot h$$ -

    Ключевое следствие: два параллелограмма с одним основанием и одинаковой высотой имеют равные площади, даже если выглядят по-разному!

    `); +

    Ключевое следствие: два параллелограмма с одним основанием и одинаковой высотой имеют равные площади, даже если выглядят по-разному!

    +
    + + + + + + h + S = a·h + одинаковые площади! + +
    `); html += makeCard('example','Примеры','3.3',`

    Параллелограмм, основание 8 см, высота 5 см. Площадь?
    $S = 8 \\cdot 5 = 40\\,\\text{см}^2$.

    -

    Площадь 60 м², основание 12 м. Высота?
    $h = 60 / 12 = 5\\,\\text{м}$.

    `); +

    Площадь 60 м², основание 12 м. Высота?
    $h = 60 / 12 = 5\\,\\text{м}$.

    +
    + + + + + + h=5 + a = 8 см + S=40 + +
    `); /* --- INTERACTIVE 1: Draggable параллелограмм (сдвигаем верх) --- */ html += `
    @@ -1093,6 +1261,24 @@ function buildP3(){
    `; + /* --- MINI-SLIDER: Параллелограмм S = a·h --- */ + html += `
    +
    СЛАЙДЕР
    Параллелограмм — меняй основание и высоту
    +
    $S = a \\cdot h$ — площадь зависит от основания и высоты, а не от угла наклона!
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* --- INTERACTIVE 4: Тренажёр --- */ html += `
    ИНТЕРАКТИВ 4
    Тренажёр §3
    @@ -1274,10 +1460,10 @@ function buildP3(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Параллелограмм, основание 10 см, высота 7 см. Площадь?', ans:70, hint:'S = 10·7 = 70.'}, - {q:'Площадь параллелограмма 84 м², высота 6 м. Основание?', ans:14, hint:'a = 84/6 = 14.'}, + {q:'h=7a = 10 смS = ?Параллелограмм, основание 10 см, высота 7 см. Площадь?', ans:70, hint:'S = 10·7 = 70.'}, + {q:'h=6a = ?S=84Площадь параллелограмма 84 м², высота 6 м. Основание?', ans:14, hint:'a = 84/6 = 14.'}, {q:'Основание параллелограмма 15 дм, площадь 120 дм². Высота?', ans:8, hint:'h = 120/15 = 8.'}, - {q:'Параллелограмм, сторона 9 см, высота к этой стороне 4 см. Площадь?', ans:36, hint:'S = 9·4 = 36.'}, + {q:'h=4a = 9 смS = ?Параллелограмм, сторона 9 см, высота к этой стороне 4 см. Площадь?', ans:36, hint:'S = 9·4 = 36.'}, {q:'Два параллелограмма: у обоих основание 8, высоты 5 и 5. Какую площадь имеет каждый?', ans:40, hint:'S = 8·5 = 40 — равные площади!'}, ]; let idx=0,score=0; @@ -1308,10 +1494,10 @@ function buildP3(){ /* == INIT: Босс §3 == */ (function(){ const tasks=[ - {q:'Параллелограмм, основание 16 дм, высота 9 дм. Площадь?', ans:144, hint:'16·9 = 144.'}, - {q:'Площадь параллелограмма 195 м², основание 15 м. Высота?', ans:13, hint:'195/15 = 13.'}, + {q:'h=9a = 16 дмS = ?Параллелограмм, основание 16 дм, высота 9 дм. Площадь?', ans:144, hint:'16·9 = 144.'}, + {q:'h=?a=15, S=195Площадь параллелограмма 195 м², основание 15 м. Высота?', ans:13, hint:'195/15 = 13.'}, {q:'Два параллелограмма с основанием 12 имеют площади 96 и 60. Найди сумму их высот.', ans:13, hint:'h1=96/12=8, h2=60/12=5, сумма=13.'}, - {q:'Параллелограмм, боковая сторона 10 см, высота к ней 6 см. Площадь?', ans:60, hint:'S = 10·6 = 60.'}, + {q:'h=6a = 10 смS = ?Параллелограмм, боковая сторона 10 см, высота к ней 6 см. Площадь?', ans:60, hint:'S = 10·6 = 60.'}, ]; const bossBox=document.getElementById('p3-boss-tasks'); bossBox.innerHTML=tasks.map((t,i)=>` @@ -1332,6 +1518,42 @@ function buildP3(){
    `).join(''); window.p3BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Параллелограмм == */ + (function(){ + const W=280, H=180; + function draw(){ + const a=+document.getElementById('p3-sl-a').value; + const h=+document.getElementById('p3-sl-h').value; + document.getElementById('p3-sl-a-val').textContent=a; + document.getElementById('p3-sl-h-val').textContent=h; + const S=a*h; + const sc=Math.min(200/a,10,120/h); + const pw=Math.round(a*sc), ph=Math.round(h*sc), sk=Math.round(ph*0.6); + const ox=Math.round((W-pw-sk)/2)+sk/2, oy=Math.round((H-ph)/2); + // parallelogram: 4 points + const x0=Math.round(ox+sk), y0=Math.round(oy+ph); + const x1=Math.round(ox+sk+pw), y1=y0; + const x2=Math.round(ox+pw), y2=Math.round(oy); + const x3=Math.round(ox), y3=y2; + let s=''; + s+=''; + // height dashed + s+=''; + s+=''; + s+=''; + // labels + s+='a='+a+''; + s+='h='+h+''; + s+='S='+S+''; + s+=''; + document.getElementById('p3-sl-svg-wrap').innerHTML=s; + document.getElementById('p3-sl-info').innerHTML='
    a = '+a+'
    h = '+h+'
    S = a·h = '+S+'
    '; + } + document.getElementById('p3-sl-a').addEventListener('input',draw); + document.getElementById('p3-sl-h').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ @@ -1345,19 +1567,62 @@ function buildP4(){

    Высота треугольника — перпендикуляр, опущенный из вершины на противоположную сторону (основание) или её продолжение.

    Теорема. Площадь треугольника равна половине произведения основания на высоту:

    $$S = \\dfrac{1}{2} \\cdot a \\cdot h$$ -

    где $a$ — основание, $h$ — высота к нему.

    `); +

    где $a$ — основание, $h$ — высота к нему.

    +
    + + + + + + + + h + a + + S = ½·a·h + + A + B + C + +
    `); html += makeCard('rule','Доказательство','4.2',`

    Идея: из треугольника $ABC$ строим параллелограмм — копируем треугольник и прикладываем к стороне $AB$. Получается параллелограмм $ABDC$ с тем же основанием $a$ и той же высотой $h$.

    Площадь параллелограмма: $S_{\\text{пар}} = a \\cdot h$.

    Треугольник — ровно половина параллелограмма (диагональ делит его на два равных треугольника):

    $$S_{\\triangle} = \\dfrac{1}{2} \\cdot a \\cdot h$$ -

    Важное следствие: треугольники с одним основанием и одинаковой высотой (вершина лежит на прямой, параллельной основанию) имеют равные площади.

    `); +

    Важное следствие: треугольники с одним основанием и одинаковой высотой (вершина лежит на прямой, параллельной основанию) имеют равные площади.

    +
    + + + + + + + + + a + S = ½·a·h + = ½ пар. + +
    `); html += makeCard('example','Примеры','4.3',`

    Треугольник, основание 12 см, высота 8 см. Площадь?
    $S = \\dfrac{1}{2} \\cdot 12 \\cdot 8 = 48\\,\\text{см}^2$.

    Площадь 30 м², основание 10 м. Высота?
    $h = \\dfrac{2S}{a} = \\dfrac{60}{10} = 6\\,\\text{м}$.

    -

    Площадь 18 дм², высота 6 дм. Основание?
    $a = \\dfrac{2S}{h} = \\dfrac{36}{6} = 6\\,\\text{дм}$.

    `); +

    Площадь 18 дм², высота 6 дм. Основание?
    $a = \\dfrac{2S}{h} = \\dfrac{36}{6} = 6\\,\\text{дм}$.

    +
    + + + + + + h=8 + a = 12 см + S=48 + +
    `); /* --- INTERACTIVE 1: Draggable вершина C --- */ html += `
    @@ -1414,6 +1679,24 @@ function buildP4(){
    `; + /* --- MINI-SLIDER: Треугольник S = a·h/2 --- */ + html += `
    +
    СЛАЙДЕР
    Треугольник — меняй основание и высоту
    +
    $S = \\dfrac{1}{2} a \\cdot h$ — треугольник всегда занимает половину соответствующего параллелограмма.
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* --- INTERACTIVE 4: Тренажёр --- */ html += `
    ИНТЕРАКТИВ 4
    Тренажёр §4
    @@ -1599,10 +1882,10 @@ function buildP4(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Треугольник, основание 14 см, высота 6 см. Площадь?', ans:42, hint:'S = ½·14·6 = 42.'}, - {q:'Площадь треугольника 45 м², высота 9 м. Основание?', ans:10, hint:'a = 2·45/9 = 10.'}, + {q:'h=6a = 14 смS=?Треугольник, основание 14 см, высота 6 см. Площадь?', ans:42, hint:'S = ½·14·6 = 42.'}, + {q:'h=9a = ?S=45Площадь треугольника 45 м², высота 9 м. Основание?', ans:10, hint:'a = 2·45/9 = 10.'}, {q:'Площадь треугольника 36 дм², основание 12 дм. Высота?', ans:6, hint:'h = 2·36/12 = 6.'}, - {q:'Прямоугольный треугольник, катеты 8 см и 6 см. Площадь?', ans:24, hint:'S = ½·8·6 = 24.'}, + {q:'a=8b=6S=?Прямоугольный треугольник, катеты 8 см и 6 см. Площадь?', ans:24, hint:'S = ½·8·6 = 24.'}, {q:'Площадь параллелограмма 80 м². Площадь треугольника на том же основании и высоте?', ans:40, hint:'S(△) = S(пар)/2 = 40.'}, ]; let idx=0,score=0; @@ -1633,8 +1916,8 @@ function buildP4(){ /* == INIT: Босс §4 == */ (function(){ const tasks=[ - {q:'Треугольник, основание 18 дм, высота 10 дм. Площадь?', ans:90, hint:'½·18·10 = 90.'}, - {q:'Площадь треугольника 56 м², основание 14 м. Высота?', ans:8, hint:'h = 2·56/14 = 8.'}, + {q:'h=10a = 18 дмS=?Треугольник, основание 18 дм, высота 10 дм. Площадь?', ans:90, hint:'½·18·10 = 90.'}, + {q:'h=?a=14, S=56Площадь треугольника 56 м², основание 14 м. Высота?', ans:8, hint:'h = 2·56/14 = 8.'}, {q:'Квадрат со стороной 6 см. Диагональ делит его на 2 треугольника. Площадь каждого?', ans:18, hint:'S(кв) = 36; S(△) = 36/2 = 18.'}, {q:'Параллелограмм, основание 20 м, высота 7 м. Площадь вписанного треугольника (того же основания и высоты)?', ans:70, hint:'S(пар) = 140; S(△) = 70.'}, ]; @@ -1657,6 +1940,40 @@ function buildP4(){
    `).join(''); window.p4BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Треугольник == */ + (function(){ + const W=280, H=190; + function draw(){ + const a=+document.getElementById('p4-sl-a').value; + const h=+document.getElementById('p4-sl-h').value; + document.getElementById('p4-sl-a-val').textContent=a; + document.getElementById('p4-sl-h-val').textContent=h; + const S=+(a*h/2).toFixed(1); + const sc=Math.min(220/a,12,130/h); + const pw=Math.round(a*sc), ph=Math.round(h*sc); + const ox=Math.round((W-pw)/2), oy=Math.round((H-ph)/2); + // apex at center top, base at bottom + const ax=ox+pw/2, ay=oy; + const bx=ox, by=oy+ph; + const cx=ox+pw, cy=oy+ph; + let s=''; + s+=''; + // height dashed + s+=''; + s+=''; + // labels + s+='a='+a+''; + s+='h='+h+''; + s+='S='+S+''; + s+=''; + document.getElementById('p4-sl-svg-wrap').innerHTML=s; + document.getElementById('p4-sl-info').innerHTML='
    a = '+a+'
    h = '+h+'
    S = a·h/2 = '+S+'
    '; + } + document.getElementById('p4-sl-a').addEventListener('input',draw); + document.getElementById('p4-sl-h').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ §5 — ПЛОЩАДЬ ТРАПЕЦИИ @@ -1669,7 +1986,24 @@ function buildP5(){

    Теорема. Площадь трапеции равна произведению полусуммы оснований на высоту:

    $$S = \\dfrac{a+b}{2}\\cdot h$$

    где $a$ и $b$ — основания (параллельные стороны), $h$ — высота (расстояние между основаниями).

    -

    Через среднюю линию: $m = \\dfrac{a+b}{2}$, поэтому $S = m \\cdot h$.

    `); +

    Через среднюю линию: $m = \\dfrac{a+b}{2}$, поэтому $S = m \\cdot h$.

    +
    + + + + + + + + + + a (нижнее) + b (верхнее) + h + m=(a+b)/2 + S = m·h + +
    `); html+=makeCard('rule','Доказательство (диагональ)','5.2',`

    Проведём диагональ $BD$ трапеции $ABCD$ ($AB \\parallel CD$).

    @@ -1678,12 +2012,41 @@ function buildP5(){
  • $\\triangle ABD$: основание $a=AB$, высота $h$ → $S_1 = \\dfrac{1}{2}ah$
  • $\\triangle BCD$: основание $b=CD$, высота $h$ → $S_2 = \\dfrac{1}{2}bh$
    • -

    По аддитивности: $S = S_1+S_2 = \\dfrac{1}{2}ah+\\dfrac{1}{2}bh = \\dfrac{a+b}{2}\\cdot h$. $\\square$

    `); +

    По аддитивности: $S = S_1+S_2 = \\dfrac{1}{2}ah+\\dfrac{1}{2}bh = \\dfrac{a+b}{2}\\cdot h$. $\\square$

    +
    + + + + + + + + + + + a = AB + b = CD + S₁ = ½ah + S₂ = ½bh + +
    `); html+=makeCard('example','Примеры','5.3',`

    Трапеция, основания 8 и 14 см, высота 6 см. Площадь?
    $S=\\dfrac{8+14}{2}\\cdot6=11\\cdot6=66\\,\\text{см}^2$.

    S = 72 м², h = 9 м, a = 10 м. Найти b.
    $b = \\dfrac{2S}{h}-a = \\dfrac{144}{9}-10=16-10=6\\,\\text{м}$.

    -

    S = 80 дм², средняя линия m = 16 дм. Высота?
    $h = S/m = 80/16 = 5\\,\\text{дм}$.

    `); +

    S = 80 дм², средняя линия m = 16 дм. Высота?
    $h = S/m = 80/16 = 5\\,\\text{дм}$.

    +
    + + + + + + a = 14 см + b = 8 см + h=6 + S=66 + +
    `); /* INTERACTIVE 1 — Draggable трапеция */ html+=`
    @@ -1758,6 +2121,27 @@ function buildP5(){
    `; + /* MINI-SLIDER: Трапеция */ + html+=`
    +
    СЛАЙДЕР
    Трапеция — меняй основания и высоту
    +
    $S = \\dfrac{(a+b)}{2} \\cdot h$ — площадь трапеции через сумму оснований и высоту.
    +
    + + + +
    +
    +
    +
    +
    +
    `; + /* INTERACTIVE 5 — Тренажёр */ html+=`
    ИНТЕРАКТИВ 5
    Тренажёр §5
    @@ -1999,10 +2383,10 @@ function buildP5(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Трапеция, основания 6 и 14 см, высота 8 см. Площадь?', ans:80, hint:'(6+14)/2·8 = 10·8 = 80.'}, - {q:'Площадь трапеции 90 м², высота 9 м, одно основание 7 м. Второе основание?', ans:13, hint:'2·90/9 − 7 = 20 − 7 = 13.'}, + {q:'h=8a = 14 смb = 6S=?Трапеция, основания 6 и 14 см, высота 8 см. Площадь?', ans:80, hint:'(6+14)/2·8 = 10·8 = 80.'}, + {q:'h=9a=7, S=90b=?Площадь трапеции 90 м², высота 9 м, одно основание 7 м. Второе основание?', ans:13, hint:'2·90/9 − 7 = 20 − 7 = 13.'}, {q:'Средняя линия трапеции 11 дм, высота 6 дм. Площадь?', ans:66, hint:'S = 11·6 = 66.'}, - {q:'Прямоугольная трапеция: основания 5 и 9 см, высота 4 см. Площадь?', ans:28, hint:'(5+9)/2·4 = 7·4 = 28.'}, + {q:'h=4a = 9 смb = 5S=?Прямоугольная трапеция: основания 5 и 9 см, высота 4 см. Площадь?', ans:28, hint:'(5+9)/2·4 = 7·4 = 28.'}, {q:'Площадь трапеции 108 см², средняя линия 12 см. Высота?', ans:9, hint:'h = 108/12 = 9.'}, ]; let idx=0,score=0; @@ -2031,8 +2415,8 @@ function buildP5(){ /* == INIT: Босс §5 == */ (function(){ const tasks=[ - {q:'Трапеция, основания 20 и 10 дм, высота 9 дм. Площадь?', ans:135, hint:'(20+10)/2·9 = 15·9 = 135.'}, - {q:'Площадь трапеции 150 м², основания 12 и 18 м. Высота?', ans:10, hint:'h = 2·150/(12+18) = 300/30 = 10.'}, + {q:'h=9a = 20 дмb = 10S=?Трапеция, основания 20 и 10 дм, высота 9 дм. Площадь?', ans:135, hint:'(20+10)/2·9 = 15·9 = 135.'}, + {q:'h=?a=18, S=150b = 12Площадь трапеции 150 м², основания 12 и 18 м. Высота?', ans:10, hint:'h = 2·150/(12+18) = 300/30 = 10.'}, {q:'Равнобедренная трапеция с основаниями 8 и 16 см вписана между двумя параллельными прямыми на расстоянии 6 см. Площадь?', ans:72, hint:'(8+16)/2·6 = 12·6 = 72.'}, {q:'Средняя линия трапеции 15 см. При высоте 8 см найти площадь.', ans:120, hint:'S = 15·8 = 120.'}, ]; @@ -2055,6 +2439,48 @@ function buildP5(){
    `).join(''); window.p5BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Трапеция == */ + (function(){ + const W=290, H=190; + function draw(){ + let a=+document.getElementById('p5-sl-a').value; + let b=+document.getElementById('p5-sl-b').value; + const h=+document.getElementById('p5-sl-h').value; + if(b>a){ b=a; document.getElementById('p5-sl-b').value=a; } + document.getElementById('p5-sl-a-val').textContent=a; + document.getElementById('p5-sl-b-val').textContent=b; + document.getElementById('p5-sl-h-val').textContent=h; + const S=+((a+b)/2*h).toFixed(1); + const sc=Math.min(240/a,11,130/h); + const aw=Math.round(a*sc), bw=Math.round(b*sc), ph=Math.round(h*sc); + const ox=Math.round((W-aw)/2), oy=Math.round((H-ph)/2); + const offset=Math.round((aw-bw)/2); + // trapezoid: bottom (aw wide), top (bw wide, centered) + const pts=[(ox)+','+(oy+ph),(ox+aw)+','+(oy+ph),(ox+offset+bw)+','+oy,(ox+offset)+','+oy].join(' '); + let s=''; + s+=''; + // midline dashed + const mx1=Math.round(ox+(aw-bw)/4), mx2=Math.round(ox+aw-(aw-bw)/4); + const my=Math.round(oy+ph/2); + s+=''; + // height dashed + s+=''; + s+=''; + // labels + s+='a='+a+''; + s+='b='+b+''; + s+='h='+h+''; + s+='S='+S+''; + s+=''; + document.getElementById('p5-sl-svg-wrap').innerHTML=s; + document.getElementById('p5-sl-info').innerHTML='
    a = '+a+'
    b = '+b+'
    h = '+h+'
    S = (a+b)/2·h = '+S+'
    '; + } + document.getElementById('p5-sl-a').addEventListener('input',draw); + document.getElementById('p5-sl-b').addEventListener('input',draw); + document.getElementById('p5-sl-h').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ §6 — ПЛОЩАДЬ РОМБА @@ -2070,17 +2496,64 @@ function buildP6(){
  • Через диагонали: $S = \\dfrac{d_1 \\cdot d_2}{2}$
  • Как параллелограмм: $S = a \\cdot h$
  • Через угол: $S = a^2 \\sin\\alpha$
    • - `); + +
    + + + + + + + + + + d₁ (горизонталь) + d₂ + S=d₁d₂/2 + +
    `); html+=makeCard('rule','Доказательство $S = d_1 d_2 / 2$','6.2',`

    Диагонали ромба делят его на 4 равных прямоугольных треугольника с катетами $d_1/2$ и $d_2/2$.

    Площадь одного треугольника: $S_{\\triangle} = \\dfrac{1}{2} \\cdot \\dfrac{d_1}{2} \\cdot \\dfrac{d_2}{2} = \\dfrac{d_1 d_2}{8}$.

    -

    Ромб состоит из 4 таких треугольников: $S = 4 \\cdot \\dfrac{d_1 d_2}{8} = \\dfrac{d_1 d_2}{2}$. $\\square$

    `); +

    Ромб состоит из 4 таких треугольников: $S = 4 \\cdot \\dfrac{d_1 d_2}{8} = \\dfrac{d_1 d_2}{2}$. $\\square$

    +
    + + + + + + + + + + + + + + + d₁/2 + d₂/2 + 4 × d₁d₂/8 = d₁d₂/2 + +
    `); html+=makeCard('example','Примеры','6.3',`

    Диагонали ромба 10 и 24 см. Площадь?
    $S=\\dfrac{10 \\cdot 24}{2}=120\\,\\text{см}^2$.

    Сторона ромба 8 м, острый угол 30°. Площадь?
    $S=8^2 \\sin 30°=64 \\cdot 0{,}5=32\\,\\text{м}^2$.

    -

    S = 48 дм², $d_1=8$ дм. Найти $d_2$.
    $d_2=\\dfrac{2S}{d_1}=\\dfrac{96}{8}=12\\,\\text{дм}$.

    `); +

    S = 48 дм², $d_1=8$ дм. Найти $d_2$.
    $d_2=\\dfrac{2S}{d_1}=\\dfrac{96}{8}=12\\,\\text{дм}$.

    +
    + + + + + + + d₁=10 + d₂=24 + S=120 + +
    `); /* INTERACTIVE 1 — Draggable ромб */ html+=`
    @@ -2155,6 +2628,24 @@ function buildP6(){
    `; + /* MINI-SLIDER: Ромб */ + html+=`
    +
    СЛАЙДЕР
    Ромб — меняй диагонали
    +
    $S = \\dfrac{d_1 \\cdot d_2}{2}$ — площадь ромба через диагонали.
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* INTERACTIVE 5 — Тренажёр */ html+=`
    ИНТЕРАКТИВ 5
    Тренажёр §6
    @@ -2375,11 +2866,11 @@ function buildP6(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Диагонали ромба 12 и 16 см. Площадь?', ans:96, hint:'12·16/2 = 96.'}, - {q:'Площадь ромба 60 м², одна диагональ 10 м. Другая диагональ?', ans:12, hint:'d₂ = 2·60/10 = 12.'}, + {q:'d₁=12d₂=16S=?Диагонали ромба 12 и 16 см. Площадь?', ans:96, hint:'12·16/2 = 96.'}, + {q:'d₁=10d₂=?S=60Площадь ромба 60 м², одна диагональ 10 м. Другая диагональ?', ans:12, hint:'d₂ = 2·60/10 = 12.'}, {q:'Сторона ромба 5 см, высота 4 см. Площадь?', ans:20, hint:'S = 5·4 = 20.'}, {q:'Сторона ромба 10 дм, острый угол 30°. Площадь?', ans:50, hint:'S = 100·sin30° = 100·0,5 = 50.'}, - {q:'Диагонали ромба 8 и 15 см. Площадь? (и чему равна сторона?)', ans:60, hint:'S = 8·15/2 = 60. Сторона = √(16+56,25) = 8,5.'}, + {q:'d₁=8d₂=15S=?Диагонали ромба 8 и 15 см. Площадь? (и чему равна сторона?)', ans:60, hint:'S = 8·15/2 = 60. Сторона = √(16+56,25) = 8,5.'}, ]; let idx=0,score=0; function show(){ @@ -2407,9 +2898,9 @@ function buildP6(){ /* == INIT: Босс §6 == */ (function(){ const tasks=[ - {q:'Ромб, диагонали 18 и 24 дм. Площадь?', ans:216, hint:'18·24/2 = 216.'}, + {q:'d₁=18d₂=24S=?Ромб, диагонали 18 и 24 дм. Площадь?', ans:216, hint:'18·24/2 = 216.'}, {q:'Площадь ромба 98 м². Диагонали равны. Найти каждую диагональ.', ans:14, hint:'d²/2=98 → d²=196 → d=14.'}, - {q:'Сторона ромба 13 см, меньшая диагональ 10 см. Площадь?', ans:120, hint:'d₂/2=√(169−25)=12, d₂=24. S=10·24/2=120.'}, + {q:'d₁=10d₂=?a=13S=?Сторона ромба 13 см, меньшая диагональ 10 см. Площадь?', ans:120, hint:'d₂/2=√(169−25)=12, d₂=24. S=10·24/2=120.'}, {q:'Сторона ромба 8 дм, угол 60°. Площадь?', ans:Math.round(64*Math.sin(60*Math.PI/180)), hint:'S = 64·sin60° ≈ 55.'}, ]; const bossBox=document.getElementById('p6-boss-tasks'); @@ -2431,6 +2922,38 @@ function buildP6(){
    `).join(''); window.p6BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Ромб == */ + (function(){ + const W=290, H=210; + function draw(){ + const d1=+document.getElementById('p6-sl-d1').value; + const d2=+document.getElementById('p6-sl-d2').value; + document.getElementById('p6-sl-d1-val').textContent=d1; + document.getElementById('p6-sl-d2-val').textContent=d2; + const S=+(d1*d2/2).toFixed(1); + const side=+Math.sqrt((d1/2)*(d1/2)+(d2/2)*(d2/2)).toFixed(1); + const sc=Math.min(220/d1,9,160/d2); + const rh=Math.round(d1*sc/2), rv=Math.round(d2*sc/2); + const cx=Math.round(W/2), cy=Math.round(H/2); + let s=''; + s+=''; + // diagonals dashed + s+=''; + s+=''; + // right angle + s+=''; + s+='S='+S+''; + s+='d₁='+d1+''; + s+='d₂='+d2+''; + s+=''; + document.getElementById('p6-sl-svg-wrap').innerHTML=s; + document.getElementById('p6-sl-info').innerHTML='
    d₁ = '+d1+'
    d₂ = '+d2+'
    a = '+side+'
    S = d₁·d₂/2 = '+S+'
    '; + } + document.getElementById('p6-sl-d1').addEventListener('input',draw); + document.getElementById('p6-sl-d2').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ §7 — ПЛОЩАДЬ ПРЯМОУГОЛЬНОГО ТРЕУГОЛЬНИКА @@ -2444,18 +2967,63 @@ function buildP7(){

    Формула:

    $$S = \\dfrac{1}{2} a \\cdot b$$

    где $a, b$ — катеты.

    -

    Через гипотенузу и высоту к ней: $S = \\dfrac{1}{2} c \\cdot h_c$, где $c$ — гипотенуза, $h_c$ — высота к гипотенузе.

    `); +

    Через гипотенузу и высоту к ней: $S = \\dfrac{1}{2} c \\cdot h_c$, где $c$ — гипотенуза, $h_c$ — высота к гипотенузе.

    +
    + + + + + + + a (катет) + b (катет) + c (гипотенуза) + + S=ab/2 + +
    `); html+=makeCard('rule','Доказательство','7.2',`

    Прямоугольный треугольник $\\triangle ABC$ с прямым углом $C$. Достроим до прямоугольника $ABDC$ (добавим точку $D$).

    Прямоугольник со сторонами $a$ и $b$ имеет площадь $S_{\\text{прям}} = ab$.

    Диагональ прямоугольника делит его на два равных прямоугольных треугольника:

    - $$S_{\\triangle} = \\dfrac{ab}{2}. \\quad \\square$$`); + $$S_{\\triangle} = \\dfrac{ab}{2}. \\quad \\square$$ +
    + + + + + + + + + + + + + + a + b + S = ab/2 + = ab/2 + +
    `); html+=makeCard('example','Примеры','7.3',`

    Катеты 6 и 8 см. Площадь?
    $S=\\dfrac{6\\cdot8}{2}=24\\,\\text{см}^2$.

    S = 40 м², катет 10 м. Другой катет?
    $b=\\dfrac{2S}{a}=\\dfrac{80}{10}=8\\,\\text{м}$.

    -

    Гипотенуза 10 дм, высота к ней 6 дм. Площадь?
    $S=\\dfrac{1}{2}\\cdot10\\cdot6=30\\,\\text{дм}^2$.

    `); +

    Гипотенуза 10 дм, высота к ней 6 дм. Площадь?
    $S=\\dfrac{1}{2}\\cdot10\\cdot6=30\\,\\text{дм}^2$.

    +
    + + + + + a = 8 см + b = 6 + c=10 + S=24 + +
    `); /* INTERACTIVE 1 — Draggable прямоугольный треугольник */ html+=`
    @@ -2512,6 +3080,24 @@ function buildP7(){
    `; + /* MINI-SLIDER: Прямоугольный треугольник */ + html+=`
    +
    СЛАЙДЕР
    Прямоугольный треугольник — меняй катеты
    +
    $S = \\dfrac{a \\cdot b}{2}$ — видно, как площадь зависит от обоих катетов.
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* INTERACTIVE 4 — Тренажёр */ html+=`
    ИНТЕРАКТИВ 4
    Тренажёр §7
    @@ -2707,10 +3293,10 @@ function buildP7(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Прямоугольный треугольник, катеты 9 и 12 см. Площадь?', ans:54, hint:'9·12/2 = 54.'}, - {q:'Площадь прямоугольного треугольника 35 м², один катет 7 м. Другой катет?', ans:10, hint:'b = 2·35/7 = 10.'}, - {q:'Прямоугольный треугольник, гипотенуза 13 см, один катет 5 см. Площадь?', ans:30, hint:'b=√(169−25)=12. S=5·12/2=30.'}, - {q:'Периметр прямоугольного треугольника 12 см, катеты 3 и 4 см. Площадь?', ans:6, hint:'S = 3·4/2 = 6.'}, + {q:'a = 9 смb=12S=?Прямоугольный треугольник, катеты 9 и 12 см. Площадь?', ans:54, hint:'9·12/2 = 54.'}, + {q:'a = 7 мb=?S=35Площадь прямоугольного треугольника 35 м², один катет 7 м. Другой катет?', ans:10, hint:'b = 2·35/7 = 10.'}, + {q:'a = 5 смb=?c=13S=?Прямоугольный треугольник, гипотенуза 13 см, один катет 5 см. Площадь?', ans:30, hint:'b=√(169−25)=12. S=5·12/2=30.'}, + {q:'a=4b=3S=?Периметр прямоугольного треугольника 12 см, катеты 3 и 4 см. Площадь?', ans:6, hint:'S = 3·4/2 = 6.'}, {q:'Гипотенуза 10 дм, высота к гипотенузе 4,8 дм. Площадь?', ans:24, hint:'S = ½·10·4,8 = 24.'}, ]; let idx=0,score=0; @@ -2739,10 +3325,10 @@ function buildP7(){ /* == INIT: Босс §7 == */ (function(){ const tasks=[ - {q:'Прямоугольный треугольник, катеты 15 и 20 дм. Площадь?', ans:150, hint:'15·20/2 = 150.'}, - {q:'Площадь 84 м², один катет 12 м. Гипотенуза?', ans:Math.round(Math.sqrt(144+196)), hint:'b=2·84/12=14. c=√(144+196)=√340≈18.4. Округли до целых: нет, ответ b=14.'}, + {q:'a=15 дмb=20S=?Прямоугольный треугольник, катеты 15 и 20 дм. Площадь?', ans:150, hint:'15·20/2 = 150.'}, {q:'Площадь 84 м², один катет 12 м. Второй катет?', ans:14, hint:'b = 2·84/12 = 14.'}, - {q:'Равнобедренный прямоугольный треугольник, гипотенуза 10 см. Площадь?', ans:25, hint:'Катеты равны: a²+a²=100 → a=5√2. S=a²/2=50/2=25.'}, + {q:'a = bc=10S=?Равнобедренный прямоугольный треугольник, гипотенуза 10 см. Площадь?', ans:25, hint:'Катеты равны: a²+a²=100 → a=5√2. S=a²/2=50/2=25.'}, + {q:'c = 25 смh_c=7S=?Гипотенуза 25 см, высота к ней 7 см. Площадь?', ans:87.5, hint:'S = ½·25·7 = 87,5.'}, ]; const bossBox=document.getElementById('p7-boss-tasks'); bossBox.innerHTML=tasks.map((t,i)=>` @@ -2763,6 +3349,37 @@ function buildP7(){
    `).join(''); window.p7BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Прямоугольный треугольник == */ + (function(){ + const W=280, H=200; + function draw(){ + const a=+document.getElementById('p7-sl-a').value; + const b=+document.getElementById('p7-sl-b').value; + document.getElementById('p7-sl-a-val').textContent=a; + document.getElementById('p7-sl-b-val').textContent=b; + const S=+(a*b/2).toFixed(1); + const c=+Math.sqrt(a*a+b*b).toFixed(1); + const sc=Math.min(200/a,11,150/b); + const pw=Math.round(a*sc), ph=Math.round(b*sc); + const ox=Math.round((W-pw)/2), oy=Math.round((H-ph)/2); + // right angle at bottom-left + const x0=ox, y0=oy+ph, x1=ox+pw, y1=oy+ph, x2=ox, y2=oy; + let s=''; + s+=''; + s+=''; + s+='a='+a+''; + s+='b='+b+''; + s+='c='+c+''; + s+='S='+S+''; + s+=''; + document.getElementById('p7-sl-svg-wrap').innerHTML=s; + document.getElementById('p7-sl-info').innerHTML='
    a = '+a+'
    b = '+b+'
    c = '+c+'
    S = ab/2 = '+S+'
    '; + } + document.getElementById('p7-sl-a').addEventListener('input',draw); + document.getElementById('p7-sl-b').addEventListener('input',draw); + draw(); + })(); } /* ============================================================ §8 — ВЫСОТА К ГИПОТЕНУЗЕ @@ -2779,7 +3396,35 @@ function buildP8(){
  • $h_c = \\dfrac{a \\cdot b}{c}$
  • $h_c^2 = a_c \\cdot b_c$
  • $a^2 = a_c \\cdot c$,   $b^2 = b_c \\cdot c$
    • - `); + +
    + + + + + + + + + + + + + + + + A + B + C + H + b + a + c + h_c + a_c + b_c + +
    `); html+=makeCard('rule','Доказательство $h_c = ab/c$','8.2',`

    Площадь треугольника можно вычислить двумя способами:

    @@ -2787,12 +3432,58 @@ function buildP8(){
  • Через катеты: $S = \\dfrac{1}{2} a b$
  • Через гипотенузу и $h_c$: $S = \\dfrac{1}{2} c \\cdot h_c$
    • -

    Приравниваем: $\\dfrac{1}{2} a b = \\dfrac{1}{2} c h_c$  ⇒  $h_c = \\dfrac{ab}{c}$. $\\square$

    `); +

    Приравниваем: $\\dfrac{1}{2} a b = \\dfrac{1}{2} c h_c$  ⇒  $h_c = \\dfrac{ab}{c}$. $\\square$

    +
    + + + + + + a + b + S=ab/2 + катеты a, b + + = + + + + + h_c + c + гипотенуза c, h_c + S=ch_c/2 + +
    `); html+=makeCard('example','Примеры','8.3',`

    Катеты 6 и 8 см, гипотенуза 10 см. Найти $h_c$.
    $h_c=\\dfrac{6 \\cdot 8}{10}=\\dfrac{48}{10}=4{,}8\\,\\text{см}$.

    Проекции катетов $a_c=4$, $b_c=9$. Найти $h_c$.
    $h_c=\\sqrt{4 \\cdot 9}=\\sqrt{36}=6$.

    -

    $h_c=12$, $a_c=9$. Найти $b_c$.
    $b_c=\\dfrac{h_c^2}{a_c}=\\dfrac{144}{9}=16$.

    `); +

    $h_c=12$, $a_c=9$. Найти $b_c$.
    $b_c=\\dfrac{h_c^2}{a_c}=\\dfrac{144}{9}=16$.

    +
    + + + + + + + + + + + + + + C + B + A + H + b=6 + a=8 + c=10 + h_c=4,8 + +
    `); /* INTERACTIVE 1 — Draggable прямоугольный треугольник с высотой */ html+=`
    @@ -2857,6 +3548,24 @@ function buildP8(){
    `; + /* MINI-SLIDER: Высота к гипотенузе */ + html+=`
    +
    СЛАЙДЕР
    Высота к гипотенузе — меняй катеты
    +
    $h_c = \\dfrac{ab}{c}$ — смотри как h_c зависит от соотношения катетов при фиксированной гипотенузе.
    +
    + + +
    +
    +
    +
    +
    +
    `; + /* INTERACTIVE 5 — Тренажёр */ html+=`
    ИНТЕРАКТИВ 5
    Тренажёр §8
    @@ -3089,11 +3798,11 @@ function buildP8(){ /* == INIT: Тренажёр == */ (function(){ const tasks=[ - {q:'Катеты 6 и 8 см, гипотенуза 10 см. Найти $h_c$.', ans:4.8, hint:'h_c = 6·8/10 = 4,8.'}, - {q:'Проекции катетов на гипотенузу: 4 и 9. Найти $h_c$.', ans:6, hint:'h_c = √(4·9) = 6.'}, - {q:'Катеты 5 и 12 см, гипотенуза 13 см. Найти $h_c$.', ans:+(5*12/13).toFixed(2), hint:'h_c = 60/13 ≈ 4,62.'}, + {q:'a=8b=6c=10h_c=?Катеты 6 и 8 см, гипотенуза 10 см. Найти $h_c$.', ans:4.8, hint:'h_c = 6·8/10 = 4,8.'}, + {q:'a_c=4b_c=9h_c=?Проекции катетов на гипотенузу: 4 и 9. Найти $h_c$.', ans:6, hint:'h_c = √(4·9) = 6.'}, + {q:'a=12b=5c=13h_c=?Катеты 5 и 12 см, гипотенуза 13 см. Найти $h_c$.', ans:+(5*12/13).toFixed(2), hint:'h_c = 60/13 ≈ 4,62.'}, {q:'$h_c = 12$ см, $a_c = 9$ см. Найти $b_c$.', ans:16, hint:'b_c = h_c²/a_c = 144/9 = 16.'}, - {q:'Гипотенуза 25 см, $a_c = 9$ см. Найти $h_c$.', ans:12, hint:'b_c=16, h_c=√(9·16)=12.'}, + {q:'a_c=9b_c=?c=25h_c=?Гипотенуза 25 см, $a_c = 9$ см. Найти $h_c$.', ans:12, hint:'b_c=16, h_c=√(9·16)=12.'}, ]; let idx=0,score=0; function show(){ @@ -3129,10 +3838,10 @@ function buildP8(){ ]; // Fix task 3 and 4 to be unambiguous const cleanTasks=[ - {q:'Катеты прямоугольного треугольника 9 и 12 дм. Найти высоту к гипотенузе $h_c$.', ans:7.2, hint:'c=√(81+144)=15. h_c=9·12/15=7,2.'}, + {q:'a=12b=9c=15h_c=?Катеты прямоугольного треугольника 9 и 12 дм. Найти высоту к гипотенузе $h_c$.', ans:7.2, hint:'c=√(81+144)=15. h_c=9·12/15=7,2.'}, {q:'Высота к гипотенузе $h_c = 8$, $a_c = 4$. Найти $b_c$.', ans:16, hint:'b_c = 64/4 = 16.'}, - {q:'Проекции катетов на гипотенузу: 1 и 4. Найти гипотенузу.', ans:5, hint:'c = 1+4 = 5.'}, - {q:'Проекции катетов 4 и 9. Найти высоту $h_c$.', ans:6, hint:'h_c = √(4·9) = 6.'}, + {q:'a_c=1b_c=4c=?Проекции катетов на гипотенузу: 1 и 4. Найти гипотенузу.', ans:5, hint:'c = 1+4 = 5.'}, + {q:'a_c=4b_c=9h_c=?Проекции катетов 4 и 9. Найти высоту $h_c$.', ans:6, hint:'h_c = √(4·9) = 6.'}, ]; const bossBox=document.getElementById('p8-boss-tasks'); bossBox.innerHTML=cleanTasks.map((t,i)=>` @@ -3153,6 +3862,49 @@ function buildP8(){
    `).join(''); window.p8BossSolved=new Set(); })(); + + /* == MINI-SLIDER: Высота к гипотенузе == */ + (function(){ + const W=300, H=210; + const AX=20, AY=180, BX=260, BY=180; + function draw(){ + const a=+document.getElementById('p8-sl-a').value; + const b=+document.getElementById('p8-sl-b').value; + document.getElementById('p8-sl-a-val').textContent=a; + document.getElementById('p8-sl-b-val').textContent=b; + const c=+Math.sqrt(a*a+b*b).toFixed(2); + const hc=+(a*b/c).toFixed(2); + const ac=+(a*a/c).toFixed(2); + const bc=+(b*b/c).toFixed(2); + // Draw triangle scaled to fit: A bottom-left, right angle at A, B along x, C up + const scX=(BX-AX)/a, scY=140/b; + const sc=Math.min(scX,scY,10); + const ax=AX, ay=AY; + const dx=AX+Math.round(a*sc), dy=AY; // D = horizontal point + const cx2=AX, cy2=AY-Math.round(b*sc); // C = vertical point + // compute H on hypotenuse CD: H = foot from A to CD + const abx=dx-cx2, aby=dy-cy2; + const tt=((ax-cx2)*abx+(ay-cy2)*aby)/(abx*abx+aby*aby); + const hx=Math.round(cx2+tt*abx), hy=Math.round(cy2+tt*aby); + let s=''; + // triangle + s+=''; + s+=''; + // altitude + s+=''; + // labels + s+='a='+a+''; + s+='b='+b+''; + s+='c='+c+''; + s+='h_c='+hc+''; + s+=''; + document.getElementById('p8-sl-svg-wrap').innerHTML=s; + document.getElementById('p8-sl-info').innerHTML='
    a = '+a+'
    b = '+b+'
    c = '+c+'
    h_c = ab/c = '+hc+'
    a_c='+ac+', b_c='+bc+'
    '; + } + document.getElementById('p8-sl-a').addEventListener('input',draw); + document.getElementById('p8-sl-b').addEventListener('input',draw); + draw(); + })(); } function buildP9stub(){ document.getElementById('p9-body').innerHTML='

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

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

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

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