From eb38464aca6d71bc28e27da24822fd074bc130ba Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 27 Aug 2024 11:02:39 +0100 Subject: [PATCH] ENCOA-112: Improve Answer Display --- src/components/Solutions/MultipleChoice.tsx | 80 ++++++++++++--------- 1 file changed, 47 insertions(+), 33 deletions(-) diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx index 6f29e9ab..8132c0ca 100644 --- a/src/components/Solutions/MultipleChoice.tsx +++ b/src/components/Solutions/MultipleChoice.tsx @@ -1,12 +1,12 @@ /* eslint-disable @next/next/no-img-element */ -import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam"; +import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam"; import useExamStore from "@/stores/examStore"; import clsx from "clsx"; -import { useEffect, useState } from "react"; +import {useEffect, useState} from "react"; import reactStringReplace from "react-string-replace"; -import { CommonProps } from "."; +import {CommonProps} from "."; import Button from "../Low/Button"; -import { v4 } from "uuid"; +import {v4} from "uuid"; function Question({ id, @@ -15,12 +15,12 @@ function Question({ solution, options, userSolution, -}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) { - const { userSolutions } = useExamStore((state) => state); +}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) { + const {userSolutions} = useExamStore((state) => state); 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({ ) : ( <> - {id} - {renderPrompt(prompt).filter((x) => x?.toString() !== "")} + {id} -{" "} + + {renderPrompt(prompt).filter((x) => x?.toString() !== "")}{" "} + )} @@ -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), )}> - {option?.id} + + {option?.id} + {"src" in option && {`Option} ))} @@ -72,7 +77,10 @@ function Question({ options.map((option) => (
+ className={clsx( + "flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none", + optionColor(option!.id), + )}> {option?.id}. {option?.text}
@@ -82,32 +90,30 @@ function Question({ ); } -export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack }: MultipleChoiceExercise & CommonProps) { - const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); +export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) { + const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); const stats = useExamStore((state) => state.userSolutions); const calculateScore = () => { const total = questions.length; const questionShuffleMap = stats.find((x) => x.exercise == id)?.shuffleMaps; - const correct = userSolutions.filter( - (x) => { - if (questionShuffleMap) { - 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] - } else { - return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false - } - }, - ).length; + const correct = userSolutions.filter((x) => { + if (questionShuffleMap) { + 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]; + } else { + return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false; + } + }).length; const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length; - return { total, correct, missing }; + return {total, correct, missing}; }; const next = () => { if (questionIndex === questions.length - 1) { - onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type }); + onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type}); } else { setQuestionIndex(questionIndex + 1); } @@ -115,7 +121,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti const back = () => { if (questionIndex === 0) { - onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type }); + onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type}); } else { setQuestionIndex(questionIndex - 1); } @@ -150,11 +156,19 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
-