JavaScript로 HTML 코드에 있는 객관식 테스트 구현

이전 강의들에서는 테스트의 답변을 입력란(input)에 직접 입력해야 했습니다. 하지만 실제로는 제시된 여러 옵션 중 하나를 선택하는 형태의 테스트도 매우 흔합니다. 이런 테스트를 만드는 방법을 배워봅시다.

다시 한번 질문과 답변이 HTML 코드에 저장된 간단한 버전부터 시작한 다음, 점점 더 복잡하게 만들어 보겠습니다.

자, 여기 객관식 테스트가 있습니다:

html<div id="test">
  <div>
    <p>질문 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      옵션 1
    </label>
    <label>
      <input type="radio" name="1">
      옵션 2
    </label>
    <label>
      <input type="radio" name="1">
      옵션 3
    </label>
  </div>
  <div>
    <p>질문 2?</p>
    
    <label>
      <input type="radio" name="2">
      옵션 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      옵션 2
    </label>
    <label>
      <input type="radio" name="2">
      옵션 3
    </label>
  </div>
  <div>
    <p>질문 3?</p>
    
    <label>
      <input type="radio" name="3">
      옵션 1
    </label>
    <label>
      <input type="radio" name="3">
      옵션 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      옵션 3
    </label>
  </div>
</div>

보시다시피, 라디오 버튼을 사용하여 답변 옵션 중 하나를 선택할 수 있습니다. 각 질문에서 정답인 라디오 버튼은 data-right 속성으로 표시되어 있습니다.