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

5
src/pages/(exam)/ExamPage.tsx
View File

@@ -380,7 +380,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
setQuestionIndex(0); setQuestionIndex(0);
}; };
const aggregateScoresByModule = (): { const aggregateScoresByModule = (isPractice?: boolean): {
module: Module; module: Module;
total: number; total: number;
missing: number; missing: number;
@@ -416,7 +416,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
}, },
}; };
userSolutions.filter(x => !x.isPractice).forEach((x) => { userSolutions.filter(x => isPractice ? x.isPractice : !x.isPractice).forEach((x) => {
const examModule = const examModule =
x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined); x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
@@ -483,6 +483,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
setExam(exams[0]); setExam(exams[0]);
}} }}
scores={aggregateScoresByModule()} scores={aggregateScoresByModule()}
practiceScores={aggregateScoresByModule(true)}
/> />
); );
} }