feat: allow customizing passing grade

src/quiz/quiz.stories.tsx

@@ -51,6 +51,7 @@ const QuizDefault = () => {
 			correct: "Correct",
 			incorrect: "Incorrect",
 		},
+		passingGrade: 100,
 	});
 
 	return <Quiz questions={questions} />;
@@ -93,6 +94,7 @@ const QuizWithValidation = () => {
 			correct: "Correct",
 			incorrect: "Incorrect",
 		},
+		passingGrade: 100,
 	});
 	const [disabled, setDisabled] = useState(false);
 

src/quiz/quiz.test.tsx

@@ -41,6 +41,7 @@ const ControlledQuiz = ({ disabled, required }: Partial<QuizProps<number>>) => {
 			correct: "Correct",
 			incorrect: "Incorrect",
 		},
+		passingGrade: 80,
 	});
 
 	return <Quiz questions={questions} disabled={disabled} required={required} />;

src/quiz/use-quiz.test.ts

@@ -32,6 +32,7 @@ describe("useQuiz", () => {
 					},
 				],
 				validationMessages,
+				passingGrade: 100,
 			}),
 		);
 
@@ -89,6 +90,7 @@ describe("useQuiz", () => {
 					},
 				],
 				validationMessages,
+				passingGrade: 100,
 			}),
 		);
 
@@ -122,6 +124,7 @@ describe("useQuiz", () => {
 					},
 				],
 				validationMessages,
+				passingGrade: 100,
 			}),
 		);
 
@@ -158,19 +161,26 @@ describe("useQuiz", () => {
 					},
 				],
 				validationMessages,
+				passingGrade: 100,
 			}),
 		);
 
+		expect(result.current.validated).toBe(false);
+		expect(result.current.correctAnswerCount).toBeUndefined();
+		expect(result.current.grade).toBeUndefined();
+
 		act(() => {
 			result.current.validateAnswers();
 		});
 
 		expect(result.current.questions[0].validation?.message).toBe("Correct");
 		expect(result.current.questions[1].validation?.message).toBe("Incorrect");
 		expect(result.current.correctAnswerCount).toBe(1);
+		expect(result.current.grade).toBe(50);
+		expect(result.current.validated).toBe(true);
 	});
 
-	it("should call the `onSuccess` function if all answers are correct", () => {
+	it("should call the `onSuccess` function if the quiz results meet the passing grade", () => {
 		const onSuccess = jest.fn();
 		const onFailure = jest.fn();
 
@@ -201,6 +211,7 @@ describe("useQuiz", () => {
 				validationMessages,
 				onSuccess,
 				onFailure,
+				passingGrade: 100,
 			}),
 		);
 
@@ -212,7 +223,7 @@ describe("useQuiz", () => {
 		expect(onFailure).toHaveBeenCalledTimes(0);
 	});
 
-	it("should call the `onFailure` function if not all answers are correct", () => {
+	it("should call the `onFailure` function if the quiz results don't meet the passing grade", () => {
 		const onSuccess = jest.fn();
 		const onFailure = jest.fn();
 
@@ -243,6 +254,7 @@ describe("useQuiz", () => {
 				validationMessages,
 				onSuccess,
 				onFailure,
+				passingGrade: 100,
 			}),
 		);
 
@@ -253,4 +265,47 @@ describe("useQuiz", () => {
 		expect(onSuccess).toHaveBeenCalledTimes(0);
 		expect(onFailure).toHaveBeenCalledTimes(1);
 	});
+
+	it("should register the passing grade correctly", () => {
+		const onSuccess = jest.fn();
+		const onFailure = jest.fn();
+
+		const { result } = renderHook(() =>
+			useQuiz({
+				initialQuestions: [
+					{
+						question: "Lorem ipsum dolor sit amet",
+						answers: [
+							{ label: "Option 1", value: 1 },
+							{ label: "Option 2", value: 2 },
+							{ label: "Option 3", value: 3 },
+						],
+						selectedAnswer: 1,
+						correctAnswer: 2,
+					},
+					{
+						question: "Consectetur adipiscing elit",
+						answers: [
+							{ label: "Option 1", value: 1 },
+							{ label: "Option 2", value: 2 },
+							{ label: "Option 3", value: 3 },
+						],
+						selectedAnswer: 3,
+						correctAnswer: 3,
+					},
+				],
+				validationMessages,
+				onSuccess,
+				onFailure,
+				passingGrade: 50,
+			}),
+		);
+
+		act(() => {
+			result.current.validateAnswers();
+		});
+
+		expect(onSuccess).toHaveBeenCalledTimes(1);
+		expect(onFailure).toHaveBeenCalledTimes(0);
+	});
 });

src/quiz/use-quiz.ts

@@ -2,25 +2,47 @@ import { useState } from "react";
 
 import { type Question } from "./types";
 
+type InitialQuestion<AnswerT extends number | string> = Omit<
+	Question<AnswerT>,
+	"onChange"
+>;
+
+type ReturnedQuestion<AnswerT extends number | string> = Question<AnswerT> & {
+	onChange: (selectedAnswer: AnswerT) => void;
+};
+
 interface Props<AnswerT extends number | string> {
-	initialQuestions: Question<AnswerT>[];
+	initialQuestions: InitialQuestion<AnswerT>[];
 	validationMessages: {
 		correct: string;
 		incorrect: string;
 	};
+	passingGrade: number;
 	onSuccess?: () => void;
 	onFailure?: () => void;
 }
 
+type ValidationData =
+	| { validated: true; grade: number; correctAnswerCount: number }
+	| { validated: false; grade?: never; correctAnswerCount?: never };
+
+type UseQuizReturnType<AnswerT extends number | string> = ValidationData & {
+	questions: ReturnedQuestion<AnswerT>[];
+	validateAnswers: () => void;
+};
+
 export const useQuiz = <AnswerT extends number | string>({
 	initialQuestions,
 	validationMessages,
 	onSuccess,
 	onFailure,
-}: Props<AnswerT>) => {
+	passingGrade,
+}: Props<AnswerT>): UseQuizReturnType<AnswerT> => {
 	const [questions, setQuestions] =
 		useState<Question<AnswerT>[]>(initialQuestions);
-	const [correctAnswerCount, setCorrectAnswerCount] = useState(0);
+	const [validation, setValidation] = useState<ValidationData>({
+		validated: false,
+	});
 
 	const questionsWithChangeHandling = questions.map((question, index) => ({
 		...question,
@@ -58,9 +80,17 @@ export const useQuiz = <AnswerT extends number | string>({
 				({ validation }) => validation?.state === "correct",
 			).length;
 
-			setCorrectAnswerCount(correctCount);
+			const grade = parseFloat(
+				((correctCount / initialQuestions.length) * 100).toFixed(2),
+			);
+
+			setValidation({
+				validated: true,
+				grade,
+				correctAnswerCount: correctCount,
+			});
 
-			if (correctCount === initialQuestions.length) {
+			if (grade >= passingGrade) {
 				onSuccess && onSuccess();
 			} else {
 				onFailure && onFailure();
@@ -73,6 +103,6 @@ export const useQuiz = <AnswerT extends number | string>({
 	return {
 		questions: questionsWithChangeHandling,
 		validateAnswers,
-		correctAnswerCount,
+		...validation,
 	};
 };