BML 교통 실험실

중1 주제선택 'BML 교통모형' 2차시 수업용 웹 앱입니다. 빌드 과정 없이 HTML·CSS·JS 파일만으로 돌아갑니다.

• 학생 화면: index.html — 반과 학번으로 들어가, 선생님이 열면 무작위 실험(앱이 정한 차 수로 아무렇게나 놓기 → 고정·반복 예상 → 판정)을 함. 결과는 차 수마다 고정이 얼마나 나왔는지 보여 주는 우리 반 그래프로 모임
• 교사 화면: teacher.html — 대시보드(반 목록, 무작위 실험 열기·새로 시작, 모인 실험 수·예상 적중률·가장 맞히기 어려운 차 수, 차 수별 고정 비율 막대그래프, 예상왕, 학생별 기록, 다시 보기, 실험 모아 보기)와 시연 탭
  • 규칙 익히기: 규칙 ④ 예제, '① ○× 표시하기 → ② ○ 차만 한꺼번에 옮기기' 두 단계 진행, 3×3·4×4·5×5 라운드 기록과 반복 찾기, 차가 한 칸씩 미끄러져 가는 움직임
  • 큰 판 실험실: 우리 반 5×5 무작위 실험 결과에서 출발해 '판 키우기'로 16·32·64칸 판의 결과(미리 계산)를 겹쳐 보기, 판을 직접 돌려 보기
  • 그래프는 '크게 보기'로 화면 가득 띄울 수 있음
• 수업 슬라이드: slides.html — 1·2차시 21장. 규칙·예제·라운드 기록·판정 기준·표지의 판 그림에서 차가 실제로 한 칸씩 움직임(판 끝을 넘는 차는 반대쪽에서 들어옴, 막힌 차는 멈칫). → / Space / PageDown 다음, ← 이전, F 전체 화면, N 발표자 메모, R 움직임 처음부터. 주소 끝에 #part2처럼 장 이름을 붙이면 그 장부터 열림
• 데이터: Firebase 프로젝트 bml-traffic-2026의 Cloud Firestore

처음 한 번만 할 일

1. Firestore 데이터베이스 만들기

1. Firebase 콘솔에서 bml-traffic-2026 프로젝트를 엽니다.
2. Firestore Database → 데이터베이스 만들기를 누릅니다.
3. 위치는 asia-northeast3 (서울), 모드는 프로덕션 모드를 고릅니다.
4. 규칙 탭에 이 저장소의 firestore.rules 내용을 그대로 붙여 넣고 게시합니다.

Firebase CLI를 쓰신다면 저장소 폴더에서 firebase deploy --only firestore:rules로 규칙을 올려도 됩니다. 데이터베이스는 먼저 콘솔에서 만들어야 합니다.

2. Vercel에 올리기

1. Vercel에서 Add New → Project → Import로 이 저장소를 고릅니다.
2. Framework Preset은 Other, 빌드 명령과 출력 폴더는 비워 둡니다.
3. Deploy를 누르면 끝입니다. 이후에는 GitHub에 올릴 때마다 자동으로 다시 배포됩니다.

• 학생 주소: https://<프로젝트 이름>.vercel.app/
• 교사 주소: https://<프로젝트 이름>.vercel.app/teacher

3. 반 만들기

교사 대시보드의 반 목록에서 반을 추가하면 학생 화면의 반 고르기에 나타납니다.

수업 중 쓰는 법

• 무작위 실험 열기: 대시보드에서 '학생 화면에서 실험 열기'를 켜면 학생 화면의 무작위 실험이 열립니다. 차 수(10~22대)는 학생마다 일곱 가지를 한 바퀴에 한 번씩, 바퀴마다 순서를 섞어 정해집니다(학번으로 정해지는 순서). 학생은 고정·반복을 예상하고, 연속으로 맞힌 최고 기록이 점수입니다(틀리면 연속은 0부터 다시 세지만 최고 기록은 남음). 결과는 mode: "density"로 저장되고, 예상은 densityCars에 함께 적습니다(100+차 수 = 고정 예상, 200+차 수 = 반복 예상). 대시보드에는 차 수별 고정 비율 막대그래프, 차 수별 예상 적중, 예상왕 순위(최고 연속 기록 순, 같으면 적중률 순)가 나옵니다. '컴퓨터 4000번 결과 겹쳐 보기'로 비교할 수 있습니다.
• 새로 시작: 반마다 실험을 새로 시작합니다(수업 전 시험 기록 치우기). 실험은 지워지지 않고 그래프와 점수에서만 빠집니다. "'새로 시작' 이전도 보기"를 켜면 다시 볼 수 있습니다.
• 숨기기: 장난 실험은 '다시 보기'에서 숨길 수 있습니다. 제출 자체를 지우지는 않습니다.
• 확인 필요: 대시보드는 모든 실험을 다시 계산해 학생 화면의 판정과 맞는지 확인합니다. 맞지 않는 실험은 그래프와 점수에서 빠집니다.
• 예전 5×5 기록 도전으로 저장된 제출(mode: "challenge")은 대시보드에서 쓰지 않습니다.

데이터와 보안

• 저장하는 정보: 반 이름, 학번(다섯 자리), 배치, 판정 결과, 제출 시각. 이름은 받지 않습니다.
• 학생은 로그인 없이 쓰므로, 주소를 아는 사람은 제출 기록을 읽을 수 있습니다. firestore.rules는 저장되는 값의 모양을 엄격하게 검사하고, 제출을 지우거나 고치는 것을 막습니다(숨김 표시만 바꿀 수 있음).
• js/firebase-config.js의 값은 웹 앱에 원래 공개되는 값입니다.

파일

파일	하는 일
js/core.js	BML 규칙 계산, 고정·반복 판정, 무작위 실험의 차 수·예상, 수업용 배치
js/sim-ui.js	판을 한 차례씩 돌리고 라운드 기록을 쌓는 화면 조각
js/app.js	학생 화면 (들어가기, 무작위 실험)
js/teacher.js	교사 대시보드
js/demo.js	교사 화면의 시연 탭 (규칙 익히기, 큰 판 실험실, 탭 전환)
js/zoom.js	그래프 크게 보기
js/slides.js, js/slide-board.js, css/slides.css	수업 슬라이드 넘기기, 슬라이드 속 움직이는 판
js/lab.js	큰 판 실험실 (판 키우기, 미리 계산한 곡선)
js/shared.js	대시보드의 무작위 실험 결과를 큰 판 실험실에 넘겨 줌
js/store.js	Firestore 읽기·쓰기
firestore.rules	데이터베이스 규칙