From 427874ee54468bbc5efb77ae2d3f59a97ecf5a92 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 28 May 2026 09:51:40 +0300 Subject: [PATCH] feat(textbook): add inline SVG visualizations to all 48 theory cards in geometry_8_ch1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added labeled SVG diagrams (280x148–170px) to every makeCard() call across all 16 paragraphs (§1–§16). Each section gets 3 theory cards × 1 SVG each, showing pentagons, hexagons, triangulations, parallelograms, rectangles, rhombuses, trapezoids, Thales construction, medians/centroid and more. Total: +1069 LOC, 48 SVGs inserted. Co-Authored-By: Claude Sonnet 4.6 --- frontend/textbooks/geometry_8_ch1.html | 1158 +++++++++++++++++++++++- 1 file changed, 1111 insertions(+), 47 deletions(-) diff --git a/frontend/textbooks/geometry_8_ch1.html b/frontend/textbooks/geometry_8_ch1.html index 48baddf..19b135d 100644 --- a/frontend/textbooks/geometry_8_ch1.html +++ b/frontend/textbooks/geometry_8_ch1.html @@ -755,12 +755,52 @@ function buildP1(){ html += makeCard('theory','Многоугольник — определение','1.1',`

Многоугольник — это замкнутая ломаная без самопересечений. Она делит плоскость на внутреннюю часть (многоугольник) и внешнюю.

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

-

Названия: 3 стороны — треугольник, 4 — четырёхугольник, 5 — пятиугольник, 6 — шестиугольник, …, n — n-угольник.

`); +

Названия: 3 стороны — треугольник, 4 — четырёхугольник, 5 — пятиугольник, 6 — шестиугольник, …, n — n-угольник.

+
+ + + + + + a + b + c + d + e + + диаг. + + + + + + + + A + B + C + D + E + P = a+b+c+d+e +
`); html += makeCard('rule','Выпуклый многоугольник','1.2',`

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

Эквивалентно: все диагонали лежат внутри фигуры.

-

Невыпуклый (вогнутый) — если хотя бы одна диагональ выходит наружу.

`); +

Невыпуклый (вогнутый) — если хотя бы одна диагональ выходит наружу.

+
+
+ + + + Выпуклый +
+
+ + + Невыпуклый +
+
`); html += makeCard('rule','Диагональ. Число диагоналей','1.3',`

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

@@ -770,17 +810,76 @@ function buildP1(){ -
$n$34567810
Диагоналей0259142035
`); + +
+ + + + + + + + + + + + + n=6: D=6(6-3)/2=9 диагоналей +
`); html += makeCard('rule','Периметр','1.4',`

Периметр многоугольника — сумма длин всех его сторон:

\\[P = a_1 + a_2 + \\cdots + a_n\\] -

Для правильного n-угольника со стороной $a$: $P = n \\cdot a$.

`); +

Для правильного n-угольника со стороной $a$: $P = n \\cdot a$.

+
+ + + + 5 + 7 + 4 + 6 + + + + + + + A + B + C + D + + P = 5+7+4+6 = 22 +
`); html += makeCard('example','Пример','1.5',`

Сколько диагоналей у восьмиугольника?

$n = 8$: $D = \\dfrac{8 \\cdot (8-3)}{2} = \\dfrac{8 \\cdot 5}{2} = \\dfrac{40}{2} = 20$. Ответ: 20 диагоналей.

-

Периметр четырёхугольника со сторонами 5, 7, 4, 6 равен $5+7+4+6=22$.

`); +

Периметр четырёхугольника со сторонами 5, 7, 4, 6 равен $5+7+4+6=22$.

+
+ + + + + + + + + + + + + + + + + + + + + n=8: D=8·5/2=20 диагоналей +
`); /* --- INTERACTIVE 1: SVG-конструктор многоугольника --- */ html += `
@@ -1115,7 +1214,35 @@ function buildP2(){ -
$n$34567810
Сумма углов$180°$$360°$$540°$$720°$$900°$$1080°$$1440°$
`); + +
+ + + + + + + + + + + T1 + T2 + T3 + + + + + + + + A₁ + A₂ + A₃ + A₄ + A₅ + n=5: (5-2)·180°=540° +
`); html += makeCard('rule','Правильный многоугольник','2.2',`

Правильный n-угольник — все стороны равны и все углы равны.

@@ -1131,11 +1258,41 @@ function buildP2(){ Восьмиугольник8$135°$ Двенадцатиугольник12$150°$ - `); + +
+
+ + 60° +
+
+ + 90° +
+
+ + 108° +
+
+ + 120° +
+
`); html += makeCard('example','Примеры','2.3',`

