website

commit 53320a48b96366e56209262cb86ac2779f87a8ee
parent 9c23d222f9807bbada98d4e0f29154a755c45486
Author: fen123456 <fenwthompson@gmail.com>
Date:   Mon, 10 Aug 2026 21:49:36 +0100

double transformation upgrade

Diffstat:
M
TODO.md
 | 
1
+
M
src/components/questions/DoubleTransformationQuestion.jsx
 | 
24
++++++++++++++----------
M
src/styles/svg.css
 | 
27
+++++++++++++++++++++++++++

3 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/TODO.md b/TODO.md
@@ -3,6 +3,7 @@
 
 # Questions
 - Improve adding fractions
+- i suppose for a > 1 i should actually factorise 2x-2 etc. factorising code gets bigger
 - Add more questions
   - Add graphing questions
     - Find all roots of this quintic (or something) polynomial (repeated root knowledge)
diff --git a/src/components/questions/DoubleTransformationQuestion.jsx b/src/components/questions/DoubleTransformationQuestion.jsx
@@ -18,24 +18,28 @@ function rotatePoint(point, angle, axis=[0, 0]) {
 export default function DoubleTransformationQuestion({ seed, showAnswer }) {
   const viewBox = [-7, -7, 14, 14]
   const originalShape = [[0, 1], [2, 1], [0, 2]]
-  const axis = [getRandomInt(-3, 3, seed), getRandomInt(-3, 3, seed + .1)]
-  const angle = getRandomChoice([Math.PI/2, Math.PI, 3*Math.PI/2], seed + .2)
+  const axis1 = [getRandomInt(-3, 3, seed), getRandomInt(-3, 3, seed + .1)]
+  const axis2 = [getRandomInt(-3, 3, seed + .2), getRandomInt(-3, 3, seed + .3)]
+  const angle = getRandomChoice([Math.PI/2, Math.PI, 3*Math.PI/2], seed + .4)
 
   // Rotation then translation!. could do other way around if really needed.
-  const midShape = originalShape.map((point) => rotatePoint(point, angle))
+  const midShape = originalShape.map((point) => rotatePoint(point, angle, axis1))
 
-  const rotatedAxis = rotatePoint(axis, angle)
-  const translationVector = axis.map((value, i) => value - rotatedAxis[i])
+  const rotatedAxis = rotatePoint(axis2, angle, axis1)
+  const translationVector = axis2.map((value, i) => value - rotatedAxis[i])
 
   const endShape = midShape.map((point) => point.map((value, i) => value + translationVector[i]))
 
   const question = (<>
-    <p>What single transformation..?</p>
+    <p>
+      What single transformation..?
+    </p>
     <Graph viewBox={viewBox} width="300" height="300">
-      <polygon points={shapeToString(originalShape)} />
-      <polygon points={shapeToString(midShape)} />
-      <polygon points={shapeToString(endShape)} />
-      <CoordinateLabel x={axis[0]} y={axis[1]} position="top" />
+      <polygon className="color-1" points={shapeToString(originalShape)} />
+      <polygon className="color-2" points={shapeToString(midShape)} />
+      <polygon className="color-3" points={shapeToString(endShape)} />
+      <CoordinateLabel x={axis2[0]} y={axis2[1]} position="top" />
+      <CoordinateLabel x={axis1[0]} y={axis1[1]} position="top" />
     </Graph>
   </>)
 
diff --git a/src/styles/svg.css b/src/styles/svg.css
@@ -32,3 +32,29 @@ text {
   stroke-width: 0.03;
   paint-order: stroke;
 }
+
+.color-1 {
+  fill: var(--graph-1);
+  stroke: var(--graph-1);
+  fill-opacity: 0.5; 
+}
+.color-2 {
+  fill: var(--graph-2);
+  stroke: var(--graph-2);
+  fill-opacity: 0.5;
+}
+.color-3 {
+  fill: var(--graph-3);
+  stroke: var(--graph-3);
+  fill-opacity: 0.5;
+}
+.color-4 {
+  fill: var(--graph-4);
+  stroke: var(--graph-4);
+  fill-opacity: 0.5;
+}
+.color-5 {
+  fill: var(--graph-5);
+  stroke: var(--graph-5);
+  fill-opacity: 0.5;
+}
+\ No newline at end of file