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

Finished implementing a Solutions version for each exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-11 21:35:44 +01:00
parent 45a5cb0f5c
commit 49c515b02a
20 changed files with 610 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Exercises/MultipleChoice.tsx
View File

@@ -83,7 +83,7 @@ function Question({
);
}
export default function MultipleChoice({prompt, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
export default function MultipleChoice({id, prompt, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
const [questionIndex, setQuestionIndex] = useState(0);
@@ -92,9 +92,16 @@ export default function MultipleChoice({prompt, questions, onNext, onBack}: Mult
setUserSolutions((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
};
const calculateScore = () => {
const total = questions.length;
const correct = userSolutions.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
return {total, correct};
};
const next = () => {
if (questionIndex === questions.length - 1) {
onNext();
onNext({id, solutions: userSolutions, score: calculateScore()});
} else {
setQuestionIndex((prev) => prev + 1);
}
@@ -137,52 +144,3 @@ export default function MultipleChoice({prompt, questions, onNext, onBack}: Mult
</>
);
}
export function MultipleChoiceSolutions({prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
const [questionIndex, setQuestionIndex] = useState(0);
const next = () => {
if (questionIndex === questions.length - 1) {
onNext();
} else {
setQuestionIndex((prev) => prev + 1);
}
};
const back = () => {
if (questionIndex === 0) {
onBack();
} else {
setQuestionIndex((prev) => prev - 1);
}
};
return (
<>
<div className="flex flex-col items-center gap-8">
<span className="text-lg font-medium text-center px-48">{prompt}</span>
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
showSolution
/>
)}
</div>
<div className="self-end flex gap-8">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
Back
</button>
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div>
</>
);
}