Merge branch 'main' into 53-feature-add-input-validation-for-graphexe…

…rcise

.gitignore

@@ -17,6 +17,7 @@ build/
 # Never commit individual sessions
 .DS_Store
 .vscode/
+.idea/
 
 # misc
 .env.local

src/components/App.tsx

@@ -1,12 +1,30 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
-import LessonSide from './shared/LessonSide';
+import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
 
 function App(): JSX.Element {
   const [exerciseCount, setExerciseCount] = useState(0);
-  if (exerciseCount == 2) {
+  const [completeExercises, setCompleteExercises] = useState(1);
+
+  //update complete if exercise changes
+  useEffect(() => {
+    updateComplete();
+  }, [exerciseCount]);
+
+  const updateLevel = (newLevel: number): void => {
+    setExerciseCount(newLevel - 1);
+  };
+
+  const updateComplete = (): void => {
+    // console.log(exerciseCount);
+    if (exerciseCount >= completeExercises) {
+      setCompleteExercises(completeExercises + 1);
+    }
+  };
+
+  if (exerciseCount == 5) {
     return (
       <main>
         <CongratsPage />
@@ -16,8 +34,13 @@ function App(): JSX.Element {
   return (
     <div>
       <main>
-        <LessonSide />
+        <LessonSide
+          levelNum={exerciseCount + 1}
+          updateLevel={updateLevel}
+          maxLevel={completeExercises}
+        />
         <ExerciseSide
+          ExercisesNum={exerciseCount}
           incrementExercise={() => setExerciseCount(exerciseCount + 1)}
         />
       </main>

src/components/shared/Congratulations.tsx

@@ -31,7 +31,7 @@ function CongratsPage(): JSX.Element {
         </div>
       </div>
 
-      <div id="encouraging-turtle">
+      <div id="encouraging-turtle-congratulations">
         <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
       </div>
 

src/components/shared/ExerciseSide.tsx

@@ -1,39 +1,63 @@
 import { useState } from 'react';
 import '../../styles/ExerciseSide.scss';
+//import AxisInput from './Exercises/AxisInputs';
 
 //import AxisExercise from './Exercises/AxisExercise';
 //import AxisInput from './Exercises/AxisInputs';
 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';
 ('./Exercises/AxisExercise');
 
 interface ExerciseSideProps {
+  ExercisesNum: number;
   incrementExercise: () => void;
+  // maxLevel: number
 }
 
-function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
-  const [completeExercises, setCompleteExercises] = useState(0);
-  type availableExercises = 'axis' | 'congrats' | 'circle' | 'graph';
+function ExerciseSide({
+  incrementExercise,
+  ExercisesNum,
+}: // maxLevel,
+ExerciseSideProps): JSX.Element {
+  const [displayExercise, setDisplayExercise] = useState(0);
+
+  type availableExercises =
+    | 'axis'
+    | 'congrats'
+    | 'graph0'
+    | 'unitcircle'
+    | 'graph1';
 
-  const exercises: availableExercises[] = ['graph', 'congrats'];
+  const exercises: availableExercises[] = [
+    'unitcircle',
+    'axis',
+    'graph0',
+    'congrats',
+  ];
   let curExercise;
 
-  if (exercises[completeExercises] == 'graph') {
+  if (displayExercise != ExercisesNum) {
+    setDisplayExercise(ExercisesNum);
+  }
+
+  if (exercises[displayExercise] == 'graph0') {
     curExercise = (
       <div>
         <div>
           <GraphExercise
             origin={{ x: 0, y: 0 }}
             points={[
-              { x: -1, y: 1, label: 'A' },
-              { x: 2, y: -1, label: 'B', line: 1 },
-              { x: 1, y: 0, label: 'C', line: 0 },
-              { x: 0, y: -2, label: 'D', line: 0 },
+              { x: 0, y: 0, label: '' },
+              { x: 2, y: 1, label: 'A', line: 1 },
+              { x: 1, y: -1, label: 'B', line: 1 },
+              { x: 0, y: -1, label: 'C', line: 1 },
             ]}
-            pointerPosition={{ x: 1, y: 1 }}
-            pointerOrientation={45}
+            pointerPosition={{ x: 0, y: 0 }}
+            pointerOrientation={0}
           />
         </div>
         <div style={{ paddingTop: '10vw' }}>
@@ -50,39 +74,35 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2, id: 0, answer: '0' },
-                  { type: 'text', text: ', -1)' },
+                  { type: 'input', width: 2, id: 0, answer: '2' },
+                  { type: 'text', text: ', 1)' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.setheading(' },
-                  { type: 'input', width: 4, id: 1, answer: '2' },
+                  { type: 'input', width: 4, id: 1, answer: '225' },
                   { type: 'text', text: ')' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.' },
-                  { type: 'input', width: 8, id: 2, answer: '4' },
+                  { type: 'input', width: 8, id: 2, answer: 'forward' },
                   { type: 'text', text: '()' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2, id: 3, answer: '6' },
+                  { type: 'input', width: 2, id: 3, answer: '0' },
                   { type: 'text', text: ', ' },
-                  { type: 'input', width: 2, id: 4, answer: '8' },
+                  { type: 'input', width: 2, id: 4, answer: '-1' },
                   { type: 'text', text: ')' },
                 ],
               },
             ]}
-            nextExercise={() => {
-              setCompleteExercises(completeExercises + 1);
-              incrementExercise();
-              return;
-            }}
+            nextExercise={() => incrementExercise()}
           />
         </div>
       </div>
@@ -106,33 +126,114 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
           />
         </div>
     );*/
-  } else if (exercises[completeExercises] == 'axis') {
+  } else if (exercises[displayExercise] == 'graph1') {
+    curExercise = (
+      <div>
+        <div>
+          <GraphExercise
+            origin={{ x: 0, y: 0 }}
+            points={[
+              { x: -1, y: 1, label: 'A' },
+              { x: 2, y: -1, label: 'B', line: 1 },
+              { x: 1, y: 0, label: 'C', line: 0 },
+              { x: 0, y: -2, label: 'D', line: 0 },
+            ]}
+            pointerPosition={{ x: 1, y: 1 }}
+            pointerOrientation={45}
+          />
+        </div>
+        <div style={{ paddingTop: '10vw' }}>
+          <GraphInput
+            questionArray={[
+              {
+                textArray: [
+                  {
+                    type: 'text',
+                    text: '# Goto point A and draw on the dotted line',
+                  },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', -1)' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.setheading(' },
+                  { type: 'input', width: 4 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.' },
+                  { type: 'input', width: 8 },
+                  { type: 'text', text: '()' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', ' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+            ]}
+            nextExercise={() => incrementExercise()}
+          />
+        </div>
+      </div>
+    );
+  } else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">
         <AxisParent
           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={() => {
-            setCompleteExercises(completeExercises + 1);
+            setDisplayExercise(displayExercise + 1);
             incrementExercise();
             return;
           }}
         />
       </div>
     );
-  } else if (exercises[completeExercises] === 'circle') {
+  } else if (exercises[displayExercise] === 'unitcircle') {
     curExercise = (
-      <UnitCircleExercise
-        turtleAngle={1}
-        markers={['A', '', 'B']}
-        labels={['B', 'C', 'D']}
-      />
+      <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');
+              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/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/AxisInputs.tsx

@@ -22,6 +22,7 @@ function AxisInput({
     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="axinput-question-container">
         <p id="axinput-check-question">{label}: </p>
@@ -94,6 +95,9 @@ function AxisInput({
   const questionOutput = questions.map(MakeQuestion);
   return (
     <div className="axinput-container">
+      <div id="axinput-question">
+        Type the correct numbers into the blanks below!
+      </div>
       <div className="axinput-question-box">{questionOutput}</div>
       <div className="axinput-wrong-box">
         <h3 id="axinput-check-wrong">&nbsp;{wrongMessage(wrong)}&nbsp;</h3>

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
@@ -55,12 +43,15 @@ function AxisParent({
     if (exerciseNum == axisMarkers.length) {
       toNextExercise(); // update parent exercise side that axis input exercise is complete
     }
-  });
+  }, [exerciseNum]);
 
   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}