안녕하세요 느종입니다.
오늘은 구구단 퀴즈 페이지의 마지막 결과 화면을 만들어 보겠습니다. 결과 화면은 기존에 만들었던 것들과 거의 똑같습니다. 결과 화면을 마무리 짓고 다음 시간에는 같은 그림 찾기 페이지를 만들어볼까 합니다. OX퀴즈, 나라 수도 퀴즈, 구구단 퀴즈 까지 시작 화면, 메인 화면, 결과 화면의 비슷한 포맷으로 구성을 하였고, 코드를 작성하였는데요. 그래서 다음 시간에는 같은 그림 찾기 페이지를 만드는데 조금 다른 구성으로 접근해 볼까 합니다. css도 조금 더 추가하여, 역동적인 화면이 나올 수 있도록 페이지를 제작하려고 합니다. 그 부분에 대해서는 글 하단에서 언급하도록 하겠습니다. 얼른 구구단 페이지를 완성하도록 해요! 그럼 바로 시작하도록 하겠습니다. 함께 공부해요!
결과 화면 페이지
기존에 만들었던 결과 화면 페이지와 별 바 다를게 없죠. 앞선 포스팅에서 언급한 것과 같이 구구단 퀴즈 문제를 주어진 기회(목숨)내에서 틀리지 않고, 5문제를 모두 맞혔을 경우 위와 같은 결과 화면이 나오도록 구성하였습니다. 다시 하기 버튼을 클릭하면 시작 화면으로 돌아가도록 코드를 작성하였고, 메인 화면에서 사용했던 변수들은 모두 초기화 해주었습니다. 초기화를 해주지 않으면 기존 변수에 남아 있는 값에 계속 더해지기 때문에 꼭 초기화를 해주어야 합니다!
자바스크립트 코드
1. retryBtn : 다시 하기 버튼 태그
2. retryBtnClassName : class 이름이 retry-button인 태그
[ scripts.js ]
3. retryBtn.addEventListener('click', function() { : 다시 하기 버튼을 클릭했을 때 발생할 이벤트를 다시 하기 버튼에 붙여주는 함수입니다.
[ scripts.js ]
4. function retryFunc() { : 퀴즈를 다시 하기 위해 시작 화면으로 돌아가는 함수
5. switch(chapter) { : 각 화면 페이지에 대한 변수(chapter)에 따라서 각 페이지 화면이 사라졌다 없어졌다 할 수 있도록 스위치문을 사용하여 구분하였습니다. 당연히 if ~ else if문을 사용하여도 상관 없습니다.
6. case "quiz" : chapter가 퀴즈 화면일 때는 시작 버튼 영역은 숨기고, 퀴즈 화면에 있는 버튼 영역은 보여지게 합니다.
7. case "result" : chapter가 결과 화면일 때는 시작 버튼 영역은 숨기고, 다시 하기 버튼 영역은 보여지게 합니다.
8. init() : 앞서 말씀드렸듯이 다시 하기 버튼을 눌러 퀴즈를 다시 시작하면 퀴즈 화면에서 사용했던 기능과 변수들을 초기화 해주어야 합니다.
시작 화면, 메인 화면, 결과 화면까지 구구단 퀴즈 페이지를 모두 만들어 보았습니다. 만들어 놓고 보면 별거 아닌데 글로 쓰려고 하니깐 엄청 길어지네요. 다음 포스팅에서는 앞서 언급한 것과 같이 같은 그림 찾기 페이지를 만들어 볼까 합니다. 매번 비슷한 포맷이었는데 이번에는 좀 다르게 구성해서 만들어 보도록 하겠습니다. 그 동안 만들었던 것이 좀 밋밋함이 없지 않아 있어가지고, 이번에는 css 관련 코드도 조금 더 추가하고, 조금 더 역동적이게 코드를 작성해 볼 생각입니다.
같은 그림 찾기 맛보기
아직 다 코드를 완성하지는 않았는데, 미리 잠깐 보여 드리면 이런 식으로 구성해서 코드를 작성하고 있습니다. 처음에 3 x 4 배열로 카드를 나열하고, 사용자가 카드를 클릭했을 때 플립 방식으로 카드가 돌아갑니다. 그 후에 카드 뒷면에 있는 숫자가 나타나도록 구성을 하였습니다. 카드 뒷면에 있는 숫자가 같을 경우에는 그대로 뒷면을 유지하고, 카드 뒷면에 있는 숫자가 다를 경우에는 1~2초 정도 뒤에 다시 앞면으로 카드가 돌아가도록 만들 생각입니다. 이 후에 본인이 카드 숫자를 12개가 아닌 더 많이 하고 싶다 하시면 배열 수만 바꿔주시면 더 크고 많은 같은 그림 찾기 콘텐츠를 만드실 수 있습니다.