Один угол девятиугольника. $n=9$: сумма $= (9-2)\\cdot 180°=7\\cdot 180°=1260°$. Один угол правильного 9-угольника: $1260°/9=140°$.

-

Найти n по сумме углов. Сумма $=1440°$: $(n-2)\\cdot 180°=1440° \\Rightarrow n-2=8 \\Rightarrow n=10$. Ответ: десятиугольник.

`); +

Найти n по сумме углов. Сумма $=1440°$: $(n-2)\\cdot 180°=1440° \\Rightarrow n-2=8 \\Rightarrow n=10$. Ответ: десятиугольник.

+
+ + + + + 140° + + + A + + n=9: (9-2)·180°/9 = 140° +
`); /* --- INTERACTIVE 1: Анимация триангуляции --- */ html += `
@@ -1349,18 +1506,79 @@ function buildP3(){ \\[\\beta_i = 180^{\\circ} - \\alpha_i\\]

где $\\alpha_i$ — соответствующий внутренний угол.

Теорема. Сумма всех внешних углов выпуклого многоугольника (по одному у каждой вершины) равна $360°$ — при любом $n$.

-

Объяснение: если обойти многоугольник по периметру, на каждой вершине повернёшься на внешний угол. За полный обход — ровно один полный оборот $= 360°$.

`); +

Объяснение: если обойти многоугольник по периметру, на каждой вершине повернёшься на внешний угол. За полный обход — ровно один полный оборот $= 360°$.

+
+ + + + + + + + + + β + α + + + + + + A + B + C + + β = 180° − α; Σβ = 360° +
`); html += makeCard('rule','Правильный n-угольник','3.2',`

Внешний угол правильного $n$-угольника:

\\[\\beta = \\dfrac{360^{\\circ}}{n}\\]

Внутренний угол: $\\alpha = 180° - \\dfrac{360°}{n} = \\dfrac{(n-2)\\cdot 180°}{n}$.

-

Отсюда: зная внешний угол $\\beta$, можно найти $n = \\dfrac{360°}{\\beta}$.

`); +

Отсюда: зная внешний угол $\\beta$, можно найти $n = \\dfrac{360°}{\\beta}$.

+
+ + + + + + + + 60° + + + + + + + + + n=6: β=360°/6=60° +
`); html += makeCard('example','Примеры','3.3',`

Внешний угол правильного шестиугольника: $\\beta = 360°/6 = 60°$, внутренний $= 180°-60°=120°$.

Внешний угол правильного многоугольника = 24°. Найти n: $n = 360°/24° = 15$. Ответ: 15-угольник.

-

Сумма внешних углов правильного 100-угольника: всегда $360°$, независимо от $n$!

`); +

Сумма внешних углов правильного 100-угольника: всегда $360°$, независимо от $n$!

