📖

11:10-11:40 (30분)

안식일학교 성경퀴즈 앱

JSON 문제 불러와 퀴즈 진행

🎯 학습 목표

✓JSON 데이터 형식 이해하고 활용하기
✓외부 파일에서 데이터를 불러오는 방법 배우기
✓객관식 퀴즈 로직 구현하기
✓문제 은행을 쉽게 수정/확장할 수 있는 구조 만들기

🔧 사용 기술

JSON (JavaScript Object Notation)

데이터를 구조화하여 저장하는 형식

{
  "question": "질문",
  "options": ["보기1", "보기2"],
  "answer": 0
}

Fetch API

외부 파일을 불러오는 JavaScript 기능

fetch('quiz.json')
  .then(res => res.json())

Array Methods

배열 데이터 처리 (map, filter, forEach 등)

DOM Manipulation

화면에 동적으로 요소 추가/제거하기

📚 JSON이란 무엇인가?

JSON = 데이터를 정리하는 엑셀 같은 것

❌ 이렇게 저장하면?

창세기 1장 1절은 무엇인가? 답: 태초에 하나님이

노아의 방주는? 답: 동물들을 구했다

→ 프로그램이 읽기 어려움

✅ JSON으로 저장하면?

[
  {
    "question": "창세기 1:1",
    "answer": "태초에 하나님이"
  },
  {
    "question": "노아의 방주",
    "answer": "동물들을 구했다"
  }
]

→ 프로그램이 쉽게 읽음!

💡 JSON의 장점

✓ 사람이 읽기 쉬움: 구조가 명확하고 직관적
✓ 프로그램이 처리하기 쉬움: 모든 프로그래밍 언어 지원
✓ 수정이 간편: 메모장으로 열어서 문제만 추가/수정 가능
✓ 재사용 가능: 다른 앱에서도 같은 데이터 사용 가능

💻 실습: 단계별 진행

STEP 1프로젝트 설정 & JSON 파일 만들기 (5분)

📁 폴더 구조

bible-quiz/
├── index.html
└── quiz.json

🤖 첫 번째 프롬프트 (quiz.json 파일 생성)

Cursor에서 Cmd/Ctrl + N으로 새 파일 생성 → 저장할 때 quiz.json으로 이름 지정

성경 퀴즈 문제 10개를 JSON 형식으로 만들어주세요. 각 문제는 question(질문), options(4개 보기 배열), answer(정답 인덱스 0-3), explanation(해설) 필드를 가져야 합니다. 구약과 신약을 골고루 섞어주세요. 난이도는 안식일학교 청소년부 수준으로 해주세요.

📋 생성될 JSON 예시

[
  {
    "question": "다윗은 골리앗과 싸울 때 무엇을 사용했나요?",
    "options": ["활과 화살", "돌멩이와 물매", "칼과 방패", "창"],
    "answer": 1,
    "explanation": "사무엘상 17장: 다윗은 물매와 돌멩이 하나로 골리앗을 쓰러뜨렸습니다."
  },
  {
    "question": "노아의 방주에 각 동물은 몇 쌍씩 들어갔나요?",
    "options": ["1쌍", "2쌍", "7쌍", "10쌍"],
    "answer": 1,
    "explanation": "창세기 7장: 정결한 짐승은 7쌍, 부정한 짐승은 한 쌍씩 들어갔습니다."
  }
]

STEP 2HTML 퀴즈 화면 만들기 (5분)

🤖 두 번째 프롬프트 (index.html 생성)

성경 퀴즈 앱의 HTML을 만들어주세요. 상단에 "성경 퀴즈 대회" 제목과 현재 점수를 표시하는 영역을 만들어주세요. 퀴즈 문제를 보여줄 카드 영역을 만들어주세요. 4개의 선택지 버튼을 만들어주세요. 하단에 "다음 문제" 버튼과 "결과 보기" 버튼을 만들어주세요. 깔끔한 CSS 스타일도 함께 작성해주세요.

🎨 화면 구성 예시

📖 성경 퀴즈 대회

점수: 0 / 10

문제 1.

다윗은 골리앗과 싸울 때 무엇을 사용했나요?

STEP 3JSON 파일 불러오기 (5분)

🤖 세 번째 프롬프트

quiz.json 파일을 fetch API로 불러오는 JavaScript 코드를 작성해주세요. 불러온 데이터를 quizData 변수에 저장해주세요. 페이지가 로드되면 자동으로 첫 번째 문제를 화면에 표시해주세요. 에러 처리도 포함해주세요 (파일을 못 불러올 경우).

🔍 Fetch API 동작 원리

1단계: fetch('quiz.json') → 파일 요청

2단계: .then(res => res.json()) → JSON으로 변환

3단계: .then(data => ...) → 데이터 사용

💡 비유: 도서관에서 책을 빌리는 것과 비슷합니다.

⚠️ 주의사항: CORS 에러

로컬에서 HTML 파일을 직접 열면 CORS 에러가 발생할 수 있습니다.

해결 방법:

Cursor에서 Live Server 확장 설치
또는 Python 간단 서버: python -m http.server 8000
또는 Node.js: npx serve

