diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx index b28f618..2617d1a 100644 --- 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 { @@ -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 = (
@@ -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 { />
);*/ + } else if (exercises[displayExercise] == 'graph1') { + curExercise = ( +
+
+ +
+
+ incrementExercise()} + /> +
+
+ ); } else if (exercises[displayExercise] == 'axis') { curExercise = (
@@ -148,21 +216,27 @@ ExerciseSideProps): JSX.Element { curExercise = (
- - { - // console.log('unit'); + { setDisplayExercise(displayExercise + 1); incrementExercise(); return; }} - markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]} - labels={[['A', 'C', '', 'B', '']]} - directions={[['left', 'right', '', 'right', '']]} />
diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx index ca3be1f..cefab0b 100644 --- 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 index a20c5ba..b3d9a39 100644 --- 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

{text}

; +interface GraphLineData { + textArray: GraphQuestionData[]; +} + +function GraphStringElement({ + questionData, + setCorrect, +}: GraphQuestionGrouping) { + if (questionData.type == 'text') { + return

{questionData?.text ?? ''}

; } 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 ( - +
+ +
); } } -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 ( - + ); }; return ( -
{textArray.map(makeElement)}
+
+ {data.textArray.map(makeElement)} +
); /*return (
@@ -58,8 +85,39 @@ function GraphInput({ questionArray, nextExercise, }: GraphInputProps): JSX.Element { - const makeLine = (lineArray: GraphQuestion): JSX.Element => { - return ; + const valueMap = new Map(); + 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 ; }; return (
@@ -67,27 +125,16 @@ function GraphInput({ Fill in the blanks to move the cursor along the path!
-
{questionArray.map(makeLine)}
+
+ {questionArray.map((x) => makeLine(x, setValueCorrect))} +
-
); - /* - return ( -
-
- -
-
- );*/ } export default GraphInput; diff --git a/src/components/shared/Exercises/UnitCircleExercise.tsx b/src/components/shared/Exercises/UnitCircleExercise.tsx index 7bef07a..95eb54a 100644 --- 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 ( -
+
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 ( -
+

{label} = {direction}{' '}

@@ -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,8 +88,8 @@ 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, }); } @@ -121,7 +97,6 @@ function UnitCircleInput({ return

Done!

; } - //console.log(questionLabels[counter]); const questionOutput = questions.map(MakeQuestion); return (
diff --git a/src/components/shared/Exercises/UnitCircleParent.tsx b/src/components/shared/Exercises/UnitCircleParent.tsx new file mode 100644 index 0000000..09f8b96 --- /dev/null +++ b/src/components/shared/Exercises/UnitCircleParent.tsx @@ -0,0 +1,80 @@ +import { useState, useEffect } from 'react'; +import '../../../styles/Exercises/AxisExercise.scss'; +import UnitCircleExercise from './UnitCircleExercise'; +import UnitCircleInput from './UnitCircleInput'; +('./Exercises/AxisExercise'); + +interface UnitCircleParentProps { + unitCircleMarkers: string[][]; //2-D array for different sets of problems + unitCircleLabels: string[][]; + directions: string[][]; + toNextExercise: () => void; +} + +function UnitCircleParent({ + unitCircleMarkers, + unitCircleLabels, + directions, + toNextExercise, +}: UnitCircleParentProps): JSX.Element { + //make 2d array for answers using the non-empty elements of unitCircleLabels + const answers: number[][] = []; + const questionLabels: string[][] = []; + const questionDirections: string[][] = []; + for (let i = 0; i < unitCircleMarkers.length; i++) { + const currentAnswers = []; + const currentLabels = []; + const currentDirections = []; + const length = unitCircleMarkers[i].length; + for (let j = 0; j < length; j++) { + if (unitCircleLabels[i][j] !== '') { + let multiplier = 1; + if (directions[i][j] == 'left') { + multiplier = -1; + } + currentAnswers.push( + parseInt(unitCircleMarkers[i][j].slice(0, -1)) * multiplier + ); + currentLabels.push(unitCircleLabels[i][j]); + currentDirections.push(directions[i][j]); + } + } + answers.push(currentAnswers); + questionLabels.push(currentLabels); + questionDirections.push(currentDirections); + } + + const [exerciseNum, setExerciseNum] = useState(0); + function nextExercise() { + setExerciseNum(exerciseNum + 1); + } // advance to next exercise within axis inputs exercise + + useEffect(() => { + if (exerciseNum == unitCircleMarkers.length) { + toNextExercise(); // update parent exercise side that axis input exercise is complete + } + }, [exerciseNum]); + + return ( +
+ + +
+ ); +} + +export default UnitCircleParent; diff --git a/src/components/shared/LessonSide/LessonSide.tsx b/src/components/shared/LessonSide/LessonSide.tsx index 1158d08..252106f 100644 --- a/src/components/shared/LessonSide/LessonSide.tsx +++ b/src/components/shared/LessonSide/LessonSide.tsx @@ -12,12 +12,17 @@ interface lessonSideProps { maxLevel: number; } +function getRandomNumber(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + function LessonSide({ levelNum, updateLevel, maxLevel, }: lessonSideProps): JSX.Element { const lesson_info = LessonSideContent[levelNum] || []; + const randomTurtleMessage = getRandomNumber(1, 7); // console.log("max:" + maxLevel); return (
@@ -33,7 +38,7 @@ function LessonSide({
- + {/* passed from parent component */}