← 커리큘럼 목록으로
🎯
14:10-14:40 (30분)

성경퀴즈 대회 시스템

참가자 휴대폰으로 실시간 퀴즈 참여

🎯 학습 목표

  • ✓퀴즈 문제 관리 시스템 구축
  • ✓실시간 답안 제출 및 채점
  • ✓점수판 실시간 업데이트
  • ✓제한 시간 관리 및 동기화

💻 실습: 단계별 진행

STEP 1DB 스키마 설계 (5분)

🤖 프롬프트

Prisma로 다음 모델들을 만들어줘:

Quiz: id, question(문자열), options(JSON 배열), correctAnswer(숫자 0-3), timeLimit(초), points(점수), createdAt

QuizSession: id, roomCode(6자리), status(waiting/active/finished), currentQuestionIndex, createdAt

QuizAnswer: id, sessionId, quizId, playerName, answer, isCorrect, responseTime(ms), createdAt

STEP 2백엔드: 퀴즈 관리 API (7분)

🤖 프롬프트

NestJS로 Quiz CRUD API를 만들어줘.
GET /quizzes - 전체 퀴즈 목록
POST /quizzes - 새 퀴즈 생성
GET /quizzes/:id - 특정 퀴즈 조회
PATCH /quizzes/:id - 퀴즈 수정
DELETE /quizzes/:id - 퀴즈 삭제

POST /quiz-sessions - 새 세션 생성 (방 코드 자동 생성)
GET /quiz-sessions/:roomCode - 세션 정보 조회

STEP 3백엔드: Socket 이벤트 처리 (8분)

🤖 프롬프트

Socket.IO 게이트웨이에 다음 이벤트를 추가해줘:

'quiz:join' - 참가자 입장
'quiz:start' - 호스트가 퀴즈 시작
'quiz:nextQuestion' - 다음 문제로 이동
'quiz:submitAnswer' - 답안 제출
'quiz:timeUp' - 시간 종료

각 이벤트는 방(room) 내 모든 클라이언트에게 브로드캐스트해줘. 답안은 DB에 저장하고, 정답 여부를 즉시 계산해줘.

⏱️ 타이머 동기화 로직

// 서버에서 타이머 관리
handleStartQuestion(roomCode, questionIndex) {
  const timeLimit = questions[questionIndex].timeLimit;
  
  // 모든 클라이언트에게 문제 전송
  io.to(roomCode).emit('quiz:question', {
    ...question,
    startTime: Date.now(),
    timeLimit
  });
  
  // 서버 타이머 시작
  setTimeout(() => {
    io.to(roomCode).emit('quiz:timeUp');
  }, timeLimit * 1000);
}

STEP 4프론트엔드: 호스트 & 참가자 화면 (10분)

🤖 프롬프트

호스트 화면을 만들어줘:
- 문제 출제 (큰 화면에 프로젝터 투사용)
- 실시간 답변 현황 (누가 답했는지)
- 점수판 (상위 10명)
- 다음 문제 버튼
- 타이머 표시

참가자 화면을 만들어줘 (모바일 최적화):
- 4개 보기 버튼 (큰 터치 영역)
- 제한 시간 표시
- 내 점수 표시
- 정답/오답 피드백

🎨 화면 구성

호스트 화면

  • • 문제 (큰 폰트)
  • • 보기 4개
  • • 타이머 (카운트다운)
  • • 답변 현황 바
  • • 실시간 점수판

참가자 화면

  • • 문제 텍스트
  • • 4개 큰 버튼
  • • 남은 시간
  • • 내 현재 점수
  • • 내 순위

🏆 점수 계산 로직

기본 점수 + 속도 보너스

calculateScore(question, responseTime) {
  const baseScore = question.points; // 예: 100점
  const timeLimit = question.timeLimit * 1000; // ms로 변환
  
  // 남은 시간 비율에 따라 보너스
  const timeBonus = Math.floor(
    baseScore * 0.5 * (1 - responseTime / timeLimit)
  );
  
  return baseScore + Math.max(0, timeBonus);
  // 빠르게 답할수록 최대 50% 보너스
}

예시:

  • • 제한 시간 30초, 기본 점수 100점인 문제
  • • 5초 만에 정답: 100 + (100 × 0.5 × 0.83) = 141점
  • • 15초 만에 정답: 100 + (100 × 0.5 × 0.5) = 125점
  • • 29초 만에 정답: 100 + (100 × 0.5 × 0.03) = 101점

🚀 확장 아이디어

⚡ 파워업 아이템

50:50 찬스, 시간 연장 등

🎵 효과음

정답/오답 사운드, 카운트다운 틱톡

📊 난이도 조절

연령대별 문제 세트

🎁 경품 추첨

상위 10명 자동 추첨

✅ 완성 체크리스트

👨‍🏫 강사 노트

⏰ 시간 관리: DB 모델링(5분), API 구현(10분), 프론트엔드(12분), 테스트(3분)

🎮 실제 퀴즈: 구약 5문제, 신약 5문제 미리 준비하여 실제 대회 진행

📱 동시 접속: 참가자들 모두 휴대폰으로 함께 참여 → 실시간 감동 체험

🎯 핵심: "안식일학교에서 100명이 동시에 퀴즈 대회 가능!"

⚡ 팁: 첫 문제는 쉽게, 분위기 띄우기. 마지막은 어렵게 변별력 확보