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

style: Change rationale badge to a full-width banner above the rationale box
All checks were successful
Automated Container Build / build-and-push (push) Successful in 54s
Details

Browse source
This commit is contained in:
Elijah 2026-06-27 20:31:38 -07:00
parent fc433edf4f
commit 89eb2c6ad9
1 changed files with 33 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -366,30 +366,49 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
};
const qScore = scoreQuestion(formattedQ, currentSelections);
let badgeText = "Incorrect";
let badgeColor = "bg-error text-white";
let bannerBg = "bg-error/10 border-error/20 text-error";
let icon = (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
</svg>
);
if (qScore === 1) {
badgeText = "Correct";
badgeColor = "bg-success text-white";
bannerBg = "bg-success/10 border-success/20 text-success";
icon = (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
</svg>
);
} else if (qScore > 0) {
badgeText = "Partially Correct";
badgeColor = "bg-amber-500 text-white";
bannerBg = "bg-amber-500/10 border-amber-500/20 text-amber-600";
icon = (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
);
}
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 className="mt-8 flex flex-col gap-4 animate-slide-up">
{/* Result Banner */}
<div className={`flex items-center gap-3 px-5 py-4 rounded-xl border ${bannerBg} font-bold text-lg tracking-wide shadow-sm`}>
{icon}
{badgeText}
</div>
{/* Rationale Box */}
<div className="bg-bg-callout border border-primary/20 rounded-xl p-5 shadow-sm">
<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">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{currentQ.rationale}
</ReactMarkdown>
</div>
</div>
<div className="markdown-content text-sm text-text-body">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{currentQ.rationale}
</ReactMarkdown>
</div>
</div>
);
})()}
</div>