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

Code before:
                  <span>|</span>
                  <div>
                    {t('learn.exam.questions', {
                      n: currentQuestionIndex + 1,
                      t: generatedExamQuestions.length
                    })}
                  </div>
                </div>
                <hr />
                <Spacer size='medium' />

                <div className='exam-questions'>
                  <PrismFormatted
                    text={convertMd(
                      generatedExamQuestions[currentQuestionIndex].question
                    )}
                  />

                  <Spacer size='large' />
                  <div className='exam-answers'>
                    {generatedExamQuestions[currentQuestionIndex].answers.map(
                      (item, index) => (
                        <label
                          className='exam-answer-label'
                          data-playwright-test-label={
                            'exam-answer-label-' + String(index)
                          }
                          key={item.id}
                        >
                          <input
                            aria-label={t('aria.answer')}
                            checked={
                              userExamQuestions[currentQuestionIndex].answer
                                .id === item.id
                            }
                            className='exam-answer-input-hidden'
                            name={item.id}
                            onChange={() =>
                              this.selectAnswer(
                                currentQuestionIndex,
                                item.id,
                                item.answer
                              )
                            }
                            type='radio'
                            value={item.id}
                          />{' '}
                          <span className='exam-answer-input-visible'>
                            {userExamQuestions[currentQuestionIndex].answer
                              .id === item.id ? (
                              <span className='exam-answer-input-selected' />

Review comment (suggestion):
Another way to construct this string to to use template literal:

```suggestion
                            `exam-answer-label-${index}`
```

Code after:
                  <span>|</span>
                  <div>
                    {t('learn.exam.questions', {
                      n: currentQuestionIndex + 1,
                      t: generatedExamQuestions.length
                    })}
                  </div>
                </div>
                <hr />
                <Spacer size='medium' />

                <div className='exam-questions'>
                  <PrismFormatted
                    text={convertMd(
                      generatedExamQuestions[currentQuestionIndex].question
                    )}
                  />

                  <Spacer size='large' />
                  <div className='exam-answers'>
                    {generatedExamQuestions[currentQuestionIndex].answers.map(
                      ({ answer, id }) => (
                        <label className='exam-answer-label' key={id}>
                          <input
                            aria-label={t('aria.answer')}
                            checked={
                              userExamQuestions[currentQuestionIndex].answer
                                .id === id
                            }
                            className='sr-only'
                            name={id}
                            onChange={() =>
                              this.selectAnswer(
                                currentQuestionIndex,
                                id,
                                answer
                              )
                            }
                            type='radio'
                            value={id}
                          />{' '}
                          <span className='exam-answer-input-visible'>
                            {userExamQuestions[currentQuestionIndex].answer
                              .id === id ? (
                              <span className='exam-answer-input-selected' />
                            ) : null}
                          </span>
                          <PrismFormatted text={convertMd(answer)} />
                        </label>
                      )
                    )}