OX퀴즈 배틀 게임 무료 HTML 교구 | 과목별 예시 5종 + AI 제작 프롬프트 공개
📌 이 글 요약
- 학생이 폰으로 바로 푸는 OX퀴즈 HTML 교구 무료 제공
- 국어·영어·수학·사회·과학 과목별 예시 문항 5종 포함
- 이 교구를 만든 Claude 프롬프트 전문 공개 — 단원만 바꿔서 무한 복제 가능
🎮 바로 써보기 + 다운로드
📥 [HTML 파일 다운로드 — 구글 드라이브] (수정해서 바로 사용 가능)
왜 이걸 만들었냐면
수업에서 OX퀴즈를 자주 하는데요, 매번 "손 들어~!" 하면 정확한 집계가 안 되더라고요. 누가 맞았는지도 애매하고, 뒷줄 학생들은 앞사람 따라하고. 그래서 학생 각자 폰으로 풀고, 점수까지 자동으로 나오는 HTML 교구를 만들었습니다.
한 번 만들어두면 문항만 바꿔서 매 수업 재활용할 수 있어요. 10문항 기준 5분이면 끝나니까 수업 도입이나 마무리에 딱 좋습니다.
📋 과목별 활용 예시
이 교구는 문항 데이터만 바꾸면 어떤 과목이든 적용됩니다. 예시를 보여드릴게요:
국어 — 맞춤법/문법 OX
- "'왠지'는 '왜인지'의 줄임말이다." → O
- "'안'과 '않'은 같은 의미이다." → X
영어 — 문법 True/False
- "'I have been to' is used for past experiences." → O
- "We use 'much' with countable nouns." → X
수학 — 참/거짓 명제
- "모든 정사각형은 직사각형이다." → O
- "두 대각선이 같으면 반드시 정사각형이다." → X
사회 — 개념 확인
- "통합적 관점은 시간적·공간적·사회적·윤리적 관점을 모두 포함한다." → O
- "시간적 관점은 현재만을 분석하는 관점이다." → X
과학 — 원소/화합물 구분
- "물(H₂O)은 화합물이다." → O
- "공기는 순물질이다." → X
🔧 이 교구 만든 방법 — Claude 프롬프트
아래 프롬프트를 Claude에 복사해서 붙여넣으세요. 【 】 안의 내용만 바꾸면 어떤 과목, 어떤 단원이든 새 OX퀴즈가 나옵니다.
// Claude에 입력할 프롬프트
다음 조건으로 OX퀴즈 웹 교구를 HTML 단일 파일로 만들어줘.
과목: 【통합사회】
단원: 【1단원 - 통합적 관점의 이해】
문항 수: 【10문항】
난이도: 【중 (교과서 핵심 개념 확인 수준)】
기능 요구사항:
- 문항당 15초 타이머
- O/X 큰 버튼 (모바일 터치 가능)
- 정답 즉시 피드백 (정답/오답 표시)
- 진행도 바 + 점수 카운터
- 결과 화면에 점수 + 등급 표시
- 모바일 반응형, 한국어 UI
- 폰트: Noto Sans KR (Google Fonts CDN)
- 문항 데이터를 배열로 분리해서 수정하기 쉽게
- 코드 내에 "여기에 문항을 수정하세요" 주석 표시
출력: HTML 단일 파일 (외부 라이브러리 없이, 바로 브라우저에서 열면 작동)
💡 꿀팁: 프롬프트 변형 패턴
- 난이도 올리기: "심화 — 교과서 외 시사 연계 문항 포함"
- 난이도 내리기: "기초 — 교과서 본문 그대로 확인하는 수준"
- 문항 늘리기: "20문항, 타이머 10초"로 변경
- 이미지 추가: "일부 문항에 이미지를 포함할 수 있는 구조로"
🖼️ 이미지 넣고 싶다면
문항에 그림·사진을 추가하고 싶으면, 코드에서 문항 배열을 이렇게 수정하세요:
{q: "다음 그래프가 나타내는 개념은?", a: true, img: "https://drive.google.com/uc?id=파일ID"}
이미지 URL 얻는 법:
- 구글 드라이브에 PNG 업로드
- 공유 → "링크가 있는 모든 사용자" 설정
- 링크에서 ID 복사 →
https://drive.google.com/uc?id=여기에ID
💡 커스터마이징 가이드
| 바꾸고 싶은 것 | 코드에서 수정할 곳 |
|---|---|
| 문항 내용 | questions 배열의 q와 a 값 |
| 타이머 시간 | timeLeft = 15 → 원하는 초 |
| 색상 변경 | CSS의 #4A90D9를 원하는 색상코드로 |
| 문항 수 | 배열에 객체를 추가하면 자동 반영 |
| 효과음 추가 | 프롬프트에 "정답/오답 효과음 포함" 추가 요청 |
대화 참여하기