안녕하세요 느종입니다.
오늘은 저번 시간에 이어서 OX퀴즈 메인 화면과 결과 화면을 만들어보도록 하겠습니다. 간단한 페이지를 만드는 것인데도 글로 쓰려니깐 길어져서 부득이하게 나눠서 포스팅을 하게 되었습니다.
메인 화면 페이지
메인 화면 예시 페이지입니다. 별다른게 없고 퀴즈 번호, 퀴즈 내용, OX버튼으로 이루어져 있습니다. 그럼 페이지를 만들기 위한 코드를 작성해보도록 하겠습니다.
[ index.html ]
[ style.css ]
button-group안에 위의 코드를 추가하시면 됩니다. 바뀐 부분은 OX버튼과 다시하기 버튼을 추가하였고, hidden이라는 클래스가 추가 되었습니다. 버튼 영역안에서 총 3개의 기능을 다루어야 되는데요. 첫 번째가 시작하기 기능, 두 번째가 OX 버튼 기능, 세 번째가 다시하기 기능입니다. 한 페이지에서 모든 기능이 이루어져야 하기 때문에 각 화면 페이지에 맞는 버튼이 나타나야 하고, 맞지 않는 버튼은 사라지게 코드를 작성하였습니다. 그 부분은 css파일에 위와 같이 hidden을 추가해 주시고, class에 hidden을 써주시면 됩니다. 첫 시작 화면에서는 OX버튼과 다시하기 버튼이 있으면 안되기 때문에 두 개의 div tag에 hidden을 추가해 주었습니다.
앞서도 말씀드렸듯이 하나의 페이지가 아닌 각각의 페이지를 따로 만드셔도 좋습니다. 각자의 방식대로 하면 되니깐요.
자바스크립트 코드
오늘은 자바스크립트 코드가 저번보다 살짝 길 수 있습니다. 저번처럼 하나씩 설명하도록 하겠습니다. 그러면 코드부터 작성해보겠습니다.
[ scripts.js ]
1. quizList : 퀴즈 내용을 담은 배열입니다.
2. correctList : 퀴즈 정답을 담은 배열입니다.
3. oBtn : index.html에서 id가 oBtn인 태그를 담는 변수
4. xBtn : index.html에서 id가 xBtn인 태그를 담는 변수
5. retryBtn : index.html에서 id가 retryBtn인 태그를 담는 변수
6. count : 퀴즈 번호 변수
7. score : 퀴즈 점수 변수
8. hiddenChk : 시작하기, OX, 다시하기 버튼이 보여지고 사라지고 할 때 toggle기능을 사용하기위하여, 처음 퀴즈를 시작하는지, 아니면 다시하기를 눌러서 퀴즈를 다시 시작하는지 여부를 체크하기 위한 변수
🔶 classList.toggle("변수") : 해당 태그 클래스 리스트안에 변수명 클래스가 있으면 지워주고, 없으면 추가해주는 함수
9. init() { : 초기화 함수 안에 count와 score를 0으로 초기화 해주고, 처음 시작이 아닌, 퀴즈를 다시 시작하면 hiddenChk가 1이 되어, 시작하기 버튼과 다시하기 버튼에 hidden을 추가 및 삭제
[ scripts.js ]
10. startBtnClassName : 앞서 말씀드렸듯이 toggle함수를 사용하여 hidden을 추가 및 삭제
🔶 document.getElementsByClassName("start-button")[0] : 꼭 뒤에 [0]을 넣어주셔야 합니다. getElementsByClassName()은 리턴값이 배열이기 때문에 클래스명이 한 개라면 배열의 첫 번째값을 가져와야 되기 때문에 [0]을 써주셔야 합니다. 클래스명이 여러 개면 그 자리 수에 맞는 값을 넣어주시면 됩니다.
11. /* */ 주석으로 되어 있는 부분 : toggle 함수를 풀어서 작성하시면 주석 부분과 같습니다. 자신이 편한데로 작성하시면 됩니다.
12. oBtn.addEventListener('click', (e) => { : O버튼을 눌렀을 때 실행되는 함수
13. console.log() : 콘솔창에 값을 찍어보기 위함이니 지우셔도 무방합니다.
14. xBtn.addEventListener('click', (e) => { : X버튼을 눌렀을 때 실행되는 함수
15. retryBtn.addEventListener('click', () => { : 다시하기 버튼을 눌렀을 때 실행되는 함수
16. hiddenChk = 1 : 앞서 말씀드렸듯이 다시하기 버튼을 눌렀을 경우 hiddenChk 값을 1로 변경합니다.
17. init() : 다시하기 버튼을 눌렀을 때 초기화 함수가 실행 되어야 합니다.
[ scripts.js ]
18. function checkFunc(val) { : OX가 정답이 맞는지 여부를 체크하는 함수
19. if(val === correctList[count - 1]) { : 사용자가 누른 버튼의 태그 안의 내용과 correctList의 내용이 맞는지 체크
20. e.target.innerText : 사용자가 누른 버튼의 태그 안 내용
21. score++ : 맞을 경우에는 점수를 더합니다.
22. function setQuizFunc() { : 해당 번호에 맞는 퀴즈를 설정하는 함수
23. count++ : OX버튼을 눌렀을 경우 다음 퀴즈로 가기 위해서 count를 더합니다.
24. if(count > 5) { : 총 5문제이므로 5문제가 넘어 갔을 경우에는 결과 화면으로 넘어갑니다.
25. quizNumber.innerHTML : 결과 확인으로 내용을 바꿔줍니다.
26. quiz.innerHTML = "당신의 점수는 " + score + "점 입니다." : 결과 점수로 내용을 바꿔줍니다.
OX버튼은 사라지고, 다시하기 버튼은 나타나야되므로 toggle함수를 사용해줍니다.
27. count가 5이하이면 해당 번호를 알려주고, 해당 퀴즈 내용을 화면에 표시해줍니다.
결과 화면 페이지
모든 코드를 입력후에 index.html을 실행하시면 시작화면이 나오고, 시작하기 버튼을 누르시면 퀴즈를 풀 수 있는 메인화면으로 넘어갑니다. OX퀴즈 5문제를 모두 푸시면 결과 화면에 점수와 다시하기 버튼이 나타나는 것을 보실 수 있습니다. 다시하기 버튼을 누르면 처음 시작화면으로 돌아가서 다시 퀴즈를 풀 수 있도록 하였습니다.
이번에 OX퀴즈 페이지를 간단하게 만들어 보았고, 자바스크립트를 처음 접해보시는 초보자분들도 쉽게 이해하실 수 있도록 상세히 적으려고 노력을 하였습니다. 부족한 글이지만 읽어주셔서 감사합니다.
다음에는 다른 내용으로 준비해도록 하겠습니다.