new unit circle exercise and fix display

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 = (
       <div>
         <div>
-          <UnitCircleExercise
-            turtleAngle={1}
-            markers={['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']}
-            labels={['A', 'C', '', 'B', '']}
-          />
-          <UnitCircleInput
-            nextExercise={() => {
-              // console.log('unit');
+          <UnitCircleParent
+            unitCircleMarkers={[
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+            ]}
+            unitCircleLabels={[
+              ['A', 'C', '', 'B', ''],
+              ['B', 'A', '', 'C', ''],
+              ['', '', 'C', 'A', 'B'],
+            ]}
+            directions={[
+              ['left', 'right', '', 'right', ''],
+              ['left', 'left', '', 'left', ''],
+              ['', '', 'right', 'right', 'left'],
+            ]}
+            toNextExercise={() => {
               setDisplayExercise(displayExercise + 1);
               incrementExercise();
               return;
             }}
-            markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]}
-            labels={[['A', 'C', '', 'B', '']]}
-            directions={[['left', 'right', '', 'right', '']]}
           />
         </div>
       </div>

src/components/shared/Exercises/UnitCircleExercise.tsx

@@ -33,7 +33,7 @@ function UnitCircleExercise({
         curAngle += angleBetweenTicks;
         cursorAngle += cursorTicks;
         return (
-          <div key={element}>
+          <div key={idx}>
             <div
               className="circle-exercise"
               style={{

src/components/shared/Exercises/UnitCircleInput.tsx

@@ -3,22 +3,22 @@ import '../../../styles/Exercises/UnitCircleInput.scss';
 
 interface UnitCircleInputProps {
   nextExercise: () => 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 (
-      <div id="unitcircle-question-container">
+      <div id="unitcircle-question-container" key={id}>
         <p id="unitcircle-check-question">
           {label} = {direction}{' '}
         </p>
@@ -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,16 +88,15 @@ 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,
       });
     }
   } else {
     return <h2>Done!</h2>;
   }
 
-  //console.log(questionLabels[counter]);
   const questionOutput = questions.map(MakeQuestion);
   return (
     <div className="unitcircle-question-container">

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 (
+    <div>
+      <UnitCircleExercise
+        //orientation="horizontal"
+        turtleAngle={1}
+        markers={
+          unitCircleMarkers[Math.min(exerciseNum, unitCircleMarkers.length - 1)]
+        }
+        labels={
+          unitCircleLabels[Math.min(exerciseNum, unitCircleLabels.length - 1)]
+        }
+      />
+      <UnitCircleInput
+        answers={answers}
+        questionLabels={questionLabels}
+        directions={questionDirections}
+        nextExercise={nextExercise}
+      />
+    </div>
+  );
+}
+
+export default UnitCircleParent;

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;
 }

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 {