fix: display quiz correct count on demo

freeCodeCamp · Oct 13, 2024 · 785e818 · 785e818
1 parent 1e3d18c
commit 785e818
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/quiz/quiz.stories.tsx b/src/quiz/quiz.stories.tsx
@@ -103,7 +103,11 @@ const QuizWithValidation = () => {
 
 	return (
 		<div>
-			{correctAnswerCount && <p>Correct answers: {correctAnswerCount}</p>}
+			{correctAnswerCount > -1 && (
+				<div aria-live="polite">
+					<p>Correct answers: {correctAnswerCount}</p>
+				</div>
+			)}
 			<Quiz questions={questions} disabled={disabled} />
 			<Spacer size="m" />
 			<Button onClick={handleSubmit}>Submit</Button>

diff --git a/src/quiz/use-quiz.ts b/src/quiz/use-quiz.ts
@@ -20,7 +20,7 @@ export const useQuiz = <AnswerT extends number | string>({
 }: Props<AnswerT>) => {
 	const [questions, setQuestions] =
 		useState<Question<AnswerT>[]>(initialQuestions);
-	const [correctAnswerCount, setCorrectAnswerCount] = useState(0);
+	const [correctAnswerCount, setCorrectAnswerCount] = useState(-1);
 
 	const questionsWithChangeHandling = questions.map((question, index) => ({
 		...question,