Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/exam/show.tsx (TypeScript)

Code before:
      data: {
        challengeNode: {
          challenge: { prerequisites }
        }
      },
      completedChallenges,
      createFlashMessage
    } = this.props;

    // check that they have all the prerequisites before they can start
    let qualifiedForExam = true;
    let incompleteChallenge = '';

    for (let i = 0; i < prerequisites.length; i++) {
      const prerequisiteChallenge = prerequisites[i];
      const isPrerequisiteCompleted = completedChallenges.find(
        (completedChallenge: CompletedChallenge) =>
          prerequisiteChallenge.id === completedChallenge.id
      );

      if (!isPrerequisiteCompleted) {
        qualifiedForExam = false;
        incompleteChallenge = prerequisiteChallenge.title;
        break;
      }
    }

    if (!qualifiedForExam) {
      createFlashMessage({
        type: 'danger',
        message: FlashMessages.MissingPrerequisite,
        variables: { challengeTitle: incompleteChallenge }
      });
    } else {
      // qualified to take the exam
      // TODO: show loader
      // TODO: fetch exam from server/database
      const newExam = this.state.generatedExam.map(q => {
        return { question: q.question, answer: null };
      });

      this.timerInterval = setInterval(() => {
        this.setState({
          examTimeInSeconds: this.state.examTimeInSeconds + 1
        });
      }, 1000);

      this.setState(
        {
          userExam: newExam
        },

Review comment (suggestion):
This works, but don't you want to let people know about all the missing prerequisites? Even if you don't

```suggestion
    const missingPrerequisites = prerequisites.filter(
      prerequisite =>
        !completedChallenges.find(({ id }) => prerequisite.id === id)
    );
    
    const qualifiedForExam = missingPrerequisites.length === 0;
    const incompleteChallenge = missingPrerequisites[0]?.title;
```

does the same job, but is a little clearer imo.

Code after:
    const newExam = this.state.generatedExam.map(q => {
      return { question: q.question, answer: null };
    });

    this.timerInterval = setInterval(() => {
      this.setState(state => ({
        examTimeInSeconds: state.examTimeInSeconds + 1
      }));
    }, 1000);

    this.setState(
      {
        userExam: newExam
      },
      this.props.startExam
    );

    window.addEventListener('beforeunload', this.stopWindowClose);
    window.addEventListener('unload', this.stopWindowClose);
    window.addEventListener('popstate', this.stopBrowserBack);
  };

  selectAnswer = (index: number, option: string): void => {
    const newExam = Array.from(this.state.userExam);
    newExam[index].answer = option;
    this.setState({
      userExam: newExam
    });
  };

  goToPreviousQuestion = () => {
    this.setState({
      currentQuestionIndex: this.state.currentQuestionIndex - 1
    });
  };

  goToNextQuestion = () => {
    this.setState({
      currentQuestionIndex: this.state.currentQuestionIndex + 1
    });
  };

  // TODO: have server check the exam
  createExamResults = () => {
    // TODO: show loader
    const { setExamResults } = this.props;
    const { userExam, examTimeInSeconds } = this.state;

    const results: ExamResultQuestion[] = [];

    userExam.forEach(userQuestion => {