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

Updated the Finish screen to also show the practice score

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-11-25 10:32:15 +00:00
parent e5087d4d58
commit 55a03b283f
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/exams/Finish.tsx
View File

@@ -41,6 +41,7 @@ interface Props {
user: User;
modules: Module[];
scores: Score[];
practiceScores: Score[]
information: {
timeSpent?: number;
inactivity?: number;
@@ -52,9 +53,10 @@ interface Props {
destination?: string
}
export default function Finish({ user, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) {
export default function Finish({ user, practiceScores, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
const [selectedPracticeScore, setSelectedPracticeScore] = useState<Score | undefined>(practiceScores.find((x) => x.module === modules[0]));
const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
const aiUsage = Math.round(ai_usage(solutions) * 100);
@@ -231,7 +233,7 @@ export default function Finish({ user, scores, modules, information, solutions,
{!isLoading && !(assignment && !assignment.released) && (
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
<div className="flex gap-9 px-16">
<div className="flex items-center gap-9 px-16">
<div
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
style={
@@ -262,21 +264,32 @@ export default function Finish({ user, scores, modules, information, solutions,
</div>
</div>
<div className="flex gap-2">
<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
<div className="bg-mti-purple-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col">
<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
<span className="text-lg">Correct</span>
<span className="text-lg whitespace-nowrap">Correct (Graded)</span>
</div>
</div>
<div className="flex gap-2">
<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
<div className="bg-mti-rose-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col">
<span className="text-mti-rose-light">
{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
</span>
<span className="text-lg">Wrong</span>
<span className="text-lg whitespace-nowrap">Wrong (Graded)</span>
</div>
</div>
{selectedPracticeScore && (
<div className="flex gap-2">
<div className="bg-mti-green mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col">
<span className="text-mti-green">
{selectedPracticeScore.correct} / {selectedScore.total}
</span>
<span className="text-lg whitespace-nowrap">Practice Questions</span>
</div>
</div>
)}
</div>
) : (
<div className="w-28 h-full" />