From e02bbaf019b921e059beb80824379b3392d398e3 Mon Sep 17 00:00:00 2001 From: Rakil Kim Date: Sun, 28 Apr 2024 18:24:11 -0700 Subject: [PATCH] new unit circle exercise and fix display (#103) Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com> --- src/components/shared/ExerciseSide.tsx | 32 +++++--- .../shared/Exercises/UnitCircleExercise.tsx | 2 +- .../shared/Exercises/UnitCircleInput.tsx | 41 ++-------- .../shared/Exercises/UnitCircleParent.tsx | 80 +++++++++++++++++++ src/styles/Exercises/UnitCircleExercise.scss | 5 +- src/styles/Exercises/UnitCircleInput.scss | 2 + 6 files changed, 113 insertions(+), 49 deletions(-) create mode 100644 src/components/shared/Exercises/UnitCircleParent.tsx diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx index d55d764..2617d1a 100644 --- a/src/components/shared/ExerciseSide.tsx +++ b/src/components/shared/ExerciseSide.tsx @@ -8,8 +8,8 @@ import AxisParent from './Exercises/AxisParent'; import GraphExercise from './Exercises/GraphExercise'; import GraphInput from './Exercises/GraphInput'; //import AxisParent from './Exercises/AxisParent'; -import UnitCircleExercise from './Exercises/UnitCircleExercise'; -import UnitCircleInput from './Exercises/UnitCircleInput'; +import UnitCircleParent from './Exercises/UnitCircleParent'; + ('./Exercises/AxisExercise'); interface ExerciseSideProps { @@ -216,21 +216,27 @@ ExerciseSideProps): JSX.Element { curExercise = (
- - { - // console.log('unit'); + { setDisplayExercise(displayExercise + 1); incrementExercise(); return; }} - markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]} - labels={[['A', 'C', '', 'B', '']]} - directions={[['left', 'right', '', 'right', '']]} />
diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx index 7bef07a..95eb54a 100644 --- a/src/components/shared/Exercises/UnitCircleExercise.tsx +++ b/src/components/shared/Exercises/UnitCircleExercise.tsx @@ -33,7 +33,7 @@ function UnitCircleExercise({ curAngle += angleBetweenTicks; cursorAngle += cursorTicks; return ( -
+
void; - markers: string[][]; - labels: string[][]; + answers: number[][]; + questionLabels: string[][]; directions: string[][]; } interface CircleQuestion { label: string; - answer: string; // Should change to being strings + answer: number; // Should change to being strings direction: string; id: number; //This sucks lol } function UnitCircleInput({ nextExercise, - markers, - labels, + answers, + questionLabels, directions, }: UnitCircleInputProps): JSX.Element { function MakeQuestion({ label, id, direction }: CircleQuestion): JSX.Element { @@ -27,7 +27,7 @@ function UnitCircleInput({ }; /* lines 25-35, try to get component to look like this */ return ( -
+

{label} = {direction}{' '}

@@ -44,7 +44,7 @@ function UnitCircleInput({ function checkAnswer() { // Invoked to check answers and switch to the next question or set the answer wrong for (let i = 0; i < answers[counter].length; i++) { - if (inputText[i] != answers[counter][i]) { + if (parseInt(inputText[i]) != answers[counter][i]) { setWrong(true); return; } @@ -61,30 +61,6 @@ function UnitCircleInput({ nextExercise(); } - const answers: number[][] = []; - const questionLabels: string[][] = []; - const questionDirections: string[][] = []; - for (let i = 0; i < markers.length; i++) { - const currentAnswers = []; - const currentLabels = []; - const currentDirections = []; - const length = markers[i].length; - for (let j = 0; j < length; j++) { - if (labels[i][j] !== '') { - let multiplier = 1; - if (directions[i][j] == 'left') { - multiplier = -1; - } - currentAnswers.push(parseInt(markers[i][j].slice(0, -1)) * multiplier); - currentLabels.push(labels[i][j]); - currentDirections.push(directions[i][j]); - } - } - answers.push(currentAnswers); - questionLabels.push(currentLabels); - questionDirections.push(currentDirections); - } - function wrongMessage(isWrong: boolean) { if (isWrong) { return "That's not quite right. Try again!"; @@ -112,8 +88,8 @@ function UnitCircleInput({ for (let i = 0; i < questionLabels[counter].length; i++) { questions.push({ label: questionLabels[counter][i], - direction: questionDirections[counter][i], answer: answers[counter][i], + direction: directions[counter][i], id: i, }); } @@ -121,7 +97,6 @@ function UnitCircleInput({ return

Done!

; } - //console.log(questionLabels[counter]); const questionOutput = questions.map(MakeQuestion); return (
diff --git a/src/components/shared/Exercises/UnitCircleParent.tsx b/src/components/shared/Exercises/UnitCircleParent.tsx new file mode 100644 index 0000000..09f8b96 --- /dev/null +++ b/src/components/shared/Exercises/UnitCircleParent.tsx @@ -0,0 +1,80 @@ +import { useState, useEffect } from 'react'; +import '../../../styles/Exercises/AxisExercise.scss'; +import UnitCircleExercise from './UnitCircleExercise'; +import UnitCircleInput from './UnitCircleInput'; +('./Exercises/AxisExercise'); + +interface UnitCircleParentProps { + unitCircleMarkers: string[][]; //2-D array for different sets of problems + unitCircleLabels: string[][]; + directions: string[][]; + toNextExercise: () => void; +} + +function UnitCircleParent({ + unitCircleMarkers, + unitCircleLabels, + directions, + toNextExercise, +}: UnitCircleParentProps): JSX.Element { + //make 2d array for answers using the non-empty elements of unitCircleLabels + const answers: number[][] = []; + const questionLabels: string[][] = []; + const questionDirections: string[][] = []; + for (let i = 0; i < unitCircleMarkers.length; i++) { + const currentAnswers = []; + const currentLabels = []; + const currentDirections = []; + const length = unitCircleMarkers[i].length; + for (let j = 0; j < length; j++) { + if (unitCircleLabels[i][j] !== '') { + let multiplier = 1; + if (directions[i][j] == 'left') { + multiplier = -1; + } + currentAnswers.push( + parseInt(unitCircleMarkers[i][j].slice(0, -1)) * multiplier + ); + currentLabels.push(unitCircleLabels[i][j]); + currentDirections.push(directions[i][j]); + } + } + answers.push(currentAnswers); + questionLabels.push(currentLabels); + questionDirections.push(currentDirections); + } + + const [exerciseNum, setExerciseNum] = useState(0); + function nextExercise() { + setExerciseNum(exerciseNum + 1); + } // advance to next exercise within axis inputs exercise + + useEffect(() => { + if (exerciseNum == unitCircleMarkers.length) { + toNextExercise(); // update parent exercise side that axis input exercise is complete + } + }, [exerciseNum]); + + return ( +
+ + +
+ ); +} + +export default UnitCircleParent; diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss index e959c12..e83f033 100644 --- a/src/styles/Exercises/UnitCircleExercise.scss +++ b/src/styles/Exercises/UnitCircleExercise.scss @@ -4,8 +4,9 @@ justify-content: center; //margin: 25% 10% 15%; //width: calc(550px + 1vw); - margin-bottom: 5%; - margin-left: 30%; + margin-bottom: 2%; + margin-left: 25%; + margin-top: 5%; position: relative; width: 400px; } diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss index 7bd5b1e..ea9810c 100644 --- a/src/styles/Exercises/UnitCircleInput.scss +++ b/src/styles/Exercises/UnitCircleInput.scss @@ -75,6 +75,8 @@ #unitcircle-check-wrong { @include font-styles(); color: red; + margin-bottom: 3%; + margin-top: 3%; } .unitcircle-wrong-box {