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

Added a solution version for the MultipleChoice Exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-10 11:40:44 +01:00
parent 8c1d42f2d9
commit 06dbf1e5f6
5 changed files with 150 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,16 +98,7 @@ export default function MatchSentences({allowRepetition, options, prompt, senten
);
}
export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences}: MatchSentencesExercise) {
const [selectedQuestion, setSelectedQuestion] = useState<string>();
const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
const selectOption = (option: string) => {
if (!selectedQuestion) return;
setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
setSelectedQuestion(undefined);
};
export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences, userSolutions}: MatchSentencesExercise) {
const getSentenceColor = (id: string) => {
return sentences.find((x) => x.id === id)?.color || "";
};
@@ -118,15 +109,12 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
<div className="grid grid-cols-2 gap-16 place-items-center">
<div className="flex flex-col gap-1">
{sentences.map(({sentence, id, color}) => (
<div
key={`question_${id}`}
className="flex items-center justify-end gap-2 cursor-pointer"
onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
<div
style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "transparent"}}
style={{borderColor: color, backgroundColor: "transparent"}}
className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
/>
</div>
@@ -134,10 +122,7 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
</div>
<div className="flex flex-col gap-1">
{options.map(({sentence, id}) => (
<div
key={`answer_${id}`}
className={clsx("flex items-center justify-start gap-2 cursor-pointer")}
onClick={() => selectOption(id)}>
<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
<div
style={
userSolutions.find((x) => x.option === id)
@@ -166,6 +151,52 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
</div>
))}
</div>
<div className="grid grid-cols-2 gap-16 place-items-center">
<div className="flex flex-col gap-1">
{sentences.map(({sentence, id, color}) => (
<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
<div
style={{borderColor: color, backgroundColor: "transparent"}}
className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
/>
</div>
))}
</div>
<div className="flex flex-col gap-1">
{options.map(({sentence, id}) => (
<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
<div
style={
userSolutions.find((x) => x.option === id)
? {
border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
}
: {}
}
className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
/>
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
</div>
))}
</div>
{sentences.map(({id, solution}, index) => (
<div key={`solution_${index}`} className="absolute">
<LineTo
className="rounded-full"
from={id}
to={solution}
borderColor={sentences.find((x) => x.id === id)!.color}
borderWidth={5}
/>
</div>
))}
</div>
</div>
);
}