Colin's Blog
[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트용 퀴즈 게임 구현 방법

이번 글에서는 자바스크립트의 드래그 앤 드롭 효과를 활용하여 웹사이트에 퀴즈 게임을 구현하는 방법에 대해 알아보겠습니다.

목차

드래그 앤 드롭 효과란?

드래그 앤 드롭(Drag and Drop) 효과는 사용자가 마우스로 요소를 끌어다 다른 위치로 이동시킬 수 있는 인터랙션 기능입니다. 이를 통해 사용자는 직관적이고 쉬운 방법으로 요소를 이동하거나 재배치할 수 있습니다.

퀴즈 게임 구현 준비하기

퀴즈 게임을 구현하기 위해 기본적으로 다음과 같은 요소들이 필요합니다:

드래그 앤 드롭 효과 구현하기

자바스크립트의 드래그 앤 드롭 효과를 구현하기 위해서는 다음과 같은 단계를 따릅니다:

  1. 드래그할 요소에 draggable 속성을 추가합니다.
  2. 드래그 시작(dragstart) 이벤트 리스너를 등록하여 드래그하는 요소의 데이터를 설정합니다.
  3. 드롭 대상 요소에 dragover 이벤트 리스너를 등록하여 드롭 가능한 대상임을 설정합니다.
  4. 드롭 대상 요소에 drop 이벤트 리스너를 등록하여 드롭이 완료된 후 처리할 로직을 구현합니다.
  5. 드래그 대상 요소에 dragend 이벤트 리스너를 등록하여 드래그 동작이 종료될 때 필요한 작업을 수행합니다.

아래는 간단한 예시 코드입니다:

// 드래그 시작 이벤트 리스너
function handleDragStart(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
}

// 드롭 대상 요소 위에 올라갈 때의 이벤트 리스너
function handleDragOver(event) {
  event.preventDefault();
}

// 드롭이 완료된 후의 이벤트 리스너
function handleDrop(event) {
  event.preventDefault();
  const id = event.dataTransfer.getData("text/plain");
  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);
}

// 드래그 종료 이벤트 리스너
function handleDragEnd(event) {
  // 드래그 종료 후 필요한 작업 수행
}

// 드래그 가능한 요소들에 이벤트 리스너 등록
const draggableElements = document.querySelectorAll(".draggable");
draggableElements.forEach((element) => {
  element.addEventListener("dragstart", handleDragStart);
  element.addEventListener("dragend", handleDragEnd);
});

// 드롭 대상 요소들에 이벤트 리스너 등록
const dropzoneElements = document.querySelectorAll(".dropzone");
dropzoneElements.forEach((element) => {
  element.addEventListener("dragover", handleDragOver);
  element.addEventListener("drop", handleDrop);
});

퀴즈 게임 화면 구현하기

퀴즈 게임 화면 구현을 위해 HTML과 CSS를 사용하여 문제와 선택지를 나타내는 요소들을 만들어야 합니다. 이 때, 드래그 앤 드롭 효과를 적용할 요소들은 draggable 속성을 추가해야 합니다.

<div class="quiz">
  <div class="question">
    <h2>퀴즈 질문</h2>
  </div>
  <div class="answers">
    <div class="answer draggable" draggable="true" id="drag1">
      <p>선택지 1</p>
    </div>
    <div class="answer draggable" draggable="true" id="drag2">
      <p>선택지 2</p>
    </div>
    <div class="answer draggable" draggable="true" id="drag3">
      <p>선택지 3</p>
    </div>
  </div>
  <div class="dropzone">
    <h3>정답을 이곳에 옮겨 놓으세요</h3>
  </div>
</div>

퀴즈 게임 로직 구현하기

퀴즈 게임 로직을 구현하기 위해서는 선택지와 정답을 비교하여 결과를 판단해야 합니다. 이를 위해 JavaScript로 선택지와 정답의 정보를 가지고 있는 객체를 생성하고, 드롭이 완료된 후에 선택지와 정답을 비교하는 로직을 구현합니다.

// 퀴즈 데이터
const quizData = [
  {
    question: "질문 1",
    answers: ["정답 1", "선택지 1", "선택지 2"],
    correctAnswer: "정답 1",
  },
  {
    question: "질문 2",
    answers: ["선택지 1", "선택지 2", "정답 2"],
    correctAnswer: "정답 2",
  },
  // ...
];

const draggables = document.querySelectorAll(".draggable");
const dropzone = document.querySelector(".dropzone");

// 정답 판별 함수
function checkAnswer(draggedElement, correctAnswer) {
  if (draggedElement.textContent === correctAnswer) {
    console.log("정답입니다!");
  } else {
    console.log("오답입니다.");
  }
}

draggables.forEach((draggable) => {
  draggable.addEventListener("dragend", function (event) {
    const draggedElement = event.target;
    const correctAnswer = draggedElement.dataset.correctAnswer;
    checkAnswer(draggedElement, correctAnswer);
  });
});

위의 코드에서 quizData 배열에 문제와 선택지, 정답을 정의하고, checkAnswer 함수를 이용하여 정답을 판단합니다. 드롭이 완료된 후에 checkAnswer 함수를 호출하여 선택지와 정답을 비교하고 결과를 출력합니다.

드래그 앤 드롭 효과를 활용한 웹사이트용 퀴즈 게임의 구현 방법에 대해 알아보았습니다. 이를 참고하여 자신만의 독특한 퀴즈 게임을 개발해보세요!

© 2018 Colin. All rights reserved.