JavaScript로 HTML 코드에 있는 객관식 테스트 구현
이전 강의들에서는 테스트의 답변을 입력란(input)에 직접 입력해야 했습니다. 하지만 실제로는 제시된 여러 옵션 중 하나를 선택하는 형태의 테스트도 매우 흔합니다. 이런 테스트를 만드는 방법을 배워봅시다.
다시 한번 질문과 답변이 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 속성으로 표시되어 있습니다.
질문의 답변 중 하나를 선택하면 그 답변이 즉시 정답인지 확인되도록 만드세요.
답변 확인이 버튼을 눌렀을 때 수행되도록 코드를 수정하세요.
