빈칸 채우기 자동 생성 교구 무료 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: "사회"},

];

💡 고급 팁: 복수 정답 처리

학생이 "빛에너지"라고 써도, "빛"이라고 써도 맞는 경우:

{text: "광합성에는 ___가 필요하다.", answer: ["빛에너지", "빛", "광에너지"]}

프롬프트에 "answer를 배열로 처리해서 복수 정답 허용" 추가하면 됩니다.

🖼️ 이미지 문항 만들기

그래프나 그림을 보고 빈칸을 채우는 문항도 가능:

{text: "위 그래프에서 수요 곡선이 우하향하는 이유는 ___의 법칙 때문이다.", answer: "수요", img: "https://drive.google.com/uc?id=그래프ID"}

💡 커스터마이징

  • 힌트 추가: 각 문항에 hint 필드 추가 → 버튼 클릭 시 첫 글자 공개
  • 시간제한: 프롬프트에 "전체 5분 타이머" 추가
  • 난이도 표시: 각 문항에 ★ 표시로 난이도 구분
  • 순서 랜덤: 매번 다른 순서로 출제

🔗 관련 교구 더 보기

빈칸 채우기 자동 생성 무료 HTML 교구. 교과서 핵심 키워드를 빈칸으로 변환, 자동 채점. 전과목 형성평가 활용. AI 프롬프트 공개.
현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.