Merge branch 'main' into 84-feature-make-the-graphexercise-and-graphi…

…nput-match-the-figma
uclaacm · May 21, 2024 · 0b2c304 · 0b2c304
2 parents 6fdae0f + e7745bb
commit 0b2c304
Show file tree

Hide file tree

Showing 10 changed files with 234 additions and 151 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -8,8 +8,8 @@ import AxisParent from './Exercises/AxisParent';
 import GraphExercise from './Exercises/GraphExercise';
 import GraphInput from './Exercises/GraphInput';
 //import AxisParent from './Exercises/AxisParent';
-import UnitCircleExercise from './Exercises/UnitCircleExercise';
-import UnitCircleInput from './Exercises/UnitCircleInput';
+import UnitCircleParent from './Exercises/UnitCircleParent';
+
 ('./Exercises/AxisExercise');
 
 interface ExerciseSideProps {
@@ -74,30 +74,30 @@ ExerciseSideProps): JSX.Element {
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2 },
-                  { type: 'text', text: ', -1)' },
+                  { type: 'input', width: 2, id: 0, answer: '2' },
+                  { type: 'text', text: ', 1)' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.setheading(' },
-                  { type: 'input', width: 4 },
+                  { type: 'input', width: 4, id: 1, answer: '225' },
                   { type: 'text', text: ')' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.' },
-                  { type: 'input', width: 8 },
+                  { type: 'input', width: 8, id: 2, answer: 'forward' },
                   { type: 'text', text: '()' },
                 ],
               },
               {
                 textArray: [
                   { type: 'text', text: 'turtle.goto(' },
-                  { type: 'input', width: 2 },
+                  { type: 'input', width: 2, id: 3, answer: '0' },
                   { type: 'text', text: ', ' },
-                  { type: 'input', width: 2 },
+                  { type: 'input', width: 2, id: 4, answer: '-1' },
                   { type: 'text', text: ')' },
                 ],
               },
@@ -189,25 +189,6 @@ ExerciseSideProps): JSX.Element {
         </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] == 'axis') {
     curExercise = (
       <div className="exercise-box">
@@ -235,21 +216,27 @@ ExerciseSideProps): JSX.Element {
     curExercise = (
       <div>
         <div>
-          <UnitCircleExercise
-            turtleAngle={1}
-            markers={['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']}
-            labels={['A', 'C', '', 'B', '']}
-          />
-          <UnitCircleInput
-            nextExercise={() => {
-              // console.log('unit');
+          <UnitCircleParent
+            unitCircleMarkers={[
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+            ]}
+            unitCircleLabels={[
+              ['A', 'C', '', 'B', ''],
+              ['B', 'A', '', 'C', ''],
+              ['', '', 'C', 'A', 'B'],
+            ]}
+            directions={[
+              ['left', 'right', '', 'right', ''],
+              ['left', 'left', '', 'left', ''],
+              ['', '', 'right', 'right', 'left'],
+            ]}
+            toNextExercise={() => {
               setDisplayExercise(displayExercise + 1);
               incrementExercise();
               return;
             }}
-            markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]}
-            labels={[['A', 'C', '', 'B', '']]}
-            directions={[['left', 'right', '', 'right', '']]}
           />
         </div>
       </div>

diff --git a/src/components/shared/Exercises/GraphInput.tsx b/src/components/shared/Exercises/GraphInput.tsx
@@ -1,49 +1,76 @@
+//import { useState } from 'react';
+//import { useState } from 'react';
 import '../../../styles/Exercises/GraphInput.scss';
 
-interface GraphQuestionElement {
+interface GraphQuestionData {
   type: string;
   text?: string;
   width?: number;
   answer?: string;
+  id?: number;
 }
 
-interface GraphQuestion {
-  textArray: GraphQuestionElement[];
+interface GraphQuestionGrouping {
+  questionData: GraphQuestionData;
+  setCorrect: (id: number, value: boolean) => void;
+}
+
+interface GraphLineGrouping {
+  data: GraphLineData;
+  setCorrect: (id: number, value: boolean) => void;
 }
 
 interface GraphInputProps {
-  questionArray: GraphQuestion[];
+  questionArray: GraphLineData[];
   nextExercise: () => void;
 }
 
-function GraphStringElement({ type, text, width }: GraphQuestionElement) {
-  if (type == 'text') {
-    return <p id="graphinput-check-question">{text}</p>;
+interface GraphLineData {
+  textArray: GraphQuestionData[];
+}
+
+function GraphStringElement({
+  questionData,
+  setCorrect,
+}: GraphQuestionGrouping) {
+  if (questionData.type == 'text') {
+    return <p id="graphinput-check-question">{questionData?.text ?? ''}</p>;
   } else {
+    //const [inputText, setInputText] = useState("");
+    const handleChange = (event: { target: { value: string } }) => {
+      //console.log(`input text: ${event.target.value}`);
+      //console.log(questionData?.answer ?? '');
+      if (event.target.value == (questionData?.answer ?? '')) {
+        setCorrect(questionData?.id ?? -1, true);
+      } else {
+        setCorrect(questionData?.id ?? -1, false);
+      }
+      //setInputText(event.target.value);
+    };
     return (
-      <input
-        type="text"
-        className="graphinput-check-box"
-        style={{ width: `${width * 16}px` }}
-      />
+      <div>
+        <input
+          type="text"
+          className="graphinput-check-box"
+          style={{ width: `${(questionData?.width ?? 3) * 16}px` }}
+          onChange={handleChange}
+        />
+      </div>
     );
   }
 }
 
-function GraphLine({ textArray }: GraphQuestion) {
+function GraphLine({ data, setCorrect }: GraphLineGrouping) {
   //Map all elements of TextArray
-  const makeElement = (elementData: GraphQuestionElement): JSX.Element => {
+  const makeElement = (elementData: GraphQuestionData): JSX.Element => {
     return (
-      <GraphStringElement
-        type={elementData?.type}
-        text={elementData?.text}
-        width={elementData?.width}
-        answer={elementData?.answer}
-      />
+      <GraphStringElement questionData={elementData} setCorrect={setCorrect} />
     );
   };
   return (
-    <div id={'graphinput-question-container'}>{textArray.map(makeElement)}</div>
+    <div id={'graphinput-question-container'}>
+      {data.textArray.map(makeElement)}
+    </div>
   );
   /*return (
     <div id="graphinput-question-container">
@@ -58,36 +85,56 @@ function GraphInput({
   questionArray,
   nextExercise,
 }: GraphInputProps): JSX.Element {
-  const makeLine = (lineArray: GraphQuestion): JSX.Element => {
-    return <GraphLine textArray={lineArray.textArray} />;
+  const valueMap = new Map<number, boolean>();
+  for (const question of questionArray) {
+    for (const item of question.textArray) {
+      if (item.type == 'input') {
+        valueMap.set(item.id ?? -1, false);
+      }
+    }
+  }
+  const setValueCorrect = (id: number, value: boolean): void => {
+    //console.log(`Setting ${id} to ${value}`);
+    valueMap.set(id, value);
+  };
+
+  const checkCorrect = (): void => {
+    //console.log('Checking correct');
+    const valuesArray = Array.from(valueMap.values());
+    for (const i of valuesArray) {
+      //console.log(i);
+      if (!i) {
+        //console.log(`${i} is incorrect`);
+        //setWrong(true);
+        return;
+      }
+    }
+    //console.log('all right!');
+    nextExercise();
+  };
+
+  const makeLine = (
+    data: GraphLineData,
+    setCorrect: (id: number, value: boolean) => void
+  ): JSX.Element => {
+    return <GraphLine data={data} setCorrect={setCorrect} />;
   };
   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-question-box">
+        {questionArray.map((x) => makeLine(x, setValueCorrect))}
+      </div>
       <div id="graphinput-check-button-container">
-        <button id="graphinput-check-button" onClick={nextExercise}>
+        <button id="graphinput-check-button" onClick={checkCorrect}>
           Check
         </button>
       </div>
     </div>
   );
-  /*
-  return (
-    <div id="graphinput-container">
-      <div id="graphinput-question-box">
-        <GraphLine
-          textArray={[
-            { text: 'Hi!', type: 'text' },
-            { type: 'input', width: 10 },
-          ]}
-        />
-      </div>
-    </div>
-  );*/
 }
 
 export default GraphInput;
diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx
@@ -33,7 +33,7 @@ function UnitCircleExercise({
         curAngle += angleBetweenTicks;
         cursorAngle += cursorTicks;
         return (
-          <div key={element}>
+          <div key={idx}>
             <div
               className="circle-exercise"
               style={{

diff --git a/src/components/shared/Exercises/UnitCircleInput.tsx b/src/components/shared/Exercises/UnitCircleInput.tsx
@@ -3,22 +3,22 @@ import '../../../styles/Exercises/UnitCircleInput.scss';
 
 interface UnitCircleInputProps {
   nextExercise: () => void;
-  markers: string[][];
-  labels: string[][];
+  answers: number[][];
+  questionLabels: string[][];
   directions: string[][];
 }
 
 interface CircleQuestion {
   label: string;
-  answer: string; // Should change to being strings
+  answer: number; // Should change to being strings
   direction: string;
   id: number; //This sucks lol
 }
 
 function UnitCircleInput({
   nextExercise,
-  markers,
-  labels,
+  answers,
+  questionLabels,
   directions,
 }: UnitCircleInputProps): JSX.Element {
   function MakeQuestion({ label, id, direction }: CircleQuestion): JSX.Element {
@@ -27,7 +27,7 @@ function UnitCircleInput({
     };
     /* lines 25-35, try to get component to look like this */
     return (
-      <div id="unitcircle-question-container">
+      <div id="unitcircle-question-container" key={id}>
         <p id="unitcircle-check-question">
           {label} = {direction}{' '}
         </p>
@@ -44,7 +44,7 @@ function UnitCircleInput({
   function checkAnswer() {
     // Invoked to check answers and switch to the next question or set the answer wrong
     for (let i = 0; i < answers[counter].length; i++) {
-      if (inputText[i] != answers[counter][i]) {
+      if (parseInt(inputText[i]) != answers[counter][i]) {
         setWrong(true);
         return;
       }
@@ -61,30 +61,6 @@ function UnitCircleInput({
     nextExercise();
   }
 
-  const answers: number[][] = [];
-  const questionLabels: string[][] = [];
-  const questionDirections: string[][] = [];
-  for (let i = 0; i < markers.length; i++) {
-    const currentAnswers = [];
-    const currentLabels = [];
-    const currentDirections = [];
-    const length = markers[i].length;
-    for (let j = 0; j < length; j++) {
-      if (labels[i][j] !== '') {
-        let multiplier = 1;
-        if (directions[i][j] == 'left') {
-          multiplier = -1;
-        }
-        currentAnswers.push(parseInt(markers[i][j].slice(0, -1)) * multiplier);
-        currentLabels.push(labels[i][j]);
-        currentDirections.push(directions[i][j]);
-      }
-    }
-    answers.push(currentAnswers);
-    questionLabels.push(currentLabels);
-    questionDirections.push(currentDirections);
-  }
-
   function wrongMessage(isWrong: boolean) {
     if (isWrong) {
       return "That's not quite right. Try again!";
@@ -112,16 +88,15 @@ function UnitCircleInput({
     for (let i = 0; i < questionLabels[counter].length; i++) {
       questions.push({
         label: questionLabels[counter][i],
-        direction: questionDirections[counter][i],
         answer: answers[counter][i],
+        direction: directions[counter][i],
         id: i,
       });
     }
   } else {
     return <h2>Done!</h2>;
   }
 
-  //console.log(questionLabels[counter]);
   const questionOutput = questions.map(MakeQuestion);
   return (
     <div className="unitcircle-question-container">