52_addedInstructions

uclaacm · Feb 14, 2024 · 8f90575 · 8f90575
1 parent dc088f9
commit 8f90575
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 248 deletions.
diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
@@ -63,6 +63,10 @@ function GraphInput({
   };
   return (
     <div id="graphinput-container">
+      <div id="graphinput-question">
+        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-check-button-container">
         <button id="graphinput-check-button" onClick={nextExercise}>

diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
@@ -13,6 +13,28 @@
   margin-bottom: 2vh;
 }
 
+#graphinput-question {
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  font-family: Quattrocento Sans, sans-serif;
+  font-size: calc(13px + 1vw);
+  font-style: normal;
+  font-weight: bold;
+  margin-bottom: 2vh;
+  margin-left: -20px;
+  margin-right: auto;
+  padding-left: 8%;
+}
+
+.graphinput-question {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-family: 'PT Sans', sans-serif;
+  text-align: left;
+}
+
 #graphinput-question-box {
   display: flex;
   flex-direction: column;