안녕하세요 느종입니다.
오늘은 구구단 퀴즈 페이지의 메인 화면을 만들어볼까 합니다. 저번에 만들었던 나라 수도 퀴즈는 input 태그를 활용하였는데요. 이번에는 버튼 형식으로 구성을 하였습니다. 그럼 바로 시작하겠습니다. 함께 공부해요!
메인 화면 페이지
메인 화면 페이지입니다. 퀴즈 영역에서는 구구단이 임의로 주어지고, 그 아래에 0부터 9까지의 버튼을 두어서 사용자가 클릭하여 숫자를 입력할 수 있도록 하였습니다. 입력된 값은 가운데에 출력창에 나타나게 하였습니다. 그리고 사용자가 입력한 답을 확인하고 싶을 때 정답 확인을 누르게 되면 퀴즈 영역에서 정답인지 아닌지를 판별하는 화면이 나오도록 하였습니다. 그 때 정답 확인 버튼은 다음 문제 버튼으로 변경되도록 하였습니다.
quiz-button-group에서는 시작하기 버튼과 출력창(entered-num), 번호 버튼, 정답 확인 버튼이 추가 되었습니다. 하단에는 다시하기 버튼이 있는데 이것은 결과 화면에서 사용할 것이므로 다음 시간에 설명하도록 하겠습니다. 번호 버튼 같은 경우는 html에서 작성하지 않고, 자바스크립트 코드를 이용해서 동적으로 생성하여 사용하셔도 됩니다. 본인 스타일에 맞게 코드를 입력하시면 됩니다.
자바스크립트 코드
2. checkBtn : 정답 확인 버튼
3. count : 퀴즈 번호
4. lifeCount : 기회(목숨) 수
5. start : 구구단의 첫 번째 수
6. end : 구구단의 두 번째 수
7. correct : 위의 두 수를 곱한 수(정답)
8. inputNum : enteredNum에서 출력되는 값
9. chkOrNext : 정답 확인인지 다음 문제인지 체크 하는 변수(초기값은 check)
10. quizSubBtnList = document.querySelectorAll(".quiz-sub-button button") : class가 quiz-sub-button button인 모든 요소에 대한 배열
11. clickQuizBtnFunc() : 번호 버튼 클릭 함수
12. chapter = "quiz" : 시작하기 버튼을 누르고 나면 페이지는 메인으로 바뀌어야 하므로 quiz 변수를 넣어줍니다.
13. life : 기회(목숨) 표시 항목이 보여야 되므로 block으로 표시해줍니다.
14. setQuizFunc() : 퀴즈를 설정하는 함수
15. checkBtn.addEventListener('click', function() { : 정답 확인 버튼을 눌렀을 때 이벤트 리스너
16. enteredNum(출력창)에 아무 값도 없으면 정답을 눌러주세요라는 알림창을 띄웁니다.
17. chkOrNext === "check" 일 때 정답 확인을 해야 되므로 correct(정답)이 사용자가 누른 숫자와 일치하는지 안하는지를 검사합니다.
18. checkingFunc("정답") : 정답일 경우 퀴즈 화면에 "정답입니다"라는 문구와 구구단 문제, 퀴즈 정답을 나타내줍니다.
19. 정답 확인 버튼은 다음 문제 버튼으로 변경합니다.
20. quizSubBtnList[i].disabled = true : 이 때 번호 버튼은 눌리지 않기 하기 위해서 disabled = true로 설정해 줍니다.
21. checkingFunc("오답") : 오답일 경우 퀴즈 화면에 "오답입니다라"는 문구와 구구단 문제를 표시해줍니다.
22. inputNum = "" : 입력했던 내용은 비워줍니다.
23. setTimeout(() => { }, 1500) : 1500 밀리초 후에 "오답입니다라"는 문구를 없애주고 다시 구구단 문제를 표시해줍니다.
25. liteCount < 1 : 기회(목숨)이 1보다 작아지면 처음부터 다시 시작합니다.
26. else if(chkOrNext === "next") : 정답 확인 버튼이 아닌 다음 문제 버튼을 눌렀을 경우입니다.
27. checkBtn : 정답 확인 버튼으로 바꾸어줍니다.
28. inputNum : 입력한 내용을 비워줍니다.
29. quizSubBtnList[i].disabled = false : 다음 문제가 활성화 되었을 때는 번호 버튼이 클릭이 되지 않게 하였는데, 정답 확인 버튼이 활성화 되었을 때는 번호 버튼이 다시 클릭 되도록 바꾸어 주기 위해 false로 입력을 하였습니다.
30. setQuizFunc() : 다음 문제가 나와야 되므로 퀴즈 설정 함수를 불러옵니다.