Add summary list to QuizRunner component
This commit is contained in:
@@ -518,6 +518,11 @@ export default function QuizRunner({ defaultMode = 'all', defaultEntryId, autoSt
|
|||||||
const correctCount = answered.filter((h) => h.correct).length;
|
const correctCount = answered.filter((h) => h.correct).length;
|
||||||
const skippedCount = answered.filter((h) => h.skipped).length;
|
const skippedCount = answered.filter((h) => h.skipped).length;
|
||||||
const wrongCount = Math.max(0, answered.length - correctCount - skippedCount);
|
const wrongCount = Math.max(0, answered.length - correctCount - skippedCount);
|
||||||
|
const summaryItems = questions.map((q, idx) => {
|
||||||
|
const h = history[idx];
|
||||||
|
const statusTag = h?.skipped ? 'skipped' : h?.correct ? 'correct' : 'wrong';
|
||||||
|
return { question: q, history: h, statusTag };
|
||||||
|
});
|
||||||
return (
|
return (
|
||||||
<div className="quiz-finished">
|
<div className="quiz-finished">
|
||||||
<h2>Nice work!</h2>
|
<h2>Nice work!</h2>
|
||||||
@@ -549,6 +554,31 @@ export default function QuizRunner({ defaultMode = 'all', defaultEntryId, autoSt
|
|||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="summary-list">
|
||||||
|
{summaryItems.map(({ question, history: h, statusTag }, idx) => {
|
||||||
|
const correctText = deriveCorrectText(question, h?.response);
|
||||||
|
const userText = h ? formatUserAnswer(question, h.response) : 'No answer';
|
||||||
|
const entryHref = `/entry/${encodeURIComponent(question.entryId)}`;
|
||||||
|
return (
|
||||||
|
<div key={question.id || idx} className={`summary-item ${statusTag}`}>
|
||||||
|
<div className="summary-top">
|
||||||
|
<div className="summary-question">
|
||||||
|
{idx + 1}. {question.prompt_en || 'Question'}
|
||||||
|
</div>
|
||||||
|
{isRandomMode && (
|
||||||
|
<Link className="entry-link" to={entryHref}>
|
||||||
|
Learn page »
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="summary-answers">
|
||||||
|
<div className={`pill ${statusTag}`}>You: {userText}</div>
|
||||||
|
<div className="pill">Answer: {correctText || '—'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user