자바스크립트 Local Storage를 이용한 퀴즈 애플리케이션 구현

15 Sep 2023

javascript

개요

이번 프로젝트에서는 자바스크립트의 Local Storage를 활용하여 퀴즈 애플리케이션을 구현하는 방법에 대해 알아보겠습니다. Local Storage는 브라우저에 데이터를 저장할 수 있는 기능이며, 퀴즈 애플리케이션에서 퀴즈 진행 상태와 결과를 저장하는 데에 유용하게 사용될 수 있습니다.

구현 단계

1. HTML 구조 설정

퀴즈 애플리케이션의 기본적인 HTML 구조를 설정해야 합니다. 퀴즈 질문을 보여주고, 사용자의 답변을 입력할 수 있는 폼을 만들어야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>퀴즈 애플리케이션</title>
</head>
<body>
  <h1>퀴즈 애플리케이션</h1>

  <div id="question"></div>
  <form id="answer-form">
    <input type="text" id="answer-input" placeholder="답변을 입력하세요" />
    <button type="submit">확인</button>
  </form>

  <script src="quiz.js"></script>
</body>
</html>

2. 자바스크립트 코드 작성

퀴즈 애플리케이션의 로직을 자바스크립트 코드로 작성해야 합니다. 이때, Local Storage를 사용하여 퀴즈 진행 상태를 저장하고, 사용자의 답변을 검사하여 결과를 계산하는 기능을 추가해야 합니다.

// 퀴즈 데이터
const quizData = [
  {
    question: "세계에서 가장 큰 강은 무엇일까요?",
    answer: "아마존 강"
  },
  {
    question: "태양계에서 가장 큰 행성은 무엇일까요?",
    answer: "목성"
  },
  // 추가적인 퀴즈 데이터...
];

// 퀴즈 애플리케이션 객체
const quizApp = {
  currentQuestionIndex: 0,
  score: 0,
  
  showQuestion: function() {
    // 현재 질문을 보여줌
    const questionElement = document.querySelector('#question');
    questionElement.textContent = quizData[this.currentQuestionIndex].question;
  },
  
  checkAnswer: function(answer) {
    // 사용자의 답변을 검사하여 정답인지 확인하고, 점수를 계산함
    if (answer.toLowerCase() === quizData[this.currentQuestionIndex].answer.toLowerCase()) {
      this.score++;
    }

    // 다음 질문으로 이동
    this.currentQuestionIndex++;
    if (this.currentQuestionIndex < quizData.length) {
      this.showQuestion();
    } else {
      this.showResult();
    }
  },
  
  showResult: function() {
    // 최종 결과를 화면에 표시하고, Local Storage에 저장함
    alert(`퀴즈가 종료되었습니다!\n총 점수: ${this.score}`);
    localStorage.setItem('quizScore', this.score);
  },
  
  init: function() {
    // 애플리케이션 초기화
    this.showQuestion();

    const answerForm = document.getElementById('answer-form');
    answerForm.addEventListener('submit', function(event) {
      event.preventDefault();
      const answerInput = document.getElementById('answer-input');
      quizApp.checkAnswer(answerInput.value);
      answerInput.value = '';
    });
  }
};

// 애플리케이션 초기화
quizApp.init();

3. Local Storage 활용

위에서 작성한 자바스크립트 코드에서는 Local Storage를 사용하여 최종 결과를 저장합니다. 저장된 점수는 다음에 애플리케이션을 실행하면 이용할 수 있게 됩니다.

// 이전에 저장된 점수 불러오기
const previousScore = localStorage.getItem('quizScore');
if (previousScore !== null) {
  alert(`이전에 저장된 점수: ${previousScore}`);
}

결론

위의 예제를 통해 자바스크립트의 Local Storage를 이용하여 퀴즈 애플리케이션을 구현하는 방법을 알아보았습니다. 퀴즈 애플리케이션에는 Local Storage 외에도 다양한 기능을 추가하여 더욱 다양한 사용자 경험을 제공할 수 있습니다.