feat: make graphexercise and graphinput match figma

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>

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

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%;
 }
 

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 {