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

style: Align quiz results options UI with quiz viewer options UI
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
Details

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

45
src/components/quizzes/QuizResults.tsx
View file

@ -118,17 +118,48 @@ export function QuizResults({ quiz, attempt, onRetake, onClose }: QuizResultsPro
<div className="space-y-2 mb-6">
{q.options.map((opt: any) => {
const isSelected = sels.includes(opt.id);
let style = "text-text-body";
if (opt.isCorrect) style = "text-success font-medium bg-success-bg/50 border-success/30";
else if (isSelected && !opt.isCorrect) style = "text-error font-medium line-through bg-error-bg/50 border-error/30";
else style = "border-transparent";
let stateClass = "cursor-default opacity-80";
let icon = null;
if (opt.isCorrect) {
stateClass = "border-success bg-success-bg/30 text-text-heading";
icon = (
<svg className="w-5 h-5 text-success flex-shrink-0" 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 (isSelected && !opt.isCorrect) {
stateClass = "border-error bg-error-bg/30 text-text-heading";
icon = (
<svg className="w-5 h-5 text-error flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
</svg>
);
} else {
stateClass = "border-border-light bg-bg-surface-alt/50";
}
return (
<div key={opt.id} className={`flex items-start gap-3 p-3 rounded-lg border ${style}`}>
<div key={opt.id} className={`flex items-start gap-4 p-4 rounded-xl border-2 transition-all duration-200 ${stateClass}`}>
<div className="pt-0.5">
{opt.isCorrect ? "✓" : (isSelected ? "✗" : "•")}
<div className={`w-5 h-5 rounded ${q.type === 'SATA' ? 'border' : 'border rounded-full'} flex items-center justify-center transition-colors ${
isSelected ? 'border-primary bg-primary text-white' : 'border-border-light bg-bg-surface'
}`}>
{isSelected && (
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
)}
</div>
<div>{opt.text}</div>
</div>
<div className="flex-1 text-text-body font-medium leading-snug">
{opt.text}
</div>
{icon && (
<div className="pt-0.5 pl-2">
{icon}
</div>
)}
</div>
);
})}