초등학생을 위한 수학 연습 게임 모음. index.html이 게임 목록이다.
| 게임 | 페이지 | 다루는 것 |
|---|---|---|
| 한국어 숫자 읽기 | numbers.html |
조(兆) 단위까지 숫자를 끊어 쓰고 한글로 읽기 |
| 각도 익히기 | angles.html |
초등 3~4학년 각도 — 각의 크기 비교부터 삼각형·사각형의 각까지 |
빌드 도구, 의존성, 인터넷 연결이 필요 없다. index.html을 브라우저로 열면 끝이다.
로컬 서버로 띄우려면:
python3 -m http.server 8123http://localhost:8123 접속. 단위 테스트는 http://localhost:8123/test.html에서
브라우저가 직접 실행하고 결과를 보여 준다 (현재 190/190 PASS — 숫자 116, 각도 74).
각도 쪽은 Node 로도 돈다: node js/angle.test.js
숫자를 한국어로 읽는 연습 게임. 조(兆) 단위까지 다룬다.
한 문제에서 두 가지 표기를 모두 묻는다.
Q. 15000
A. 1만 5000 (네 자리마다 단위 넣어 숫자 읽기)
만오천 (한글로 읽기)
문제 숫자는 쉼표 없이 보여 준다. 영수증의 12,345,678은 세 자리씩 끊은 것이라
네 자리로 끊는 한국어 읽기와 어긋난다. 쉼표를 빼야 자릿수를 직접 세는 연습이 된다.
| 모드 | 하는 일 |
|---|---|
| 연습 | 시간 제한 없이 계속. 틀리면 규칙 설명이 붙는다 |
| 도전 60초 | 60초 안에 최대한 많이. 점수는 localStorage에 기록 |
| 거꾸로 | 한글 읽기를 보여 주고 숫자로 받아쓰기 |
| 단위 개수 | 만이 50개, 일이 3690개인 수를 보여 주고 숫자로 받아쓰기 |
거꾸로·단위 개수는 문제가 글로 나오므로 자리표가 곧 정답이다. 그래서 이 두 모드에서는 푸는 동안 자리표를 감추고 힌트 버튼도 잠근다. 정답을 공개할 때는 모든 모드에서 보여 준다.
Q. 만이 50개, 일이 3690개인 수
A. 503690
단위마다 개수를 곱해 더하는 연습이다. 뒤 단위를 네 자리로 채우는 것이 핵심이라
만이 50개, 일이 23개인 수는 50023이 아니라 500023이다. 개수가 0인 단위는 문제에서 빠진다.
10000 미만은 만 단위로 나눠 봐야 의미가 없어서 자리별로 낸다 —
1000이 3개, 100이 6개, 10이 9개인 수 → 3690. 이때 단위 이름은 한글이 아니라 숫자로 준다.
십이 9개는 12로 읽히기 쉽기 때문이다.
조사는 받침에 따라 갈린다. 만이·억이·일이와 달리 조는 조가 1개다.
처음에는 천 하나만 열려 있다. 한 단계에서 3연속 정답을 내면 다음 단계가 열린다.
한 번이라도 틀리면 연속이 0으로 돌아간다. 진행 상황은 localStorage에 남는다.
| 단계 | 범위 | 열리는 조건 |
|---|---|---|
| 천 | 100 ~ 9999 | 처음부터 열려 있음 |
| 만 | 10000 ~ 99999 | 천에서 3연속 |
| 십만~천만 | 100000 ~ 99999999 | 만에서 3연속 |
| 억 | 1억 ~ 9999억 | 십만~천만에서 3연속 |
| 조 | 1조 ~ 999조 | 억에서 3연속 |
| 혼합 | 위 전체에서 무작위 | 조에서 3연속 |
잠긴 단계는 🔒로 표시되고 누를 수 없다. 단계 설명 줄에 연속 2/3 → 「억」 해금처럼
남은 개수가 실시간으로 보인다. 연속은 모드와 무관하게 쌓이므로 거꾸로·단위 개수 모드로도 해금할 수 있다.
문제는 자릿수를 먼저 정하고 한 자리씩 뽑는다. 각 자리는 25% 확률로 0이 되므로
1억 2만 같은 "빈 자리 건너뛰기" 문제가 꾸준히 나온다.
- 네 자리마다 단위가 올라간다 —
만(10⁴)억(10⁸)조(10¹²) - 십·백·천 앞의 1은 읽지 않는다 —
110 → 백십 - 만 앞의 1도 읽지 않는다 —
10000 → 만 - 억·조 앞의 1은 읽는다 —
10⁸ → 일억,10¹² → 일조 - 값이 0인 자리는 건너뛴다 —
100020000 → 1억 2만 → 일억이만 - 한글로 적을 때는 만 단위로 띄어 쓴다 (「한글 띄어쓰기」 토글)
값만 맞으면 통과가 아니라, 표기까지 본다.
일만오천처럼 통용되는 변형은 정답 처리하고 표준형(만오천)을 함께 보여 준다.15000처럼 단위 없이 쓰면 "값은 맞아요. 만·억·조로 끊어서 써 보세요"로 안내한다.- 틀리면 자리표 + 자리별 분해표 + 해당 문제에 맞는 규칙 설명이 나온다.
점수는 10 + (단위 개수 - 1) × 6 + 연속 보너스(최대 10).
핵심은 js/korean-number.js 하나다. 게임과 완전히 분리돼 있고 내부 계산은 전부
BigInt라 조 단위에서도 정밀도가 깨지지 않는다.
KoreanNumber.toMixed(15000); // "1만 5000"
KoreanNumber.toHangul(15000); // "만오천"
KoreanNumber.toHangul(15000, { spaced: true }); // "만 오천"
KoreanNumber.toComma(15000); // "15,000" (게임 화면에서는 쓰지 않는다)
KoreanNumber.parseHangul('일만오천'); // 15000n
KoreanNumber.parseMixed('1만 5000'); // 15000n
KoreanNumber.explain(15000); // [{unit:'만', digits:'1', hangul:'만'}, ...]
KoreanNumber.unitCounts(503690); // [{label:'만', unitValue:10000n, count:50n},
// {label:'일', unitValue:1n, count:3690n}]
KoreanNumber.subjectParticle('만'); // '이' (조 -> '가')parseHangul은 만오천 / 일만오천 / 만 오천을 모두 같은 값으로 읽고,
만억처럼 단위 순서가 틀린 입력은 null을 돌려준다.
- 순우리말 수사 (하나·둘·셋, 스물다섯 살)
- 날짜·시간·돈·전화번호처럼 읽는 법이 갈리는 맥락
- 듣고 받아쓰기 (Web Speech API)
- 틀린 문제만 다시 내주는 복습 큐
초등 4학년 1학기 「각도」 단원의 순서를 따르고, 3학년의 직각도 함께 다룬다.
| 단계 | 하는 일 | 답하는 법 |
|---|---|---|
| 크기 비교 | 두 각 중 더 큰 각 고르기 | 가 · 나 · 크기가 같아요 |
| 예각·둔각 | 예각·직각·둔각 가리기 | 버튼 |
| 각도기 읽기 | 각도기를 댄 각의 크기 읽기 | 숫자 |
| 각 그리기 | 점을 끌어 주어진 크기만큼 벌리기 (2° 차이까지 정답) | 끌기 · ◀ ▶ · 화살표 키 |
| 어림하기 | 각도기 없이 짐작하기 (10° 차이까지 정답, 5° 안이면 「아주 잘」) | 숫자 |
| 합과 차 | 그림이나 식으로 각도를 더하고 빼기 | 숫자 |
| 삼각형·사각형 | 직선 180° · 삼각형 180° · 사각형 360°로 모르는 각 구하기 | 숫자 |
| 혼합 | 위 문제를 무작위로 |
모드(연습 · 도전 60초)와 단계 해금(한 단계에서 3연속 정답이면 다음 단계)은 숫자 읽기와 같다.
진행 상황은 localStorage의 angle-game/v1에 남는다. 고르기 문제는 숫자 키 1 2 3으로도 답한다.
- 변이 길면 큰 각이라는 착각. 크기 비교 문제의 약 65%는 작은 각에 긴 변을 준다. 긴 변 쪽을 고르면 그 착각을 짚고, 두 각을 한 변에 맞춰 겹친 그림을 보여 준다.
- 각도기의 반대쪽 눈금. 각도기 눈금은 두 줄이다 — 안쪽은 오른쪽 끝이 0, 바깥쪽은 왼쪽 끝이 0.
밑금에 맞춘 변이 어느 쪽을 향하는지 문제마다 바뀐다. 답이
180° − 정답이면 반대쪽 눈금을 읽었다고 알려 주고, 풀이에서 맞는 눈금 줄을 초록색으로 강조한다. - 어림에서 예각·둔각 혼동. 어림한 값과 실제 값이 90°를 사이에 두고 어긋나면 그것부터 짚는다.
알려진 직각은 숫자 대신 ㄴ 표시로만 그린다. 교과서 그림처럼 표시를 읽어 90°를 떠올려야 한다.
모든 그림은 적힌 각도 그대로 그린다. 삼각형은 사인법칙으로, 사각형은 두 변을 정한 뒤 도형이 닫히도록 나머지 두 변을 풀어서 만든다. 그림이 가장 크게 들어가는 변을 밑변으로 눕히고, 짧은 변 양 끝의 각도 글자가 겹치는 모양은 버리고 다시 만든다.
테스트는 시드를 고정한 난수로 수천 문제를 만들어 다음을 확인한다.
- 그려진 꼭짓점에서 내각을 다시 재면 적힌 각과 같다
- 풀이 식(
180° − 50° − 70° = 60°)을 계산하면 답과 같다 - 각도 글자가 선·호·다른 글자와 겹치지 않고 그림 밖으로 나가지 않는다
Angle.generate('shape', Angle.mulberry32(1)); // {kind:'shape', variant:'triangle', angles:[…], unknown, answer, points, heads}
Angle.grade(q, 145); // {correct, perfect, diff, reversed} reversed: 반대쪽 눈금을 읽은 답
Angle.parseDegrees('35도'); // {value: 35} '35°', '３５' 도 같다
Angle.equation(q); // '180° − 50° − 70° = 60°'- 삼각형을 각의 크기로 분류하기 (예각삼각형·직각삼각형·둔각삼각형, 4학년 2학기)
- 시계의 두 바늘이 이루는 각
- 한 바퀴(360°)와 180°보다 큰 각
index.html 게임 목록
numbers.html 한국어 숫자 읽기
angles.html 각도 익히기
css/style.css 공통 스타일 (라이트/다크 자동 전환)
css/angles.css 각도 게임의 그림·각도기
js/korean-number.js 숫자 변환기 (의존성 없음, 브라우저·Node 양쪽에서 로드 가능)
js/korean-number.test.js 숫자 변환기 테스트
js/game.js 숫자 읽기 진행·채점·기록
js/angle.js 각도 문제 만들기·그림 배치·채점 (DOM 없음, 브라우저·Node 양쪽)
js/angle.test.js 각도 테스트
js/angle-game.js 각도 게임 화면·조작·기록
test.html 두 테스트 러너
계산과 화면을 나눈다. 새 게임도 같은 모양으로 붙인다 — DOM 없는 계산 파일과 그 테스트,
화면 파일, HTML 한 장, 그리고 index.html 목록에 카드 한 장.