From 2ca490ff81c5144898e1f0080786b7819bb7580e Mon Sep 17 00:00:00 2001 From: Hananoshika Yomaru Date: Thu, 21 May 2026 22:18:34 -0700 Subject: [PATCH] Enhance math curriculum content and improve rendering: Update contributing guidelines for math widget integration and clarify KaTeX usage. Add interactive demo technology choices to SKILL.md for better guidance on chapter interactions. Introduce new visual elements in coordinate geometry chapters, including an empty Cartesian plane SVG and detailed proofs for distance, midpoint, and slope formulas. Revise Pythagorean theorem content to include geometric proofs and applications, enhancing clarity and educational value. --- .agents/skills/ofb/SKILL.md | 12 + CONTRIBUTING.md | 2 +- .../coordinate-geometry-foundations/_index.md | 133 ++++++- .../chapter.scss | 173 +++++++++ .../coordinate-geometry-foundations/core.html | 76 ++++ .../supplement.html | 57 ++- .../widgets/plane-relations-demo.tsx | 346 ++++++++++++++++++ content/math/pythagoras-theorem/_index.md | 240 ++++++++---- content/math/pythagoras-theorem/chapter.scss | 166 +++++++++ content/math/pythagoras-theorem/core.html | 127 ++++--- .../math/pythagoras-theorem/supplement.html | 113 ++++-- .../widgets/area-proof-demo.tsx | 164 +++++++++ frontend/src/lib/katex.ts | 89 ++++- frontend/src/lib/render-math.ts | 13 +- frontend/src/main.tsx | 11 +- static/feed.xml | 44 +-- static/sitemap.xml | 6 +- 17 files changed, 1571 insertions(+), 201 deletions(-) create mode 100644 content/math/coordinate-geometry-foundations/chapter.scss create mode 100644 content/math/coordinate-geometry-foundations/widgets/plane-relations-demo.tsx create mode 100644 content/math/pythagoras-theorem/chapter.scss create mode 100644 content/math/pythagoras-theorem/widgets/area-proof-demo.tsx diff --git a/.agents/skills/ofb/SKILL.md b/.agents/skills/ofb/SKILL.md index a276e0e..f839c61 100644 --- a/.agents/skills/ofb/SKILL.md +++ b/.agents/skills/ofb/SKILL.md @@ -135,6 +135,18 @@ Live chapters live under `content/{subject}/{slug}/`: **Math checkpoints / dots:** follow [math-chapter-patterns.md](math-chapter-patterns.md); shared dot classes in `content/math/subject.scss`. +### Interactive demo technology choices + +Interactive demos can use different technologies based on the learning goal and interaction type: + +- **Vanilla JavaScript / Solid widget**: default for lightweight chapter interactions and custom canvas/SVG behavior. +- **JSXGraph**: geometric constructions (points, lines, labeled angles, right-angle markers, draggable Euclidean figures). +- **Plotly.js**: data-heavy charts, coordinate plots, and quick interactive graphing. +- **D3**: custom data visualizations where fine-grained control over rendering/animation is needed. +- **three.js**: 3D scenes, spatial intuition demos, and rotation/perspective interactions. + +Choose the simplest tool that satisfies the pedagogy, performance, and accessibility needs of the chapter. + Reference: `content/math/quadratic-equations/`. ## Verify before PR diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f1c3c95..b80b026 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -122,7 +122,7 @@ strand = "Number & Algebra" - Put styles reused across several chapters in `content/{subject}/subject.scss`, not in each `chapter.scss`. - **Do not** mention DSE, IB, or other curriculum names in chapter HTML. - Mount widgets with `
` (filename without `.tsx` = `data-widget` value). -- **Math (KaTeX):** write `\( … \)` and `\[ … \]` in HTML; prose is auto-rendered on chapter load. In widgets use `import { renderLatex } from "@ofb/katex"` — do not add a per-widget `renderLatex` helper. +- **Math (KaTeX):** write `\( … \)` and `\[ … \]` in HTML; prose and widget DOM are auto-rendered globally on chapter load and dynamic updates. For computed strings in widgets, use `import { renderLatex } from "@ofb/katex"` — do not add a per-widget `renderLatex` helper. - Reference synced assets with root-relative paths: `/chapters/math/your-chapter-slug/image.png` (chapter HTML is not processed as Tera) ### 4. Build and check diff --git a/content/math/coordinate-geometry-foundations/_index.md b/content/math/coordinate-geometry-foundations/_index.md index 1006099..f28e314 100644 --- a/content/math/coordinate-geometry-foundations/_index.md +++ b/content/math/coordinate-geometry-foundations/_index.md @@ -28,12 +28,53 @@ strand = "Measures, Shape & Space"
  • Q3: \((-,-)\)
  • Q4: \((+,-)\)
    • +
    + + + + + + + + + + + + + + + + + + x-axis + y-axis + O + Quadrant I + (+,+) + Quadrant II + (-,+) + Quadrant III + (-,-) + Quadrant IV + (+,-) + +
    + Empty Cartesian plane with axis directions and quadrant signs. +
    +

    Plotting and reading points

    Ordered pair \((a,b)\) means move \(a\) units along \(x\), then \(b\) units along \(y\).

    Example: \((-3,2)\) lies in Quadrant II.

    +

    Distance between two points

    @@ -89,6 +130,41 @@ strand = "Measures, Shape & Space"

  • Perpendicular lines satisfy \(m_1m_2=-1\) (when both slopes are defined).
    • +

    Why these formulas work (derivation)

    +

    Distance formula from Pythagoras

    +

    + Between \(A(x_1,y_1)\) and \(B(x_2,y_2)\), horizontal change is + \(\Delta x=x_2-x_1\) and vertical change is \(\Delta y=y_2-y_1\). These are the + legs of a right triangle, and segment \(AB\) is its hypotenuse. +

    +

    \[ + AB^2=(\Delta x)^2+(\Delta y)^2 + \]

    +

    \[ + AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2} + \]

    + +

    Midpoint as averaging coordinates

    +

    + A midpoint lies exactly halfway in both horizontal and vertical directions, so each coordinate is + an average of the endpoints: +

    +

    \[ + M\left(\frac{x_1+x_2}{2},\frac{y_1+y_2}{2}\right) + \]

    + +

    Slope formula from rise over run

    +

    + Slope measures steepness: rise divided by run. For two points, rise is \(y_2-y_1\) and run is + \(x_2-x_1\), giving: +

    +

    \[ + m=\frac{y_2-y_1}{x_2-x_1} + \]

    +

    + This is why vertical lines (\(x_2=x_1\)) have undefined slope: the denominator becomes zero. +

    +

    Exam strategy

    +

    Why these formulas work (derivation)

    +

    Distance formula from Pythagoras

    +

    + Between \(A(x_1,y_1)\) and \(B(x_2,y_2)\), horizontal change is + \(\Delta x=x_2-x_1\) and vertical change is \(\Delta y=y_2-y_1\). These are the + legs of a right triangle, and segment \(AB\) is its hypotenuse. +

    +

    \[ + AB^2=(\Delta x)^2+(\Delta y)^2 + \]

    +

    \[ + AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2} + \]

    + +

    Midpoint as averaging coordinates

    +

    + A midpoint lies exactly halfway in both horizontal and vertical directions, so each coordinate is + an average of the endpoints: +

    +

    \[ + M\left(\frac{x_1+x_2}{2},\frac{y_1+y_2}{2}\right) + \]

    + +

    Slope formula from rise over run

    +

    + Slope measures steepness: rise divided by run. For two points, rise is \(y_2-y_1\) and run is + \(x_2-x_1\), giving: +

    +

    \[ + m=\frac{y_2-y_1}{x_2-x_1} + \]

    +

    + This is why vertical lines (\(x_2=x_1\)) have undefined slope: the denominator becomes zero. +

    +

    Exam strategy