JavaScript로 OX 퀴즈 만들기
OX 퀴즈는 웹 초보자도 쉽게 만들 수 있는 대표적인 JavaScript 프로젝트입니다. 단순히 문제를 보여주고 ‘O’ 또는 ‘X’를 클릭하면 정답 여부를 알려주는 형태로, 사용자의 반응에 따라 즉각적인 피드백을 줄 수 있습니다. 이번 글에서는 기본적인 구조부터 확장 아이디어까지 단계별로 살펴보겠습니다.
1. HTML로 기본 구조 만들기
가장 먼저 퀴즈가 표시될 영역과 버튼을 만들어줍니다. HTML은 단순하지만, 명확한 구조를 가지는 것이 좋습니다.
그냥 다짜고짜 게임을 시작하기보다는 시작화면을 만들고 사용자에게 어떤 게임인지를 소개해주고 시작하는 것이 좋은 것 같습니다.
시작 화면을 만들고, 시작하기 버튼을 누르면 메인 퀴즈 화면으로 페이지 전환이 되고, 문제를 다 풀었을 경우 끝 화면으로 전환되는 순서로 만들었습니다.
심플한 구조이다보니 보시면 바로 아실 수 있습니다.
하단 버튼은 그룹을 만들어서 화면에 맞게 변경되도록 하였습니다.
자바스크립트 코드에서 보시면 알 수 있듯이 저는
classList.toggle()을 사용하였습니다.페이지 자체를 만들어서 각각의 버튼을 생성하셔도 무방합니다. 편한 방법으로 하시면 될 듯 싶습니다.
2. 퀴즈 배열 생성 및 데이터 입력
각 문제와 정답에 대한 배열을 생성하고, 내용을 추가하도록 합니다.
배열 안에 {문제, 정답} 이런식으로 순서쌍으로 추가하여도 상관은 없지만, 초보자를 위한 심플한 프로젝트이다보니 각각의 배열을 만들도록 하였습니다.
저는 임시로 5개의 문제와 정답을 준비하였지만, 추후에 이 OX 퀴즈를 더 확장해서 문제의 수를 더 많이 늘리고 싶다면, 외부 JSON 파일을 활용하거나, 서버에 데이터를 넣어놓고 가져다가 쓰는 방법, 텍스트 파일에 문제와 정답을 입력한 후에 파일을 불러다가 사용하는 방법 등 다양한 방법을 활용하시면 될 듯 싶습니다.
// 문제 리스트
const quizList = ["5월 5일은 어버이날이다.",
"미국의 수도는 뉴욕이다.",
"오징어 다리 수는 10개이다.",
"축구팀 인원은 11명이다.",
"국보 제1호는 흥인지문이다."];
// 정답 리스트
const correctList = ["X", "X", "O", "O", "X"];
3. 퀴즈 로직 구현
- 사용자가 O 버튼 혹은 X 버튼을 눌렀을 경우
checkFunc()함수가 실행이 됩니다. - 이 때 값이 O인지 X인지를 가져옵니다.
- 가져온 값을 correctList의 현재 index값과 비교합니다.
- 일치할 경우에는 score를 1더하고, 틀렸을 경우에는 아무런 변화도 일어나지 않도록 합니다.
function checkFunc(val) {
if(val === correctList[count - 1]) {
score++;
}
}
function setQuizFunc() {
count++;
if(count > 5) {
quizNumber.innerHTML = "결과 확인";
quiz.innerHTML = "당신의 점수는 " + score + "점 입니다.";
let oxBtnClassName = document.getElementsByClassName("ox-button")[0];
let retryBtnClassName = document.getElementsByClassName("retry-button")[0];
oxBtnClassName.classList.toggle("hidden");
retryBtnClassName.classList.toggle("hidden");
} else {
quizNumber.innerHTML = "Q" + count;
quiz.innerHTML = quizList[count - 1];
}
}
setQuizFunc()함수는 퀴즈를 시작하거나 다시 시작하거나 다음 문제로 넘어갈 때 항상 실행되는 함수입니다.
이 함수가 실행될 때마다 count 변수는 1씩 증가합니다.
count가 5 이하일 때는 퀴즈 번호 영역에 퀴즈 번호를 증가시켜서 입력합니다.
count가 5가 넘어가면 모든 문제를 다 푼 것이므로, 메인 화면에서 결과 화면으로 넘어갑니다.
결과 화면에서는 나의 점수와 다시하기 버튼이 보여지도록 합니다.
4. 버튼 클릭 리스너
버튼 클릭이 되도록 만드는 법은 여러가지가 있습니다. HTML 코드상에서 태그안에 onclick을 추가하는 방법과 자바스크립트 코드안에서 클릭리스너를 추가해주는 방법이 대표적입니다. 저는 후자로 코드를 작성하였습니다. addEventListener를 통해서 클릭 리스너를 추가하였습니다. 총 4개의 버튼을 만들고, 활용하였습니다.
startBtn.addEventListener('click', () => {
let startBtnClassName = document.getElementsByClassName("start-button")[0];
let oxBtnClassName = document.getElementsByClassName("ox-button")[0];
startBtnClassName.classList.toggle("hidden");
oxBtnClassName.classList.toggle("hidden");
setQuizFunc();
});
oBtn.addEventListener('click', (e) => {
console.log("count : " + count);
checkFunc(e.target.innerText);
setQuizFunc();
console.log("score : " + score);
});
xBtn.addEventListener('click', (e) => {
console.log("count : " + count);
checkFunc(e.target.innerText);
setQuizFunc();
console.log("score : " + score);
});
retryBtn.addEventListener('click', () => {
hiddenChk = 1;
init();
});
function init() {
count = 0;
score = 0;
quizNumber.innerHTML = "OX 퀴즈";
quiz.innerHTML = "퀴즈를 시작해 볼까요?";
if(hiddenChk === 1) {
let startBtnClassName = document.getElementsByClassName("start-button")[0];
startBtnClassName.classList.toggle("hidden");
let retryBtnClassName = document.getElementsByClassName("retry-button")[0];
retryBtnClassName.classList.toggle("hidden");
}
}
console.log("")는 콘솔창에 결과값을 출력해보기 위한 코드입니다.자신이 작성한 변수의 값을 알고싶을 때 브라우저 창에서 F12버튼을 클릭한 후 console탭을 통해 확인할 수 있습니다.
코드상에서 삭제하셔도 무방합니다.
5. 디버깅과 조심해야될 부분
아래 초기화 함수를 보시게 되면 hiddenChk 변수가 있는 것을 보실 수 있습니다.
이 변수가 하는 역할은 게임을 처음 시작하는 것인지, 아니면 다시 시작하는 것인지를 구분짓는 것입니다.
또 하나 조심해야될 부분은 document.getElementsByClassName("")를 사용할 때 클래스 이름이 ""인 모든 태그를 가져옵니다.
그래서 배열로 반환을 하는데, 그래서 뒤에 꼭 인덱스 번호를 작성해주셔야합니다. 저는 start-button이라는 클래스 이름을 가진 배열에서 첫 번째 값을 사용할 것이기 때문에 [0]이라고 작성하였습니다.
function init() {
count = 0;
score = 0;
quizNumber.innerHTML = "OX 퀴즈";
quiz.innerHTML = "퀴즈를 시작해 볼까요?";
if(hiddenChk === 1) {
let startBtnClassName = document.getElementsByClassName("start-button")[0];
startBtnClassName.classList.toggle("hidden");
let retryBtnClassName = document.getElementsByClassName("retry-button")[0];
retryBtnClassName.classList.toggle("hidden");
}
}
6. 확장 아이디어
- 문제를 랜덤으로 섞어서 출제하기
- 간단한 색상 변화, 애니메이션 기능 추가하기
- 사용자 이름을 입력받아 결과에 표시
- 로컬스토리지를 이용해 지난 기록 저장
7. 마무리 및 응용
이 프로젝트는 단순한 퀴즈 구현을 넘어서, 이벤트 처리와 DOM 조작을 자연스럽게 익히기에 아주 좋은 예제입니다. 실제 웹사이트에서도 ‘간단한 테스트’, ‘상식 퀴즈’ 등 다양한 형태로 응용할 수 있습니다.
OX 퀴즈 실행 영상
