From 20bad44d7e8a48ee58747ff139d9e74b744c5e79 Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Sat, 25 May 2024 10:07:57 -0700
Subject: [PATCH 1/3] added wrong message to graphs

---
 src/components/shared/Exercises/GraphInput.tsx | 17 +++++++++++++++--
 src/styles/Exercises/GraphInput.scss           | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
index b3d9a39..bbc58e7 100644
--- a/src/components/shared/Exercises/GraphInput.tsx
+++ b/src/components/shared/Exercises/GraphInput.tsx
@@ -1,5 +1,5 @@
 //import { useState } from 'react';
-//import { useState } from 'react';
+import { useState } from 'react';
 import '../../../styles/Exercises/GraphInput.scss';
 
 interface GraphQuestionData {
@@ -105,7 +105,7 @@ function GraphInput({
       //console.log(i);
       if (!i) {
         //console.log(`${i} is incorrect`);
-        //setWrong(true);
+        setWrong(true);
         return;
       }
     }
@@ -113,6 +113,16 @@ function GraphInput({
     nextExercise();
   };
 
+  function wrongMessage(isWrong: boolean) {
+    if (isWrong) {
+      return "That's not quite right. Try again!";
+    } else {
+      return;
+    }
+  }
+
+  const [wrong, setWrong] = useState(false);
+
   const makeLine = (
     data: GraphLineData,
     setCorrect: (id: number, value: boolean) => void
@@ -128,6 +138,9 @@ function GraphInput({
       <div id="graphinput-question-box">
         {questionArray.map((x) => makeLine(x, setValueCorrect))}
       </div>
+      <div className="axinput-wrong-box">
+        <h3 id="axinput-check-wrong">&nbsp;{wrongMessage(wrong)}&nbsp;</h3>
+      </div>
       <div id="graphinput-check-button-container">
         <button id="graphinput-check-button" onClick={checkCorrect}>
           Check
diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
index b73f1af..900c69d 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: 150px;
+  margin-top: 210px;
   padding-left: 8%;
 }
 
@@ -78,7 +78,8 @@
 
 #graphinput-check-button-container {
   align-self: center;
-  padding-top: 4vh;
+  //padding-top: 4vh;
+  padding-bottom: 5vh;
 }
 
 #graphinput-check-button {
@@ -89,3 +90,12 @@
   color: colors.$text-white;
   padding: 1.25vw 2.5vw;
 }
+
+#graphinput-check-wrong {
+  @include font-styles();
+  color: red;
+}
+
+.graphinput-wrong-box {
+  align-self: center;
+}

From 4f9e1ffd48605e70175605f0689f5a880322fb2a Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Sat, 25 May 2024 10:33:06 -0700
Subject: [PATCH 2/3] added error message to graph + fixed graph styling

---
 src/components/shared/ExerciseSide.tsx            | 2 +-
 src/components/shared/Exercises/GraphExercise.tsx | 2 +-
 src/styles/Exercises/GraphInput.scss              | 3 ++-
 src/styles/Graph.scss                             | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 2617d1a..069adf7 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -142,7 +142,7 @@ ExerciseSideProps): JSX.Element {
             pointerOrientation={45}
           />
         </div>
-        <div style={{ paddingTop: '10vw' }}>
+        <div style={{ paddingTop: '5vw' }}>
           <GraphInput
             questionArray={[
               {
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
index cefab0b..1724858 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 / 50;
+        const yxRatio = 19.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 900c69d..6935c37 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -78,8 +78,9 @@
 
 #graphinput-check-button-container {
   align-self: center;
+  padding-bottom: 10vh;
   //padding-top: 4vh;
-  padding-bottom: 5vh;
+  position: relative;
 }
 
 #graphinput-check-button {
diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
index 6df3344..b472f9a 100644
--- a/src/styles/Graph.scss
+++ b/src/styles/Graph.scss
@@ -6,7 +6,7 @@
   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%;
+  padding-bottom: 19.5%;
   position: absolute;
   top: 5%;
   width: 50%; // see above warning

From f8d31890c431c8789245ddf2c6a0451afb2b2d64 Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Tue, 28 May 2024 18:42:48 -0700
Subject: [PATCH 3/3] shifted graph

---
 src/components/shared/ExerciseSide.tsx            | 2 +-
 src/components/shared/Exercises/GraphExercise.tsx | 2 +-
 src/styles/Exercises/GraphInput.scss              | 2 +-
 src/styles/Graph.scss                             | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
index 069adf7..2617d1a 100644
--- a/src/components/shared/ExerciseSide.tsx
+++ b/src/components/shared/ExerciseSide.tsx
@@ -142,7 +142,7 @@ ExerciseSideProps): JSX.Element {
             pointerOrientation={45}
           />
         </div>
-        <div style={{ paddingTop: '5vw' }}>
+        <div style={{ paddingTop: '10vw' }}>
           <GraphInput
             questionArray={[
               {
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
index 1724858..168dc9e 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 = 19.5 / 50;
+        const yxRatio = 14.5 / 31;
         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 6935c37..3588fcc 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: 210px;
+  margin-top: 50px;
   padding-left: 8%;
 }
 
diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
index b472f9a..cdb8a99 100644
--- a/src/styles/Graph.scss
+++ b/src/styles/Graph.scss
@@ -3,13 +3,13 @@
   border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
-  margin-left: 5%;
+  margin-left: 15%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
-  padding-bottom: 19.5%;
+  padding-bottom: 14.5%;
   position: absolute;
   top: 5%;
-  width: 50%; // see above warning
+  width: 31%; // see above warning
 }
 
 .grid-line {