Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: Add Correct/Incorrect badge to rationale
All checks were successful
Automated Container Build / build-and-push (push) Successful in 53s
Details

Browse source
This commit is contained in:
Elijah 2026-06-27 20:28:38 -07:00
parent 64aae611fc
commit fc433edf4f
1 changed files with 29 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/quizzes/QuizViewer.tsx
View file

@ -358,16 +358,40 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
</div>
{/* Rationale shown after submission */}
{isSubmitted && (
<div className="mt-8 bg-bg-callout border border-primary/20 rounded-xl p-5 animate-slide-up">
<h4 className="text-sm font-bold text-text-heading uppercase tracking-wider mb-2">Rationale</h4>
<div className="markdown-content text-sm text-text-body">
{isSubmitted && (() => {
const formattedQ = {
id: currentQ.id,
type: currentQ.type as "MULTIPLE_CHOICE" | "SATA",
options: currentQ.options,
};
const qScore = scoreQuestion(formattedQ, currentSelections);
let badgeText = "Incorrect";
let badgeColor = "bg-error text-white";
if (qScore === 1) {
badgeText = "Correct";
badgeColor = "bg-success text-white";
} else if (qScore > 0) {
badgeText = "Partially Correct";
badgeColor = "bg-amber-500 text-white";
}
return (
<div className="mt-8 bg-bg-callout border border-primary/20 rounded-xl p-5 animate-slide-up">
<div className="flex items-center gap-3 mb-3">
<h4 className="text-sm font-bold text-text-heading uppercase tracking-wider">Rationale</h4>
<span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider ${badgeColor}`}>
{badgeText}
</span>
</div>
<div className="markdown-content text-sm text-text-body">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{currentQ.rationale}
</ReactMarkdown>
</div>
</div>
)}
);
})()}
</div>
{/* Action bar */}