🐿️ 일차함수 탐험대
중학교 2학년 '일차함수와 그 그래프' 단원을 5단계(단계별 10문제, 총 50문제)로 학습하는 인터랙티브 웹 앱입니다.
빌드 과정 없이 HTML/CSS/Vanilla JS로 동작하며, 로그인이나 서버 없이 브라우저만 있으면 바로 사용할 수 있습니다.
📁 파일 구조
function1/
├── index.html # 화면 골격
├── css/style.css # 파스텔톤 반응형 스타일
├── js/
│ ├── config.js # ⚙️ 보상 규칙 설정 (도토리→도장 개수, 시도 횟수)
│ ├── data.js # 단계별 개념 설명 · 문제 · 해설
│ ├── graph.js # Canvas 좌표평면 (점 찍기 / 드래그 / 직선 그리기)
│ ├── labs.js # 🧪 단계별 실험실 (슬라이더·드래그로 개념 관찰)
│ ├── cards.js # 🃏 카드 뒤집기 퀴즈 (절편·기울기·함수식)
│ ├── effects.js # 효과음, 토스트, 모달, 도토리 애니메이션, 폭죽
│ └── app.js # 단계 진행 · 보상 · 기록 초기화 로직
▶️ 실행 방법
수식 렌더링(KaTeX)과 글꼴은 CDN에서 불러오므로 인터넷 연결이 필요합니다.
⚙️ 설정
js/config.js에서 보상 규칙을 바꿀 수 있습니다.
window.APP_CONFIG = {
ACORNS_PER_STAMP: 10, // 도토리 몇 개가 모이면 칭찬도장 1개가 되는지
MAX_ATTEMPTS: 2, // 문제당 시도 횟수 (첫 시도 + 재도전 1번)
};
🎮 학습 구성과 규칙
| 단계 | 개념 설명 | 🧪 실험실 | 문제 |
|---|
| 1단계 절편 | 일차함수의 뜻, $x$절편·$y$절편 (그림 설명 포함) | a, b 슬라이더로 두 절편 관찰 | 10 (그래프 보고 절편 읽기, 좌표평면에 절편 찍기 포함) |
| 2단계 기울기 | 기울기, 두 점을 지나는 직선의 기울기, 증가량 | x 증가량을 바꿔도 일정한 기울기 삼각형 | 10 |
| 3단계 함수식 | 기울기+절편 / 기울기+한 점 / 두 점 / 두 절편 | 두 점을 드래그하면 식이 만들어지는 과정 | 10 |
| 4단계 그래프 | 평행이동, 그래프 그리는 두 방법, a·b 부호와 모양 | y = ax 의 평행이동 | 10 (그래프 그리기 미션 6개) |
| 5단계 복합 문제 | 총정리 + 복합 문제 해결 전략 | 그래프와 두 축으로 둘러싸인 삼각형 넓이 | 10 |
- 앱을 열면 로그인 없이 바로 1단계부터 시작
- 학습 기록은 브라우저 메모리에만 보관 — 새로고침하거나 상단의 🔄 기록 초기화 버튼을 누르면 진행 상황과 도토리 · 칭찬도장이 모두 초기화
- 단계는 잠금 없이 자유롭게 이동 (상단 단계 버튼 또는 화면 아래 이전/다음 단계 버튼)
- 문제 규칙
- 첫 번째 시도에 맞히면 도토리 🌰 +1
- 틀리면 💡 힌트가 나오고 재도전 기회 1번 (♥ 표시) — 재도전에서 맞히면 도토리는 없음
- 재도전도 틀리면 정답 + 해설 팝업
- 🃏 카드 뒤집기 퀴즈 (1단계: 그래프 보고 절편, 2단계: 기울기, 3단계: 알맞은 함수식 고르기, 각 4장) — 고르면 카드가 뒤집히며 정답·해설 공개, 맞히면 도토리 +1 (카드마다 한 번)
- 도토리 10개 → 칭찬도장 1개로 자동 변환
- 그래프 미션 정답 시 폭죽, 5개 단계를 모두 마치면 최종 결과 화면
✏️ 문제 수정하기
js/data.js에서 문제를 추가·수정할 수 있습니다.
{ id: 'q1-11', type: 'short', short: '목록에 보일 제목',
text: R`$y = 3x + 6$의 $x$절편은?`, answer: -2, answerText: R`$-2$`,
hint: R`$y = 0$을 대입해 보세요.`, // 첫 시도 오답 시 보여줄 힌트
explain: R`$0 = 3x + 6$ → $x = -2$` } // 최종 해설
type
mc 객관식 (options, answer 인덱스)short 단답 (answer, unit 선택 — 분수 1/2 입력 허용)ab 일차함수 식의 a, bmulti 여러 칸 입력 (fields: [{ label, answer }])graph 좌표평면에 두 점 찍기 (a, b, points, method). strict: true면 points의 두 점을 정확히 찍어야 정답 (예: 절편 찍기)
figure: { a, b }를 넣으면 문제 위에 해당 직선이 그려진 좌표평면이 표시됩니다 (그래프 보고 답하기 문제).id는 겹치지 않게 지정하세요.
