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

ENCOA-112: Improve Answer Display

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-08-27 11:02:39 +01:00
parent cd85c71aec
commit eb38464aca
1 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Solutions/MultipleChoice.tsx
View File

@@ -20,7 +20,7 @@ function Question({
const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
if (foundMap) return foundMap;
return userSolution.shuffleMaps?.find(map => map.questionID === id) || null;
return userSolution.shuffleMaps?.find((map) => map.questionID === id) || null;
}, null as ShuffleMap | null);
const newSolution = questionShuffleMap ? questionShuffleMap?.map[solution] : solution;
@@ -34,14 +34,14 @@ function Question({
const optionColor = (option: string) => {
if (option === newSolution && !userSolution) {
return "!border-mti-gray-davy !text-mti-gray-davy";
return "!bg-mti-gray-davy !text-white";
}
if (option === newSolution) {
return "!border-mti-purple-light !text-mti-purple-light";
return "!bg-mti-purple-light !text-white";
}
return userSolution === option ? "!border-mti-rose-light !text-mti-rose-light" : "";
return userSolution === option ? "!bg-mti-rose-light !text-white" : "";
};
return (
@@ -51,7 +51,10 @@ function Question({
) : (
<span className="text-lg" key={v4()}>
<>
{id} - <span className="text-lg" key={v4()}>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
{id} -{" "}
<span className="text-lg" key={v4()}>
{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}{" "}
</span>
</>
</span>
)}
@@ -64,7 +67,9 @@ function Question({
"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
optionColor(option!.id),
)}>
<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>{option?.id}</span>
<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>
{option?.id}
</span>
{"src" in option && <img src={option?.src!} alt={`Option ${option?.id}`} />}
</div>
))}
@@ -72,7 +77,10 @@ function Question({
options.map((option) => (
<div
key={option?.id}
className={clsx("flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none", optionColor(option!.id))}>
className={clsx(
"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
optionColor(option!.id),
)}>
<span className="font-semibold">{option?.id}.</span>
<span>{option?.text}</span>
</div>
@@ -90,17 +98,15 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
const calculateScore = () => {
const total = questions.length;
const questionShuffleMap = stats.find((x) => x.exercise == id)?.shuffleMaps;
const correct = userSolutions.filter(
(x) => {
const correct = userSolutions.filter((x) => {
if (questionShuffleMap) {
const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question)
const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question);
const originalSol = questions.find((y) => y.id.toString() === x.question.toString())?.solution!;
return x.option == shuffleMap?.map[originalSol]
return x.option == shuffleMap?.map[originalSol];
} else {
return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false
return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false;
}
},
).length;
}).length;
const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
return {total, correct, missing};
};
@@ -150,11 +156,19 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
</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={back} className="max-w-[200px] w-full"
<Button
color="purple"
variant="outline"
onClick={back}
className="max-w-[200px] w-full"
disabled={
exam && typeof partIndex !== "undefined" && exam.module === "level" &&
typeof exam.parts[0].intro === "string" && questionIndex === 0 && partIndex === 0}
>
exam &&
typeof partIndex !== "undefined" &&
exam.module === "level" &&
typeof exam.parts[0].intro === "string" &&
questionIndex === 0 &&
partIndex === 0
}>
Back
</Button>