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

fix(geom8 ch1): §7 §10 — корректные маркеры прямого угла во всех фигурах

Browse Source 
§7 Прямоугольник:
- Card 7.1 (теория): 4 path-маркера которые тянулись ПО кромке
  прямоугольника заменены на правильные polyline L-формы (9px),
  направленные строго внутрь.
- Card 7.2 (свойство диагоналей): не было ни одного маркера прямого
  угла — добавлены 4 на всех вершинах.
- Интерактив 1 «Живой прямоугольник»: маркеры стояли только в 2 углах
  через <rect> которые частично выходили за прямоугольник. Заменены
  на 4 правильных polyline вычисляемых из Math.min/max границ —
  работают при любом направлении перетаскивания вершины B.

§10 Квадрат:
- Card 10.1 (определение): 4 path-маркера трассировавшие по кромке
  заменены на правильные L-формы.
- Card 10.2 (свойства): то же.
- Card 10.3 (формулы): добавлены маркеры на все 3 квадрата (6-7px,
  в цвет каждого квадрата).
- Интерактив 1 (слайдер): один <rect>-маркер в углу A заменён на
  4 правильных polyline-маркера на всех вершинах ABCD, пересчёт
  по каждому изменению слайдера.

Геометрия маркера: для угла V с направлениями u,w внутрь —
polyline V+9u → V+9u+9w → V+9w. Маркер всегда внутри фигуры,
оба сегмента перпендикулярны кромкам.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-28 16:04:07 +03:00
parent 5ecae8a078
commit a7ca9a7463
1 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/textbooks/geometry_8_ch1.html
+58 -22
View File
@@ -2826,11 +2826,11 @@ function buildP7(){
<div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 155" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
<!-- Rectangle ABCD with right angle marks at all corners -->
<rect x="44" y="32" width="192" height="108" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/>
<!-- right angle marks -->
<path d="M44,140 L44,132 L52,132" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<path d="M44,32 L44,40 L52,40" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<path d="M236,32 L228,32 L228,40" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<path d="M236,140 L228,140 L228,132" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<!-- right angle marks — L-shape pointing INSIDE the rectangle -->
<polyline points="53,140 53,131 44,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="53,32 53,41 44,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="227,32 227,41 236,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="227,140 227,131 236,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<!-- 90° labels -->
<text x="60" y="130" font-size="9" fill="#7c3aed" font-weight="700" font-family="JetBrains Mono,monospace">90°</text>
<text x="60" y="52" font-size="9" fill="#7c3aed" font-weight="700" font-family="JetBrains Mono,monospace">90°</text>
@@ -2858,6 +2858,11 @@ function buildP7(){
<div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 155" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
<!-- Rectangle with both diagonals shown as equal -->
<rect x="44" y="32" width="192" height="108" fill="rgba(124,58,237,.08)" stroke="#7c3aed" stroke-width="2"/>
<!-- right angle marks — L-shape pointing INSIDE the rectangle -->
<polyline points="53,140 53,131 44,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="53,32 53,41 44,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="227,32 227,41 236,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<polyline points="227,140 227,131 236,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
<!-- diagonals AC and BD -->
<line x1="44" y1="140" x2="236" y2="32" stroke="#10b981" stroke-width="2" stroke-dasharray="6 3"/>
<line x1="236" y1="140" x2="44" y2="32" stroke="#d97706" stroke-width="2" stroke-dasharray="6 3"/>
@@ -2970,10 +2975,18 @@ function buildP7(){
s+='<rect x="'+Math.min(Ra.x,Rb.x)+'" y="'+Math.min(Ra.y,Rc.y)+'" width="'+Math.abs(Rb.x-Ra.x)+'" height="'+Math.abs(Rc.y-Ra.y)+'" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2.5"/>';
s+='<line x1="'+Ra.x+'" y1="'+Ra.y+'" x2="'+Rc.x+'" y2="'+Rc.y+'" stroke="#7c3aed" stroke-width="1" stroke-dasharray="5 3" opacity=".6"/>';
s+='<line x1="'+Rb.x+'" y1="'+Rb.y+'" x2="'+Rd.x+'" y2="'+Rd.y+'" stroke="#7c3aed" stroke-width="1" stroke-dasharray="5 3" opacity=".6"/>';
// right-angle marks
const sq=8;
s+='<rect x="'+Ra.x+'" y="'+(Ra.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".7"/>';
s+='<rect x="'+(Rb.x-sq)+'" y="'+(Rb.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".7"/>';
// right-angle marks — proper L-shape at all 4 corners pointing INSIDE the rectangle
const sq=9;
const xl=Math.min(Ra.x,Rb.x), xr=Math.max(Ra.x,Rb.x);
const yt=Math.min(Ra.y,Rc.y), yb=Math.max(Ra.y,Rc.y);
// bottom-left corner
s+='<polyline points="'+(xl+sq)+','+yb+' '+(xl+sq)+','+(yb-sq)+' '+xl+','+(yb-sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
// bottom-right corner
s+='<polyline points="'+(xr-sq)+','+yb+' '+(xr-sq)+','+(yb-sq)+' '+xr+','+(yb-sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
// top-right corner
s+='<polyline points="'+(xr-sq)+','+yt+' '+(xr-sq)+','+(yt+sq)+' '+xr+','+(yt+sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
// top-left corner
s+='<polyline points="'+(xl+sq)+','+yt+' '+(xl+sq)+','+(yt+sq)+' '+xl+','+(yt+sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
const labels=['A','B','C','D']; const pts=[Ra,Rb,Rc,Rd];
pts.forEach((v,i)=>{
const m=(i===2);
@@ -3697,11 +3710,11 @@ function buildP10(){
<div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 158" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
<!-- Square with equal-side ticks, right angle marks, both diagonals -->
<rect x="60" y="26" width="108" height="108" fill="rgba(234,179,8,.12)" stroke="#d97706" stroke-width="2.5"/>
<!-- right angle marks -->
<path d="M60,134 L60,126 L68,126" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M168,134 L160,134 L160,126" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M168,26 L160,26 L160,34" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M60,26 L60,34 L68,34" fill="none" stroke="#d97706" stroke-width="1.5"/>
<!-- right angle marks — L-shape pointing INSIDE the square -->
<polyline points="69,134 69,125 60,125" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="159,134 159,125 168,125" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="159,26 159,35 168,35" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="69,26 69,35 60,35" fill="none" stroke="#d97706" stroke-width="1.5"/>
<!-- equal side ticks (all 4 sides) -->
<line x1="107" y1="24" x2="121" y2="24" stroke="#d97706" stroke-width="2"/>
<line x1="107" y1="136" x2="121" y2="136" stroke="#d97706" stroke-width="2"/>
@@ -3751,11 +3764,11 @@ function buildP10(){
<text x="52" y="76" text-anchor="middle" font-size="12" fill="#b45309" font-weight="700" font-family="JetBrains Mono,monospace">a</text>
<!-- diagonal label -->
<text x="102" y="64" font-size="10" fill="#6d28d9" font-weight="700" font-family="JetBrains Mono,monospace">a√2</text>
<!-- right angle marks at all 4 corners -->
<path d="M68,124 L68,116 L76,116" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M168,124 L160,124 L160,116" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M68,24 L68,32 L76,32" fill="none" stroke="#d97706" stroke-width="1.5"/>
<path d="M168,24 L160,24 L160,32" fill="none" stroke="#d97706" stroke-width="1.5"/>
<!-- right angle marks at all 4 corners — L-shape pointing INSIDE the square -->
<polyline points="77,124 77,115 68,115" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="159,124 159,115 168,115" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="77,24 77,33 68,33" fill="none" stroke="#d97706" stroke-width="1.5"/>
<polyline points="159,24 159,33 168,33" fill="none" stroke="#d97706" stroke-width="1.5"/>
<!-- formula box at right -->
<rect x="188" y="38" width="78" height="74" rx="6" fill="rgba(234,179,8,.10)" stroke="#d97706" stroke-width="1"/>
<text x="227" y="58" text-anchor="middle" font-size="10" fill="#b45309" font-weight="700" font-family="JetBrains Mono,monospace">P = 4a</text>
@@ -3785,6 +3798,21 @@ function buildP10(){
<line x1="20" y1="120" x2="60" y2="80" stroke="#10b981" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
<line x1="90" y1="118" x2="150" y2="58" stroke="#0891b2" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
<line x1="178" y1="112" x2="260" y2="30" stroke="#d97706" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
<!-- right angle marks — square 1 (green, 40×40 at 20,80) -->
<polyline points="26,120 26,114 20,114" fill="none" stroke="#10b981" stroke-width="1.2"/>
<polyline points="54,120 54,114 60,114" fill="none" stroke="#10b981" stroke-width="1.2"/>
<polyline points="54,80 54,86 60,86" fill="none" stroke="#10b981" stroke-width="1.2"/>
<polyline points="26,80 26,86 20,86" fill="none" stroke="#10b981" stroke-width="1.2"/>
<!-- right angle marks — square 2 (blue, 60×60 at 90,58) -->
<polyline points="96,118 96,112 90,112" fill="none" stroke="#0891b2" stroke-width="1.2"/>
<polyline points="144,118 144,112 150,112" fill="none" stroke="#0891b2" stroke-width="1.2"/>
<polyline points="144,58 144,64 150,64" fill="none" stroke="#0891b2" stroke-width="1.2"/>
<polyline points="96,58 96,64 90,64" fill="none" stroke="#0891b2" stroke-width="1.2"/>
<!-- right angle marks — square 3 (orange, 82×82 at 178,30) -->
<polyline points="185,112 185,105 178,105" fill="none" stroke="#d97706" stroke-width="1.2"/>
<polyline points="253,112 253,105 260,105" fill="none" stroke="#d97706" stroke-width="1.2"/>
<polyline points="253,30 253,37 260,37" fill="none" stroke="#d97706" stroke-width="1.2"/>
<polyline points="185,30 185,37 178,37" fill="none" stroke="#d97706" stroke-width="1.2"/>
</svg></div>`);
/* --- INTERACTIVE 1: SVG-квадрат со слайдером --- */
@@ -3882,11 +3910,19 @@ function buildP10(){
// diagonals
s+='<line x1="'+A.x+'" y1="'+A.y+'" x2="'+C.x+'" y2="'+C.y+'" stroke="#059669" stroke-width="1.5" stroke-dasharray="5 3" opacity=".7"/>';
s+='<line x1="'+B.x+'" y1="'+B.y+'" x2="'+D.x+'" y2="'+D.y+'" stroke="#059669" stroke-width="1.5" stroke-dasharray="5 3" opacity=".7"/>';
// right-angle at O
// right-angle at diagonal intersection O
const sq=7;
s+='<polyline points="'+(cx+sq)+','+cy+' '+(cx+sq)+','+(cy-sq)+' '+cx+','+(cy-sq)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
// right-angle marks at corners
s+='<rect x="'+(A.x)+'" y="'+(A.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#059669" stroke-width="1.2" opacity=".6"/>';
// right-angle marks at all 4 corners — proper L-shape pointing INSIDE the square
const m=8;
// A = bottom-left (cx-half, cy+half)
s+='<polyline points="'+(A.x+m)+','+A.y+' '+(A.x+m)+','+(A.y-m)+' '+A.x+','+(A.y-m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
// B = bottom-right (cx+half, cy+half)
s+='<polyline points="'+(B.x-m)+','+B.y+' '+(B.x-m)+','+(B.y-m)+' '+B.x+','+(B.y-m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
// C = top-right (cx+half, cy-half)
s+='<polyline points="'+(C.x-m)+','+C.y+' '+(C.x-m)+','+(C.y+m)+' '+C.x+','+(C.y+m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
// D = top-left (cx-half, cy-half)
s+='<polyline points="'+(D.x+m)+','+D.y+' '+(D.x+m)+','+(D.y+m)+' '+D.x+','+(D.y+m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
// center dot
s+='<circle cx="'+cx+'" cy="'+cy+'" r="4" fill="#f59e0b" stroke="#fff" stroke-width="1.5"/>';
// side labels