website

commit dd036e913c5bad9a18494f7557d81a72aeb6fcc3
parent 4e85dec77cafe1b4b887da0468a709583c42e30e
Author: fen123456 <fenwthompson@gmail.com>
Date:   Sat, 15 Aug 2026 00:04:36 +0100

Slight transformation changes

Diffstat:
M
src/components/plotting/Line.jsx
 | 
4
++--
M
src/components/questions/DoubleReflectionQuestion.jsx
 | 
27
++++++++++++++++++++++++---
M
src/components/questions/RotationTranslationQuestion.jsx
 | 
6
+++---
M
src/scripts/utils.js
 | 
4
++--

4 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/src/components/plotting/Line.jsx b/src/components/plotting/Line.jsx
@@ -5,8 +5,8 @@ export default function Line({ line, viewBox, label=null, colour='auto' }) {
   const maxX = minX + width
   const maxY = minY + height
 
-  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])
+  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 = []
diff --git a/src/components/questions/DoubleReflectionQuestion.jsx b/src/components/questions/DoubleReflectionQuestion.jsx
@@ -3,6 +3,8 @@ import Plot from "../plotting/Plot";
 import Line from "../plotting/Line";
 import Polygon from "../plotting/Polygon";
 import Question from "../Question";
+import Point from "../plotting/Point";
+import Equation from "../Equation";
 
 function shapeToString(shape) {
   return shape.map((point) => point.join(",")).join(" ")
@@ -20,7 +22,7 @@ function findIntersect(line1, line2) {
   if (k == 0) {
     return null
   }
-  return [(line1.c*line2.b - line2.c*line1.b) / k, (line1.a*line2.c - line2.a*line1.c) / k]
+  return [(line2.c*line1.b - line1.c*line2.b) / k, (line2.a*line1.c - line1.a*line2.c) / k]
 }
 
 function randomLine(seed, lineType, excludedLine = {a: 100, b: 100, c: 100}) {
@@ -57,7 +59,10 @@ export default function DoubleReflectionQuestion({ seed, showAnswer }) {
   
   const question = (<>
     <p>
-      Reflect in {formatLine(line1)} then {formatLine(line2)}. What single transformation describes this?
+      Reflect P in <Equation equation={formatLine(line1)} /> then <Equation equation={formatLine(line2)} />.
+    </p>
+    <p>  
+      What single transformation describes this?
     </p>
     <Plot viewBox={viewBox} width="300" height="300">
       <Polygon points={originalShape} label="P" colour="1" />
@@ -66,11 +71,27 @@ export default function DoubleReflectionQuestion({ seed, showAnswer }) {
     </Plot>
   </>)
 
+  const midShape = originalShape.map((point) => reflectPoint(point, line1))
+  const endShape = midShape.map((point) => reflectPoint(point, line2))
+
   const intersect = findIntersect(line1, line2)
-  let answer = ""
+  let answer = <></>
   if (intersect === null) { // translation
 
   } else { // rotation 180
+    answer = (<>
+      <p>
+        Rotation <Equation equation="180degree" /> about <Equation equation={`(${intersect[0]}, ${intersect[1]})`} />
+      </p>
+      <Plot viewBox={viewBox} width="300" height="300">
+        <Polygon points={originalShape} label="P" colour="1" />
+        <Polygon points={midShape} label="Q" colour="2" />
+        <Polygon points={endShape} label="R" colour="3" />
+        <Line line={line1} colour="2" viewBox={viewBox} />
+        <Line line={line2} colour="3" viewBox={viewBox} />
+        <Point point={intersect}></Point>
+      </Plot>
+    </>)
   }
 
 
diff --git a/src/components/questions/RotationTranslationQuestion.jsx b/src/components/questions/RotationTranslationQuestion.jsx
@@ -61,9 +61,9 @@ export default function RotationTranslationQuestion({ seed, showAnswer }) {
     <Plot viewBox={viewBox}>
       <Polygon points={originalShape} label="P" colour="1" />
       <Point   point={         axis1} label="Q" colour="2" />
-      <Polygon points={     midShape} label="R" colour="3" />
-      <Polygon points={     endShape} label="S" colour="4" />
-      <Point   point={         axis2} />
+      <Polygon points={     midShape} label="R" colour="2" />
+      <Polygon points={     endShape} label="S" colour="3" />
+      <Point   point={         axis2} colour="3" />
     </Plot>
   </>)
 
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -54,9 +54,9 @@ export function formatFraction(num, denom, parameters = { showPlus: false, showO
 }
 
 export function formatLine(line) {
-  if (line.b == 0) { return `x = ${formatFraction(line.c, line.a, { showPlus: false, showOne: true, showZero: true, simplify: true })}`; }
+  if (line.b == 0) { return `x = ${formatFraction(-line.c, line.a, { showPlus: false, showOne: true, showZero: true, simplify: true })}`; }
   let mxTerm = formatFraction(-line.a, line.b, { showPlus: false, showOne: false, showZero: false, simplify: true, suffix: 'x' })
-  const cTerm = formatFraction(line.c, line.b, { showPlus: false, showOne: true, showZero: false, simplify: true })
+  const cTerm = formatFraction(-line.c, line.b, { showPlus: false, showOne: true, showZero: false, simplify: true })
   if (!mxTerm && !cTerm) {
     mxTerm = '0'
   }