Merge branch 'main' into 84-feature-make-the-graphexercise-and-graphi…

…nput-match-the-figma

src/components/shared/ExerciseSide.tsx

@@ -215,11 +215,14 @@ ExerciseSideProps): JSX.Element {
           axisMarkers={[
             [-2, -1, 0, 1, 2],
             [-1, 0, 1, 2],
+            [-2, -1, 0, 1],
           ]}
           axisLabels={[
             ['A', '', '', 'B', 'C'],
             ['A', '', '', 'B'],
+            ['A', '', 'B', 'C'],
           ]}
+          orientations={['horizontal', 'horizontal', 'vertical']}
           toNextExercise={() => {
             setDisplayExercise(displayExercise + 1);
             incrementExercise();
@@ -234,8 +237,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={() => {
@@ -244,6 +247,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/AxisExercise.tsx

@@ -16,11 +16,16 @@ function AxisExercise({
   turtlePosition,
 }: AxisExerciseProps): JSX.Element {
   const markerSpacing = 60 / (markers.length - 1);
+  const isHorizontal = orientation === 'horizontal';
+  const size = isHorizontal ? '70%' : '30%';
   return (
     <div
       className="axis-container"
       style={{
-        transform: `rotate(${orientation === 'horizontal' ? '0deg' : '90deg'})`, // axis orientation
+        //transform: `rotate(${orientation === 'horizontal' ? '0deg' : '90deg'})`, // axis orientation
+        transform: `rotate(${isHorizontal ? '0deg' : '90deg'})`, // axis orientation
+        width: size,
+        marginLeft: !isHorizontal ? '25%' : '2%',
       }}
     >
       <img className="axis-img" src={Axis} alt="single-axis" />

src/components/shared/Exercises/AxisParent.tsx

@@ -7,26 +7,14 @@ import AxisInput from './AxisInputs';
 interface AxisParentProps {
   axisMarkers: number[][]; //2-D array for different sets of problems
   axisLabels: string[][];
+  orientations: string[];
   toNextExercise: () => void;
 }
 
-/*
-interface AxisInputProps {
-  questionLabels: string[][];
-  answers: number[][];
-  setIsComplete: (a: boolean) => void;
-}
-
-interface AxisQuestion {
-  label: string;
-  answer: number; // Should change to being strings
-  id: number; //This sucks lol
-}
-*/
-
 function AxisParent({
   axisMarkers,
   axisLabels,
+  orientations,
   toNextExercise,
 }: AxisParentProps): JSX.Element {
   //make 2d array for answers using the non-empty elements of axisLabels
@@ -60,7 +48,10 @@ function AxisParent({
   return (
     <div>
       <AxisExercise
-        orientation="horizontal"
+        //orientation="horizontal"
+        orientation={
+          orientations[Math.min(exerciseNum, axisMarkers.length - 1)]
+        }
         markers={axisMarkers[Math.min(exerciseNum, axisMarkers.length - 1)]}
         labels={axisLabels[Math.min(exerciseNum, axisLabels.length - 1)]}
         turtlePosition={1}

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/components/shared/LessonSide/LevelSelector.tsx

@@ -43,7 +43,7 @@ function LevelSelector({
                 <div
                   className="level-connector"
                   style={{
-                    visibility: level < 6 ? 'visible' : 'hidden',
+                    visibility: level < maxLevelReached ? 'visible' : 'hidden',
                   }}
                 ></div>
               );