website

commit 86207f0a18ec8d5e2e4f37340126b3528654975a
parent 2cfadd99ffa585a7d0fbe441575c91850f1a687a
Author: fen123456 <fenwthompson@gmail.com>
Date:   Fri, 14 Aug 2026 13:31:56 +0100

Add Lines to DoubleReflectionQuestion

Diffstat:
M
src/components/graphing/Line.jsx
 | 
13
+++++--------
M
src/components/questions/DoubleReflectionQuestion.jsx
 | 
5
+++++

2 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/src/components/graphing/Line.jsx b/src/components/graphing/Line.jsx
@@ -1,22 +1,19 @@
 import { getColourClass } from "../../scripts/utils"
 
-export default function Line({ line, viewBox, label=null, colour='auto' }) {
-  // try to find pair of points that meet line at xmin, xmax
-  // same for ymin, ymax.
-  // discard points outside of viewbox.
-  // use two remainers to draw line. 
+export default function Line({ line, viewBox, label=null, colour='auto' }) { 
   const [ minX, minY, width, height ] = viewBox
   const maxX = minX + width
   const maxY = minY + height
 
-  let points = []
-
   const xPairs = [minX, maxX].map((x) => [x, (line.c - line.a*x)/line.b])
   const yPairs = [minY, maxY].map((y) => [(line.c - line.b*y)/line.a, y])
+
+  // important to do this for straight (y = c or x = c) lines.
+  let points = []
   xPairs.map((point) => { (point[1] >= minY && point[1] <= maxY) && points.push(point) })
   yPairs.map((point) => { (point[0] > minX && point[0] < maxX) && points.push(point) })
 
-  console.log(points)
+  // points will always be two.
   const [i, f] = points
   return <line x1={i[0]} y1={i[1]} x2={f[0]} y2={f[1]} class={getColourClass(colour)} />
 }
diff --git a/src/components/questions/DoubleReflectionQuestion.jsx b/src/components/questions/DoubleReflectionQuestion.jsx
@@ -1,5 +1,7 @@
 import { getRandomChoice, getRandomInt } from "../../scripts/utils";
 import Graph from "../graphing/Graph";
+import Line from "../graphing/Line";
+import Polygon from "../graphing/Polygon";
 import Question from "../Question";
 
 function shapeToString(shape) {
@@ -58,6 +60,9 @@ export default function DoubleReflectionQuestion({ seed, showAnswer }) {
       Reflect in line 1, then line 2. What single transformation describes this?
     </p>
     <Graph viewBox={viewBox} width="300" height="300">
+      <Polygon points={originalShape} label="P" colour="1" />
+      <Line line={line1} colour="2" viewBox={viewBox} />
+      <Line line={line2} colour="3" viewBox={viewBox} />
     </Graph>
   </>)