From c927469f041d8ad108f2b2b0299e9bc3fb6ebc9a Mon Sep 17 00:00:00 2001
From: NotAmaia <63035578+NotAmaia@users.noreply.github.com>
Date: Tue, 16 Apr 2024 18:55:45 -0700
Subject: [PATCH 1/6] feat: make graphexercise and graphinput match figma (#91)

* Graph matches Figma

* Graph Figma and ran lint

---------

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 src/components/shared/ExerciseSide.tsx        | 93 ++++++++++++++++++-
 .../shared/Exercises/GraphExercise.tsx        |  2 +-
 src/styles/Exercises/GraphInput.scss          |  3 +-
 src/styles/Graph.scss                         |  5 +-
 4 files changed, 96 insertions(+), 7 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index b28f618..dea5fd5 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -25,12 +25,17 @@ function ExerciseSide({
 ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
-  type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
+  type availableExercises =
+    | 'axis'
+    | 'congrats'
+    | 'graph0'
+    | 'unitcircle'
+    | 'graph1';
 
   const exercises: availableExercises[] = [
     'unitcircle',
     'axis',
-    'graph',
+    'graph0',
     'congrats',
   ];
   let curExercise;
@@ -39,7 +44,89 @@ ExerciseSideProps): JSX.Element {
     setDisplayExercise(ExercisesNum);
   }
 
-  if (exercises[displayExercise] == 'graph') {
+  if (exercises[displayExercise] == 'graph0') {
+    curExercise = (
+      <div>
+        <div>
+          <GraphExercise
+            origin={{ x: 0, y: 0 }}
+            points={[
+              { x: 0, y: 0, label: '' },
+              { x: 2, y: 1, label: 'A', line: 1 },
+              { x: 1, y: -1, label: 'B', line: 1 },
+              { x: 0, y: -1, label: 'C', line: 1 },
+            ]}
+            pointerPosition={{ x: 0, y: 0 }}
+            pointerOrientation={0}
+          />
+        </div>
+        <div style={{ paddingTop: '10vw' }}>
+          <GraphInput
+            questionArray={[
+              {
+                textArray: [
+                  {
+                    type: 'text',
+                    text: '# Goto point A and draw on the dotted line',
+                  },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', -1)' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.setheading(' },
+                  { type: 'input', width: 4 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.' },
+                  { type: 'input', width: 8 },
+                  { type: 'text', text: '()' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', ' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+            ]}
+            nextExercise={() => incrementExercise()}
+          />
+        </div>
+      </div>
+    );
+
+    /*<div className="exercise-box">
+          <AxisParent
+            axisMarkers={[
+              [-2, -1, 0, 1, 2],
+              [-1, 0, 1, 2],
+            ]}
+            axisLabels={[
+              ['A', '', '', 'B', 'C'],
+              ['A', '', '', 'B'],
+            ]}
+            toNextExercise={() => {
+              setCompleteExercises(completeExercises + 1);
+              incrementExercise();
+              return;
+            }}
+          />
+        </div>
+    );*/
+  } else if (exercises[displayExercise] == 'graph1') {
     curExercise = (
       <div>
         <div>
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
index ca3be1f..cefab0b 100644
--- a/src/components/shared/Exercises/GraphExercise.tsx
+++ b/src/components/shared/Exercises/GraphExercise.tsx
@@ -128,7 +128,7 @@ GraphProps): JSX.Element {
         const dyPercent = yPos(endY) - yPos(startY);
         // use this factor because dyPercent is relative to height,
         // but we express a line's length as a percentage of width.
-        const yxRatio = 22.5 / 40;
+        const yxRatio = 22.5 / 50;
         const lineLengthPercent =
           Math.sqrt(
             (dxPercent / 100) ** 2 + ((dyPercent * yxRatio) / 100) ** 2
diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index 3f6b1a2..a561dd7 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -22,8 +22,9 @@
   font-style: normal;
   font-weight: bold;
   margin-bottom: 2vh;
-  margin-left: -20px;
+  margin-left: 0;
   margin-right: auto;
+  margin-top: 100px;
   padding-left: 8%;
 }
 
diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
index 6a182fc..6df3344 100644
--- a/src/styles/Graph.scss
+++ b/src/styles/Graph.scss
@@ -1,14 +1,15 @@
 .graph-container {
   align-items: center;
-  border: solid 2px #000;
+  border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
+  margin-left: 5%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
   padding-bottom: 22.5%;
   position: absolute;
   top: 5%;
-  width: 40%; // see above warning
+  width: 50%; // see above warning
 }
 
 .grid-line {

From f0420a35e89e4b72b2043527d54869c5f7b9fb45 Mon Sep 17 00:00:00 2001
From: Jonah Paten <jpaten@ucla.edu>
Date: Sun, 21 Apr 2024 16:48:59 -0700
Subject: [PATCH 2/6] Implemented validation for GraphInput #53 (#58)

* Implemented validation for GraphInput #53

* Fixed map initialization and added more answers #53

---------

Co-authored-by: SanjnaT41756 <sanjnatailor@g.ucla.edu>
---
 src/components/shared/ExerciseSide.tsx        |  31 +----
 .../shared/Exercises/GraphInput.tsx           | 123 ++++++++++++------
 2 files changed, 91 insertions(+), 63 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index dea5fd5..d55d764 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -74,30 +74,30 @@ ExerciseSideProps): JSX.Element {
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2 },
-                  { type: 'text', text: ', -1)' },
+                  { type: 'input', width: 2, id: 0, answer: '2' },
+                  { type: 'text', text: ', 1)' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.setheading(' },
-                  { type: 'input', width: 4 },
+                  { type: 'input', width: 4, id: 1, answer: '225' },
                   { type: 'text', text: ')' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.' },
-                  { type: 'input', width: 8 },
+                  { type: 'input', width: 8, id: 2, answer: 'forward' },
                   { type: 'text', text: '()' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2 },
+                  { type: 'input', width: 2, id: 3, answer: '0' },
                   { type: 'text', text: ', ' },
-                  { type: 'input', width: 2 },
+                  { type: 'input', width: 2, id: 4, answer: '-1' },
                   { type: 'text', text: ')' },
                 ],
               },
@@ -189,25 +189,6 @@ ExerciseSideProps): JSX.Element {
         </div>
       </div>
     );
-
-    /*<div className="exercise-box">
-          <AxisParent
-            axisMarkers={[
-              [-2, -1, 0, 1, 2],
-              [-1, 0, 1, 2],
-            ]}
-            axisLabels={[
-              ['A', '', '', 'B', 'C'],
-              ['A', '', '', 'B'],
-            ]}
-            toNextExercise={() => {
-              setCompleteExercises(completeExercises + 1);
-              incrementExercise();
-              return;
-            }}
-          />
-        </div>
-    );*/
   } else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">
diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
index a20c5ba..b3d9a39 100644
--- a/src/components/shared/Exercises/GraphInput.tsx
+++ b/src/components/shared/Exercises/GraphInput.tsx
@@ -1,49 +1,76 @@
+//import { useState } from 'react';
+//import { useState } from 'react';
 import '../../../styles/Exercises/GraphInput.scss';
 
-interface GraphQuestionElement {
+interface GraphQuestionData {
   type: string;
   text?: string;
   width?: number;
   answer?: string;
+  id?: number;
 }
 
-interface GraphQuestion {
-  textArray: GraphQuestionElement[];
+interface GraphQuestionGrouping {
+  questionData: GraphQuestionData;
+  setCorrect: (id: number, value: boolean) => void;
+}
+
+interface GraphLineGrouping {
+  data: GraphLineData;
+  setCorrect: (id: number, value: boolean) => void;
 }
 
 interface GraphInputProps {
-  questionArray: GraphQuestion[];
+  questionArray: GraphLineData[];
   nextExercise: () => void;
 }
 
-function GraphStringElement({ type, text, width }: GraphQuestionElement) {
-  if (type == 'text') {
-    return <p id="graphinput-check-question">{text}</p>;
+interface GraphLineData {
+  textArray: GraphQuestionData[];
+}
+
+function GraphStringElement({
+  questionData,
+  setCorrect,
+}: GraphQuestionGrouping) {
+  if (questionData.type == 'text') {
+    return <p id="graphinput-check-question">{questionData?.text ?? ''}</p>;
   } else {
+    //const [inputText, setInputText] = useState("");
+    const handleChange = (event: { target: { value: string } }) => {
+      //console.log(`input text: ${event.target.value}`);
+      //console.log(questionData?.answer ?? '');
+      if (event.target.value == (questionData?.answer ?? '')) {
+        setCorrect(questionData?.id ?? -1, true);
+      } else {
+        setCorrect(questionData?.id ?? -1, false);
+      }
+      //setInputText(event.target.value);
+    };
     return (
-      <input
-        type="text"
-        className="graphinput-check-box"
-        style={{ width: `${width * 16}px` }}
-      />
+      <div>
+        <input
+          type="text"
+          className="graphinput-check-box"
+          style={{ width: `${(questionData?.width ?? 3) * 16}px` }}
+          onChange={handleChange}
+        />
+      </div>
     );
   }
 }
 
-function GraphLine({ textArray }: GraphQuestion) {
+function GraphLine({ data, setCorrect }: GraphLineGrouping) {
   //Map all elements of TextArray
-  const makeElement = (elementData: GraphQuestionElement): JSX.Element => {
+  const makeElement = (elementData: GraphQuestionData): JSX.Element => {
     return (
-      <GraphStringElement
-        type={elementData?.type}
-        text={elementData?.text}
-        width={elementData?.width}
-        answer={elementData?.answer}
-      />
+      <GraphStringElement questionData={elementData} setCorrect={setCorrect} />
     );
   };
   return (
-    <div id={'graphinput-question-container'}>{textArray.map(makeElement)}</div>
+    <div id={'graphinput-question-container'}>
+      {data.textArray.map(makeElement)}
+    </div>
   );
   /*return (
     <div id="graphinput-question-container">
@@ -58,8 +85,39 @@ function GraphInput({
   questionArray,
   nextExercise,
 }: GraphInputProps): JSX.Element {
-  const makeLine = (lineArray: GraphQuestion): JSX.Element => {
-    return <GraphLine textArray={lineArray.textArray} />;
+  const valueMap = new Map<number, boolean>();
+  for (const question of questionArray) {
+    for (const item of question.textArray) {
+      if (item.type == 'input') {
+        valueMap.set(item.id ?? -1, false);
+      }
+    }
+  }
+  const setValueCorrect = (id: number, value: boolean): void => {
+    //console.log(`Setting ${id} to ${value}`);
+    valueMap.set(id, value);
+  };
+
+  const checkCorrect = (): void => {
+    //console.log('Checking correct');
+    const valuesArray = Array.from(valueMap.values());
+    for (const i of valuesArray) {
+      //console.log(i);
+      if (!i) {
+        //console.log(`${i} is incorrect`);
+        //setWrong(true);
+        return;
+      }
+    }
+    //console.log('all right!');
+    nextExercise();
+  };
+
+  const makeLine = (
+    data: GraphLineData,
+    setCorrect: (id: number, value: boolean) => void
+  ): JSX.Element => {
+    return <GraphLine data={data} setCorrect={setCorrect} />;
   };
   return (
     <div id="graphinput-container">
@@ -67,27 +125,16 @@ function GraphInput({
         Fill in the blanks to move the cursor along the path!
       </div>
       <div id="graphinput-check-question"></div>
-      <div id="graphinput-question-box">{questionArray.map(makeLine)}</div>
+      <div id="graphinput-question-box">
+        {questionArray.map((x) => makeLine(x, setValueCorrect))}
+      </div>
       <div id="graphinput-check-button-container">
-        <button id="graphinput-check-button" onClick={nextExercise}>
+        <button id="graphinput-check-button" onClick={checkCorrect}>
           Check
         </button>
       </div>
     </div>
   );
-  /*
-  return (
-    <div id="graphinput-container">
-      <div id="graphinput-question-box">
-        <GraphLine
-          textArray={[
-            { text: 'Hi!', type: 'text' },
-            { type: 'input', width: 10 },
-          ]}
-        />
-      </div>
-    </div>
-  );*/
 }
 
 export default GraphInput;

From e25d56d570d632989d33ba1f110806c66a27b03d Mon Sep 17 00:00:00 2001
From: johanne <114450226+johannemoresco@users.noreply.github.com>
Date: Wed, 24 Apr 2024 20:18:14 -0700
Subject: [PATCH 3/6] feat: randomized turtle dialogue (#102)

* Randomized Turtle Dialogue

Modified Turtle.tsx and LessonSide.tsx in orde
r to make the turtle's dialogue box display a randomized statement wit
h every new exercise.

* fix lint

---------

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
Co-authored-by: SanjnaT41756 <sanjnatailor@g.ucla.edu>
---
 .../shared/LessonSide/LessonSide.tsx          |  7 +++-
 src/components/shared/LessonSide/Turtle.tsx   | 33 +++++--------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/components/shared/LessonSide/LessonSide.tsx b/src/components/shared/LessonSide/LessonSide.tsx
index 1158d08..252106f 100644
--- a/src/components/shared/LessonSide/LessonSide.tsx
+++ b/src/components/shared/LessonSide/LessonSide.tsx
@@ -12,12 +12,17 @@ interface lessonSideProps {
   maxLevel: number;
 }
 
+function getRandomNumber(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 function LessonSide({
   levelNum,
   updateLevel,
   maxLevel,
 }: lessonSideProps): JSX.Element {
   const lesson_info = LessonSideContent[levelNum] || [];
+  const randomTurtleMessage = getRandomNumber(1, 7);
   // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
@@ -33,7 +38,7 @@ function LessonSide({
         <LessonText text_array={lesson_info} />
       </div>
       <div>
-        <Turtle turtleID="your-genius" />
+        <Turtle turtleID={randomTurtleMessage} />
 
         {/* passed from parent component */}
         <LevelSelector
diff --git a/src/components/shared/LessonSide/Turtle.tsx b/src/components/shared/LessonSide/Turtle.tsx
index 5432807..0262912 100644
--- a/src/components/shared/LessonSide/Turtle.tsx
+++ b/src/components/shared/LessonSide/Turtle.tsx
@@ -7,36 +7,21 @@ import encouragingTurtleSkills from '../../../assets/LessonSide/EncouragingTurtl
 import encouragingTurtleSuccess from '../../../assets/LessonSide/EncouragingTurtleSuccess.svg';
 
 interface TurtleProps {
-  turtleID: string;
+  turtleID: number;
 }
 
 interface TurtleData {
-  [key: string]: [fig: string, altText: string];
+  [key: number]: [fig: string, altText: string];
 }
 
 const turtleIDs: TurtleData = {
-  'full-points': [
-    encouragingTurtleFullPoints,
-    'Turtle saying Full points for you!',
-  ],
-  'you-can-do-it': [encouragingTurtle, 'Turtle saying You can do it!'],
-  'numerous-skills': [
-    encouragingTurtleSkills,
-    'Turtle saying Your skills are numerous!',
-  ],
-  'your-genius': [
-    encouragingTurtleGenius,
-    "Turtle saying There's no end to your genius!",
-  ],
-  'nice-going': [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
-  'drawn-to-work': [
-    encouragingTurtleWork,
-    "Turtle saying I'm drawn to your work!",
-  ],
-  'large-success': [
-    encouragingTurtleSuccess,
-    'Turtle saying A large degree of success!',
-  ],
+  1: [encouragingTurtleFullPoints, 'Turtle saying Full points for you!'],
+  2: [encouragingTurtle, 'Turtle saying You can do it!'],
+  3: [encouragingTurtleSkills, 'Turtle saying Your skills are numerous!'],
+  4: [encouragingTurtleGenius, "Turtle saying There's no end to your genius!"],
+  5: [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
+  6: [encouragingTurtleWork, "Turtle saying I'm drawn to your work!"],
+  7: [encouragingTurtleSuccess, 'Turtle saying A large degree of success!'],
 };
 
 function Turtle({ turtleID }: TurtleProps): JSX.Element {

From e02bbaf019b921e059beb80824379b3392d398e3 Mon Sep 17 00:00:00 2001
From: Rakil Kim <rakilkim0216@gmail.com>
Date: Sun, 28 Apr 2024 18:24:11 -0700
Subject: [PATCH 4/6] new unit circle exercise and fix display (#103)

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 src/components/shared/ExerciseSide.tsx        | 32 +++++---
 .../shared/Exercises/UnitCircleExercise.tsx   |  2 +-
 .../shared/Exercises/UnitCircleInput.tsx      | 41 ++--------
 .../shared/Exercises/UnitCircleParent.tsx     | 80 +++++++++++++++++++
 src/styles/Exercises/UnitCircleExercise.scss  |  5 +-
 src/styles/Exercises/UnitCircleInput.scss     |  2 +
 6 files changed, 113 insertions(+), 49 deletions(-)
 create mode 100644 src/components/shared/Exercises/UnitCircleParent.tsx

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index d55d764..2617d1a 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -8,8 +8,8 @@ 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';
-import UnitCircleInput from './Exercises/UnitCircleInput';
+import UnitCircleParent from './Exercises/UnitCircleParent';
+
 ('./Exercises/AxisExercise');
 
 interface ExerciseSideProps {
@@ -216,21 +216,27 @@ ExerciseSideProps): JSX.Element {
     curExercise = (
       <div>
         <div>
-          <UnitCircleExercise
-            turtleAngle={1}
-            markers={['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']}
-            labels={['A', 'C', '', 'B', '']}
-          />
-          <UnitCircleInput
-            nextExercise={() => {
-              // console.log('unit');
+          <UnitCircleParent
+            unitCircleMarkers={[
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+            ]}
+            unitCircleLabels={[
+              ['A', 'C', '', 'B', ''],
+              ['B', 'A', '', 'C', ''],
+              ['', '', 'C', 'A', 'B'],
+            ]}
+            directions={[
+              ['left', 'right', '', 'right', ''],
+              ['left', 'left', '', 'left', ''],
+              ['', '', 'right', 'right', 'left'],
+            ]}
+            toNextExercise={() => {
               setDisplayExercise(displayExercise + 1);
               incrementExercise();
               return;
             }}
-            markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]}
-            labels={[['A', 'C', '', 'B', '']]}
-            directions={[['left', 'right', '', 'right', '']]}
           />
         </div>
       </div>
diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx
index 7bef07a..95eb54a 100644
--- a/src/components/shared/Exercises/UnitCircleExercise.tsx
+++ b/src/components/shared/Exercises/UnitCircleExercise.tsx
@@ -33,7 +33,7 @@ function UnitCircleExercise({
         curAngle += angleBetweenTicks;
         cursorAngle += cursorTicks;
         return (
-          <div key={element}>
+          <div key={idx}>
             <div
               className="circle-exercise"
               style={{
diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx
index 2a4140c..320a657 100644
--- a/src/components/shared/Exercises/UnitCircleInput.tsx
+++ b/src/components/shared/Exercises/UnitCircleInput.tsx
@@ -3,22 +3,22 @@ import '../../../styles/Exercises/UnitCircleInput.scss';
 
 interface UnitCircleInputProps {
   nextExercise: () => void;
-  markers: string[][];
-  labels: string[][];
+  answers: number[][];
+  questionLabels: string[][];
   directions: string[][];
 }
 
 interface CircleQuestion {
   label: string;
-  answer: string; // Should change to being strings
+  answer: number; // Should change to being strings
   direction: string;
   id: number; //This sucks lol
 }
 
 function UnitCircleInput({
   nextExercise,
-  markers,
-  labels,
+  answers,
+  questionLabels,
   directions,
 }: UnitCircleInputProps): JSX.Element {
   function MakeQuestion({ label, id, direction }: CircleQuestion): JSX.Element {
@@ -27,7 +27,7 @@ function UnitCircleInput({
     };
     /* lines 25-35, try to get component to look like this */
     return (
-      <div id="unitcircle-question-container">
+      <div id="unitcircle-question-container" key={id}>
         <p id="unitcircle-check-question">
           {label} = {direction}{' '}
         </p>
@@ -44,7 +44,7 @@ function UnitCircleInput({
   function checkAnswer() {
     // Invoked to check answers and switch to the next question or set the answer wrong
     for (let i = 0; i < answers[counter].length; i++) {
-      if (inputText[i] != answers[counter][i]) {
+      if (parseInt(inputText[i]) != answers[counter][i]) {
         setWrong(true);
         return;
       }
@@ -61,30 +61,6 @@ function UnitCircleInput({
     nextExercise();
   }
 
-  const answers: number[][] = [];
-  const questionLabels: string[][] = [];
-  const questionDirections: string[][] = [];
-  for (let i = 0; i < markers.length; i++) {
-    const currentAnswers = [];
-    const currentLabels = [];
-    const currentDirections = [];
-    const length = markers[i].length;
-    for (let j = 0; j < length; j++) {
-      if (labels[i][j] !== '') {
-        let multiplier = 1;
-        if (directions[i][j] == 'left') {
-          multiplier = -1;
-        }
-        currentAnswers.push(parseInt(markers[i][j].slice(0, -1)) * multiplier);
-        currentLabels.push(labels[i][j]);
-        currentDirections.push(directions[i][j]);
-      }
-    }
-    answers.push(currentAnswers);
-    questionLabels.push(currentLabels);
-    questionDirections.push(currentDirections);
-  }
-
   function wrongMessage(isWrong: boolean) {
     if (isWrong) {
       return "That's not quite right. Try again!";
@@ -112,8 +88,8 @@ function UnitCircleInput({
     for (let i = 0; i < questionLabels[counter].length; i++) {
       questions.push({
         label: questionLabels[counter][i],
-        direction: questionDirections[counter][i],
         answer: answers[counter][i],
+        direction: directions[counter][i],
         id: i,
       });
     }
@@ -121,7 +97,6 @@ function UnitCircleInput({
     return <h2>Done!</h2>;
   }
 
-  //console.log(questionLabels[counter]);
   const questionOutput = questions.map(MakeQuestion);
   return (
     <div className="unitcircle-question-container">
diff --git a/src/components/shared/Exercises/UnitCircleParent.tsx b/src/components/shared/Exercises/UnitCircleParent.tsx
new file mode 100644
index 0000000..09f8b96
--- /dev/null
+++ b/src/components/shared/Exercises/UnitCircleParent.tsx
@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import '../../../styles/Exercises/AxisExercise.scss';
+import UnitCircleExercise from './UnitCircleExercise';
+import UnitCircleInput from './UnitCircleInput';
+('./Exercises/AxisExercise');
+
+interface UnitCircleParentProps {
+  unitCircleMarkers: string[][]; //2-D array for different sets of problems
+  unitCircleLabels: string[][];
+  directions: string[][];
+  toNextExercise: () => void;
+}
+
+function UnitCircleParent({
+  unitCircleMarkers,
+  unitCircleLabels,
+  directions,
+  toNextExercise,
+}: UnitCircleParentProps): JSX.Element {
+  //make 2d array for answers using the non-empty elements of unitCircleLabels
+  const answers: number[][] = [];
+  const questionLabels: string[][] = [];
+  const questionDirections: string[][] = [];
+  for (let i = 0; i < unitCircleMarkers.length; i++) {
+    const currentAnswers = [];
+    const currentLabels = [];
+    const currentDirections = [];
+    const length = unitCircleMarkers[i].length;
+    for (let j = 0; j < length; j++) {
+      if (unitCircleLabels[i][j] !== '') {
+        let multiplier = 1;
+        if (directions[i][j] == 'left') {
+          multiplier = -1;
+        }
+        currentAnswers.push(
+          parseInt(unitCircleMarkers[i][j].slice(0, -1)) * multiplier
+        );
+        currentLabels.push(unitCircleLabels[i][j]);
+        currentDirections.push(directions[i][j]);
+      }
+    }
+    answers.push(currentAnswers);
+    questionLabels.push(currentLabels);
+    questionDirections.push(currentDirections);
+  }
+
+  const [exerciseNum, setExerciseNum] = useState(0);
+  function nextExercise() {
+    setExerciseNum(exerciseNum + 1);
+  } // advance to next exercise within axis inputs exercise
+
+  useEffect(() => {
+    if (exerciseNum == unitCircleMarkers.length) {
+      toNextExercise(); // update parent exercise side that axis input exercise is complete
+    }
+  }, [exerciseNum]);
+
+  return (
+    <div>
+      <UnitCircleExercise
+        //orientation="horizontal"
+        turtleAngle={1}
+        markers={
+          unitCircleMarkers[Math.min(exerciseNum, unitCircleMarkers.length - 1)]
+        }
+        labels={
+          unitCircleLabels[Math.min(exerciseNum, unitCircleLabels.length - 1)]
+        }
+      />
+      <UnitCircleInput
+        answers={answers}
+        questionLabels={questionLabels}
+        directions={questionDirections}
+        nextExercise={nextExercise}
+      />
+    </div>
+  );
+}
+
+export default UnitCircleParent;
diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss
index e959c12..e83f033 100644
--- a/src/styles/Exercises/UnitCircleExercise.scss
+++ b/src/styles/Exercises/UnitCircleExercise.scss
@@ -4,8 +4,9 @@
   justify-content: center;
   //margin: 25% 10% 15%;
   //width: calc(550px + 1vw);
-  margin-bottom: 5%;
-  margin-left: 30%;
+  margin-bottom: 2%;
+  margin-left: 25%;
+  margin-top: 5%;
   position: relative;
   width: 400px;
 }
diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
index 7bd5b1e..ea9810c 100644
--- a/src/styles/Exercises/UnitCircleInput.scss
+++ b/src/styles/Exercises/UnitCircleInput.scss
@@ -75,6 +75,8 @@
 #unitcircle-check-wrong {
   @include font-styles();
   color: red;
+  margin-bottom: 3%;
+  margin-top: 3%;
 }
 
 .unitcircle-wrong-box {

From 8efd1e223449c74e73e00102a15925507444a3f5 Mon Sep 17 00:00:00 2001
From: my1040 <167264485+my1040@users.noreply.github.com>
Date: Thu, 16 May 2024 09:24:19 -0700
Subject: [PATCH 5/6] Change Question Descriptions to match the actual task
 (#104)

Co-authored-by: Marie <myang12470@gmail.com>
Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 .../shared/LessonSide/LessonSideContent.JSON  | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/shared/LessonSide/LessonSideContent.JSON b/src/components/shared/LessonSide/LessonSideContent.JSON
index 224657e..fbcf697 100644
--- a/src/components/shared/LessonSide/LessonSideContent.JSON
+++ b/src/components/shared/LessonSide/LessonSideContent.JSON
@@ -1,49 +1,50 @@
 {
     "1": [
-        { "id": "lesson-side-header", "text": "Positioning of Computers" },
+        { "id": "lesson-side-header", "text": "Rotations in Computers" },
         {
             "id": "lesson-side-body",
-            "text": "In order to tell computers where to move the cursor, we have to use the coordinate system. The coordinate system is a grid with lots of small chunks, called units. To figure out where to move, the cursor uses its starting point at the center of the grid and counts out some number of units. For example, the point (2, 1) would be two units RIGHT and one unit UP from the center."
+            "text": "Just as computers have the coordinate system to figure out where to move, they also use a system called the unit circle to determine which way to point the cursor. The unit circle is made up of 360 segments called degrees. As such, turning a cursor 90 degrees is equivalent to turning it one-fourth of the circle."
         },
         {
             "id": "lesson-side-body",
-            "text": "When looking at these numbers, remember that the number to move sideways comes first. A positive number means you move right, and a negative number means you move left. And when moving up and down with the second number, a positive number means you move up and a negative means down."
+            "text": "Just like the coordinate system, degrees can be either positive or negative."
         }
     ],
     "2": [
-        { "id": "lesson-side-header", "text": "Moving the Cursor: turtle.goto()" },
+        { "id": "lesson-side-header", "text": "Positioning in Computers" },
         {
             "id": "lesson-side-body",
-            "text": "There are many commands that allow us to move the cursor with Turtle. The simplest such command is goto(), which accepts arguments in the form of the pairs of numbers we saw before. In order to use it, we simply call it like this:"
+            "text": "Computers use the coordinate system to tell the cursor where to move. The coordinate system is a grid made of small chunks called units. The cursor starts out at the center of the grid and counts out some number of units to move. For example, the point (2, 1) would be two units RIGHT and one unit UP from the center."
         },
         {"id": "code-text", "text": "turtle.goto(-1,2)"},
         {
             "id": "lesson-side-body",
-            "text": "The above line tells the Turtle cursor to move 1 unit to the left and 2 units up from the center. Now try it yourself!"
+            "text": "When looking at these numbers, remember that the number to move sideways comes first. A positive number means you move right, and a negative number means you move left. And when moving up and down with the second number, a positive number means you move up and a negative means down."
         }
     ],
     "3": [
-        { "id": "lesson-side-header", "text": "Moving the Cursor: forward() and backward()" },
+        { "id": "lesson-side-header", "text": "Moving the Cursor: turtle.goto()" },
         {
             "id": "lesson-side-body",
-            "text": "If we don't know exactly what position to move to, we can also tell the cursor to move some number of units either forward or backward. In order to use the forward() and backward() functions, you call them like this:"
+            "text": "There are many commands that allow us to move the cursor with Turtle. The simplest such command is goto(), which accepts arguments in the form of the pairs of numbers we saw before. In order to use it, we simply call it like this:"
         },
-        {"id": "code-text", "text": "turtle.forward(1)"},
-        {"id": "code-text", "text": "turtle.backward(2)"},
+        {"id": "code-text", "text": "turtle.goto(-1, 2)"},
         {
             "id": "lesson-side-body",
-            "text": "The above code tells the cursor to move 1 unit forward, then 2 units backward. Since the cursor points to the right at the beginning, the forward() function makes it move right and the backward() function goes left."
+            "text": "The above line tells the Turtle cursor to move 1 unit to the left and 2 units up from the center. Now try it yourself!"
         }
     ],
     "4": [
-        { "id": "lesson-side-header", "text": "Rotations in Computers" },
+        { "id": "lesson-side-header", "text": "Moving the Cursor: forward() and backward()" },
         {
             "id": "lesson-side-body",
-            "text": "Just as computers have the coordinate system to figure out where to move, they also use a system called the unit circle to determine which way to point the cursor. The unit circle is made up of 360 segments called degrees. As such, turning a cursor 90 degrees is equivalent to turning it one-fourth of the circle."
+            "text": "If we don’t know exactly what position to move to, we can also tell the cursor to move some number of units either forward or backward. In order to use the forward() and backward() functions, you call them like this:"
         },
+        {"id": "code-text", "text": "turtle.forward(1)"},
+        {"id": "code-text", "text": "turtle.backward(2)"},
         {
             "id": "lesson-side-body",
-            "text": "Just like the coordinate system, degrees can be either positive or negative."
+            "text": "The above code tells the cursor to move 1 unit forward, then 2 units backward. Since the cursor points to the right at the beginning, the forward() function makes it move right and the backward() function goes left."
         }
     ],
     "5": [

From e7745bbebe13f400281d79616c208ebbc150f54e Mon Sep 17 00:00:00 2001
From: NotAmaia <63035578+NotAmaia@users.noreply.github.com>
Date: Thu, 16 May 2024 09:28:40 -0700
Subject: [PATCH 6/6] fixed graph (#106)

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 src/styles/Exercises/GraphInput.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index a561dd7..b73f1af 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -24,7 +24,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 100px;
+  margin-top: 150px;
   padding-left: 8%;
 }