Quiz App

A Quiz App has a clear flow: the user starts on an intro screen, questions load, the quiz becomes active, the user answers questions, the timer may expire, and the final results screen appears. A common mistake is representing this flow with several unrelated boolean values such as isLoading, isStarted, isFinished, hasError, and showResults. At first this feels easy, but the app can quickly enter impossible states.

For example, the app may accidentally be both “loading” and “finished,” or show the result screen while the timer is still running. These bugs happen because the UI flow is not modeled as one controlled state. A quiz is better handled as a small state machine, even if you do not use a formal state-machine library. One status value should describe the current phase of the app.

This is especially important in an advanced React and TypeScript version. TypeScript can help you restrict the app to valid statuses only. When the status is loading, show the loader. When the status is active, show the question screen and timer. When the status is completed, show the results screen. The UI becomes easier to reason about because one state controls what the user can see and do.

Problematic approach:

          const [isLoading, setIsLoading] = useState(false);
          const [isStarted, setIsStarted] = useState(false);
          const [isFinished, setIsFinished] = useState(false);
          const [hasError, setHasError] = useState(false);
          const [showResults, setShowResults] = useState(false);

These booleans can conflict with each other. The component has no single source of truth for the quiz stage.

Better quiz status model:

          type QuizStatus =
            | "idle"
            | "loading"
            | "ready"
            | "active"
            | "completed"
            | "error";

          type QuizState = {
            status: QuizStatus;
            questions: QuizQuestion[];
            currentQuestionIndex: number;
            selectedAnswerId: string | null;
            submittedAnswers: SubmittedAnswer[];
            secondsRemaining: number;
            errorMessage: string | null;
          };

Reducer-driven transitions:

          type QuizAction =
            | { type: "questions/loading" }
            | { type: "questions/loaded"; payload: QuizQuestion[] }
            | { type: "questions/failed"; payload: string }
            | { type: "quiz/started" }
            | { type: "answer/selected"; payload: string }
            | { type: "answer/submitted" }
            | { type: "quiz/completed" }
            | { type: "quiz/restarted" };

          function quizReducer(state: QuizState, action: QuizAction): QuizState {
            switch (action.type) {
              case "questions/loading":
                return {
                  ...state,
                  status: "loading",
                  errorMessage: null
                };

              case "questions/loaded":
                return {
                  ...state,
                  status: "ready",
                  questions: action.payload
                };

              case "questions/failed":
                return {
                  ...state,
                  status: "error",
                  errorMessage: action.payload
                };

              case "quiz/started":
                return {
                  ...state,
                  status: "active",
                  currentQuestionIndex: 0,
                  selectedAnswerId: null
                };

              default:
                return state;
            }
          }

Pay attention to: Do not let the quiz flow depend on many independent booleans. Use one status value and clear transitions so the app can only be in valid stages.

Quiz APIs often return data in a shape that is not ideal for your UI. The correct answer may be separate from incorrect answers. Answer text may contain encoded HTML entities. Some questions may be missing fields. The order of answers may be predictable unless you shuffle them. A common mistake is passing raw API objects directly into React components and forcing the UI to understand the API format.

A better approach is to transform external data once, right after fetching it. Your app should work with its own internal QuizQuestion type. This internal type should contain a stable question ID, readable question text, answer options, the correct answer ID, and optional points. After that, components do not need to care where the data came from.

This transformation step is where you can decode text, validate required fields, combine correct and incorrect answers, shuffle answer options, and reject malformed questions. It makes the rest of the quiz safer and cleaner.

Problematic approach:

          function Question({ question }) {
            return (
              <section>
                <h2>{question.question}</h2>

                {[question.correct_answer, ...question.incorrect_answers].map((answer) => (
                  <button key={answer}>{answer}</button>
                ))}
              </section>
            );
          }

This component depends on the external API shape. It also uses answer text as the key, which can break if two answer strings are identical.

Better internal model:

          type ApiQuestion = {
            question: string;
            correct_answer: string;
            incorrect_answers: string[];
          };

          type AnswerOption = {
            id: string;
            label: string;
          };

          type QuizQuestion = {
            id: string;
            text: string;
            options: AnswerOption[];
            correctOptionId: string;
            points: number;
          };

Transforming API data:

          function createQuizQuestion(apiQuestion: ApiQuestion, index: number): QuizQuestion {
            const correctOptionId = crypto.randomUUID();

            const correctOption: AnswerOption = {
              id: correctOptionId,
              label: decodeHtml(apiQuestion.correct_answer)
            };

            const incorrectOptions = apiQuestion.incorrect_answers.map((answer) => {
              return {
                id: crypto.randomUUID(),
                label: decodeHtml(answer)
              };
            });

            return {
              id: `question-${index}`,
              text: decodeHtml(apiQuestion.question),
              options: shuffleOptions([correctOption, ...incorrectOptions]),
              correctOptionId,
              points: 10
            };
          }

