Skip to content

Commit

Permalink
feat: unitcircle input validation and match figma (#90)
Browse files Browse the repository at this point in the history 
* match exercise to figma

* unitcircle validate input(#88)

* Made the answer depend on the "left" or "right" value in the question (#88)

---------

Co-authored-by: Jonah Paten <[email protected]>
  • Loading branch information
@rakilkim @jpaten
rakilkim and jpaten authored Feb 28, 2024
1 parent 7b17e65 commit 74eb4f5
Show file tree
Hide file tree
Showing 5 changed files with 198 additions and 73 deletions.
7 changes: 5 additions & 2 deletions src/components/shared/ExerciseSide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ ExerciseSideProps): JSX.Element {
<div>
<UnitCircleExercise
turtleAngle={1}
markers={['A', '', 'B']}
labels={['B', 'C', 'D']}
markers={['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']}
labels={['A', 'C', '', 'B', '']}
/>
<UnitCircleInput
nextExercise={() => {
Expand All @@ -160,6 +160,9 @@ ExerciseSideProps): JSX.Element {
incrementExercise();
return;
}}
markers={[['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0']]}
labels={[['A', 'C', '', 'B', '']]}
directions={[['left', 'right', '', 'right', '']]}
/>
</div>
</div>
Expand Down
80 changes: 53 additions & 27 deletions src/components/shared/Exercises/UnitCircleExercise.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ function UnitCircleExercise({
const rotateString = turtleAngle + 'deg';
const angleBetweenTicks = Math.PI / (labels.length - 1);
let curAngle = 0 - angleBetweenTicks;
const cursorTicks = Math.PI / (labels.length - 1);
let cursorAngle = 0 - cursorTicks;
const scaleCursor = 'scale(1.5)';
return (
<div className="circle-container">
Expand All @@ -29,55 +31,79 @@ function UnitCircleExercise({
/>
{labels.map((element, idx) => {
curAngle += angleBetweenTicks;
cursorAngle += cursorTicks;
return (
<div key={element}>
<div
className="circle-exercise"
style={{
left: `${
(1 - Math.cos(curAngle)) * 40 +
(1 - Math.cos(curAngle)) * 31 + //middle right and left
(curAngle <= Math.PI / 2
? curAngle == Math.PI / 2
? 7.5
: 5
: 10)
? 17 //middle
: 19 //left
: 14) //right
}%`,
bottom: `${Math.sin(curAngle) * 50 + 30}%`,
}}
>
{element}
</div>
<div
className="circle-label"
style={{
left: `${
(1 - Math.cos(curAngle)) * 45 +
bottom: `${
Math.sin(curAngle) * 53 + //middle right and left
(curAngle <= Math.PI / 2
? curAngle == Math.PI / 2
? 2.5
: 5
: 0)
? 28 //middle
: 25 //left
: 25) //right
}%`,
bottom: `${Math.sin(curAngle) * 50 + 30}%`,
}}
>
{markers[idx]}
{element}
</div>
{labels[idx] === '' ? (
<div
className="circle-label"
style={{
left: `${
(1 - Math.cos(curAngle)) * 30 + //middle left and right
(curAngle <= Math.PI / 2
? curAngle == Math.PI / 2
? 19 //middle
: 20 //left
: 15) //right
}%`,
bottom: `${
Math.sin(curAngle) * 55 + //middle left and right
(curAngle <= Math.PI / 2
? curAngle == Math.PI / 2
? 30 //middle
: 25 //left
: 25) //right
}%`,
}}
>
{markers[idx]}
</div>
) : null}

<img
src={Cursor}
className="circle-cursor"
style={{
left: `${
(1 - Math.cos(curAngle)) * 50 +
(curAngle <= Math.PI / 2
? curAngle == Math.PI / 2
? -2.5
: -10
: 5)
(1 - Math.cos(cursorAngle)) * 43 +
(cursorAngle <= Math.PI / 2
? cursorAngle == Math.PI / 2
? 5
: 7
: 2)
}%`,
bottom: `${
Math.sin(cursorAngle) * 80 +
(cursorAngle <= Math.PI / 2
? cursorAngle == Math.PI / 2
? 25
: 28
: 28)
}%`,
bottom: `${Math.sin(curAngle) * 75 + 30}%`,
transform: `rotate(${curAngle}rad) ${
transform: `rotate(${cursorAngle}rad) ${
labels.length % 2 === 1 &&
idx === Math.floor(labels.length / 2)
? scaleCursor
Expand Down
164 changes: 127 additions & 37 deletions src/components/shared/Exercises/UnitCircleInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,141 @@
//import { useState } from 'react';
import { useState } from 'react';
import '../../../styles/Exercises/UnitCircleInput.scss';

interface UnitCircleInputProps {
nextExercise: () => void;
markers: string[][];
labels: string[][];
directions: string[][];
}

function UnitCircleInput({ nextExercise }: UnitCircleInputProps): JSX.Element {
return (
<div id="unitcircle-question-container">
<div id="unitcircle-check-question">
Type the correct numbers into the blanks below!
</div>
interface CircleQuestion {
label: string;
answer: string; // Should change to being strings
direction: string;
id: number; //This sucks lol
}

<div id="unitcircle-check-question">
{' '}
<i>A</i> = left
function UnitCircleInput({
nextExercise,
markers,
labels,
directions,
}: UnitCircleInputProps): JSX.Element {
function MakeQuestion({ label, id, direction }: CircleQuestion): JSX.Element {
const handleChange = (event: { target: { value: string } }) => {
setText(event.target.value, id);
};
/* lines 25-35, try to get component to look like this */
return (
<div id="unitcircle-question-container">
<p id="unitcircle-check-question">
{label} = {direction}{' '}
</p>
<input
type="text"
className="unitcircle-check-box"
//onChange={handleChange}
//value={inputText[id]}
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 id="unitcircleinput-check-button-container">
<button id="unitcircleinput-check-button" onClick={nextExercise}>
Check
</button>
</div>
</div>
);
}

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]) {
setWrong(true);
return;
}
}
if (counter == questionLabels.length - 1) {
setIsDone(true);
//setIsComplete(true);
nextExercise();
return;
}
setCounter(counter + 1);
setWrong(false);
setInputText(startInputStrings);
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!";
} else {
return;
}
}

const [counter, setCounter] = useState(0);
const [wrong, setWrong] = useState(false);
const [isDone, setIsDone] = useState(false);
const questions = [];
const startInputStrings: string[] = [];
for (let i = 0; i < questionLabels[counter].length; i++) {
startInputStrings.push('');
}
const [inputText, setInputText] = useState<string[]>(startInputStrings);
function setText(text: string, id: number) {
const tempInputStrings = [...inputText];
tempInputStrings[id] = text;
setInputText(tempInputStrings);
}

if (!isDone) {
for (let i = 0; i < questionLabels[counter].length; i++) {
questions.push({
label: questionLabels[counter][i],
direction: questionDirections[counter][i],
answer: answers[counter][i],
id: i,
});
}
} else {
return <h2>Done!</h2>;
}

//console.log(questionLabels[counter]);
const questionOutput = questions.map(MakeQuestion);
return (
<div className="unitcircle-question-container">
<div id="unitcircle-question">
Type the correct numbers into the blanks below!
</div>
<div className="unitcircle-question-box">{questionOutput}</div>
<div className="unitcircle-wrong-box">
<h3 id="unitcircle-check-wrong">&nbsp;{wrongMessage(wrong)}&nbsp;</h3>
</div>
<div className="unitcircleinput-check-button-container">
<button id="unitcircleinput-check-button" onClick={checkAnswer}>
Check
</button>
</div>
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions src/styles/Exercises/UnitCircleExercise.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@

.circle-exercise {
font-family: Quattrocento Sans, sans-serif;
font-size: 2vh;
font-size: 4vh;
font-style: italic;
font-weight: bold;
position: absolute;
}

.circle-label {
font-family: Cascadia Code, sans-serif;
font-size: 2vh;
font-weight: regular;
font-family: Quattrocento Sans, sans-serif;
font-size: 3vh;
font-weight: bold;
position: absolute;
}

Expand Down
12 changes: 9 additions & 3 deletions src/styles/Exercises/UnitCircleInput.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,25 @@
flex-direction: column;
}

#unitcircle-question {
@include font-styles();
margin-bottom: 2vh;
margin-left: 2vh;
}

#unitcircle-question-container {
align-items: baseline;
display: flex;
flex-direction: column;
margin-bottom: -15px;
margin-top: -15px;
padding-left: 8%;
padding-left: 0;
}

#unitcircle-check-question {
@include font-styles();
font-size: calc(13px + 1vw);
font-style: normal;
margin-bottom: 2vh;
margin-bottom: 4vh;
margin-left: auto;
margin-right: auto;
}
Expand All @@ -47,6 +52,7 @@
font-family: Cascadia Code, sans-serif;
font-size: calc(16px + 1vw);
height: 18pt;
margin-bottom: 0;
margin-left: 2vh;
size: 64pt;
text-align: center;
Expand Down

0 comments on commit 74eb4f5

Please sign in to comment.