STEP 4정답 체크 로직 구현하기 (8분)

🤖 네 번째 프롬프트

사용자가 선택지를 클릭하면: 1. 정답인지 확인해주세요 2. 정답이면 버튼을 초록색으로, 오답이면 빨간색으로 표시해주세요 3. 정답인 경우 점수를 1점 증가시켜주세요 4. 해설을 화면에 표시해주세요 5. 모든 버튼을 비활성화해서 중복 클릭을 방지해주세요 6. "다음 문제" 버튼을 활성화해주세요

📊 상태 관리 변수

let currentQuestion = 0;  // 현재 문제 번호 (0부터 시작)
let score = 0;             // 현재 점수
let quizData = [];         // 불러온 문제 배열
let answered = false;      // 답변 여부 (중복 클릭 방지)

🎯 시각적 피드백

✅ 정답 버튼: 초록색 배경
❌ 오답 버튼: 빨간색 배경
📝 해설 표시: "💡 {explanation}"
🎉 정답 시 효과음이나 애니메이션 추가 (선택사항)

STEP 5다음 문제 & 결과 화면 (7분)

🤖 다섯 번째 프롬프트

"다음 문제" 버튼을 클릭하면: 1. 다음 문제를 화면에 표시해주세요 2. 모든 버튼의 색상을 초기화해주세요 3. 문제 번호를 업데이트해주세요 4. 마지막 문제인 경우 "결과 보기" 버튼을 표시해주세요

"결과 보기" 버튼을 클릭하면: 1. 최종 점수를 큰 글씨로 표시해주세요 2. 정답률을 퍼센트로 계산해서 보여주세요 3. 90점 이상이면 "🏆 우수", 70점 이상이면 "👍 합격", 그 외는 "💪 다시 도전" 메시지를 표시해주세요 4. "다시 시작" 버튼을 만들어주세요

🎨 결과 화면 디자인

🏆

퀴즈 완료!

8 / 10

정답률: 80%

👍 합격

성경 지식이 훌륭합니다!

🚀 확장 아이디어 (도전!)

⏱️ 타이머 추가

각 문제마다 제한 시간 설정 (예: 15초)

🏅 리더보드

localStorage에 최고 점수 저장 및 표시

📊 난이도 선택

초급/중급/고급 문제 세트 분리

🎲 랜덤 모드

문제 순서 섞기, 보기 순서 섞기

📱 카카오톡 공유

"내 점수는 OO점! 너도 도전해봐!" 공유 기능

📈 통계

어떤 문제를 많이 틀리는지 분석

✏️ JSON 문제 은행 수정하는 법

누구나 쉽게 문제를 추가/수정할 수 있습니다!

1. quiz.json 파일을 메모장으로 열기

2. 아래 템플릿 복사해서 붙여넣기:

,
{
  "question": "여기에 새 문제 입력",
  "options": [
    "보기 1",
    "보기 2",
    "보기 3",
    "보기 4"
  ],
  "answer": 0,
  "explanation": "정답 해설"
}

💡 answer는 0부터 시작 (0=첫번째 보기, 1=두번째 보기...)

⚠️ 주의사항

• 쌍따옴표(") 사용 필수 (작은따옴표 X)
• 마지막 항목에는 쉼표(,) 붙이지 않기
• 중괄호 { } 개수 맞추기
• 저장 후 브라우저 새로고침

💎 이 실습에서 배운 프롬프팅 원칙

1. 데이터 구조 명시하기

"JSON으로 만들어줘" (X)
→ "question, options, answer, explanation 필드를 가진 JSON" (O)

2. 조건부 로직 설명

"정답이면 ~하고, 오답이면 ~해줘"
→ if-else 로직을 자연어로

3. 시각적 요소 구체화

"색깔 바꿔줘" (X)
→ "정답은 초록색, 오답은 빨간색" (O)

4. 에러 처리 요청

"에러 처리도 포함해주세요"
→ 더 안정적인 코드 생성

✅ 완성 체크리스트

JSON 파일에서 문제를 정상적으로 불러오나요?문제와 4개 보기가 화면에 표시되나요?정답 클릭 시 초록색, 오답 클릭 시 빨간색이 되나요?점수가 정확히 계산되나요?해설이 표시되나요?다음 문제로 넘어가나요?마지막 문제 후 결과 화면이 나타나나요?다시 시작 버튼이 작동하나요?

👨‍🏫 강사 노트

⏰ 시간 관리: JSON 개념 설명(5분), 실습(20분), 확장 아이디어 소개(5분)

🔧 CORS 문제 대비: 미리 Live Server 설치 안내하거나, Python/Node.js 간단 서버 실행법 준비

💡 JSON 개념: 엑셀 시트에 비유하면 이해하기 쉬움. "칸마다 이름표가 붙은 표"

🎯 핵심 메시지: "여러분이 만든 문제를 JSON에 추가하면 바로 퀴즈가 됩니다. 프로그래머 없이!"

📸 실전 활용: 안식일학교 교사들이 매주 새로운 문제 세트를 만들 수 있음을 강조

🏠 과제: 자기 교회 안교 공과에 맞는 문제 10개 만들어오기