- 자바스크립트 Turbolinks를 활용한 퀴즈 애플리케이션 개발하기

09 Nov 2023

Turbolinks

퀴즈 애플리케이션은 사용자들에게 퀴즈를 제공하고 정답을 확인할 수 있는 기능을 제공하는 애플리케이션입니다. 이번에는 자바스크립트 Turbolinks를 활용하여 퀴즈 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

Turbolinks 소개

Turbolinks는 웹 애플리케이션의 페이지 로딩과 탐색을 자동화하는 자바스크립트 라이브러리입니다. 기존의 웹 페이지 다시 로드 방식과 달리, 변경된 부분만을 업데이트하여 더 빠른 페이지 전환을 가능하게 합니다. 이를 통해 사용자는 빠른 탐색을 경험하고, 서버의 부담을 줄일 수 있습니다.

Turbolinks 설치 및 설정

Turbolinks를 설치하기 위해 프로젝트에 npm을 사용한다면, 다음 명령어를 사용하여 설치합니다.
```
npm install turbolinks
```
다음과 같이 HTML 문서의 head 태그 내에 Turbolinks 라이브러리를 로드합니다.
```
<script src="https://cdn.jsdelivr.net/npm/@turbolinks/core"></script>
```

Turbolinks를 사용할 페이지의 스크립트 파일에서 Turbolinks를 초기화합니다.

document.addEventListener("turbolinks:load", function() {
  // Turbolinks 초기화 코드
});

퀴즈 애플리케이션 개발하기

HTML 구조 작성하기

퀴즈 애플리케이션의 HTML 구조를 작성합니다. 예를 들어, 퀴즈 질문과 선택지, 정답 확인 버튼 등의 요소를 포함하는 구조를 작성할 수 있습니다.

<div id="quiz">
  <h1>퀴즈</h1>
  <p id="question">질문</p>
  <ul id="choices">
    <li>선택지 1</li>
    <li>선택지 2</li>
    <li>선택지 3</li>
    <li>선택지 4</li>
  </ul>
  <button id="check-answer">정답 확인</button>
  <p id="answer"></p>
</div>

퀴즈 데이터 관리하기

퀴즈 데이터를 자바스크립트 객체로 정의하고, 현재 질문의 인덱스를 관리하는 변수를 추가합니다.

var quizData = [
  {
    question: "질문 1",
    choices: ["선택지 1", "선택지 2", "선택지 3", "선택지 4"],
    answer: 2
  },
  {
    question: "질문 2",
    choices: ["선택지 1", "선택지 2", "선택지 3", "선택지 4"],
    answer: 0
  },
  // ...
];

var currentQuestionIndex = 0;

퀴즈 화면 업데이트하기

showQuestion 함수를 작성하여 현재 질문을 화면에 표시하도록 업데이트합니다.

function showQuestion() {
  var questionElement = document.getElementById("question");
  var choicesElement = document.getElementById("choices");
  
  questionElement.textContent = quizData[currentQuestionIndex].question;
  choicesElement.innerHTML = "";

  quizData[currentQuestionIndex].choices.forEach(function(choice, index) {
    var li = document.createElement("li");
    li.textContent = choice;
    choicesElement.appendChild(li);
  });
}

정답 확인 기능 추가하기

checkAnswer 함수를 작성하여 사용자가 선택한 정답을 확인하고, 결과를 화면에 표시하도록 기능을 추가합니다.

function checkAnswer() {
  var selectedChoiceIndex = Array.from(document.querySelectorAll("#choices li")).findIndex(function(li) {
    return li.classList.contains("selected");
  });

  if (selectedChoiceIndex === quizData[currentQuestionIndex].answer) {
    document.getElementById("answer").textContent = "정답입니다!";
  } else {
    document.getElementById("answer").textContent = "오답입니다!";
  }
}

사용자 이벤트 처리하기

turbolinks:load 이벤트를 통해 페이지가 로드될 때, 화면을 업데이트하고 사용자 이벤트를 처리합니다.

document.addEventListener("turbolinks:load", function() {
  showQuestion();

  document.getElementById("choices").addEventListener("click", function(event) {
    var clickedChoice = event.target;

    if (clickedChoice.tagName === "LI") {
      Array.from(clickedChoice.parentElement.children).forEach(function(li) {
        li.classList.remove("selected");
      });

      clickedChoice.classList.add("selected");
    }
  });

  document.getElementById("check-answer").addEventListener("click", function() {
    checkAnswer();
  });
});

위와 같이 자바스크립트와 Turbolinks를 활용하여 퀴즈 애플리케이션을 개발할 수 있습니다. Turbolinks를 사용하면 페이지 이동 시에도 빠른 화면 전환을 제공할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

(#자바스크립트 #Turbolinks)