MSM8994의 화룡점정 블로그
[JS] 구구단 퀴즈 (Form 사용) 본문
문제 출제를 누르면 구구단에 해당하는 두 수가 나오고 입력칸에 수를 입력한 뒤 정답 확인을 누르면 정오를 확인할 수 있는 퀴즈를 만들겠습니다.
먼저 폼을 구성합니다. 문제가 표시될 입력칸을 읽기 전용으로, 문제 출제에서 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>'코딩' 카테고리의 다른 글
| [JSP] 1부터 N까지의 자연수, 홀수, 짝수 합 구하기 (0) | 2018.07.30 |
|---|---|
| [JS] Math.random() 을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기 (3) | 2018.07.27 |
| [JS] 사칙연산 계산 (Form, 함수 사용) (0) | 2018.07.25 |
| [JAVA] Math.random()을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기 (0) | 2018.07.24 |
| [JAVA] Calendar 객체와 SimpleDateFormat으로 얻은 날짜 문자열을 비교하기 (0) | 2018.07.23 |
