[javascript] Reveal.js를 활용한 퀴즈 및 투표 시스템 구현

27 Nov 2023

javascript

Reveal.js는 HTML 기반의 프레젠테이션 도구로 많이 사용되는 도구입니다. 이번에는 Reveal.js를 활용하여 퀴즈와 투표 시스템을 구현하는 방법에 대해 알아보도록 하겠습니다.

1. Reveal.js 설치 및 설정

먼저, Reveal.js를 설치해야 합니다. 다음 명령어를 사용해서 Reveal.js를 설치합니다.

npm install reveal.js

설치가 완료되면 Reveal.js를 사용할 수 있습니다.

2. 퀴즈 시스템 구현하기

퀴즈 시스템을 구현하기 위해서는 다음과 같은 단계를 따릅니다.

2.1. 퀴즈 슬라이드 만들기

Reveal.js에서는 HTML을 사용하여 각각의 슬라이드를 만들 수 있습니다. 퀴즈 슬라이드를 만들기 위해서는 다음과 같은 구조를 갖춘 HTML 코드를 작성해야 합니다.

<section>
  <h2>퀴즈 질문</h2>
  <ul>
    <li><button>보기 1</button></li>
    <li><button>보기 2</button></li>
    <li><button>보기 3</button></li>
    <li><button>보기 4</button></li>
  </ul>
</section>

위 코드에서 “퀴즈 질문” 부분을 원하는 질문으로 변경하고, “보기 1”, “보기 2” 등의 버튼의 텍스트를 원하는 보기로 변경합니다.

2.2. 정답 체크 함수 작성하기

각각의 버튼에 대한 클릭 이벤트를 처리하기 위해서는 정답 체크 함수를 작성해야 합니다. 다음은 예시 코드입니다.

function checkAnswer(answer) {
  if (answer === 2) {
    alert("정답입니다!");
  } else {
    alert("틀렸습니다!");
  }
}

위 코드에서는 answer 매개변수로 사용자가 선택한 보기의 번호를 받아와서, 이를 정답과 비교한 후에 알림창을 띄웁니다.

2.3. 이벤트 리스너 등록하기

DOMContentLoaded 이벤트가 발생했을 때, 각각의 버튼에 클릭 이벤트 리스너를 등록합니다. 다음은 예시 코드입니다.

document.addEventListener("DOMContentLoaded", function() {
  var buttons = document.querySelectorAll("ul li button");
  
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var answer = parseInt(this.parentElement.innerText.charAt(0));
      checkAnswer(answer);
    });
  }
});

위 코드에서는 querySelectorAll 메서드를 사용하여 모든 버튼을 선택한 후에, 각각의 버튼에 클릭 이벤트 리스너를 등록합니다. 클릭 시에는 버튼의 부모 요소의 텍스트를 가져와서 정답 체크 함수에 전달합니다.

3. 투표 시스템 구현하기

투표 시스템을 구현하기 위해서는 다음과 같은 단계를 따릅니다.

3.1. 투표 슬라이드 만들기

투표 슬라이드를 만들기 위해서는 다음과 같은 구조를 갖춘 HTML 코드를 작성해야 합니다.

<section>
  <h2>투표 테마</h2>
  <ul>
    <li><button>옵션 1</button></li>
    <li><button>옵션 2</button></li>
  </ul>
</section>

위 코드에서 “투표 테마” 부분을 투표 주제로 변경하고, “옵션 1”, “옵션 2” 등의 버튼의 텍스트를 투표 옵션으로 변경합니다.

3.2. 투표 결과 확인 함수 작성하기

각각의 버튼에 대한 클릭 이벤트를 처리하기 위해서는 투표 결과 확인 함수를 작성해야 합니다. 다음은 예시 코드입니다.

function checkVote(option) {
  alert(option + "에 투표했습니다!");
}

위 코드에서는 option 매개변수로 사용자가 선택한 투표 옵션을 받아와서, 이를 토대로 알림창을 띄웁니다.

3.3. 이벤트 리스너 등록하기

DOMContentLoaded 이벤트가 발생했을 때, 각각의 버튼에 클릭 이벤트 리스너를 등록합니다. 다음은 예시 코드입니다.

document.addEventListener("DOMContentLoaded", function() {
  var buttons = document.querySelectorAll("ul li button");
  
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var option = this.innerText;
      checkVote(option);
    });
  }
});

위 코드에서는 querySelectorAll 메서드를 사용하여 모든 버튼을 선택한 후에, 각각의 버튼에 클릭 이벤트 리스너를 등록합니다. 클릭 시에는 버튼의 텍스트를 가져와서 투표 결과 확인 함수에 전달합니다.

마치며

이렇게 Reveal.js를 활용하여 퀴즈와 투표 시스템을 구현할 수 있습니다. 위에서 설명한 단계를 따라 진행하면서 원하는 기능을 구현해보세요. 추가적인 기능을 구현하고 싶다면 Reveal.js의 API 문서를 참고하면 도움이 될 것입니다.

참고: Reveal.js 공식 문서