HTML 코드에서 JavaScript로 질문과 답변이 있는 테스트 구현하기

이번 강의와 이후 몇 개의 강의에서 우리는 질문과 답변이 있는 테스트를 만드는 데 집중할 것입니다. 가장 간단한 버전부터 시작해서 점점 복잡하게 만들어 나가겠습니다.

우선, 각 질문에 대해 단 하나의 답변만 가능한 질문 세트를 만들어 보겠습니다. 사용자가 질문 아래의 입력란에 답변을 입력하도록 합시다.

위에서 설명한 내용을 HTML 코드로 설명하겠습니다:

<div id="test">
	<div>
		<p>질문 1?</p>
		<input>
	</div>
	<div>
		<p>질문 2?</p>
		<input>
	</div>
	<div>
		<p>질문 3?</p>
		<input>
	</div>
</div>

보시다시피, 질문과 답변 입력란이 있습니다. 이제 정답을 어디에 저장할지 생각해 봅시다.

가장 간단한 방법은 답변을 입력란의 HTML 코드에, data- 속성에 저장하는 것입니다:

<div id="test">
	<div>
		<p>질문 1?</p>
		<input data-right="답변 1">
	</div>
	<div>
		<p>질문 2?</p>
		<input data-right="답변 2">
	</div>
	<div>
		<p>질문 3?</p>
		<input data-right="답변 3">
	</div>
</div>

다음으로 고려해야 할 점은 언제 답변의 정확성을 확인할 것인가입니다. 여기에는 두 가지 옵션이 제안될 수 있습니다: 각 입력란에 답변이 입력되는 즉시 해당 답변의 정확성을 확인하도록 하거나, 버튼을 만들어 클릭했을 때 모든 질문의 답변을 한꺼번에 확인하도록 할 수 있습니다.

어떤 옵션을 선택하든, 답변이 정확하면 입력란의 테두리를 녹색으로, 틀리면 빨간색으로 칠해봅시다. 이를 위해 해당 CSS 클래스를 만들겠습니다:

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

입력란에 답변을 입력하고 Enter 키를 눌러 완료할 수 있도록 하세요. 이 경우 입력란이 즉시 답변의 정확성을 확인해야 합니다.

버튼을 눌렀을 때 답변 확인이 실행되도록 코드를 수정하세요.