61 feature add check button for the unitcircleinput component (#71)

* Add nextExersise props, check button to UnitCircleInput initialize UnitCircleInput in ExersizeSide * Add npx prettier * contain exercise within exercise-box container * run lint * Fix exercise side styling
uclaacm · Oct 31, 2023 · fcd3407 · fcd3407
1 parent 9500ea6
commit fcd3407
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 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[] = [
+    'unitcircle',
     'axis',
     'graph',
-    'circle',
     'congrats',
   ];
   let curExercise;
@@ -129,14 +130,23 @@ 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']}
-        />
+        <div>
+          <UnitCircleExercise
+            turtleAngle={1}
+            markers={['A', '', 'B']}
+            labels={['B', 'C', 'D']}
+          />
+          <UnitCircleInput
+            nextExercise={() => {
+              setCompleteExercises(completeExercises + 1);
+              incrementExercise();
+              return;
+            }}
+          />
+        </div>
       </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>
   );

diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss
@@ -2,34 +2,37 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin: 25% 10% 15%;
+  //margin: 25% 10% 15%;
+  //width: calc(550px + 1vw);
+  margin-bottom: 5%;
+  margin-left: 30%;
   position: relative;
-  width: calc(550px + 1vw);
+  width: 400px;
 }
 
 .circle {
   position: relative;
-  width: 100%;
+  width: 70%;
 }
 
 .turtle {
   bottom: calc(0.15 * 100%);
   left: calc(0.46 * 100%);
   position: absolute;
-  width: 10%;
+  // width: 10%;
 }
 
 .circle-exercise {
   font-family: Quattrocento Sans, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-style: italic;
   font-weight: bold;
   position: absolute;
 }
 
 .circle-label {
   font-family: Cascadia Code, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-weight: regular;
   position: absolute;
 }

diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
@@ -27,13 +27,16 @@
   flex-direction: column;
   margin-bottom: -15px;
   margin-top: -15px;
-  padding-left: 20%;
+  padding-left: 8%;
 }
 
 #unitcircle-check-question {
   @include font-styles();
+  font-size: calc(13px + 1vw);
   font-style: normal;
   margin-bottom: 2vh;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .unitcircle-check-box {
@@ -54,7 +57,7 @@
   background-color: colors.$input-grey;
 }
 
-/*#unitcircle-check-button {
+#unitcircleinput-check-button {
   @include font-styles();
   background-color: colors.$primary-green;
   border: hidden;
@@ -72,9 +75,9 @@
   align-self: center;
 }
 
-.unitcircle-check-button-container {
+.unitcircleinput-check-button-container {
   align-self: center;
-}*/
+}
 
 .instruction {
   @include font-styles();