안녕하세요 느종입니다
저번 시간에 이어서 구구단 퀴즈 페이지의 메인 부분을 완성해보겠습니다. 그럼 바로 시작할게요. 함께 공부해요!
메인 화면 페이지
자바스크립트 코드
1. function checkingFunc(str) { : 정답 확인 버튼을 눌렀을 때 정답인지 아닌지를 변수로 넣고, 정답일 때는 두 수의 곱과 정답까지 표시해 주고, 오답일 때는 문제 그대로 표시해주기 위한 함수입니다.
2. txt += str + "입니다!" : txt라는 변수에 정답인지 오답인지에 따라 텍스트가 계속 붙도록 하는 코드입니다.
3. clickQuizBtnFunc() : 사용자가 번호 버튼을 클릭 했을 때 해당 번호가 enteredNum 태그 안에 써지도록 하는 함수입니다.
4. for(let i=0; i<quizSubBtnList.length; i++) { : class가 quiz-sub-button button인 모든 요소가 들어 있는 배열에 대한 반복문
5. quizSubBtnList[i].addEventListener('click', function() { : 해당 반복문을 돌면서 번호 버튼에 클릭 이벤트를 추가하는 코드입니다.
[ scripts.js ]
6. function setQuizFunc() { : 구구단 퀴즈 문제를 설정하는 함수입니다.7. if(count > 5) { : 문제가 5문제가 넘어 가면 결과 화면으로 가는 if문
8. chapter = "result" : 결과 화면으로 가니깐 chapter 변수에 result를 넣어줍니다.
9. quizBtnClassName.classList.toggle("hidden") : 메인 화면을 숨겨줍니다.
10. retryBtnClassName.classList.toggle("hidden") : 결과 화면을 나타내줍니다.
11. function setMultiplicationTablefunc() { : 구구단을 계산하는 함수입니다.
12. start = 0 : 구구단 첫 번째 항을 초기화합니다.
13. end = 0 : 구구단 두 번째 항을 초기화합니다.
14. correct = 0 : 두 수를 곱한 수(정답)을 초기화합니다.
15. start = Math.floor(Math.random() * 8) + 2 : 1부터 9까지 수 중에 랜덤으로 숫자 하나를 뽑아서 첫 번째 항에 넣습니다.
16. end = Math.floor(Math.random() * 8) + 2 : 1부터 9까지 수 중에 랜덤으로 숫자 하나를 뽑아서 두 번째 항에 넣습니다.
17. correct = start * end : 두 수를 곱해서 정답을 도출합니다.
전체적인 설명
전체적인 흐름은 사용자가 시작 버튼을 누르고 나면 메인 퀴즈 화면이 보여지고, 퀴즈(quiz태그) 화면에 랜덤으로 뽑힌 2개의 수와 곱하기가 표시가 됩니다.
그리고 하단에는 번호 버튼과 정답 확인 버튼이 있어 사용자가 정답이다 생각하는 숫자를 입력하게 되면 가운데 창(enteredNum 태그)에 입력한 수가 표시가 됩니다.
그리고 정답 확인을 누르면 정답이면 퀴즈(quiz태그) 화면에 문제와 정답이 함께 표시가 되면서 정답 확인 버튼은 다음 문제 버튼으로 바뀌게 됩니다.
오답일 경우에는 퀴즈 화면은 그대로 있고, 가운데 창에 입력했던 숫자는 사라지고, 오른쪽 상단의 기회(목숨)이 하나 줄어 듭니다.
이 때 정답 확인 버튼은 그대로 있습니다.
기회가 3번인데 3번 다 틀렸을 경우에는 처음 시작 화면으로 돌아간다는 알림과 함께 시작 화면이 나옵니다.
5문제 모두 풀었을 경우에는 결과 화면 페이지로 넘어갑니다.
문제 제한을 10문제로 하고 싶다 하시면 setQuizFunc() 함수 안에 " if(count > 5) " 여기에서 5를 10으로 변경하시면 됩니다. 본인의 입맛에 맞게 숫자를 바꾸시면 됩니다.
기회(목숨)도 똑같이 init() 초기 함수 안에서 " lifeCount = 3 " 이 부분을 원하시는 숫자로 바꿔주시면 됩니다.
오늘은 저번 시간에 이어서 메인 화면을 만들어 보았는데요.
하나의 함수에서 다 계산하는 것보다 최대한 여러 함수를 만들고 나중에 다른 곳에서 재활용할 수 있도록 코드를 짜는게 중요한 것 같습니다. 한 번에 주르르륵 다 코드를 짜게 되면, 보기도 어렵고 나중에 코드가 길어지면 본인이 짠 코드도 보기 어려울 수도 있기 때문이죠. 다음 시간에는 결과 화면을 마저 만들고 구구단 퀴즈 페이지 만들기를 마무리 지어 볼까 합니다.