Add navigation buttons in QuizRunner component
This commit is contained in:
@@ -490,20 +490,33 @@ export default function QuizRunner({ defaultMode = 'all', defaultEntryId, autoSt
|
|||||||
|
|
||||||
if (status === 'finished') {
|
if (status === 'finished') {
|
||||||
const lastIndex = questions.length ? questions.length - 1 : 0;
|
const lastIndex = questions.length ? questions.length - 1 : 0;
|
||||||
|
const isRandomMode = mode === 'all';
|
||||||
|
const entryLink = !isRandomMode && currentQuestion ? `/entry/${encodeURIComponent(currentQuestion.entryId)}` : null;
|
||||||
return (
|
return (
|
||||||
<div className="quiz-finished">
|
<div className="quiz-finished">
|
||||||
<h2>Nice work!</h2>
|
<h2>Nice work!</h2>
|
||||||
<p className="muted">You scored {score} out of {questions.length}.</p>
|
<p className="muted">You scored {score} out of {questions.length}.</p>
|
||||||
<div className="actions">
|
<div className="actions" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||||
<button className="button button--ghost" onClick={() => {
|
<button
|
||||||
setStatus('running');
|
className="button button--ghost"
|
||||||
setCurrentIndex(lastIndex);
|
onClick={() => {
|
||||||
}}>
|
setStatus('running');
|
||||||
|
setCurrentIndex(lastIndex);
|
||||||
|
}}
|
||||||
|
>
|
||||||
Back
|
Back
|
||||||
</button>
|
</button>
|
||||||
<button className="button" onClick={startQuiz}>
|
<button className="button" onClick={startQuiz}>
|
||||||
Play again
|
Play again
|
||||||
</button>
|
</button>
|
||||||
|
<NavLink className="button button--ghost" to="/">
|
||||||
|
Home
|
||||||
|
</NavLink>
|
||||||
|
{entryLink && (
|
||||||
|
<NavLink className="button button--ghost" to={entryLink}>
|
||||||
|
Back to learn page
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user