안녕하세요 느종입니다.
오늘은 나라 수도 퀴즈의 결과 페이지를 만들어 보겠습니다. 중요한 기능들은 저번 메인 화면 페이지 만들기에서 다 다루었기 때문에 결과 페이지 같은 경우는 간단하게 마무리 지을 수 있을 것 같습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요!
결과 화면 페이지
결과 화면 페이지입니다. 5문제를 모두 맞히고 나면 "모든 문제를 다 맞추셨습니다. 축하합니다."라는 문구가 나오게 구성하였습니다. 하단에는 input 태그와 정답 확인 버튼이 사라지고, 다시 하기 버튼이 활성화 될 수 있도록 하였습니다. 다시 하기 버튼을 클릭할 시 맨 처음 시작 화면 페이지로 이동하고, 퀴즈를 다시 시작하기 위해 메인 페이지에서 사용했던 기능 및 변수들을 초기화합니다.
자바스크립트 코드
메인 화면 페이지 만들기에서 작성한 코드에 추가 된 부분만 한줄씩 설명하도록 하겠습니다.
[ scripts.js ]
1. retryBtn : 다시 하기 버튼 태그를 담는 변수입니다.
2. retryBtnClassName : class가 retry-button인 태그를 담는 변수입니다.
[ scripts.js ]
3. retryBtn.addEventListener('click', () => { : 다시 하기 버튼을 누르면 발생할 이벤트를 추가해 줍니다. 다시 하기 기능이 들어 있는 retryFunc() 함수는 아래에서 설명하도록 하겠습니다.
[ scripts.js ]
4. checkingCorrect() : 정답인지 아닌지 확인 하는 함수 안에서 정답이 틀릴 때마다 기회(묵숨)이 하나씩 줄어나가는데 기회가 1개 미만이 되었을 경우 alert창을 활용하여 처음부터 다시 시작한다고 알립니다. 그리고 다시 시작하는 함수를 입력해줍니다.6. switch(chapter) : 앞서 시작 화면 페이지 만들기와 메인 화면 페이지 만들기에서 시작 화면, 메인 화면, 결과 화면 페이지로 바뀔때마다 chapter 변수에 start, quiz, result를 추가하였습니다. 각 페이지마다 구분을 지을 수 있도록 스위치문을 사용하였습니다. if, else if문을 사용하셔도 상관없습니다.
7. startBtnClassName.classList.toggle("hidden") : toggle을 사용하여 class가 start-button인 태그(시작 하기 버튼을 포함하는 div태그)에 hidden 클래스가 있으면 삭제하고, 없으면 추가하도록 하였습니다. classList는 해당 태그가 가진 class를 리스트 형식으로 모두 가져옵니다.
8. inputBtnClassName.classList.toggle("hidden") : 위와 마찬가지로 toggle을 사용하여 hidden을 추가 및 삭제합니다.(입력창, 정답 확인 버튼을 포함하는 div태그)
9. retryBtnClassName.classList.toggle("hidden") : 위와 마찬가지로 toggle을 사용하여 hidden을 추가 및 삭제합니다.(다시 하기 버튼을 포함하는 div태그)
10. init() : 퀴즈를 다시 시작하면 모든 변수와 기능들을 초기화 해야 되므로 init() 함수를 불러줍니다.
이렇게 결과 화면 페이지까지 모든 코드를 작성하였습니다. index.html을 실행하시면 시작 화면이 나오고, 메인 화면에서 퀴즈를 풀 수 있습니다. 모든 퀴즈를 다 푸시면 결과 화면이 나오고 다시 하기 버튼을 누르게 되면 시작 화면으로 되돌아옵니다.
처음 OX퀴즈와는 다르게 input 태그를 활용하여, 텍스트를 입력 받아 비교하는 방식으로 구성하였고, 기회(목숨) 기능을 추가하여 기회를 다 썼을 경우에는 처음으로 돌아가는 방식으로 만들어 보았습니다. 조금 더 기능이 추가 되어서 코드가 길어졌지만 최대한 세세하게 풀어서 작성하였습니다. 다음에는 여기서 조금 더 기능이 추가 된 또 다른 방법을 이용하여 퀴즈 페이지를 만드는 법을 준비해오도록 하겠습니다.