코딩으로 수학 퀴즈 게임 만들기

초등학교에서 수학을 가르치다 보면, 아이들이 반복 연산을 지루해하는 모습을 자주 봅니다. "선생님, 또 계산이요?" 하는 표정을 볼 때마다 어떻게 하면 재미있게 연습할 수 있을까 고민하게 되죠. 그래서 JavaScript를 활용해 간단한 수학 퀴즈 게임을 만들어보았습니다. 아이들이 직접 게임하듯 문제를 풀면서 자연스럽게 연산 능력을 키울 수 있도록 설계했습니다.

프로젝트 개요

이번에 만들 수학 퀴즈 게임의 주요 기능은 다음과 같습니다:

• 덧셈, 뺄셈, 곱셈 중 랜덤하게 문제 출제
• 사용자가 답을 입력하면 정답 여부를 즉시 확인
• 10문제를 풀고 나면 최종 점수와 결과 메시지 표시
• 틀린 문제는 다시 확인할 수 있는 오답 목록 제공

코딩 교육의 핵심은 결과물이 아이들에게 직접적으로 의미 있는 것이어야 한다는 점입니다. 수학 퀴즈 게임은 아이들이 "내가 만든 것"이라는 소유감을 느낄 수 있어 교육적 효과가 뛰어납니다.

1단계: HTML 구조 만들기

먼저 게임의 기본 뼈대가 되는 HTML 구조를 작성합니다. 문제를 표시할 영역, 답을 입력할 필드, 점수를 보여줄 공간이 필요합니다.

<div id="quiz-container">
  <div id="score">점수: 0 / 0</div>
  <div id="question">문제가 여기에 표시됩니다</div>
  <input type="number" id="answer" placeholder="정답을 입력하세요">
  <button id="submit-btn">확인</button>
  <div id="feedback"></div>
  <div id="result" style="display:none;"></div>
</div>

HTML 구조는 최대한 심플하게 유지했습니다. quiz-container라는 하나의 래퍼 안에 모든 요소를 배치하면 CSS 스타일링도 편리해집니다.

2단계: 랜덤 문제 생성 함수

JavaScript의 Math.random() 함수를 활용하여 매번 다른 수학 문제를 만들어줍니다. 초등학생 수준에 맞춰 숫자 범위를 1부터 20까지로 제한했습니다.

function generateQuestion() {
  const num1 = Math.floor(Math.random() * 20) + 1;
  const num2 = Math.floor(Math.random() * 20) + 1;
  const operators = ['+', '-', '×'];
  const operator = operators[Math.floor(Math.random() * 3)];

  let answer;
  switch (operator) {
    case '+': answer = num1 + num2; break;
    case '-': answer = num1 - num2; break;
    case '×': answer = num1 * num2; break;
  }

  return { question: `${num1} ${operator} ${num2} = ?`, answer };
}

여기서 주의할 점이 있습니다. 뺄셈의 경우 음수가 나올 수 있는데, 저학년 학생에게는 음수 개념이 어려울 수 있습니다. 그래서 저는 뺄셈일 때 num1이 항상 num2보다 크도록 조건을 추가했습니다.

// 뺄셈일 때 음수 방지
if (operator === '-' && num1 < num2) {
  [num1, num2] = [num2, num1]; // 구조 분해 할당으로 값 교환
}

3단계: DOM 조작으로 화면에 표시하기

생성된 문제를 화면에 표시하고, 사용자의 답을 받아 처리하는 로직입니다. getElementById를 사용하여 각 요소에 접근합니다.

const questionEl = document.getElementById('question');
const answerInput = document.getElementById('answer');
const feedbackEl = document.getElementById('feedback');
const scoreEl = document.getElementById('score');

let currentQuestion = null;
let score = 0;
let totalQuestions = 0;

function displayQuestion() {
  currentQuestion = generateQuestion();
  questionEl.textContent = currentQuestion.question;
  answerInput.value = '';
  answerInput.focus();
  feedbackEl.textContent = '';
}

