아침 10분이 학급 화폐의 무대가 된다 — 1일 1퀴즈 & 레벨업 대시보드 완전 정복

🪙 아침 자치 시간, 매일 교과·상식 퀴즈 3문제 — 맞힌 모둠에 경험치(EXP, Experience Points)가 쌓이고, 경험치가 임계치를 넘으면 학급 화폐가 지급되며 칭찬 레벨이 올라갑니다. 전자칠판 랭킹 보드가 아침 참여의 무대입니다.

문제은행은 자치 임원이 매주 갱신하는 상수(심기 모드), 레벨·화폐 기록은 세션 메모리 + 퇴근 전 CSV 갱신 루틴. 학급 화폐는 실물 쿠폰에 담아 지급 — 단일 HTML·외부 통신 0으로 완결됩니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
아침 리듬	8:50 자치 시간 — 초성·OX·4지선다 3문항을 모둠 대표 지명으로, 10분 타이머와 함께. 매일 하루를 여는 고정 루틴.	10분 타이머 + 3문항.
경험치 → 화폐 → 레벨	맞힐 때마다 경험치(EXP) 누적 — 임계치 상수(레벨1=50, 2=120...)를 넘으면 학급 화폐 지급 연출과 레벨업 팡파르가 터집니다.	LEVELS 상수 임계치.
랭킹 보드	모둠 경험치 순위를 큰 글씨로 — 전자칠판이 아침의 무대가 됩니다. 순위는 경험치 기준 공정 정렬.	rank 정렬 함수.
문제은행 갱신	자치 임원이 주간 어휘·상식 15문항을 1분에 심기 — 갱신 루틴이 곧 학급자치 업무입니다.	EMBED_QUIZ 상수 교체.
원칙·정합	실명 저장 금지(번호·닉네임), 화폐 지급 기록은 세션 메모리 + CSV 내보내기(로컬 장부 — 교사 관리), 외부 통신 0.	EMBED_QUIZ + CSV 루틴.

2. 핵심 아키텍처 해설

① 문제은행 (임원 갱신 → 심기)

const QUIZ = [
  { kind: "ox", q: "레몬은 산성 식품이다", a: true, why: "신맛의 원인은 구연산" },
  { kind: "pick", q: "물의 화학식은?", a: ["H2O", "CO2", "O2", "N2"], c: 0, why: "수소 2 + 산소 1" }
];

② 경험치·레벨 판정

const LEVELS = [50, 120, 200, 300];

function checkLevel(exp) {
  let level = 1;
  for (let i = 0; i < LEVELS.length; i++) {
    if (exp >= LEVELS[i]) level = i + 2;
  }
  return level;
}

③ 화폐 지급 연출

function grantCoin(group, exp) {
  EXP[group] += exp;
  if (checkLevel(EXP[group]) > prevLevel) {
    coins[group] += 5;
    sound("fanfare");   // 레벨업 팡파르
  }
}

경험치가 임계치를 넘는 순간 화폐 지급 + 팡파르가 한 번만 터지도록 이전 레벨과 비교 — 연출의 격식이 동기부여의 힘입니다.

④ 랭킹 보드

const rank = EXP.map(function (e, i) {
  return { i: i, e: e };
}).sort(function (a, b) { return b.e - a.e; });

⑤ 원칙·정합

표기는 모둠 번호·닉네임(실명 금지), 기록은 세션 메모리 → 퇴근 전 CSV 내보내기로 보존(로컬 장부). 문제은행·기록 모두 외부 통신 없이 완결됩니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
역질문 답변 — Gemini의 질문 3가지(문항 유형, 화폐 단위, 레벨 임계치)에 답하면 설계가 확정됩니다.
HTML 파일 실행 — 완성 코드를 '아침퀴즈.html'로 저장 후 더블클릭 — 전자칠판에 띄우면 아침 10분이 시작됩니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 정답 '똑', 오답 '삑', 레벨업 '팡파르', 시작 '시작음'. 오디오 파일·CDN 금지.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 버튼 최소 44px, 360px 가로 스크롤 금지.
4. 파일 상단 QUIZ 상수에 문제은행을 심는다: kind(ox/pick), q, a, c, why. 외부 퀴즈 API 금지.
5. 레벨 임계치는 LEVELS 상수로 관리: 누적 경험치(EXP)가 임계치를 넘으면 학급 화폐 지급 연출 + 팡파르가 한 번만 터지도록 이전 레벨과 비교.
6. 랭킹 보드: 모둠 경험치 순위를 큰 글씨로 정렬 표시 — 표기는 번호·닉네임만(실명 저장 금지).
7. 'CSV 내보내기' 버튼으로 경험치·화폐 기록을 로컬 파일 저장(교사 장부 — 자동 외부 전송 없음).
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 문항 유형 구성은? (초성·OX·4지선다 혼합 기본)
Q2. 학급 화폐 단위와 지급액은? (예: 코인 5개/레벨업)
Q3. 레벨 임계치는? (50·120·200·300 기본)

🎯 에디터 한줄평

아침 자치 시간의 '흩어지는 10분'이 3문항의 리듬으로 바뀝니다 — 화폐와 레벨은 관심의 순환 구조라는 뜻입니다. 임원이 문제은행을 심는 그 1분이 곧 학급자치의 주인장입니다. 팡파르가 하루 한 번만 터지도록 제어하는 설계에서 연출의 격식이 보입니다.

📚 기술·교육 참고 링크

MDN — Array sort : 랭킹 보드 정렬
교육과정 연계: 창의적 체험활동(학급자치), 교과·상식 어휘 단원과 함께 확장

인문학과 바이브 코딩의 만남

2026년 9월 6일 일요일

[학급 경영] 1일 1퀴즈 & 학급 화폐 레벨업 - 아침 10분 자치 루틴