From af0790430a99d37936520a233fea64fb00814ffe Mon Sep 17 00:00:00 2001 From: Rakil Kim Date: Sat, 24 Feb 2024 23:12:03 -0800 Subject: [PATCH] unitcircle validate input(#88) --- src/components/shared/ExerciseSide.tsx | 7 +- .../shared/Exercises/UnitCircleExercise.tsx | 68 ++++---- .../shared/Exercises/UnitCircleInput.tsx | 160 ++++++++++++++---- src/styles/Exercises/UnitCircleInput.scss | 12 +- 4 files changed, 172 insertions(+), 75 deletions(-) diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx index 34fb495..eeab770 100644 --- a/src/components/shared/ExerciseSide.tsx +++ b/src/components/shared/ExerciseSide.tsx @@ -147,8 +147,8 @@ ExerciseSideProps): JSX.Element {
{ @@ -157,6 +157,9 @@ ExerciseSideProps): JSX.Element { 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 0aaacf9..7bef07a 100644 --- a/src/components/shared/Exercises/UnitCircleExercise.tsx +++ b/src/components/shared/Exercises/UnitCircleExercise.tsx @@ -14,10 +14,10 @@ function UnitCircleExercise({ labels, }: UnitCircleProps): JSX.Element { const rotateString = turtleAngle + 'deg'; - const angleBetweenTicks = Math.PI / (labels.length - 3); + const angleBetweenTicks = Math.PI / (labels.length - 1); + let curAngle = 0 - angleBetweenTicks; const cursorTicks = Math.PI / (labels.length - 1); let cursorAngle = 0 - cursorTicks; - let curAngle = 0 - angleBetweenTicks; const scaleCursor = 'scale(1.5)'; return (
@@ -38,48 +38,50 @@ function UnitCircleExercise({ className="circle-exercise" style={{ left: `${ - (1 - Math.cos(curAngle)) * 40 + + (1 - Math.cos(curAngle)) * 31 + //middle right and left (curAngle <= Math.PI / 2 ? curAngle == Math.PI / 2 - ? -12 - : 19 - : -12) + ? 17 //middle + : 19 //left + : 14) //right }%`, bottom: `${ - Math.sin(curAngle) * 50 + + Math.sin(curAngle) * 53 + //middle right and left (curAngle <= Math.PI / 2 ? curAngle == Math.PI / 2 - ? 13 - : 25 - : 63) + ? 28 //middle + : 25 //left + : 25) //right }%`, }} > {element}
-
- {markers[idx]} -
+ {labels[idx] === '' ? ( +
+ {markers[idx]} +
+ ) : null} void; + markers: string[][]; + labels: string[][]; + directions: string[][]; } -function UnitCircleInput({ nextExercise }: UnitCircleInputProps): JSX.Element { - return ( -
-
- Type the correct numbers into the blanks below! -
+interface CircleQuestion { + label: string; + answer: string; // Should change to being strings + direction: string; + id: number; //This sucks lol +} -
- {' '} - A = left +function UnitCircleInput({ + nextExercise, + markers, + labels, + directions, +}: UnitCircleInputProps): JSX.Element { + function MakeQuestion({ label, id, direction }: CircleQuestion): JSX.Element { + const handleChange = (event: { target: { value: string } }) => { + setText(event.target.value, id); + }; + /* lines 25-35, try to get component to look like this */ + return ( +
+

+ {label} = {direction}{' '} +

-

- {' '} - B = right - -

-

- {' '} - C = right - -

-
- -
+
+ ); + } + + 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]) { + setWrong(true); + return; + } + } + if (counter == questionLabels.length - 1) { + setIsDone(true); + //setIsComplete(true); + nextExercise(); + return; + } + setCounter(counter + 1); + setWrong(false); + setInputText(startInputStrings); + nextExercise(); + } + + const answers: string[][] = []; + 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] !== '') { + currentAnswers.push(markers[i][j].slice(0, -1)); + 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!"; + } else { + return; + } + } + + const [counter, setCounter] = useState(0); + const [wrong, setWrong] = useState(false); + const [isDone, setIsDone] = useState(false); + const questions = []; + const startInputStrings: string[] = []; + for (let i = 0; i < questionLabels[counter].length; i++) { + startInputStrings.push(''); + } + const [inputText, setInputText] = useState(startInputStrings); + function setText(text: string, id: number) { + const tempInputStrings = [...inputText]; + tempInputStrings[id] = text; + setInputText(tempInputStrings); + } + + if (!isDone) { + for (let i = 0; i < questionLabels[counter].length; i++) { + questions.push({ + label: questionLabels[counter][i], + direction: questionDirections[counter][i], + answer: answers[counter][i], + id: i, + }); + } + } else { + return

Done!

; + } + + //console.log(questionLabels[counter]); + const questionOutput = questions.map(MakeQuestion); + return ( +
+
+ Type the correct numbers into the blanks below! +
+
{questionOutput}
+
+

 {wrongMessage(wrong)} 

+
+
+
); diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss index 479b625..7bd5b1e 100644 --- a/src/styles/Exercises/UnitCircleInput.scss +++ b/src/styles/Exercises/UnitCircleInput.scss @@ -21,20 +21,25 @@ flex-direction: column; } +#unitcircle-question { + @include font-styles(); + margin-bottom: 2vh; + margin-left: 2vh; +} + #unitcircle-question-container { align-items: baseline; display: flex; - flex-direction: column; margin-bottom: -15px; margin-top: -15px; - padding-left: 8%; + padding-left: 0; } #unitcircle-check-question { @include font-styles(); font-size: calc(13px + 1vw); font-style: normal; - margin-bottom: 2vh; + margin-bottom: 4vh; margin-left: auto; margin-right: auto; } @@ -47,6 +52,7 @@ font-family: Cascadia Code, sans-serif; font-size: calc(16px + 1vw); height: 18pt; + margin-bottom: 0; margin-left: 2vh; size: 64pt; text-align: center;