diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx index 9117613..600089c 100644 --- 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 { /> ); - } else if (exercises[completeExercises] === 'circle') { + } else if (exercises[completeExercises] === 'unitcircle') { curExercise = (
- +
+ + { + setCompleteExercises(completeExercises + 1); + incrementExercise(); + return; + }} + /> +
); } diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx index 5fbf37a..a0aa0c1 100644 --- 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 (
@@ -37,6 +41,11 @@ function UnitCircleInput(): JSX.Element { //value={inputText[id]} />

+
+ +
); diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss index 5ddd624..d9a5088 100644 --- a/src/styles/Exercises/UnitCircleExercise.scss +++ b/src/styles/Exercises/UnitCircleExercise.scss @@ -2,26 +2,29 @@ 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; @@ -29,7 +32,7 @@ .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 index f0422df..479b625 100644 --- 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();