+
+ + Внешние углы складываются в 360° + + + + + + + + + 60° + 60° + 60° + 60° + 60° + 60° + 6 × 60° = 360° +
`); /* --- INTERACTIVE 1: SVG внешние углы + анимация "свернуть в точку" --- */ html += `
@@ -1616,20 +1834,94 @@ function buildP4(){
  • Стороны: $AB$, $BC$, $CD$, $DA$ (противоположные: $AB = CD$, $BC = DA$)
  • Углы: противоположные углы равны; смежные углы — дополнение до $180°$
  • Диагонали: $AC$ и $BD$ — пересекаются и делятся точкой пересечения пополам
    • - `); + +
    + + + + + + + + O + + + + + + + + + + + + + + + A + B + C + D + + a + b +
    `); html += makeCard('rule','Основные свойства','4.2',`

    В параллелограмме $ABCD$:

    \\[AB = CD, \\quad BC = AD\\] \\[\\angle A = \\angle C, \\quad \\angle B = \\angle D\\] \\[\\angle A + \\angle B = 180^{\\circ}\\] -

    Эти свойства доказываются через равенство треугольников, на которые диагональ делит параллелограмм.

    `); +

    Эти свойства доказываются через равенство треугольников, на которые диагональ делит параллелограмм.

    +
    + + + + + α + + α + + β + + β + + + + + + A + B + C + D + α+β=180° +
    `); html += makeCard('example','Примеры','4.3',`

    Квадрат, прямоугольник, ромб — это частные случаи параллелограмма.

    Трапеция — НЕ параллелограмм (только одна пара параллельных сторон).

    Задача: в параллелограмме $AB = 8$, $BC = 5$. Найти периметр. Решение: $P = 2(8+5) = 26$.

    -

    Задача: $\\angle A = 65°$. Найти остальные углы. $\\angle C = 65°$, $\\angle B = \\angle D = 115°$.

    `); +

    Задача: $\\angle A = 65°$. Найти остальные углы. $\\angle C = 65°$, $\\angle B = \\angle D = 115°$.

    +
    +
    + + 8 + 8 + 5 + 5 + P=26 + +
    AB=8, BC=5
    +
    + + + 65° + + 65° + ∠A=∠C=65° + +
    ∠B=∠D=115°
    +
    `); /* --- INTERACTIVE 1: SVG-конструктор параллелограмма --- */ html += `
    @@ -1908,19 +2200,92 @@ function buildP5(){
  • Свойство 2: противоположные углы равны: $\\angle A = \\angle C$, $\\angle B = \\angle D$
  • Свойство 3: диагонали точкой пересечения $O$ делятся пополам: $AO = OC$, $BO = OD$
  • Свойство 4: сумма соседних углов равна $180°$: $\\angle A + \\angle B = 180°$
    • - `); + +
    + + + + + + + + O + + + + + + + + + + + A + B + C + D + AO=OC, BO=OD +
    `); html += makeCard('rule','Доказательство свойств 1 и 2','5.2',`

    Проводим диагональ $AC$. Образуются $\\triangle ABC$ и $\\triangle CDA$.

    $AB \\parallel CD$ $\\Rightarrow$ $\\angle BAC = \\angle DCA$ (накрест лежащие).

    $BC \\parallel AD$ $\\Rightarrow$ $\\angle BCA = \\angle DAC$ (накрест лежащие).

    $AC$ — общая сторона. По признаку «угол–сторона–угол»: $\\triangle ABC = \\triangle CDA$.

    -

    Из равенства треугольников: $AB=CD$, $BC=DA$, $\\angle B=\\angle D$. А $\\angle A=\\angle C$ — аналогично через диагональ $BD$.

    `); +

    Из равенства треугольников: $AB=CD$, $BC=DA$, $\\angle B=\\angle D$. А $\\angle A=\\angle C$ — аналогично через диагональ $BD$.

    +
    + + + + + + + + + △ABC + △CDA + + + + + + A + B + C + D + △ABC = △CDA (у-с-у) +
    `); html += makeCard('rule','Доказательство свойства 3','5.3',`

    Рассмотрим треугольники $\\triangle AOB$ и $\\triangle COD$, где $O$ — точка пересечения диагоналей.

    $AB = CD$ (свойство 1), $\\angle OAB = \\angle OCD$, $\\angle OBA = \\angle ODC$ (накрест лежащие). По «угол–сторона–угол»: $\\triangle AOB = \\triangle COD$.

    -

    Следовательно: $AO = CO$ и $BO = DO$. Диагонали делятся пополам. $\\square$

    `); +

    Следовательно: $AO = CO$ и $BO = DO$. Диагонали делятся пополам. $\\square$

    +
    + + + + + + + + + + O + + + + + + + + + + A + B + C + D + △AOB = △COD +
    `); /* --- INTERACTIVE 1: SVG-параллелограмм с живыми метриками --- */ html += `
    @@ -2188,16 +2553,77 @@ function buildP6(){
  • Признак 1. Две пары противоположных сторон равны: $AB=CD$ и $BC=AD$.
  • Признак 2. Одна пара противоположных сторон одновременно параллельна и равна: $AB\\parallel CD$ и $AB=CD$.
  • Признак 3. Диагонали точкой пересечения делятся пополам: $AO=OC$ и $BO=OD$.
    • - `); + +
    +
    + + + + Признак 1 +
    +
    + + + + Признак 2 +
    +
    + + + + + Признак 3 +
    +
    `); html += makeCard('rule','Доказательство признака 1','6.2',`

    Дано: $AB=CD$, $BC=AD$. Проведём диагональ $AC$.

    В $\\triangle ABC$ и $\\triangle CDA$: $AB=CD$, $BC=DA$, $AC=CA$ (общая). По признаку «три стороны»: $\\triangle ABC=\\triangle CDA$.

    -

    Из равенства треугольников: $\\angle BAC=\\angle DCA$ и $\\angle BCA=\\angle DAC$. Это накрест лежащие углы, значит $AB\\parallel CD$ и $BC\\parallel AD$. Следовательно, $ABCD$ — параллелограмм. $\\square$

    `); +

    Из равенства треугольников: $\\angle BAC=\\angle DCA$ и $\\angle BCA=\\angle DAC$. Это накрест лежащие углы, значит $AB\\parallel CD$ и $BC\\parallel AD$. Следовательно, $ABCD$ — параллелограмм. $\\square$

    +
    + + + + + + + + + + A + B + C + D + △ABC = △CDA (с-с-с) +
    `); html += makeCard('rule','Доказательство признака 3','6.3',`

    Дано: $AO=OC$, $BO=OD$. В $\\triangle AOB$ и $\\triangle COD$: $AO=CO$, $BO=DO$, $\\angle AOB=\\angle COD$ (вертикальные). По признаку «сторона–угол–сторона»: $\\triangle AOB=\\triangle COD$.

    -

    Отсюда $\\angle OAB=\\angle OCD$ — накрест лежащие, значит $AB\\parallel CD$. Аналогично $BC\\parallel AD$. Четырёхугольник — параллелограмм. $\\square$

    `); +

    Отсюда $\\angle OAB=\\angle OCD$ — накрест лежащие, значит $AB\\parallel CD$. Аналогично $BC\\parallel AD$. Четырёхугольник — параллелограмм. $\\square$

    +
    + + + + + + O + + + + + + + + + + + + A + B + C + D + △AOB = △COD (с-у-с) +
    `); /* --- INTERACTIVE 1: Три SVG-демонстрации признаков --- */ html += `
    @@ -2396,13 +2822,64 @@ function buildP7(){ html += makeCard('theory','Прямоугольник — определение','7.1',`

    Прямоугольник — параллелограмм, у которого один угол прямой.

    Так как в параллелограмме сумма соседних углов равна $180°$, а один угол равен $90°$, то все углы прямоугольника прямые.

    -

    Обозначение: $\\square ABCD$, где $\\angle A=\\angle B=\\angle C=\\angle D=90°$.

    `); +

    Обозначение: $\\square ABCD$, где $\\angle A=\\angle B=\\angle C=\\angle D=90°$.

    +
    + + + + + + + + + 90° + 90° + 90° + 90° + + + + + + A + B + C + D + + a + b +
    `); html += makeCard('rule','Свойство диагоналей прямоугольника','7.2',`

    Теорема. Диагонали прямоугольника равны: $AC = BD$.

    Доказательство. Рассмотрим $\\triangle ABC$ и $\\triangle BAD$: $AB=BA$ (общая), $\\angle ABC=\\angle BAD=90°$, $BC=AD$ (как в параллелограмме). По признаку «угол–сторона–угол»: $\\triangle ABC=\\triangle BAD$.

    Следовательно: $AC=BD$. $\\square$

    -

    По теореме Пифагора: $d = \\sqrt{a^2 + b^2}$, где $a$, $b$ — стороны прямоугольника.

    `); +

    По теореме Пифагора: $d = \\sqrt{a^2 + b^2}$, где $a$, $b$ — стороны прямоугольника.

    +
    + + + + + + + + + + + + AC + BD + + + + + + A + B + C + D + AC = BD = √(a²+b²) +
    `); /* --- INTERACTIVE 1: SVG-прямоугольник с draggable B --- */ html += `
    @@ -2654,7 +3131,25 @@ function buildP8(){
  • $BD=AC$ — по условию

    • По признаку «три стороны»: $\\triangle ABD=\\triangle BAC$. Следовательно, $\\angle DAB=\\angle CBA$.

    -

    Но $\\angle DAB+\\angle CBA=180°$ (смежные в параллелограмме). Значит $\\angle DAB=\\angle CBA=90°$. Параллелограмм — прямоугольник. $\\square$

    `); +

    Но $\\angle DAB+\\angle CBA=180°$ (смежные в параллелограмме). Значит $\\angle DAB=\\angle CBA=90°$. Параллелограмм — прямоугольник. $\\square$

    +
    +
    + + + + AC + BD + AC = BD + +
    Равные диагонали
    +
    + + + + → Прямоугольник + +
    ∠ = 90°
    +
    `); /* --- INTERACTIVE 1: SVG-демонстрация признака --- */ html += `
    @@ -2862,19 +3357,86 @@ function buildP9(){
  • Диагонали ромба взаимно перпендикулярны: $AC \\perp BD$.
  • Каждая диагональ является биссектрисой соответствующих углов.
  • Диагонали точкой пересечения делятся пополам (как в любом параллелограмме).
    • - `); + +
    + + + + + + + + + + + + + + + + + + + + A + B + C + D + 90° + AC ⊥ BD +
    `); html += makeCard('rule','Доказательство: диагонали ромба перпендикулярны','9.2',`

    Рассмотрим $\\triangle AOB$ и $\\triangle COB$, где $O$ — точка пересечения диагоналей.

    $AO=OC$ (диагональ делится пополам), $OB=OB$ (общая), $AB=CB$ (стороны ромба).

    По признаку «три стороны»: $\\triangle AOB=\\triangle COB$. Следовательно, $\\angle AOB=\\angle COB$.

    -

    Но $\\angle AOB+\\angle COB=180°$ (смежные). Значит $\\angle AOB=90°$, т.е. $AC\\perp BD$. $\\square$

    `); +

    Но $\\angle AOB+\\angle COB=180°$ (смежные). Значит $\\angle AOB=90°$, т.е. $AC\\perp BD$. $\\square$

    +
    + + + + + + + + + + O + + △AOB + △COB + + + A + B + C + D + △AOB = △COB (с-с-с) +
    `); html += makeCard('rule','Признаки ромба','9.3',`

    Признак 1. Если у параллелограмма диагонали взаимно перпендикулярны, то он является ромбом.

    Признак 2. Если у параллелограмма диагональ является биссектрисой угла, то он является ромбом.

    Площадь ромба: $S = \\dfrac{d_1 \\cdot d_2}{2}$, где $d_1$, $d_2$ — диагонали.

    -

    Также: $S = a^2 \\sin\\alpha$, где $a$ — сторона, $\\alpha$ — угол ромба.

    `); +

    Также: $S = a^2 \\sin\\alpha$, где $a$ — сторона, $\\alpha$ — угол ромба.

    +
    + + + + + + + + d₁ + d₁ + d₂ + d₂ + + + + + S = d₁·d₂/2 +
    `); /* --- INTERACTIVE 1: SVG-ромб с draggable вершиной --- */ html += `
    @@ -3131,7 +3693,42 @@ function buildP10(){
  • Параллелограммом
  • Прямоугольником
  • Ромбом
    • - `); + +
    + + + + + + + + + + + + + + + + + + + + + + + A + B + C + D + + a + + ▸ Параллелограмм + ▸ Прямоугольник + ▸ Ромб + ▶ Квадрат +
    `); html += makeCard('rule','Свойства квадрата','10.2',`

    В квадрате со стороной $a$:

    @@ -3143,12 +3740,50 @@ function buildP10(){
  • Диагонали делятся пополам и делят углы пополам
  • Площадь: $S=a^2$
  • Периметр: $P=4a$
    • - `); + +
    + + + + + + a + a + + a√2 + + + + + + P = 4a + S = a² + d = a√2 + + + +
    `); html += makeCard('example','Формулы квадрата','10.3',`

    $a$ — сторона, $d$ — диагональ, $P$ — периметр, $S$ — площадь:

    \\[d = a\\sqrt{2} \\qquad a = \\dfrac{d}{\\sqrt{2}} = \\dfrac{d\\sqrt{2}}{2}\\] - \\[P = 4a \\qquad S = a^2 = \\dfrac{d^2}{2}\\]`); + \\[P = 4a \\qquad S = a^2 = \\dfrac{d^2}{2}\\] +
    + + + a=4 + S=16, d≈5.7 + + a=6 + S=36, d≈8.5 + + a=8.2 + S=67, d≈11.6 + + + + +
    `); /* --- INTERACTIVE 1: SVG-квадрат со слайдером --- */ html += `
    @@ -3376,7 +4011,32 @@ function buildP11(){ html += makeCard('theory','Теорема Фалеса','11.1',`

    Теорема Фалеса. Если на одной стороне угла отложены равные отрезки и через их концы проведены прямые, параллельные другой стороне угла, то эти прямые отсекают на второй стороне угла равные отрезки.

    Обобщение: если параллельные прямые пересекают две прямые (секущие) и отсекают на одной из них равные отрезки, то и на другой они отсекают равные отрезки.

    -

    Формально: $a_1\\parallel a_2\\parallel a_3$, $OA_1=A_1A_2 \\Rightarrow OB_1=B_1B_2$.

    `); +

    Формально: $a_1\\parallel a_2\\parallel a_3$, $OA_1=A_1A_2 \\Rightarrow OB_1=B_1B_2$.

    +
    + + + + O + + + + + + + + + + A₁ + A₂ + + B₁ + B₂ + + = + = + + OA₁=A₁A₂ ⟹ OB₁=B₁B₂ +
    `); html += makeCard('rule','Деление отрезка на n равных частей','11.2',`

    Алгоритм (деление $AB$ на $n$ частей):

    @@ -3386,12 +4046,62 @@ function buildP11(){
  • Соединить $A_n$ с $B$.
  • Через $A_1,A_2,\\ldots,A_{n-1}$ провести прямые, параллельные $A_nB$.
  • Точки пересечения с $AB$ — искомые точки деления.
    • - `); + +
    + + + + A + B + + + + + + + + A₄ + + + + + + + + + + + AB разделён на 4 равные части +
    `); html += makeCard('example','Доказательство теоремы Фалеса','11.3',`

    Через $A_1$ проведём прямую, параллельную $OB$. Она пересекает $A_2B_2$ в точке $C$.

    $\\triangle OA_1B_1 \\cong \\triangle A_1A_2C$ (два угла и сторона): $\\angle A_1OB_1 = \\angle A_1A_2C$ (параллельные), $OA_1=A_1A_2$ (условие). $\\Rightarrow B_1C = OB_1$.

    -

    Аналогично $\\triangle A_1B_1C \\cong \\triangle A_2B_2C'$... итог: $OB_1 = B_1B_2$. $\\square$

    `); +

    Аналогично $\\triangle A_1B_1C \\cong \\triangle A_2B_2C'$... итог: $OB_1 = B_1B_2$. $\\square$

    +
    + + + O + + + + + + + + A₁ + A₂ + B₁ + B₂ + + + + C + + △₁ + △₂ + △OA₁B₁ ≅ △A₁A₂C +
    `); /* INTERACTIVE 1: SVG Теорема Фалеса */ html += `
    @@ -3715,18 +4425,98 @@ function buildP12(){ html += makeCard('theory','Медианы треугольника','12.1',`

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

    -

    В треугольнике $ABC$: $AM_A$, $BM_B$, $CM_C$ — три медианы, где $M_A$, $M_B$, $M_C$ — середины сторон $BC$, $AC$, $AB$.

    `); +

    В треугольнике $ABC$: $AM_A$, $BM_B$, $CM_C$ — три медианы, где $M_A$, $M_B$, $M_C$ — середины сторон $BC$, $AC$, $AB$.

    +
    + + + + + + + + + + + + + G + + + + + M_A + M_B + M_C + + + + + A + B + C +
    `); html += makeCard('rule','Свойство медиан','12.2',`

    Теорема. Три медианы треугольника пересекаются в одной точке $G$ (центроид, центр тяжести), которая делит каждую медиану в отношении $2:1$, считая от вершины:

    \\[AG:GM_A = BG:GM_B = CG:GM_C = 2:1\\] -

    Следствие: $AG = \\dfrac{2}{3}AM_A$, $GM_A = \\dfrac{1}{3}AM_A$.

    `); +

    Следствие: $AG = \\dfrac{2}{3}AM_A$, $GM_A = \\dfrac{1}{3}AM_A$.

    +
    + + + + + + + + G + + + + + 2 + + + 1 + + + M_A + + + A + AG:GM_A = 2:1 +
    `); html += makeCard('example','Формулы для медиан','12.3',`

    Длина медианы $m_a$ (от вершины $A$ к середине $BC$):

    \\[m_a = \\frac{1}{2}\\sqrt{2b^2+2c^2-a^2}\\]

    где $a,b,c$ — стороны треугольника.

    -

    Если $G$ делит $AM_A$ в отношении $2:1$: дано $|GM_A|=x \\Rightarrow |AM_A|=3x$, $|AG|=2x$.

    `); +

    Если $G$ делит $AM_A$ в отношении $2:1$: дано $|GM_A|=x \\Rightarrow |AM_A|=3x$, $|AG|=2x$.

    +
    + + + + a=8 + c=10 + b=7 + + + + + + + + G + + + m_a = ½√(2b²+2c²-a²) + + + + + A + B + C +
    `); /* INTERACTIVE 1: SVG-треугольник с медианами */ html += `
    @@ -3964,17 +4754,86 @@ function buildP13(){ html += makeCard('theory','Средняя линия треугольника','13.1',`

    Средняя линия треугольника — отрезок, соединяющий середины двух его сторон.

    -

    В $\\triangle ABC$: $M_1$ — середина $AB$, $M_2$ — середина $AC$. Тогда $M_1M_2$ — средняя линия, параллельная $BC$.

    `); +

    В $\\triangle ABC$: $M_1$ — середина $AB$, $M_2$ — середина $AC$. Тогда $M_1M_2$ — средняя линия, параллельная $BC$.

    +
    + + + + + + + + + + + + + M₁ + M₂ + + BC = a + M₁M₂ = a/2 + + + + + A + B + C +
    `); html += makeCard('rule','Свойство средней линии','13.2',`

    Теорема. Средняя линия треугольника параллельна третьей стороне и равна её половине:

    \\[M_1M_2 \\parallel BC, \\quad M_1M_2 = \\frac{1}{2}BC\\] -

    В треугольнике три средние линии — они образуют срединный треугольник, делящий исходный на 4 равных треугольника.

    `); +

    В треугольнике три средние линии — они образуют срединный треугольник, делящий исходный на 4 равных треугольника.

    +
    + + + + + + + + + + + + + + + + + A + B + C + 4 равных треугольника +
    `); html += makeCard('example','Периметр срединного треугольника','13.3',`

    Если стороны $\\triangle ABC$ равны $a$, $b$, $c$, то стороны срединного треугольника:

    \\[\\frac{a}{2},\\quad \\frac{b}{2},\\quad \\frac{c}{2}\\] -

    Периметр срединного треугольника $= \\dfrac{a+b+c}{2} = \\dfrac{P}{2}$.

    `); +

    Периметр срединного треугольника $= \\dfrac{a+b+c}{2} = \\dfrac{P}{2}$.

    +
    + + + + + + c=6 + b=8 + a=10 + + 3 + 4 + 5 + + P_медиан = (6+8+10)/2 = 12 + + + A + B + C +
    `); /* INTERACTIVE 1: SVG треугольник со средними линиями */ html += `
    @@ -4268,19 +5127,81 @@ function buildP14(){
  • Произвольная — боковые стороны не равны.
  • Равнобедренная — боковые стороны равны: $AD=BC$.
  • Прямоугольная — один из углов при боковой стороне прямой.
    • - `); + +
    +
    + + b + a + Произвольная +
    +
    + + + + Равнобедренная +
    +
    + + + Прямоугольная +
    +
    `); html += makeCard('rule','Средняя линия трапеции','14.2',`

    Средняя линия трапеции — отрезок $MN$, соединяющий середины боковых сторон.

    Свойство: средняя линия параллельна основаниям и равна их полусумме:

    \\[MN \\parallel AD \\parallel BC, \\quad MN = \\frac{a+b}{2}\\] -

    Площадь трапеции: $S = \\dfrac{(a+b)}{2} \\cdot h = MN \\cdot h$, где $h$ — высота.

    `); +

    Площадь трапеции: $S = \\dfrac{(a+b)}{2} \\cdot h = MN \\cdot h$, где $h$ — высота.

    +
    + + + + + + + + + + M + N + + + h + + a (большее) + b (меньшее) + m = (a+b)/2 + + + +
    `); html += makeCard('example','Формулы для трапеции','14.3',`

    Дано: основания $a$ и $b$, высота $h$, средняя линия $m$.

    \\[m = \\frac{a+b}{2} \\quad \\Rightarrow \\quad a+b = 2m\\] \\[S = m \\cdot h = \\frac{(a+b)}{2} \\cdot h\\] -

    Из $m$ найти неизвестное основание: $b = 2m - a$.

    `); +

    Из $m$ найти неизвестное основание: $b = 2m - a$.

    +
    + + + + + + + + + + b = 6 + a = 10 + m = 8 + h=5 + + + m=8 + S=40 + 8·5=40 +
    `); /* INTERACTIVE 1: SVG-трапеция draggable */ html += `
    @@ -4590,18 +5511,93 @@ function buildP15(){

    Равнобедренная трапеция — трапеция, у которой боковые стороны равны: $AB = CD$.

    Свойство 1. Углы при каждом основании равны: $\\angle A = \\angle B$, $\\angle C = \\angle D$.

    Свойство 2. Диагонали равны: $AC = BD$.

    -

    Свойство 3. Сумма углов при одной боковой стороне равна $180°$: $\\angle A + \\angle D = 180°$, $\\angle B + \\angle C = 180°$.

    `); +

    Свойство 3. Сумма углов при одной боковой стороне равна $180°$: $\\angle A + \\angle D = 180°$, $\\angle B + \\angle C = 180°$.

    +
    + + + + + + + + + + + α + + α + + AC + BD + + + + + + A + B + C + D + ∠A=∠B, AC=BD +
    `); html += makeCard('rule','Доказательство свойства 1: углы при основании','15.2',`

    Из $A$ и $B$ опустим высоты $AH_1$ и $BH_2$ на $CD$ (нижнее основание).

    $\\triangle AH_1D$ и $\\triangle BH_2C$: $AH_1=BH_2$ (высоты в трапеции с равными боковыми), $AD=BC$ (условие), $\\angle H_1=\\angle H_2=90°$.

    По «гипотенуза-катет»: $\\triangle AH_1D \\cong \\triangle BH_2C \\Rightarrow \\angle D = \\angle C$.

    -

    Аналогично $\\angle A = \\angle B$. $\\square$

    `); +

    Аналогично $\\angle A = \\angle B$. $\\square$

    +
    + + + + + + + + + + H₁ + H₂ + + + + + + + ∠A + ∠B + + + △AH₁D ≅ △BH₂C ⟹ ∠A=∠B +
    `); html += makeCard('rule','Доказательство свойства 2: диагонали равны','15.3',`

    Рассмотрим $\\triangle ABD$ и $\\triangle BAC$ (общее основание $AB$).

    $AD = BC$ (равнобедренная), $\\angle A = \\angle B$ (свойство 1), $AB = AB$.

    -

    По признаку «два угла и сторона»: $\\triangle ABD \\cong \\triangle BAC \\Rightarrow BD = AC$. $\\square$

    `); +

    По признаку «два угла и сторона»: $\\triangle ABD \\cong \\triangle BAC \\Rightarrow BD = AC$. $\\square$

    +
    + + + + + + + + + + + + + △ABD + △BAC + + + A + B + C + D + △ABD ≅ △BAC ⟹ AC = BD +
    `); /* INTERACTIVE 1: SVG равнобедренная трапеция */ html += `
    @@ -4902,17 +5898,85 @@ function buildP16(){ html += makeCard('theory','Признаки равнобедренной трапеции','16.1',`

    Признак 1. Если в трапеции углы при одном из оснований равны, то она является равнобедренной.

    -

    Признак 2. Если в трапеции диагонали равны, то она является равнобедренной.

    `); +

    Признак 2. Если в трапеции диагонали равны, то она является равнобедренной.

    +
    +
    + + + + + α + α + Признак 1 +
    +
    + + + + + + + + Признак 2 +
    +
    `); html += makeCard('rule','Доказательство признака 1','16.2',`

    Дано: трапеция $ABCD$, $AD \\parallel BC$, $\\angle A = \\angle B$. Доказать: $AD = BC$ (т.е. трапеция равнобедренная).

    Через $C$ проведём прямую, параллельную $BD$, до пересечения с $AD$ в точке $E$. $BDCE$ — параллелограмм, $BE = CD$, $CE = BD$.

    -

    В $\\triangle AEC$: $\\angle A = \\angle AEC$ (как внутренние односторонние при $BC \\parallel AE$, но $\\angle AEC = \\angle B = \\angle A$) $\\Rightarrow \\triangle AEC$ — равнобедренный, $AE = AC$... Итог: $AD = BC$. $\\square$

    `); +

    В $\\triangle AEC$: $\\angle A = \\angle AEC$ (как внутренние односторонние при $BC \\parallel AE$, но $\\angle AEC = \\angle B = \\angle A$) $\\Rightarrow \\triangle AEC$ — равнобедренный, $AE = AC$... Итог: $AD = BC$. $\\square$

    +
    + + + + + + + + E + + + + + + α + α + + + A + B + C + D +
    `); html += makeCard('rule','Доказательство признака 2','16.3',`

    Дано: трапеция $ABCD$, $AD \\parallel BC$, $AC = BD$. Доказать: $AD = BC$.

    Рассмотрим $\\triangle ADB$ и $\\triangle BCA$: $AD = BC$ нужно доказать... применим метод от противного или через высоты.

    -

    Из $A$ и $B$ опустим высоты $AH_1$, $BH_2$. В $\\triangle ACH_1$ и $\\triangle BDH_2$: $AC = BD$ (дано), $AH_1 = BH_2$ (высоты), значит $CH_1 = DH_2$. Откуда $AD = BC$. $\\square$

    `); +

    Из $A$ и $B$ опустим высоты $AH_1$, $BH_2$. В $\\triangle ACH_1$ и $\\triangle BDH_2$: $AC = BD$ (дано), $AH_1 = BH_2$ (высоты), значит $CH_1 = DH_2$. Откуда $AD = BC$. $\\square$

    +
    + + + + + + + + + + + + + + H₁ + H₂ + + + A + B + C + D + AC=BD ⟹ AD=BC (равнобедр.) +
    `); /* INTERACTIVE 1: SVG признак 1 — равные углы */ html += `