다음으로 작업한 페이지는 퀴즈 페이지 이다.

따로 db가 없기 떄문에 내가 직접 객체를 만들었고 객체를 순서대로 뿌려주면서 아무런 입력이 없으면 넘어가지 않고 입력이 있으면 그 입력이 정답 혹은 오답인지를

변수에 담아서 후에 맞춘갯수와 틀린 갯수를 보여주는 페이지를 만들어 보았다.

git : https://github.com/HoJin-jjimgo/10-Js-Project

html

• 이부분도 특별한것 없이 단순한 html이기 떄문에 다루지 않겟다.

css

• 이 부분은 전에 만들었던 clock페이지와, Lamp페이지에 있는 내용과 별 다르지 않기 떄문에 다루지 않겠다

js

quizData :내가 따로 만든 퀴즈 데이터가 들어있다.

• 정답과 질문, 선택지 등을 담고 있는 배열로 이루어져있다.
• (내부는 한문제당 한개체가 담겨있다)

이후 Dom를 이용하기 위해서 queryselector를 이용을 하였고

선택지가 선택되었는지 확인하기 위해서 queryselectorall도 사용 하였다.

score 변수는 맞추는 갯수
currentQuestion 현재 화면에 보이는 데이터의 인덱스값
answer 선택지를 선택했는지를 판별하기 위한 변수

이후 loadQuiz를 통해서 값을 뿌려주고 있다

이후 button (다음 퀴즈로 이동하는 버튼)을 눌렀을떄 이벤트가 작동을 하게 해주었다.

• 이 부분에서 좀 어지러웠는데;;
• 선택지를 선택하지 않으면 선택을 하라는 문구가 나오고 다음 문제로 넘어가지 않고
• 답을 맞췄는지 안맞췄는지에 대한 문구도 넘어가기 전에 보이게 만들어 주었다.

사실 좀만 집중해서 천천히 고민하면 금방 해결했을것 같은데 그당시 좀 피곤해가지고 ㅠㅠ

quizData.length-1 :을 한 이유는 문제의 마지막 객체는

• 문제를 모두 해결하였습니다.

라는 문구가 들어있기 떄문에 순수한 문제는 한개의 객체를 뺴야 한다.

getSelected 함수는 내가 선택지를 선택했다면 그 선택한 부분에 대한 인덱스를 담게 된다.

• 선택하지 않았으면 undefined가 나오게 되며 선택을 하였다면 answer에 값이 부여되고 그값이 객체에 정답으로 적힌 값과 동일하다면
• 정답이라는 문구가 작동한뒤 다음 문제로 넘어간다.
• 값이 동일하지 않다면 오답이라는 문구가 작동한뒤 다음 문제로 이동하게 된다.

후기

마찬가지로 그닥 어려운 과정은 없었다고 생각한다.

단순하게 dom을 다루는 부분에 대한 코드라고 생각하면 될껏 같다.