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();