commit 74609993a94e8a9c6c383cb0d6870288bc31e63a
parent dd036e913c5bad9a18494f7557d81a72aeb6fcc3
Author: fen123456 <fenwthompson@gmail.com>
Date: Sat, 15 Aug 2026 13:25:08 +0100
Add double reflection rotation angle calculation
Diffstat:
5 files changed, 33 insertions(+), 26 deletions(-)
diff --git a/src/components/RotationTextElement.jsx b/src/components/RotationTextElement.jsx
@@ -0,0 +1,12 @@
+import Equation from "./Equation"
+
+export default function RotationTextElement({ angle }) {
+
+ angle = angle > 0 ? angle % (2*Math.PI) : 2*Math.PI - (-angle % (2*Math.PI)) // range 0 to 2pi, actual modulus lol
+ angle = Math.round(angle * 180 / Math.PI) // range 0 to 360
+ let directionText = ""
+ if (Math.abs(angle) == 180) { directionText = "" }
+ else { directionText = angle < 180 ? 'clockwise' : 'anticlockwise' }
+ angle = angle > 180 ? 360 - angle : angle
+ return <span><Equation equation={angle + 'degree'} /> {directionText}</span>
+}
diff --git a/src/components/questions/DoubleReflectionQuestion.jsx b/src/components/questions/DoubleReflectionQuestion.jsx
@@ -5,6 +5,7 @@ import Polygon from "../plotting/Polygon";
import Question from "../Question";
import Point from "../plotting/Point";
import Equation from "../Equation";
+import RotationTextElement from "../RotationTextElement";
function shapeToString(shape) {
return shape.map((point) => point.join(",")).join(" ")
@@ -16,6 +17,19 @@ function reflectPoint(point, line = {a: 1, b: 1, c: 0}) {
return [px - 2*line.a*k, py - 2*line.b*k]
}
+function getLineAngle(line) {
+ // gradient is -b/a. need -arctan(b/a)
+ return -Math.atan(line.b/line.a)
+}
+
+function rotationText(angle) {
+ angle = ((angle + Math.PI) % 2*Math.PI) - Math.PI // range -pi to pi
+ angle = Math.round(angle * 180 / Math.PI)
+ if (angle == 0) { return '180degree' }
+ if (angle < 0) { return `${-angle}degree anticlockwise`}
+ return `${angle}degree clockwise`
+}
+
function findIntersect(line1, line2) {
const k = line1.a*line2.b - line2.a*line1.b
// parallel
@@ -79,9 +93,10 @@ export default function DoubleReflectionQuestion({ seed, showAnswer }) {
if (intersect === null) { // translation
} else { // rotation 180
+ const angle = 2*(getLineAngle(line2) - getLineAngle(line1))
answer = (<>
<p>
- Rotation <Equation equation="180degree" /> about <Equation equation={`(${intersect[0]}, ${intersect[1]})`} />
+ Rotation <RotationTextElement angle={angle} /> about <Equation equation={`(${intersect[0]}, ${intersect[1]})`} />
</p>
<Plot viewBox={viewBox} width="300" height="300">
<Polygon points={originalShape} label="P" colour="1" />
diff --git a/src/components/questions/RotationTranslationQuestion.jsx b/src/components/questions/RotationTranslationQuestion.jsx
@@ -4,6 +4,7 @@ import Polygon from "../plotting/Polygon";
import Plot from "../plotting/Plot";
import Question from "../Question";
import Equation from "../Equation";
+import RotationTextElement from "../RotationTextElement";
function rotatePoint(point, angle, axis=[0, 0]) {
const diff = [point[0] - axis[0], point[1] - axis[1]]
@@ -31,23 +32,8 @@ export default function RotationTranslationQuestion({ seed, showAnswer }) {
const endShape = midShape.map((point) => point.map((value, i) => value + translationVector[i]))
- let angleDirection = ""
- if (angleDegrees !== 180) {
- if (angleDegrees < 0) {
- angleDirection = "counterclockwise"
- } else {
- angleDirection = "clockwise"
- }
- }
-
- const angleExpression = (
- <span>
- <Equation equation={`${Math.abs(angleDegrees)} degree`} /> {angleDirection}
- </span>
- )
-
const question = (<>
- <p>Shape P is rotated {angleExpression} about point Q to form shape R.</p>
+ <p>Shape P is rotated <RotationTextElement angle={angle} /> about point Q to form shape R.</p>
<p>Shape R is translated by <Equation equation={`vec(${translationVector[0]}, ${translationVector[1]})`} /> to form shape S.</p>
<p>What single transformation maps shape P onto shape S?</p>
<Plot viewBox={viewBox}>
@@ -57,7 +43,7 @@ export default function RotationTranslationQuestion({ seed, showAnswer }) {
</>)
const answer = (<>
- <p>Rotation {angleExpression} about <Equation equation={`(${axis2[0]}, ${axis2[1]})`} />.</p>
+ <p>Rotation <RotationTextElement angle={angle} /> about <Equation equation={`(${axis2[0]}, ${axis2[1]})`} />.</p>
<Plot viewBox={viewBox}>
<Polygon points={originalShape} label="P" colour="1" />
<Point point={ axis1} label="Q" colour="2" />
diff --git a/src/scripts/auto-maths.js b/src/scripts/auto-maths.js
@@ -1,8 +0,0 @@
-import renderMathInElement from 'kern-typ/auto-render';
-
-renderMathInElement(document.body, {
- delimiters: [
- { left: '$$', right: '$$', display: true },
- { left: '$', right: '$', display: false },
- ],
-});
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -1,3 +1,5 @@
+import Equation from "../components/Equation";
+
export function getRandomInt(min, max, seed) {
return min + Math.floor((max - min + 1) * getRandomNumber(seed));
}
