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

Made it so the code remembers the user's previous answers to current exercises

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-20 17:07:54 +01:00
parent dd357d991c
commit 3a7c29de56
11 changed files with 147 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Exercises/MatchSentences.tsx
View File

@@ -7,20 +7,20 @@ import {Fragment, useState} from "react";
import LineTo from "react-lineto";
import {CommonProps} from ".";
export default function MatchSentences({id, options, type, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
const [selectedQuestion, setSelectedQuestion] = useState<string>();
const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
const calculateScore = () => {
const total = sentences.length;
const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
return {total, correct};
};
const selectOption = (option: string) => {
if (!selectedQuestion) return;
setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
setAnswers((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
setSelectedQuestion(undefined);
};
@@ -64,9 +64,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
onClick={() => selectOption(id)}>
<div
style={
userSolutions.find((x) => x.option === id)
answers.find((x) => x.option === id)
? {
border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
border: `2px solid ${getSentenceColor(answers.find((x) => x.option === id)!.question)}`,
}
: {}
}
@@ -78,7 +78,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
</div>
))}
</div>
{userSolutions.map((solution, index) => (
{answers.map((solution, index) => (
<div key={`solution_${index}`} className="absolute">
<LineTo
className="rounded-full"
@@ -93,7 +93,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
</div>
<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
<button
className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}
onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
@@ -101,7 +103,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
</button>
<button
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />