"문제에 맞는 사진을 찾자!"라는 제목의 이미지 퀴즈 게임입니다. 사용자는 제공되는 문제를 해결하기 위해 여러 선택지 중에서 올바른 이미지를 선택해야 합니다. 각 문제마다 제한 시간이 있으며, 시간 내에 답을 선택하지 못하면 문제가 자동으로 넘어갑니다. 모든 문제를 풀고 나면 사용자가 맞힌 문제의 수를 보여주는 결과 페이지가 나타납니다.
HTML, CSS, JavaScript를 기반으로 사용자의 상호작용에 따라 동적으로 변화하는 웹 페이지입니다.
- startTimer(): 타이머를 시작하는 함수입니다. 10초부터 시작해 1초마다 타이머를 감소시키며, 시간이 0이 되면 타이머를 멈추고 nextQuestion() 함수를 호출해 다음 문제로 넘어갑니다.
- restartGame(): 게임을 재시작하는 함수입니다. 문제 번호와 점수를 초기화한 후에 첫 번째 문제를 출력하고 타이머를 시작합니다. 또한 체크박스를 초기화하고, 모달을 닫습니다. 이 함수는 게임을 처음 시작하거나 다시 시작할 때 호출됩니다.
- nextQuestion(): 다음 문제로 넘어가는 함수입니다. 문제 번호를 1 증가시킨 후, 문제 번호가 총 문제 수보다 작을 경우 다음 문제를 출력하고 타이머를 시작합니다. 만약 문제 번호가 총 문제 수와 같거나 크다면, 점수를 로컬 스토리지에 저장하고 endGame() 함수를 호출해 게임을 종료합니다.
- uncheckCheckboxes(): 모든 체크박스를 초기화하는 함수입니다. 체크박스의 선택 상태를 모두 해제합니다. 이 함수는 다음 문제로 넘어갈 때마다 호출되므로, 사용자가 각 문제에 대해 새로운 선택을 할 수 있게 합니다.
- updateQuiz(): 문제를 출력하는 함수입니다. 현재 문제 번호에 해당하는 문제와 선택지 이미지를 화면에 출력합니다. 또한 현재 문제 번호와 총 문제 개수를 medal__text 요소에 표시합니다.
- checkAnswers(): 사용자의 답을 확인하고 결과를 표시하는 함수입니다. 사용자가 모든 정답을 선택했을 경우, 선택한 답이 모두 정답인지 확인하고, 맞다면 점수를 1 올립니다. 그리고 정답 또는 오답을 알려주는 메시지를 0.5초 동안 표시합니다. 이 함수는 사용자가 선택지를 선택할 때마다 호출됩니다.
웹 페이지가 로드된 후에 실행되며, 문제를 풀고 점수를 기록하며, 모든 문제를 풀었을 경우 게임이 종료되는 구조로 되어 있습니다.