From ed69f7f3bb01adc5b9691d264745c1bd1c8e5868 Mon Sep 17 00:00:00 2001
From: NotAmaia <012.sva@gmail.com>
Date: Sat, 25 May 2024 09:42:31 -0700
Subject: [PATCH] added error message to graphs

---
 .../shared/Exercises/GraphInput.tsx           | 18 +++++++++++++++--
 src/styles/Exercises/GraphInput.scss          | 20 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
index b3d9a39..5802c11 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,14 +105,25 @@ function GraphInput({
       //console.log(i);
       if (!i) {
         //console.log(`${i} is incorrect`);
-        //setWrong(true);
+        setWrong(true);
         return;
       }
     }
     //console.log('all right!');
     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 +139,9 @@ function GraphInput({
       <div id="graphinput-question-box">
         {questionArray.map((x) => makeLine(x, setValueCorrect))}
       </div>
+      <div className="graphinput-wrong-box">
+        <h3 id="graphinput-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..2231dce 100644
--- a/src/styles/Exercises/GraphInput.scss
+++ b/src/styles/Exercises/GraphInput.scss
@@ -11,6 +11,7 @@
 #graphinput-check-question {
   @include font-styles();
   margin-bottom: 2vh;
+  //margin-top: -20px;
 }
 
 #graphinput-question {
@@ -24,7 +25,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 150px;
+  margin-top: 210px;
   padding-left: 8%;
 }
 
@@ -78,7 +79,9 @@
 
 #graphinput-check-button-container {
   align-self: center;
-  padding-top: 4vh;
+  //position: relative;
+  padding-bottom: 5vh
+  //padding-top: 4vh;
 }
 
 #graphinput-check-button {
@@ -89,3 +92,16 @@
   color: colors.$text-white;
   padding: 1.25vw 2.5vw;
 }
+
+
+#graphinput-check-wrong {
+  @include font-styles();
+  color: red;
+  
+}
+
+.graphinput-wrong-box {
+  align-self: center;
+}
+
+