빈칸 채우기 자동 생성 교구 무료 HTML | 교과서 텍스트 넣으면 문제 자동 추출 + 프롬프트
📌 이 글 요약
- 교과서 텍스트를 넣으면 빈칸 문제가 자동 생성되는 HTML 교구
- 핵심 키워드를 자동 감지해서 빈칸으로 변환 — 전과목 즉시 적용
- 학생이 직접 타이핑해서 답하는 인터랙티브 형성평가 도구
🎮 바로 써보기 + 다운로드
교과서 복붙하면 빈칸 문제가 됩니다
시험 전에 "빈칸 채우기" 학습지 만들어본 적 있으시죠? 교과서에서 핵심 단어를 골라서 하나하나 지우고 번호 붙이고... 10문항 만드는 데 30분은 걸립니다.
이 교구는 다릅니다. 텍스트를 넣고 핵심 단어를 지정하면 자동으로 빈칸 문제가 생성됩니다. 학생은 빈칸에 직접 타이핑하고, "채점" 누르면 정답 확인. 채점도 자동입니다.
📋 과목별 활용 예시
국어 — 문법 용어 빈칸
"주어와 서술어의 관계가 한 번만 나타나는 문장을 [______]이라 하고, 두 번 이상 나타나는 문장을 [______]이라 한다."
→ 정답: 홑문장, 겹문장
영어 — 핵심 표현 빈칸
"If I [______] rich, I [______] travel around the world."
→ 정답: were, would
수학 — 정의/공식 빈칸
"이차방정식의 근의 공식은 x = (-b ± √(b²-[______])) / [______] 이다."
→ 정답: 4ac, 2a
사회 — 핵심 개념 빈칸
"[______]적 관점은 시간의 흐름에 따른 변화를 살펴보는 것이고, [______]적 관점은 장소와 환경의 영향을 분석하는 것이다."
→ 정답: 시간, 공간
과학 — 원리 빈칸
"광합성은 [______]와 [______]를 이용하여 포도당과 산소를 만드는 과정이다."
→ 정답: 빛에너지(또는 빛), 이산화탄소
🔧 제작 프롬프트
// Claude 프롬프트
빈칸 채우기 인터랙티브 교구를 HTML 단일 파일로 만들어줘.
과목: 【통합사회】
단원: 【1단원 통합적 관점】
문항 수: 【10문항】
기능:
- 문장 속 빈칸(___)에 학생이 직접 입력
- input 태그로 빈칸 표시 (밑줄 스타일)
- "채점하기" 버튼 → 정답: 초록 / 오답: 빨강 + 정답 표시
- 점수 합계 표시
- 대소문자 구분 없음, 공백 무시
- "다시 풀기" 버튼
- 모바일 반응형, 한국어 UI
데이터:
const questions = [
{text: "___적 관점은 시간의 흐름에 따른 변화를 분석한다.", answer: "시간"},
{text: "통합적 관점은 시간적, 공간적, ___적, 윤리적 관점을 포함한다.", answer: "사회"},
];
💡 고급 팁: 복수 정답 처리
학생이 "빛에너지"라고 써도, "빛"이라고 써도 맞는 경우:
프롬프트에 "answer를 배열로 처리해서 복수 정답 허용" 추가하면 됩니다.
🖼️ 이미지 문항 만들기
그래프나 그림을 보고 빈칸을 채우는 문항도 가능:
💡 커스터마이징
- 힌트 추가: 각 문항에 hint 필드 추가 → 버튼 클릭 시 첫 글자 공개
- 시간제한: 프롬프트에 "전체 5분 타이머" 추가
- 난이도 표시: 각 문항에 ★ 표시로 난이도 구분
- 순서 랜덤: 매번 다른 순서로 출제
대화 참여하기