Clean component rendering:

          function QuestionCard({ question }: { question: QuizQuestion }) {
            return (
              <section className="question-card" aria-labelledby={question.id}>
                <h2 id={question.id}>{question.text}</h2>

                <div className="answer-list">
                  {question.options.map((option) => (
                    <button key={option.id} type="button">
                      {option.label}
                    </button>
                  ))}
                </div>
              </section>
            );
          }

Pay attention to: External API data should not control your component architecture. Normalize, validate, decode, and shuffle questions before rendering them.

Score tracking is one of the easiest places to create hidden bugs. A beginner implementation often increases the score immediately when the user clicks a correct answer. That works only if the user can click once and never change anything. In a real quiz flow, the user may select an answer, change selection before submitting, skip a question, go back, or accidentally double-click.

A more reliable approach is to store answer records and calculate the score from those records. Each submitted answer should include the question ID, selected option ID, correct option ID, points, and whether the answer was correct. The final score can then be derived at the end. This prevents duplicate scoring and makes the results screen much more useful because you already have all the data needed for review.

Problematic approach:

          function handleAnswerClick(optionId: string) {
            setSelectedAnswerId(optionId);

            if (optionId === currentQuestion.correctOptionId) {
              setScore(score + currentQuestion.points);
            }
          }

This can add points multiple times if the user clicks the correct answer more than once. It also mixes temporary selection with final scoring.

Better submitted answer model:

          type SubmittedAnswer = {
            questionId: string;
            selectedOptionId: string | null;
            correctOptionId: string;
            isCorrect: boolean;
            earnedPoints: number;
            submittedAt: string;
          };

          function createSubmittedAnswer(params: {
            question: QuizQuestion;
            selectedOptionId: string | null;
          }): SubmittedAnswer {
            const isCorrect =
              params.selectedOptionId === params.question.correctOptionId;

            return {
              questionId: params.question.id,
              selectedOptionId: params.selectedOptionId,
              correctOptionId: params.question.correctOptionId,
              isCorrect,
              earnedPoints: isCorrect ? params.question.points : 0,
              submittedAt: new Date().toISOString()
            };
          }

Deriving the final result:

          type QuizResult = {
            totalQuestions: number;
            correctAnswers: number;
            incorrectAnswers: number;
            skippedQuestions: number;
            totalPoints: number;
            maxPoints: number;
            percentage: number;
          };

          function calculateQuizResult(
            questions: QuizQuestion[],
            answers: SubmittedAnswer[]
          ): QuizResult {
            const totalPoints = answers.reduce((sum, answer) => {
              return sum + answer.earnedPoints;
            }, 0);

            const maxPoints = questions.reduce((sum, question) => {
              return sum + question.points;
            }, 0);

            const correctAnswers = answers.filter((answer) => {
              return answer.isCorrect;
            }).length;

            const skippedQuestions = answers.filter((answer) => {
              return answer.selectedOptionId === null;
            }).length;

            return {
              totalQuestions: questions.length,
              correctAnswers,
              incorrectAnswers: questions.length - correctAnswers - skippedQuestions,
              skippedQuestions,
              totalPoints,
              maxPoints,
              percentage: maxPoints === 0 ? 0 : Math.round((totalPoints / maxPoints) * 100)
            };
          }

Pay attention to: Do not manually update score in several places. Store submitted answers and derive score, accuracy, skipped questions, and result details from that source of truth.

Timer logic makes a quiz feel exciting, but it can also create difficult bugs. A common mistake is starting an interval inside useEffect without clearing it correctly. If the quiz restarts, moves between questions, or finishes, multiple intervals may continue running at the same time. The timer may count down twice as fast, continue after the results screen, or submit the quiz more than once.

You should decide whether the timer belongs to the whole quiz or to each question. A full-quiz timer counts down once from the beginning until completion. A per-question timer resets for every question. These are different behaviors, so they should be modeled intentionally. In both cases, the interval must be cleared when the timer is no longer active.

Problematic approach:

          useEffect(() => {
            setInterval(() => {
              setSecondsRemaining(secondsRemaining - 1);
            }, 1000);
          }, [secondsRemaining]);

This creates a new interval every time secondsRemaining changes. It also captures stale state and does not clean up the old interval.

Better timer reducer action:

          type QuizAction =
            | { type: "timer/ticked" }
            | { type: "quiz/completed" };

          function quizReducer(state: QuizState, action: QuizAction): QuizState {
            switch (action.type) {
              case "timer/ticked": {
                if (state.secondsRemaining <= 1) {
                  return {
                    ...state,
                    secondsRemaining: 0,
                    status: "completed"
                  };
                }

                return {
                  ...state,
                  secondsRemaining: state.secondsRemaining - 1
                };
              }

              default:
                return state;
            }
          }

