graph instructions #52

uclaacm · Oct 18, 2023 · e609705 · e609705
1 parent 4551adb
commit e609705
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 46 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -5,9 +5,12 @@ import '../../styles/ExerciseSide.scss';
 //import AxisExercise from './Exercises/AxisExercise';
 //import AxisInput from './Exercises/AxisInputs';
 //import AxisParent from './Exercises/AxisParent';
-import UnitCircleExercise from './Exercises/UnitCircleExercise';
+//import UnitCircleExercise from './Exercises/UnitCircleExercise';
+//('./Exercises/AxisExercise');
+//import UnitCircleInput from './Exercises/UnitCircleInput';
+import GraphExercise from './Exercises/GraphExercise';
 ('./Exercises/AxisExercise');
-import UnitCircleInput from './Exercises/UnitCircleInput';
+import GraphInput from './Exercises/GraphInput';
 
 interface ExerciseSideProps {
   incrementExercise: () => void;
@@ -24,13 +27,13 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
     curExercise = (
       <section id="exercise-side-container">
         <div className="exercise-box">
-          <UnitCircleInput />
+          <GraphInput />
         </div>
       </section>
     );
   } else if (exercises[completeExercises] === 'circle') {
     curExercise = (
-      <UnitCircleExercise
+      <GraphExercise
         turtleAngle={1}
         markers={['A', '', 'B']}
         labels={['B', 'C', 'D']}

diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
@@ -156,4 +156,6 @@ GraphProps): JSX.Element {
   );
 }
 
+
+
 export default GraphExercise;
diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import '../../../styles/Exercises/GraphInput.scss';
+
+interface GraphInput {
+  questionLabels: string[][];
+  answers: number[][];
+  nextExercise: () => void;
+}
+function GraphInput(): JSX.Element {
+    return (
+      <div id="unitcircle-container">
+      <div id="unitcircle-prompt-question ">
+        Type the correct numbers into the blanks below!
+        <p></p>
+      </div>
+
+      <div className="unitcircle-question-container">
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>A</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>B</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>C</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+  }
+  export default GraphInput;
+
diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx
@@ -3,43 +3,43 @@ import '../../../styles/Exercises/UnitCircleInput.scss';
 
 function UnitCircleInput(): JSX.Element {
   return (
-    <div id="unitcircle-question-container">
-      <div id="unitcircle-check-question">
-      Type the correct numbers into the blanks below!
+    <div id="unitcircle-container">
+      <div id="unitcircle-prompt-question ">
+        Type the correct numbers into the blanks below!
+        <p></p>
       </div>
-
-
-      <div id="unitcircle-check-question">
-
-        {' '}
-        <i>A</i> = left
-        <input
-          type="text"
-          className="unitcircle-check-box"
-          //onChange={handleChange}
-          //value={inputText[id]}
-        />
-
-      <p>
-        {' '}
-        <i>B</i> = right
-        <input
-          type="text"
-          className="unitcircle-check-box"
-          //onChange={handleChange}
-          //value={inputText[id]}
-        />
-      </p>
-      <p>
-        {' '}
-        <i>C</i> = right
-        <input
-          type="text"
-          className="unitcircle-check-box"
-          //onChange={handleChange}
-          //value={inputText[id]}
-        />
-      </p>
+
+      <div className="unitcircle-question-container">
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>A</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>B</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
+        <div className="unitcircle-check-question">
+          {' '}
+          <i>C</i> = left
+          <input
+            type="text"
+            className="unitcircle-check-box"
+            //onChange={handleChange}
+            //value={inputText[id]}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
@@ -0,0 +1,105 @@
+@use '../_colors.scss' as colors;
+@use '../_vars.scss' as vars;
+
+@mixin font-styles {
+  font-family: Quattrocento Sans, sans-serif;
+  font-size: calc(16px + 1vw);
+  font-style: normal;
+  font-weight: bold;
+}
+
+#unitcircle-container {
+  display: flex;
+  flex-direction: column;
+  font-family: 'Quattrocento Sans', sans-serif;
+  font-size: calc(16px + 1vw);
+  font-style: normal;
+  font-weight: bold;
+  //padding-bottom: 20%;
+}
+
+#unitcircle-question-container {
+  align-items: baseline;
+  //display: flex;
+  //flex-direction: column;
+  //font-family: 'Quattrocento Sans', sans-serif;
+  text-align: left;
+}
+
+#unitcircle-prompt-question {
+  align-self: start;
+  //display: flx;
+  //flex-direction: column;
+  //font-family: 'Quattrocento Sans', sans-serif;
+  text-align: left;
+  //padding-bottom: 50px;
+}
+
+.unitcircle-question-box {
+  //display: flex;
+  //flex-direction: column;
+}
+
+/*#unitcircle-question-container {
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -15px;
+  margin-top: -15px;
+  padding-left: 20%;
+}*/
+
+.unitcircle-check-question {
+  @include font-styles();
+  font-style: normal;
+  margin-bottom: 2vh;
+  padding-left: 20%;
+  text-align: left;
+}
+
+.unitcircle-check-box {
+  background: linear-gradient(#000, #000) center bottom 0 / calc(100% - 10px)
+    2px no-repeat;
+  background-color: colors.$bg-white;
+  border: 0;
+  font-family: Cascadia Code, sans-serif;
+  font-size: calc(16px + 1vw);
+  height: 18pt;
+  margin-left: 2vh;
+  size: 64pt;
+  text-align: center;
+  width: calc(1.5 * (16px + 1vw));
+}
+
+.unitcircle-check-box:focus {
+  background-color: colors.$input-grey;
+}
+
+/*#unitcircle-check-button {
+  @include font-styles();
+  background-color: colors.$primary-green;
+  border: hidden;
+  border-radius: 10px;
+  color: colors.$text-white;
+  padding: 1.25vw 2.5vw;
+}
+
+#unitcircle-check-wrong {
+  @include font-styles();
+  color: red;
+}
+
+.unitcircle-wrong-box {
+  align-self: center;
+}
+
+.unitcircle-check-button-container {
+  align-self: center;
+}*/
+
+.instruction {
+  @include font-styles();
+  margin: 0;
+  padding-left: 10%;
+  text-align: left;
+}
diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
@@ -8,8 +8,7 @@
   font-weight: bold;
 }
 
-#unitcircle-container
-{
+#unitcircle-container {
   display: flex;
   flex-direction: column;
   font-family: 'Quattrocento Sans', sans-serif;
@@ -34,11 +33,8 @@
   //font-family: 'Quattrocento Sans', sans-serif;
   text-align: left;
   //padding-bottom: 50px;
-
-
 }
 
-
 .unitcircle-question-box {
   //display: flex;
   //flex-direction: column;
@@ -57,8 +53,8 @@
   @include font-styles();
   font-style: normal;
   margin-bottom: 2vh;
-  text-align: left;
   padding-left: 20%;
+  text-align: left;
 }
 
 .unitcircle-check-box {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -156,4 +156,6 @@ GraphProps): JSX.Element {
		);
		}



		export default GraphExercise;