42 feature create a unit circle input module

src/components/shared/ExerciseSide.tsx

@@ -1,11 +1,13 @@
 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';
 ('./Exercises/AxisExercise');
 
@@ -17,7 +19,12 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
   const [completeExercises, setCompleteExercises] = useState(0);
   type availableExercises = 'axis' | 'congrats' | 'circle' | 'graph';
 
-  const exercises: availableExercises[] = ['axis', 'graph', 'congrats'];
+  const exercises: availableExercises[] = [
+    'axis',
+    'graph',
+    'circle',
+    'congrats',
+  ];
   let curExercise;
 
   if (exercises[completeExercises] == 'graph') {
@@ -124,11 +131,13 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
     );
   } else if (exercises[completeExercises] === 'circle') {
     curExercise = (
-      <UnitCircleExercise
-        turtleAngle={1}
-        markers={['A', '', 'B']}
-        labels={['B', 'C', 'D']}
-      />
+      <div>
+        <UnitCircleExercise
+          turtleAngle={1}
+          markers={['A', '', 'B']}
+          labels={['B', 'C', 'D']}
+        />
+      </div>
     );
   }
 

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>

src/components/shared/Exercises/UnitCircleInput.tsx

@@ -0,0 +1,44 @@
+//import { useState } from 'react';
+import '../../../styles/Exercises/UnitCircleInput.scss';
+
+function UnitCircleInput(): JSX.Element {
+  return (
+    <div id="unitcircle-question-container">
+      <div id="unitcircle-check-question">
+        Type the correct numbers into the blanks below!
+      </div>
+
+      <div id="unitcircle-check-question">
+        {' '}
+        <i>A</i> = left
+        <input
+          type="text"
+          className="unitcircle-check-box"
+          //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>
+    </div>
+  );
+}
+export default UnitCircleInput;

src/styles/Exercises/UnitCircleInput.scss

@@ -0,0 +1,84 @@
+@use '../_colors.scss' as colors;
+@use '../_vars.scss' as vars;
+
+@mixin font-styles {
+  font-family: Quattrocento Sans, sans-serif;
+  font-size: calc(16px + 1vw);
+  font-style: normal;
+  font-weight: bold;
+}
+
+.unitcircle-question-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-family: 'PT Sans', sans-serif;
+  text-align: left;
+}
+
+.unitcircle-question-box {
+  display: flex;
+  flex-direction: column;
+}
+
+#unitcircle-question-container {
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -15px;
+  margin-top: -15px;
+  padding-left: 20%;
+}
+
+#unitcircle-check-question {
+  @include font-styles();
+  font-style: normal;
+  margin-bottom: 2vh;
+}
+
+.unitcircle-check-box {
+  background: linear-gradient(#000, #000) center bottom 0 / calc(100% - 10px)
+    2px no-repeat;
+  background-color: colors.$bg-white;
+  border: 0;
+  font-family: Cascadia Code, sans-serif;
+  font-size: calc(16px + 1vw);
+  height: 18pt;
+  margin-left: 2vh;
+  size: 64pt;
+  text-align: center;
+  width: calc(1.5 * (16px + 1vw));
+}
+
+.unitcircle-check-box:focus {
+  background-color: colors.$input-grey;
+}
+
+/*#unitcircle-check-button {
+  @include font-styles();
+  background-color: colors.$primary-green;
+  border: hidden;
+  border-radius: 10px;
+  color: colors.$text-white;
+  padding: 1.25vw 2.5vw;
+}
+
+#unitcircle-check-wrong {
+  @include font-styles();
+  color: red;
+}
+
+.unitcircle-wrong-box {
+  align-self: center;
+}
+
+.unitcircle-check-button-container {
+  align-self: center;
+}*/
+
+.instruction {
+  @include font-styles();
+  margin: 0;
+  padding-left: 10%;
+  text-align: left;
+}