타임라인 순서 맞추기 교구 무료 HTML | 역사·과학·문학사 드래그 정렬 게임 + 프롬프트
📌 이 글 요약
- 드래그로 사건을 순서대로 정렬하는 타임라인 교구 HTML 무료 제공
- 역사·과학·문학사 등 "순서 맞추기" 활동이 필요한 모든 과목에 활용
- 제작 프롬프트 + 이미지 삽입법 공개
🎮 바로 써보기 + 다운로드
"순서대로 나열하시오" — 종이에서 하면 재미없잖아요
역사 수업에서 "다음 사건을 시간 순서대로 나열하시오" 많이 내시죠? 근데 종이에 번호 쓰는 거, 학생들은 진짜 재미없어합니다. 채점도 귀찮고요.
그래서 드래그로 카드를 끌어서 정렬하는 게임형 교구를 만들었습니다. 카드를 잡아서 위아래로 움직이면 순서가 바뀌고, "채점하기" 누르면 맞은 것은 초록색, 틀린 것은 빨간색으로 정답 위치를 보여줍니다.
📋 과목별 활용 예시
역사/사회 — 한국사 주요 사건
강화도 조약(1876) → 갑신정변(1884) → 동학 농민 운동(1894) → 을사조약(1905) → 3·1 운동(1919) → 광복(1945) → 6·25 전쟁(1950) → 6월 민주항쟁(1987)
과학 — 과학사 발견 순서
지동설(코페르니쿠스) → 만유인력(뉴턴) → 진화론(다윈) → 상대성이론(아인슈타인) → DNA 구조(왓슨·크릭) → 인터넷 발명
국어 — 한국 문학사 흐름
향가 → 고려가요 → 시조 → 가사 → 신소설 → 현대소설
영어 — 역사적 사건 (영문)
Magna Carta(1215) → Columbus arrives(1492) → French Revolution(1789) → WWI(1914) → Moon Landing(1969)
수학 — 수학 개념 발전사
자연수 → 정수 → 유리수 → 무리수 → 복소수 → 행렬 → 미적분
🔧 제작 프롬프트
// Claude 프롬프트
타임라인 순서 맞추기 게임을 HTML 단일 파일로 만들어줘.
과목: 【한국사】
내용: 【근현대사 주요 사건 8개를 시간순으로 정렬】
카드 수: 【8개 이벤트】
기능:
- 8개 카드가 랜덤 순서로 표시됨
- 드래그(터치 포함)로 카드를 위아래로 이동하여 순서 변경
- "채점하기" 버튼 클릭 시 정답 확인
- 맞은 위치: 초록색 / 틀린 위치: 빨간색 + 정답 위치 화살표 표시
- 정답 시 연도(year) 공개
- 점수: 8개 중 맞은 개수 표시
- "다시 도전" 버튼
- 모바일 반응형, 세로형 레이아웃, 한국어 UI
데이터:
const events = [
{event: "3·1 운동", year: 1919, detail: "일제강점기 최대 독립운동"},
// 올바른 시간순으로 입력 (코드가 자동으로 섞어서 표시)
];
🖼️ 이미지 넣기 (사건 사진/초상화)
각 카드에 관련 이미지를 넣으면 시각적으로 훨씬 효과적입니다:
역사 사진, 과학자 초상화, 문학 작품 표지 등을 넣으면 학생들이 시각적 단서로도 연결할 수 있어서 학습 효과가 올라갑니다.
💡 커스터마이징
- 이벤트 수: events 배열에 추가하면 자동 반영 (5~12개 추천)
- 힌트 모드: 프롬프트에 "첫 번째와 마지막 카드는 고정(힌트)" 추가
- 연도 숨기기: detail만 표시하고 year는 채점 후 공개하는 구조
- 난이도 조절: 비슷한 시기 사건끼리 섞으면 어려워짐
대화 참여하기