이벤트 리스너 연결

확인 버튼을 클릭하거나 Enter 키를 누르면 답을 체크하도록 이벤트 리스너를 추가합니다.

document.getElementById('submit-btn').addEventListener('click', checkAnswer);
answerInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') checkAnswer();
});

4단계: 정답 확인과 점수 추적

사용자가 입력한 답과 실제 정답을 비교하고, 점수를 업데이트하는 핵심 로직입니다.

const wrongAnswers = [];

function checkAnswer() {
  const userAnswer = parseInt(answerInput.value);

  if (isNaN(userAnswer)) {
    feedbackEl.textContent = '숫자를 입력해주세요!';
    feedbackEl.className = 'warning';
    return;
  }

  totalQuestions++;

  if (userAnswer === currentQuestion.answer) {
    score++;
    feedbackEl.textContent = '정답입니다! 🎉';
    feedbackEl.className = 'correct';
  } else {
    feedbackEl.textContent =
      `틀렸습니다. 정답은 ${currentQuestion.answer}입니다.`;
    feedbackEl.className = 'wrong';
    wrongAnswers.push({
      question: currentQuestion.question,
      correct: currentQuestion.answer,
      userAnswer: userAnswer
    });
  }

  scoreEl.textContent = `점수: ${score} / ${totalQuestions}`;

  if (totalQuestions >= 10) {
    showResult();
  } else {
    setTimeout(displayQuestion, 1500);
  }
}

5단계: 결과 화면 만들기

10문제를 모두 풀면 최종 점수와 함께 격려 메시지를 보여줍니다. 점수 구간별로 다른 메시지를 표시하면 아이들의 동기부여에 도움이 됩니다.

function showResult() {
  const resultEl = document.getElementById('result');
  let message;

  if (score === 10) message = '완벽해요! 수학 천재! 🏆';
  else if (score >= 8) message = '훌륭해요! 거의 다 맞았어요! ⭐';
  else if (score >= 6) message = '잘했어요! 조금만 더 연습해봐요! 💪';
  else message = '괜찮아요! 다시 도전해봐요! 📚';

  resultEl.innerHTML = `
    <h2>최종 결과</h2>
    <p>${score} / 10 정답</p>
    <p>${message}</p>
    <button onclick="resetGame()">다시 하기</button>
  `;
  resultEl.style.display = 'block';
}

교실에서 활용한 후기

이 퀴즈 게임을 실제 교실에서 사용해보았는데, 아이들의 반응이 정말 좋았습니다. 특히 점수가 실시간으로 올라가는 것을 보며 성취감을 느끼는 모습이 인상적이었습니다. 몇 가지 개선점도 발견했습니다:

• 난이도 조절 기능: 학년별로 숫자 범위를 다르게 설정하면 좋겠다는 의견이 있었습니다.
• 타이머 추가: 제한 시간을 두면 더 긴장감 있게 풀 수 있습니다.
• 오답 복습: 틀린 문제만 모아서 다시 풀어보는 기능을 추가하면 학습 효과가 높아집니다.
• 시각적 피드백: CSS 애니메이션을 활용해 정답/오답 시 화면 효과를 주면 더 재미있습니다.

확장 아이디어

기본 버전을 완성한 뒤에는 여러 가지로 확장할 수 있습니다. 나눗셈 추가, 2인 대전 모드, 문제 유형 선택 기능 등 아이들과 함께 아이디어를 내보는 것도 좋은 코딩 교육 활동이 됩니다. 코드를 작성하는 것만이 아니라, 어떤 기능을 만들지 기획하는 과정 자체가 컴퓨팅 사고력을 기르는 데 큰 도움이 됩니다.

프로그래밍은 단순히 코드를 작성하는 것이 아니라 문제를 분석하고 해결책을 설계하는 과정입니다. 수학 퀴즈 게임 만들기는 이 과정을 아이들이 직접 체험할 수 있는 좋은 프로젝트입니다.