Merge branch 'main' into 96-feature-change-the-turtles-dialogue-for-e…

…ach-exercise
uclaacm · Apr 25, 2024 · 5c9c451 · 5c9c451
2 parents e49cf8e + f0420a3
commit 5c9c451
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 57 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -25,12 +25,17 @@ function ExerciseSide({
 ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
-  type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
+  type availableExercises =
+    | 'axis'
+    | 'congrats'
+    | 'graph0'
+    | 'unitcircle'
+    | 'graph1';
 
   const exercises: availableExercises[] = [
     'unitcircle',
     'axis',
-    'graph',
+    'graph0',
     'congrats',
   ];
   let curExercise;
@@ -39,20 +44,20 @@ ExerciseSideProps): JSX.Element {
     setDisplayExercise(ExercisesNum);
   }
 
-  if (exercises[displayExercise] == 'graph') {
+  if (exercises[displayExercise] == 'graph0') {
     curExercise = (
       <div>
         <div>
           <GraphExercise
             origin={{ x: 0, y: 0 }}
             points={[
-              { x: -1, y: 1, label: 'A' },
-              { x: 2, y: -1, label: 'B', line: 1 },
-              { x: 1, y: 0, label: 'C', line: 0 },
-              { x: 0, y: -2, label: 'D', line: 0 },
+              { x: 0, y: 0, label: '' },
+              { x: 2, y: 1, label: 'A', line: 1 },
+              { x: 1, y: -1, label: 'B', line: 1 },
+              { x: 0, y: -1, label: 'C', line: 1 },
             ]}
-            pointerPosition={{ x: 1, y: 1 }}
-            pointerOrientation={45}
+            pointerPosition={{ x: 0, y: 0 }}
+            pointerOrientation={0}
           />
         </div>
         <div style={{ paddingTop: '10vw' }}>
@@ -69,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: ')' },
                 ],
               },
@@ -121,6 +126,69 @@ ExerciseSideProps): JSX.Element {
           />
         </div>
     );*/
+  } else if (exercises[displayExercise] == 'graph1') {
+    curExercise = (
+      <div>
+        <div>
+          <GraphExercise
+            origin={{ x: 0, y: 0 }}
+            points={[
+              { x: -1, y: 1, label: 'A' },
+              { x: 2, y: -1, label: 'B', line: 1 },
+              { x: 1, y: 0, label: 'C', line: 0 },
+              { x: 0, y: -2, label: 'D', line: 0 },
+            ]}
+            pointerPosition={{ x: 1, y: 1 }}
+            pointerOrientation={45}
+          />
+        </div>
+        <div style={{ paddingTop: '10vw' }}>
+          <GraphInput
+            questionArray={[
+              {
+                textArray: [
+                  {
+                    type: 'text',
+                    text: '# Goto point A and draw on the dotted line',
+                  },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', -1)' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.setheading(' },
+                  { type: 'input', width: 4 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.' },
+                  { type: 'input', width: 8 },
+                  { type: 'text', text: '()' },
+                ],
+              },
+              {
+                textArray: [
+                  { type: 'text', text: 'turtle.goto(' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ', ' },
+                  { type: 'input', width: 2 },
+                  { type: 'text', text: ')' },
+                ],
+              },
+            ]}
+            nextExercise={() => incrementExercise()}
+          />
+        </div>
+      </div>
+    );
   } else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">

diff --git 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 / 40;
+        const yxRatio = 22.5 / 50;
         const lineLengthPercent =
           Math.sqrt(
             (dxPercent / 100) ** 2 + ((dyPercent * yxRatio) / 100) ** 2

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/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
@@ -22,8 +22,9 @@
   font-style: normal;
   font-weight: bold;
   margin-bottom: 2vh;
-  margin-left: -20px;
+  margin-left: 0;
   margin-right: auto;
+  margin-top: 100px;
   padding-left: 8%;
 }
 

diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
@@ -1,14 +1,15 @@
 .graph-container {
   align-items: center;
-  border: solid 2px #000;
+  border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
+  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%;
   position: absolute;
   top: 5%;
-  width: 40%; // see above warning
+  width: 50%; // see above warning
 }
 
 .grid-line {