Add nextExersise props, check button to UnitCircleInput

initialize UnitCircleInput in ExersizeSide
uclaacm · Oct 21, 2023 · 68cd427 · 68cd427
1 parent 9500ea6
commit 68cd427
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -9,6 +9,7 @@ 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 {
@@ -17,12 +18,12 @@ interface ExerciseSideProps {
 
 function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
   const [completeExercises, setCompleteExercises] = useState(0);
-  type availableExercises = 'axis' | 'congrats' | 'circle' | 'graph';
+  type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
 
   const exercises: availableExercises[] = [
     'axis',
     'graph',
-    'circle',
+    'unitcircle',
     'congrats',
   ];
   let curExercise;
@@ -129,18 +130,26 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
         />
       </div>
     );
-  } else if (exercises[completeExercises] === 'circle') {
+  } else if (exercises[completeExercises] === 'unitcircle') {
     curExercise = (
       <div>
         <UnitCircleExercise
           turtleAngle={1}
           markers={['A', '', 'B']}
           labels={['B', 'C', 'D']}
         />
+        <UnitCircleInput
+          nextExercise={() => {
+            setCompleteExercises(completeExercises + 1);
+            incrementExercise();
+            return;
+          }}
+        />
       </div>
     );
   }
 
+
   return (
     <section id="exercise-side-container">
       <div className="exercise-box">{curExercise}</div>

diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx
@@ -1,7 +1,11 @@
 //import { useState } from 'react';
 import '../../../styles/Exercises/UnitCircleInput.scss';
 
-function UnitCircleInput(): JSX.Element {
+interface UnitCircleInputProps {
+  nextExercise: () => void;
+}
+
+function UnitCircleInput({nextExercise}:UnitCircleInputProps): JSX.Element {
   return (
     <div id="unitcircle-question-container">
       <div id="unitcircle-check-question">
@@ -37,6 +41,11 @@ function UnitCircleInput(): JSX.Element {
             //value={inputText[id]}
           />
         </p>
+        <div id="unitcircleinput-check-button-container">
+          <button id="unitcircleinput-check-button" onClick={nextExercise}>
+              Check
+          </button>
+        </div>
       </div>
     </div>
   );