Safe interval setup:

          useEffect(() => {
            if (quizState.status !== "active") {
              return;
            }

            const intervalId = window.setInterval(() => {
              dispatch({ type: "timer/ticked" });
            }, 1000);

            return () => {
              window.clearInterval(intervalId);
            };
          }, [quizState.status]);

Timer display:

          function Timer({ secondsRemaining }: { secondsRemaining: number }) {
            const minutes = Math.floor(secondsRemaining / 60);
            const seconds = secondsRemaining % 60;

            return (
              <p aria-live="polite">
                Time left: {minutes}:{String(seconds).padStart(2, "0")}
              </p>
            );
           }

Pay attention to: Timer effects must be carefully cleaned up. Start the interval only during the active quiz stage, dispatch timer actions, and clear the interval when the quiz ends or resets.

A quiz app needs clear answer rules. Can the user skip a question? Can they go back? Can they change an answer after submitting? Can they click “Next” without selecting anything? A common mistake is not deciding these rules, which leads to inconsistent behavior. Sometimes the app accepts empty answers, sometimes it counts them as wrong, and sometimes it crashes because the selected answer is missing.

The UI should make the rules obvious. If an answer is required, disable the next button until an option is selected. If skipping is allowed, provide a separate “Skip” action and record that question as skipped. If answer feedback is shown after selection, lock the options before moving to the next question. These decisions should be reflected in state, not just in button styling.

Problematic approach:

          function NextButton() {
            return (
              <button onClick={goToNextQuestion}>
                Next
              </button>
            );
          }

This allows the user to move forward even if no answer has been selected. The result calculation then has to guess what happened.

Better answer state:

          type QuestionInteractionState = {
            selectedOptionId: string | null;
            isAnswerSubmitted: boolean;
          };

          function canSubmitAnswer(state: QuestionInteractionState): boolean {
            return Boolean(state.selectedOptionId) && !state.isAnswerSubmitted;
          }

          function canGoNext(state: QuestionInteractionState): boolean {
            return state.isAnswerSubmitted;
          }

Controlled option buttons:

          function AnswerOptions({
            question,
            selectedOptionId,
            isAnswerSubmitted,
            onSelect
          }: AnswerOptionsProps) {
            return (
              <div className="answer-options">
                {question.options.map((option) => (
                  <button
                    key={option.id}
                    type="button"
                    disabled={isAnswerSubmitted}
                    aria-pressed={selectedOptionId === option.id}
                    onClick={() => onSelect(option.id)}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
            );
          }

Submit and next actions:

          <button
            type="button"
            onClick={submitAnswer}
            disabled={!canSubmitAnswer(questionState)}
          >
            Submit answer
          </button>

          <button
            type="button"
            onClick={goToNextQuestion}
            disabled={!canGoNext(questionState)}
          >
            Next question
          </button>

Pay attention to: Decide the answer rules before building the UI. Required answers, skipped answers, locked feedback, and navigation should all be handled explicitly.

Many quiz apps end with a single number: “You scored 70%.” That is not wrong, but it misses a big opportunity. A results screen should help users understand their performance. It can show correct answers, incorrect answers, skipped questions, percentage, total points, high score, and a review of each question. Without this breakdown, the quiz feels more like a toy than a complete learning or assessment tool.

A useful results screen depends on the data structure you created earlier. If you only stored a score number, you cannot show which questions were missed. If you stored submitted answers, you can show the selected answer, the correct answer, and whether the user skipped the question. This is why score should be derived from answer records rather than updated manually.

Problematic result:

          function ResultsScreen({ score }: { score: number }) {
            return (
              <section>
                <h2>Finished!</h2>
                <p>Your score is {score}.</p>
                <button>Restart</button>
              </section>
            );
          }

This gives almost no insight. The user cannot see what went well, what went wrong, or what to review.

Better result summary:

          function ResultsScreen({
            result,
            answers,
            questions,
            onRestart
          }: ResultsScreenProps) {
            return (
              <section className="results-screen">
                <h2>Quiz completed</h2>

                <div className="results-summary">
                  <p>Score: {result.totalPoints} / {result.maxPoints}</p>
                  <p>Accuracy: {result.percentage}%</p>
                  <p>Correct: {result.correctAnswers}</p>
                  <p>Incorrect: {result.incorrectAnswers}</p>
                  <p>Skipped: {result.skippedQuestions}</p>
                </div>

                <QuestionReviewList
                  questions={questions}
                  answers={answers}
                />

                <button type="button" onClick={onRestart}>
                  Restart quiz
                </button>
              </section>
            );
          }

High score persistence:

          function updateHighScore(score: number): number {
            const savedHighScore = Number(localStorage.getItem("quiz-high-score") || 0);
            const nextHighScore = Math.max(savedHighScore, score);

            localStorage.setItem("quiz-high-score", String(nextHighScore));

            return nextHighScore;
          }

Pay attention to: A strong results screen should explain the score. Show answer breakdown, skipped questions, performance percentage, high score, and a clean restart flow.