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: \((+,-)\)
+
+
+
+ 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\).
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:
+
Construct a right triangle by drawing horizontal and vertical guide lines.
+
Its horizontal leg is \(|x_2-x_1|\), and vertical leg is \(|y_2-y_1|\).
+
By Pythagoras, \(AB^2=(x_2-x_1)^2+(y_2-y_1)^2\).
+
Take the positive square root because distance is nonnegative.
+
+
\[
+ AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}
+ \]
+
+
Midpoint formula (step by step)
- Horizontal change is \(\Delta x=x_2-x_1\), vertical change is \(\Delta y=y_2-y_1\). These form
- a right triangle, so distance is \(\sqrt{(\Delta x)^2+(\Delta y)^2}\).
+ A midpoint splits a segment into two equal parts in both directions. So the \(x\)-coordinate is
+ halfway between \(x_1\) and \(x_2\), and the \(y\)-coordinate is halfway between \(y_1\) and \(y_2\).
+
+
+
+
+ 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
@@ -78,6 +119,41 @@
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:
+
Construct a right triangle by drawing horizontal and vertical guide lines.
+
Its horizontal leg is \(|x_2-x_1|\), and vertical leg is \(|y_2-y_1|\).
+
By Pythagoras, \(AB^2=(x_2-x_1)^2+(y_2-y_1)^2\).
+
Take the positive square root because distance is nonnegative.
+
+
\[
+ AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}
+ \]
+
+
Midpoint formula (step by step)
- Horizontal change is \(\Delta x=x_2-x_1\), vertical change is \(\Delta y=y_2-y_1\). These form
- a right triangle, so distance is \(\sqrt{(\Delta x)^2+(\Delta y)^2}\).
+ A midpoint splits a segment into two equal parts in both directions. So the \(x\)-coordinate is
+ halfway between \(x_1\) and \(x_2\), and the \(y\)-coordinate is halfway between \(y_1\) and \(y_2\).
+
Discover, geometrically prove, and apply the Pythagorean Theorem.
- Pythagoras' theorem links the side lengths of a right-angled triangle. It is one of the most
- useful tools in geometry and coordinate problems.
+ Imagine you are helping an architect build a scale model of a sculpture. One triangular frame is
+ a right triangle with legs 9 ft and 12 ft. How long is the third side?
-
Pythagoras' theorem
-
- In a right triangle with legs \(a,b\) and hypotenuse \(c\):
-
+
Pythagorean Theorem
+
In any right triangle with legs \(a\) and \(b\), and hypotenuse \(c\):
\[
- a^2+b^2=c^2.
+ a^2 + b^2 = c^2
\]
- The hypotenuse is always the side opposite the right angle and is the longest side.
+ The hypotenuse is opposite the right angle, so it is always the longest side.
-
Finding a missing side
-
Example 1. If \(a=6\), \(b=8\), then:
+
Right triangle labels
+
We usually name vertices with uppercase letters and opposite sides with matching lowercase letters.
- If side lengths satisfy \(a^2+b^2=c^2\), the triangle is right-angled.
-
-
- Example: \(7,24,25\) gives \(7^2+24^2=49+576=625=25^2\), so right-angled.
+ When solving \(c^2=289\), the equation has two numerical roots (\(\pm 17\)), but side lengths in
+ geometry are nonnegative. So the triangle side is \(17\), not \(-17\).
-
Classifying triangle type
+
Converse of the theorem
- For largest side \(c\):
+ If three side lengths satisfy \(a^2+b^2=c^2\), then the triangle is right-angled.
+
Example: \(7,24,25\) because \(7^2+24^2=49+576=625=25^2\).
+
+
Coordinate geometry use
+
Distance between points \(A(x_1,y_1)\) and \(B(x_2,y_2)\):
+
\[
+ AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}
+ \]
+
This is Pythagoras applied to horizontal and vertical change.
+
+
Applications
-
\(a^2+b^2=c^2\): right triangle.
-
\(a^2+b^2>c^2\): acute triangle.
-
\(a^2+b^2<c^2\): obtuse triangle.
-
-
-
Using in coordinate geometry
-
- Distance between \(A(x_1,y_1)\) and \(B(x_2,y_2)\):
-
-
\[
- AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}.
- \]
-
- This is Pythagoras applied to horizontal and vertical changes.
-
-
-
Typical applications
-
-
Diagonal of rectangles/squares.
-
Ladders against walls.
-
Shortest straight-line distances on maps/grids.
-
Checking whether corners are right angles in construction.
-
-
-
Exam strategy
-
-
Identify the right angle first.
-
Label hypotenuse clearly before substitution.
-
Keep exact surd form unless decimal is requested.
-
Check answer size: hypotenuse must be longest.
+
Diagonal of squares and rectangles.
+
Ladders, ramps, and roof braces in construction.
+
Map/grid displacement and shortest straight-line paths.
+
Checking if a corner is exactly \(90^\circ\).
History
- The theorem is named after Pythagoras, but knowledge of right-triangle relationships existed in
- earlier Babylonian and Indian mathematics. It became central in Euclidean geometry and later in
- coordinate methods.
+ The theorem is associated with Pythagoras, but right-triangle relationships appeared in earlier
+ Babylonian, Egyptian, and Indian mathematics. In Euclidean geometry, the theorem became a central
+ tool for proof, measurement, and construction.
-
Derivation and reasoning
-
Area-based proof idea
+
Geometric proof by area
- A classic proof rearranges four identical right triangles inside a square in two different ways.
- Equating uncovered areas leads to \(a^2+b^2=c^2\).
+ Build a large square of side length \(a+b\). Place four identical right triangles (legs \(a,b\),
+ hypotenuse \(c\)) inside it so the uncovered center is a square of side \(c\).
+
+
+ Area of big square: \((a+b)^2\). Area of the same figure as pieces:
+ \(4\left(\frac{1}{2}ab\right)+c^2=2ab+c^2\). Set them equal:
+
+
\[
+ (a+b)^2 = 2ab + c^2
+ \]
+
\[
+ a^2 + 2ab + b^2 = 2ab + c^2
+ \]
+
\[
+ a^2 + b^2 = c^2
+ \]
Checkpoints
- Find hypotenuse if legs are 9 and 12.
+ If the legs are 3 and 4, what is the hypotenuse?
-
Answer: \(c=\sqrt{9^2+12^2}=\sqrt{225}=15\).
+
Answer: \(c=\sqrt{3^2+4^2}=\sqrt{25}=5\).
- A right triangle has hypotenuse 17 and one leg 8. Find the other leg.
+ If the legs are 6 and 8, what is the hypotenuse?
-
Answer: \(\sqrt{17^2-8^2}=\sqrt{225}=15\).
+
Answer: \(c=\sqrt{6^2+8^2}=\sqrt{100}=10\).
- Are sides 10, 24, 26 right-angled?
+ If the legs are 5 and 12, what is the hypotenuse?
-
Answer: Yes, \(10^2+24^2=100+576=676=26^2\).
+
Answer: \(c=\sqrt{5^2+12^2}=\sqrt{169}=13\).
- Distance between \((-2,1)\) and \((4,9)\).
+ A square has side length 6. Find its diagonal.
-
Answer: \(\sqrt{6^2+8^2}=10\).
+
Answer: \(d=\sqrt{6^2+6^2}=\sqrt{72}=6\sqrt{2}\).
- Rectangle has side lengths 7 and 24. Find diagonal.
+ A square has side length 9. Find its diagonal.
+
+
+ For legs \(x\) and \(y\), write the hypotenuse.
+
+
Answer: \(c=\sqrt{x^2+y^2}\).
+
+
+
+ Using the proof figure, explain why \((a+b)^2\) and \(2ab+c^2\) must be equal.
+
+
+ Answer: They are two area expressions for the same large square: one as a full
+ square of side \(a+b\), and one as four right triangles plus the center square of side \(c\).
+
-
Applications
-
-
Architecture: checking right angles and structural diagonals.
-
Navigation: shortest displacement calculations on grid maps.
-
Computer graphics: pixel distance and vector magnitude.
-
-
-
References
-
-
Standard high-school geometry curricula on Pythagoras and its converse.
-
Classical Euclidean geometry references.
-
+
Vocabulary
+
+
+
+
Term
+
Definition
+
+
+
+
+
Right triangle
+
A triangle with one angle equal to \(90^\circ\).
+
+
+
Legs
+
The two sides that form the right angle.
+
+
+
Hypotenuse
+
The side opposite the right angle; the longest side in a right triangle.
+
+
+
Pythagorean Theorem
+
The relationship \(a^2+b^2=c^2\) for right triangles.
Discover, geometrically prove, and apply the Pythagorean Theorem.
- Pythagoras' theorem links the side lengths of a right-angled triangle. It is one of the most
- useful tools in geometry and coordinate problems.
+ Imagine you are helping an architect build a scale model of a sculpture. One triangular frame is
+ a right triangle with legs 9 ft and 12 ft. How long is the third side?
-
Pythagoras' theorem
-
- In a right triangle with legs \(a,b\) and hypotenuse \(c\):
-
+
Pythagorean Theorem
+
In any right triangle with legs \(a\) and \(b\), and hypotenuse \(c\):
\[
- a^2+b^2=c^2.
+ a^2 + b^2 = c^2
\]
- The hypotenuse is always the side opposite the right angle and is the longest side.
+ The hypotenuse is opposite the right angle, so it is always the longest side.
-
Finding a missing side
-
Example 1. If \(a=6\), \(b=8\), then:
+
Right triangle labels
+
We usually name vertices with uppercase letters and opposite sides with matching lowercase letters.
- If side lengths satisfy \(a^2+b^2=c^2\), the triangle is right-angled.
-
-
- Example: \(7,24,25\) gives \(7^2+24^2=49+576=625=25^2\), so right-angled.
+ When solving \(c^2=289\), the equation has two numerical roots (\(\pm 17\)), but side lengths in
+ geometry are nonnegative. So the triangle side is \(17\), not \(-17\).
-
Classifying triangle type
+
Converse of the theorem
- For largest side \(c\):
+ If three side lengths satisfy \(a^2+b^2=c^2\), then the triangle is right-angled.
+
Example: \(7,24,25\) because \(7^2+24^2=49+576=625=25^2\).
+
+
Coordinate geometry use
+
Distance between points \(A(x_1,y_1)\) and \(B(x_2,y_2)\):
+
\[
+ AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}
+ \]
+
This is Pythagoras applied to horizontal and vertical change.
+
+
Applications
-
\(a^2+b^2=c^2\): right triangle.
-
\(a^2+b^2>c^2\): acute triangle.
-
\(a^2+b^2<c^2\): obtuse triangle.
-
-
-
Using in coordinate geometry
-
- Distance between \(A(x_1,y_1)\) and \(B(x_2,y_2)\):
-
-
\[
- AB=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}.
- \]
-
- This is Pythagoras applied to horizontal and vertical changes.
-
-
-
Typical applications
-
-
Diagonal of rectangles/squares.
-
Ladders against walls.
-
Shortest straight-line distances on maps/grids.
-
Checking whether corners are right angles in construction.
-
-
-
Exam strategy
-
-
Identify the right angle first.
-
Label hypotenuse clearly before substitution.
-
Keep exact surd form unless decimal is requested.
-
Check answer size: hypotenuse must be longest.
+
Diagonal of squares and rectangles.
+
Ladders, ramps, and roof braces in construction.
+
Map/grid displacement and shortest straight-line paths.
- The theorem is named after Pythagoras, but knowledge of right-triangle relationships existed in
- earlier Babylonian and Indian mathematics. It became central in Euclidean geometry and later in
- coordinate methods.
+ The theorem is associated with Pythagoras, but right-triangle relationships appeared in earlier
+ Babylonian, Egyptian, and Indian mathematics. In Euclidean geometry, the theorem became a central
+ tool for proof, measurement, and construction.
-
Derivation and reasoning
-
Area-based proof idea
+
Geometric proof by area
- A classic proof rearranges four identical right triangles inside a square in two different ways.
- Equating uncovered areas leads to \(a^2+b^2=c^2\).
+ Build a large square of side length \(a+b\). Place four identical right triangles (legs \(a,b\),
+ hypotenuse \(c\)) inside it so the uncovered center is a square of side \(c\).
+
+
+ Area of big square: \((a+b)^2\). Area of the same figure as pieces:
+ \(4\left(\frac{1}{2}ab\right)+c^2=2ab+c^2\). Set them equal:
+
+
\[
+ (a+b)^2 = 2ab + c^2
+ \]
+
\[
+ a^2 + 2ab + b^2 = 2ab + c^2
+ \]
+
\[
+ a^2 + b^2 = c^2
+ \]
Checkpoints
- Find hypotenuse if legs are 9 and 12.
+ If the legs are 3 and 4, what is the hypotenuse?
-
Answer: \(c=\sqrt{9^2+12^2}=\sqrt{225}=15\).
+
Answer: \(c=\sqrt{3^2+4^2}=\sqrt{25}=5\).
- A right triangle has hypotenuse 17 and one leg 8. Find the other leg.
+ If the legs are 6 and 8, what is the hypotenuse?
-
Answer: \(\sqrt{17^2-8^2}=\sqrt{225}=15\).
+
Answer: \(c=\sqrt{6^2+8^2}=\sqrt{100}=10\).
- Are sides 10, 24, 26 right-angled?
+ If the legs are 5 and 12, what is the hypotenuse?
-
Answer: Yes, \(10^2+24^2=100+576=676=26^2\).
+
Answer: \(c=\sqrt{5^2+12^2}=\sqrt{169}=13\).
- Distance between \((-2,1)\) and \((4,9)\).
+ A square has side length 6. Find its diagonal.
-
Answer: \(\sqrt{6^2+8^2}=10\).
+
Answer: \(d=\sqrt{6^2+6^2}=\sqrt{72}=6\sqrt{2}\).
- Rectangle has side lengths 7 and 24. Find diagonal.
+ A square has side length 9. Find its diagonal.
+
+
+ For legs \(x\) and \(y\), write the hypotenuse.
+
+
Answer: \(c=\sqrt{x^2+y^2}\).
+
+
+
+ Using the proof figure, explain why \((a+b)^2\) and \(2ab+c^2\) must be equal.
+
+
+ Answer: They are two area expressions for the same large square: one as a full
+ square of side \(a+b\), and one as four right triangles plus the center square of side \(c\).
+
-
Applications
-
-
Architecture: checking right angles and structural diagonals.
-
Navigation: shortest displacement calculations on grid maps.
-
Computer graphics: pixel distance and vector magnitude.
-
-
-
References
-
-
Standard high-school geometry curricula on Pythagoras and its converse.
-
Classical Euclidean geometry references.
-
+
Vocabulary
+
+
+
+
Term
+
Definition
+
+
+
+
+
Right triangle
+
A triangle with one angle equal to \(90^\circ\).
+
+
+
Legs
+
The two sides that form the right angle.
+
+
+
Hypotenuse
+
The side opposite the right angle; the longest side in a right triangle.
+
+
+
Pythagorean Theorem
+
The relationship \(a^2+b^2=c^2\) for right triangles.