feat: unitcircle input validation and match figma

src/components/shared/ExerciseSide.tsx

@@ -150,8 +150,8 @@ ExerciseSideProps): JSX.Element {
         <div>
           <UnitCircleExercise
             turtleAngle={1}
-            markers={['A', '', 'B']}
-            labels={['B', 'C', 'D']}
+            markers={['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']}
+            labels={['A', 'C', '', 'B', '']}
           />
           <UnitCircleInput
             nextExercise={() => {
@@ -160,6 +160,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', '']]}
           />
         </div>
       </div>

src/components/shared/Exercises/UnitCircleExercise.tsx

@@ -16,6 +16,8 @@ function UnitCircleExercise({
   const rotateString = turtleAngle + 'deg';
   const angleBetweenTicks = Math.PI / (labels.length - 1);
   let curAngle = 0 - angleBetweenTicks;
+  const cursorTicks = Math.PI / (labels.length - 1);
+  let cursorAngle = 0 - cursorTicks;
   const scaleCursor = 'scale(1.5)';
   return (
     <div className="circle-container">
@@ -29,55 +31,79 @@ function UnitCircleExercise({
       />
       {labels.map((element, idx) => {
         curAngle += angleBetweenTicks;
+        cursorAngle += cursorTicks;
         return (
           <div key={element}>
             <div
               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
-                      ? 7.5
-                      : 5
-                    : 10)
+                      ? 17 //middle
+                      : 19 //left
+                    : 14) //right
                 }%`,
-                bottom: `${Math.sin(curAngle) * 50 + 30}%`,
-              }}
-            >
-              {element}
-            </div>
-            <div
-              className="circle-label"
-              style={{
-                left: `${
-                  (1 - Math.cos(curAngle)) * 45 +
+                bottom: `${
+                  Math.sin(curAngle) * 53 + //middle right and left
                   (curAngle <= Math.PI / 2
                     ? curAngle == Math.PI / 2
-                      ? 2.5
-                      : 5
-                    : 0)
+                      ? 28 //middle
+                      : 25 //left
+                    : 25) //right
                 }%`,
-                bottom: `${Math.sin(curAngle) * 50 + 30}%`,
               }}
             >
-              {markers[idx]}
+              {element}
             </div>
+            {labels[idx] === '' ? (
+              <div
+                className="circle-label"
+                style={{
+                  left: `${
+                    (1 - Math.cos(curAngle)) * 30 + //middle left and right
+                    (curAngle <= Math.PI / 2
+                      ? curAngle == Math.PI / 2
+                        ? 19 //middle
+                        : 20 //left
+                      : 15) //right
+                  }%`,
+                  bottom: `${
+                    Math.sin(curAngle) * 55 + //middle left and right
+                    (curAngle <= Math.PI / 2
+                      ? curAngle == Math.PI / 2
+                        ? 30 //middle
+                        : 25 //left
+                      : 25) //right
+                  }%`,
+                }}
+              >
+                {markers[idx]}
+              </div>
+            ) : null}
 
             <img
               src={Cursor}
               className="circle-cursor"
               style={{
                 left: `${
-                  (1 - Math.cos(curAngle)) * 50 +
-                  (curAngle <= Math.PI / 2
-                    ? curAngle == Math.PI / 2
-                      ? -2.5
-                      : -10
-                    : 5)
+                  (1 - Math.cos(cursorAngle)) * 43 +
+                  (cursorAngle <= Math.PI / 2
+                    ? cursorAngle == Math.PI / 2
+                      ? 5
+                      : 7
+                    : 2)
+                }%`,
+                bottom: `${
+                  Math.sin(cursorAngle) * 80 +
+                  (cursorAngle <= Math.PI / 2
+                    ? cursorAngle == Math.PI / 2
+                      ? 25
+                      : 28
+                    : 28)
                 }%`,
-                bottom: `${Math.sin(curAngle) * 75 + 30}%`,
-                transform: `rotate(${curAngle}rad) ${
+                transform: `rotate(${cursorAngle}rad) ${
                   labels.length % 2 === 1 &&
                   idx === Math.floor(labels.length / 2)
                     ? scaleCursor

src/components/shared/Exercises/UnitCircleInput.tsx

@@ -1,51 +1,141 @@
-//import { useState } from 'react';
+import { useState } from 'react';
 import '../../../styles/Exercises/UnitCircleInput.scss';
 
 interface UnitCircleInputProps {
   nextExercise: () => void;
+  markers: string[][];
+  labels: string[][];
+  directions: string[][];
 }
 
-function UnitCircleInput({ nextExercise }: UnitCircleInputProps): JSX.Element {
-  return (
-    <div id="unitcircle-question-container">
-      <div id="unitcircle-check-question">
-        Type the correct numbers into the blanks below!
-      </div>
+interface CircleQuestion {
+  label: string;
+  answer: string; // Should change to being strings
+  direction: string;
+  id: number; //This sucks lol
+}
 
-      <div id="unitcircle-check-question">
-        {' '}
-        <i>A</i> = 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 (
+      <div id="unitcircle-question-container">
+        <p id="unitcircle-check-question">
+          {label} = {direction}{' '}
+        </p>
         <input
           type="text"
           className="unitcircle-check-box"
-          //onChange={handleChange}
-          //value={inputText[id]}
+          onChange={handleChange}
+          value={inputText[id]}
         />
-        <p>
-          {' '}
-          <i>B</i> = right
-          <input
-            type="text"
-            className="unitcircle-check-box"
-            //onChange={handleChange}
-            //value={inputText[id]}
-          />
-        </p>
-        <p>
-          {' '}
-          <i>C</i> = right
-          <input
-            type="text"
-            className="unitcircle-check-box"
-            //onChange={handleChange}
-            //value={inputText[id]}
-          />
-        </p>
-        <div id="unitcircleinput-check-button-container">
-          <button id="unitcircleinput-check-button" onClick={nextExercise}>
-            Check
-          </button>
-        </div>
+      </div>
+    );
+  }
+
+  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: 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!";
+    } 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<string[]>(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 <h2>Done!</h2>;
+  }
+
+  //console.log(questionLabels[counter]);
+  const questionOutput = questions.map(MakeQuestion);
+  return (
+    <div className="unitcircle-question-container">
+      <div id="unitcircle-question">
+        Type the correct numbers into the blanks below!
+      </div>
+      <div className="unitcircle-question-box">{questionOutput}</div>
+      <div className="unitcircle-wrong-box">
+        <h3 id="unitcircle-check-wrong">&nbsp;{wrongMessage(wrong)}&nbsp;</h3>
+      </div>
+      <div className="unitcircleinput-check-button-container">
+        <button id="unitcircleinput-check-button" onClick={checkAnswer}>
+          Check
+        </button>
       </div>
     </div>
   );

src/styles/Exercises/UnitCircleExercise.scss

@@ -24,16 +24,16 @@
 
 .circle-exercise {
   font-family: Quattrocento Sans, sans-serif;
-  font-size: 2vh;
+  font-size: 4vh;
   font-style: italic;
   font-weight: bold;
   position: absolute;
 }
 
 .circle-label {
-  font-family: Cascadia Code, sans-serif;
-  font-size: 2vh;
-  font-weight: regular;
+  font-family: Quattrocento Sans, sans-serif;
+  font-size: 3vh;
+  font-weight: bold;
   position: absolute;
 }
 

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;