MSM8994의 화룡점정 블로그

[JS] 구구단 퀴즈 (Form 사용) 본문

코딩

[JS] 구구단 퀴즈 (Form 사용)

msm8994 2018. 7. 26. 16:30

문제 출제를 누르면 구구단에 해당하는 두 수가 나오고 입력칸에 수를 입력한 뒤 정답 확인을 누르면 정오를 확인할 수 있는 퀴즈를 만들겠습니다.

먼저 폼을 구성합니다. 문제가 표시될 입력칸을 읽기 전용으로, 문제 출제에서 getQuiz() 함수를, 정답 확인에서 getAnswer() 함수를 호출하도록 했습니다.

스타일이나 폼 입력칸을 참조하는 내용에 관해선 지난 글을 참고해주세요.



<form name="gugudan">
	<input type="button" value="문제 출제" onClick="getQuiz()" />
	<input type="text" name="q1" readonly />
	×
	<input type="text" name="q2" readonly />
	<br /> <!-- 줄바꿈 태그 -->
	<br />
	<input type="text" name="answer" />
	<input type="button" value="정답 확인" onClick="getAnswer()" />			
</form>


getQuiz()메소드를 작성하되 임의값 생성은 이렇게 합니다.

//Math.random()은 0.0 <= 값 < 1.0 이다
gugudan.q1.value = Math.floor(Math.random() * 8) + 2;

JS에서 Math.random()은 0 <= 값 < 1.0 범위의 값을 반환합니다.
여기에 a를 곱하고 수를 b를 더하면 b <= 값 < (a+b)가 되고 Java랑 사용법이 비슷합니다.
Math.random()이 궁금하다면 이 글을 참고해주세요. 단 int로 형변환 하는 대신 소숫점 아래를 버리는 Math.floor(수)를 사용하세요.


Math.round(수)는 반올림, Math.floor(수)는 내림, Math.ceil(수)는 올림입니다.

답을 확인하는 부분은 if로 구성하시면 됩니다.

if(gugudan.answer.value == gugudan.q1.value * gugudan.q2.value){
	// 둘을 곱한 값과 입력값이 맞으면
	alert("맞혔습니다.");
}else{
	// 안 맞는 경우
	alert("틀렸습니다.");
}


문제 출제 후 입력 칸으로 커서를 옮기려면 focus()함수를 입력칸 객체에 사용해줍니다.

// 답 입력칸에 커서를 놓기
gugudan.answer.focus();



정답수와 오답수를 누산하려면 별도 입력칸을 만들어 value에 0을 미리 입력해둡니다.
빈 칸이어도 ++ 연산자는 값을 수로 취급하려 해 정상 작동하지만 보기에 어색하니까요 ^^;

정답수
<input type="text" name="correct" value="0" readonly /> 
오답수
<input type="text" name="incorrect" value="0" readonly /> 


맞히는 경우 정답 수를 증가시킵니다. 오답수도 같은 방식으로 추가할 수 있겠죠?

gugudan.correct.value++;


그런데 정답 확인을 문제 출제 이전에 눌러 공짜로 정답을 얻어걸리는 경우가 생길 것입니다.
그래서 문제 출제 버튼을 누르기 전엔 정답 확인 버튼을 display:none 스타일을 통해 숨깁니다.
코드에서 숨김을 풀어야 하므로 이름도 지정합니다.

<input type="button" value="정답 확인" name="getans" onClick="getAnswer()" style="display:none;" />


그리고 문제 출제를 눌렀을 때 함수 안에서 정답확인 버튼의 숨김을 해제하기 위해 display:inline 속성을 줍니다.

// 정답 확인 버튼 보이게 하기
gugudan.getans.style.display="inline";


그리고 한 칸이라도 입력이 안되어있을 경우엔 문제 출제를 하도록 합니다.

if(gugudan.answer.value.length == 0 || gugudan.q1.value.length == 0 || gugudan.q2.value.length == 0){
	// 입력칸이 하나라도 비어있는 경우 문제 출제 구동
	getQuiz();
	// 더 이상 진행하지 않음
	return;
}


키보드 이벤트를 통해 결과를 낼 수 있도록 합니다. 
입력 칸을 아래와 같이 바꿉니다.

<input type="text" name="answer" onKeyPress="return keyPress(event)" />


그리고 키 입력시의 함수를 만듭니다.

function keyPress(e){
	if (e.which == 13 || e.keyCode == 13) {
		//엔터키 입력의 경우 정답 확인
		getAnswer();
	}
}


그러면 키 입력 시에도 정답 확인이 됩니다.



결과

첫 화면


문제 출제를 누른 경우


값을 입력합니다.


맞힌 경우


틀린 경우



전체 소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>002 구구단 퀴즈</title>
		<style>
			input[type=text]{ /* input 태그 중 type="text"인 것만 선택*/
				
				width: 30px;
				padding: 5px;
				
				background-color: #e7e7e7;
				border: 1px solid silver;
			}
			input[type=button]{
				width: 100px;
				padding: 5px;
				
				background-color: black;
				color: white;
				border: 1px solid silver;
			}
		</style>
		<script>
			function getQuiz(){
				// 새 퀴즈
				
				//Math.random()은 0.0 <= 값 < 1.0 이다
				gugudan.q1.value = Math.floor(Math.random() * 8) + 2;
				gugudan.q2.value = Math.round(Math.random() * 8) + 1;
				
				// 정답 확인 버튼 보이게 하기
				gugudan.getans.style.display="inline";
				
				// 답 입력칸을 비우기
				gugudan.answer.value = "";
				// 답 입력칸에 커서를 놓기
				gugudan.answer.focus();
			}
			function getAnswer(){
				if(gugudan.answer.value.length == 0 || gugudan.q1.value.length == 0 || gugudan.q2.value.length == 0){
					// 입력칸이 하나라도 비어있는 경우 문제 출제 구동
					getQuiz();
					// 더 이상 진행하지 않음
					return ;
				}
			
				// 답 확인
				if(gugudan.answer.value == gugudan.q1.value * gugudan.q2.value){
					// 정답수 1 증가
					gugudan.correct.value++;
					
					// 둘을 곱한 값과 입력값이 맞으면
					alert("맞혔습니다.");
					
					// 새 문제 출제
					getQuiz();
				}else{
					// 오답수 1 증가
					gugudan.incorrect.value++;
					
					// 안 맞는 경우
					alert("틀렸습니다.");
				}
			}
			function keyPress(e){
				if (e.which == 13 || e.keyCode == 13) {
					//엔터키 입력의 경우 정답 확인
					getAnswer();
				}
			}
		</script>
	</head>
	<body>
		<form name="gugudan">
			<input type="button" value="문제 출제" onClick="getQuiz()" />
			<input type="text" name="q1" readonly /> <!-- 읽기 전용을 위해 readonly 설정 -->
			×
			<input type="text" name="q2" readonly />
			<br /> <!-- 줄바꿈 태그 -->
			<br />
			<input type="text" name="answer" onKeyPress="return keyPress(event)" />
			<input type="button" value="정답 확인" name="getans" onClick="getAnswer()" style="display:none;" />
			<br />
			<br />
			정답수
			<input type="text" name="correct" value="0" readonly /> 
			오답수
			<input type="text" name="incorrect" value="0" readonly /> 
		</form>
	</body>
</html>
Comments