Seventh Grade Math

A small set of self-contained math practice pages for a seventh grader. Plain HTML, CSS, and vanilla JavaScript. No framework, no build step, no npm, no bundler. Deployed as a static site on Vercel.

Ground rule: nothing identifying

This repository is public. No file, filename, page, commit message, or comment may contain a student name, a school, a town, a team or club, or anything else that identifies a real person. Word problems use generic framing: "a baseball team", "the last 7 quizzes". Keep it that way when you edit or add anything.

Running it locally

Open the file. Double-click index.html, or drag it into a browser. There is no server, no install step, and no command to run. Every page works the same way from the filesystem as it does when deployed, which is why stylesheet links are written relative to the page's own folder (shared/style.css from the root, ../shared/style.css one level down) rather than as /shared/style.css.

The only thing that needs a network is the Google Fonts link in each page's <head>. Offline, the pages fall back to condensed and sans-serif system faces and everything still works.

Layout

index.html               hub; builds its list from site.js at load
site.js                  the registry: every lesson, its five days, and their pages
lesson-01/cards.html     guided card sorting for mean, median, mode, range
lesson-01/practice.html  generated practice problems with hints and checking
lesson-01/exponents.html an exponent to build a tile at a time, not graded
lesson-01/exponents-practice.html   graded powers drill, three modes
lesson-01/order-lesson.html         order of operations, three worked examples
lesson-01/order-practice.html       graded order of operations, two modes
lesson-02/bars.html      fraction bars: split until they match, then add by counting
lesson-02/fractions-practice.html   graded adding and subtracting, plus the LCD speed round
lesson-02/decimal-lesson.html       multiplying decimals: slide the point, multiply, slide it back
lesson-02/decimal-practice.html     graded decimal multiplication, plus the place-the-point speed round
lesson-03/area.html      the area model: of means multiply, canceling, why division flips, mixed numbers
lesson-03/multiply-practice.html    graded multiply and divide with the four named mistakes, plus the cancel speed round
lesson-03/flip.html      why keep-change-flip works: reciprocals, the complex fraction, her turn
lesson-03/bar-practice.html         graded order of operations with fraction bars, plus the reciprocal speed round
lesson-05/place-value.html          decimals in words, as fractions in lowest terms, and the compare round
lesson-05/line-up.html   graded add, subtract, and mixed with multiply, the stacked view, plus the change round
lesson-07/percents.html  move the point, percent and decimal both ways, percent of, word problems, plus the percent round
lesson-07/interest.html  simple interest, compound interest a year at a time in a table, plus the one-year interest round
lesson-08/three-ways.html  fraction to decimal and percent, decimal or percent to a fraction, plus the benchmark round
lesson-08/part-whole.html  percent word problems both ways (find the percent, find the part, mixed), plus the tip round
lesson-08/roots.html     perfect squares, guess and check for bigger roots, plus the squares round
lesson-09/factors.html   find every factor on a tap grid, prime or composite, plus the prime round
lesson-10/balance.html   equations with a missing number: adding, subtracting, multiply and divide, mixed, plus the balance round
lesson-11/walk.html      number lines with negatives, graphing inequalities, metric length, plus the hop round
lesson-12/signed.html    signed numbers (Lessons 12 and 13): adding, subtracting, multiply and divide, mixed, plus the sign round
lesson-15/equations.html rules for equations (Lesson 15): add and subtract, divide, flip it, two steps, mixed, plus the equation round
anatomy/week-01.html     anatomy week 1: which system, which level (tap to answer, earns tokens)
anatomy/week-02.html     anatomy week 2: parts of the heart, vessels, and blood
anatomy/week-03.html     anatomy week 3: the air path, oxygen into the blood, and what goes wrong
anatomy/week-05.html     anatomy week 5: bones, joints, muscles, and the clinic
anatomy/lungs-3d.html    3D demos for week 3: the diaphragm and breathing in, and the gas swap at an air sac (three.js from a CDN)
anatomy/models/          chest model for lungs-3d.html: simplified from Z-Anatomy (CC BY-SA 4.0), built on BodyParts3D (CC BY-SA 2.1 Japan); shared under CC BY-SA 4.0
shop.html                the prize counter: spend tokens on items from shared/items.js
grown-ups.html           pending hand-offs, history, stats, manual adjustments
shared/style.css         design tokens and the components every page shares
shared/tokens.js         earning, balance, the masthead chip, the +N toast
shared/fraction-input.js exact fractions (Rational) and the stacked fraction input
shared/items.js          the shop's stock, one object per item
shop-img/                the stock's photos, 800px squares, no metadata
vercel.json              cleanUrls, so /lesson-01/practice resolves

shared/style.css holds the palette and type tokens, the base reset, the navy masthead and its back link, the sorting rail and card with all of its drag states, the .btn family, and the focus ring. Anything only one page uses stays in a <style> block in that page.

Card geometry is exposed as custom properties (--card-w, --card-h, --rail-min-height, and friends) and each page sets its own values. The drag code measures one slot width from the gap between the first two cards, so a row of cards must never wrap to a second line. If a page shows more cards, tighten those clamps rather than letting the rail wrap.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