devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Added a new type of exercise

Browse Source 
- Updated all solutions to solve a huge bug where after reviewing, it would reset the score
This commit is contained in:
Tiago Ribeiro
2023-08-11 14:23:09 +01:00
parent 5099721b9b
commit db54d58bab
18 changed files with 407 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Solutions/MatchSentences.tsx
View File

@@ -9,7 +9,24 @@ import {Fragment} from "react";
import Button from "../Low/Button";
import Xarrow from "react-xarrows";
export default function MatchSentencesSolutions({options, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
export default function MatchSentencesSolutions({
id,
type,
options,
prompt,
sentences,
userSolutions,
onNext,
onBack,
}: MatchSentencesExercise & CommonProps) {
const calculateScore = () => {
const total = sentences.length;
const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id === x.question)).length;
return {total, correct, missing};
};
return (
<>
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
@@ -33,7 +50,7 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
"transition duration-300 ease-in-out",
!userSolutions.find((x) => x.question === id) && "!bg-mti-red",
userSolutions.find((x) => x.question === id)?.option === solution && "bg-mti-purple",
userSolutions.find((x) => x.question === id)?.option !== solution && "bg-mti-orange",
userSolutions.find((x) => x.question === id)?.option !== solution && "bg-mti-rose",
)}>
{id}
</button>
@@ -62,10 +79,10 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
end={sentence.solution}
lineColor={
!userSolutions.find((x) => x.question === sentence.id)
? "#0696ff"
? "#CC5454"
: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
? "#307912"
: "#FF6000"
? "#7872BF"
: "#CC5454"
}
showHead={false}
/>
@@ -79,17 +96,24 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
<div className="w-4 h-4 rounded-full bg-mti-red" /> Unanswered
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-orange" /> Wrong
<div className="w-4 h-4 rounded-full bg-mti-rose" /> Wrong
</div>
</div>
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="purple" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
<Button
color="purple"
variant="outline"
onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
className="max-w-[200px] w-full">
Back
</Button>
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button
color="purple"
onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
className="max-w-[200px] self-end w-full">
Next
</Button>
</div>