E-turo — MATATAG Classroom Artifacts

Teaching artifacts for the Philippine MATATAG K to 10 curriculum: a syllabus, a lesson plan, a slide deck, a browser-based interactive game, and offline classroom activities — for every grade from 1 to 10.

Every digital artifact is a single HTML file that works with the internet switched off. No CDN, no build step, no npm install, no account, no server. Copy a file to a USB stick or a phone and it runs.

(The repository does have one build step, but only for deploying the site — it renders the markdown documents to web pages. It never touches the artifacts. See Deploying.)

Status

All ten grades of Mathematics are complete. Each grade's syllabus maps the whole year, and one week inside it is taught in full — two lesson plans, an assessment pack, slides, a game, five offline activities, a worksheet and a wall chart. Grade 4 was the reference implementation; Grade 1 was the stress test at the other end of the range — a different language, a different design system, and learners who cannot yet read.

Focus topics below are verified against the official curriculum guide — each is that grade's CG Quarter 1 Number and Algebra content, taught in Term 1 under the three-term calendar. See ARTIFACT-SPEC.md §6.

Coverage is one week per grade, not thirty-three. The syllabi place every competency the guide lists — 47 to 54 of them per grade, each exactly once — but only the week marked above is built out into teaching materials.

Quick start

Open index.html in any browser — double-click it, no server needed.

Or open gallery.html — every artifact grouped by grade, with live previews. Every thumbnail is the real file running in a frame, documents included. Filter by grade or type, search, and open any artifact full-size in place.

Every .md also has a rendered .html beside it, committed to the repository, so a clone opens in a browser with no build step. .md is the source of truth — never edit the .html; run npm run docs instead.

Or go straight to a grade:

Grade 1 · Grade 2 · Grade 3 · Grade 4 · Grade 5 · Grade 6 · Grade 7 · Grade 8 · Grade 9 · Grade 10

The two ends of the range, side by side — every other grade ships the same spine:

Two lesson plan formats, deliberately. ILAW is the single template DO No. 009, s. 2026 prescribes for the plan a teacher files, replacing both the DLL and the DLP — so it covers the whole five-day week. The Lesson Exemplar is the teaching-depth companion: one 45-minute session, every question and every anticipated wrong answer. Use the first to plan and file, the second the night before you teach.

Grade 1 has no class record, and that is the point. Key Stage 1 is graded descriptively under DO No. 015, s. 2026 — there is no number to record. Its assessment pack carries an observation record, an anecdotal log and a Learner's Progress Report instead. test/deploy.test.js fails if a Grade 1 class record ever appears.

Repository layout

E-turo/
├── index.html                     Portal — grade selector
├── gallery.html                   Artifact gallery — live previews, grouped by grade
├── inventory.html                 The inventory by grade, learning area and asset type
├── assets/css/eturo.css           Shared design system
├── docs/
│   ├── research/
│   │   ├── matatag-brief.md       What MATATAG is; sources; verification record
│   │   └── source/                The official CG PDF + text extraction
│   └── templates/
│       ├── ARTIFACT-SPEC.md       The contract every grade's set must satisfy
│       ├── DESIGN-PHILOSOPHY.md   "Ten Times" — the Grade 4 visual system
│       └── DESIGN-WHOLE-AND-PARTS.md  "Buo at Bahagi" — the Grade 1 visual system
├── test/                          Logic, browser, gallery, deploy and render tests
├── tools/                         render-docs.mjs, inventory.mjs, the build, a preview server
└── grades/
    ├── g01-math/ … g03-math/      Key Stage 1 — taught in Filipino
    │   ├── index.html             + index.en.html
    │   ├── syllabus.md            + syllabus.en.md          ┐
    │   ├── lesson-plan-ilaw.md    + lesson-plan-ilaw.en.md  │ teacher documents:
    │   ├── lesson-plan.md         + lesson-plan.en.md       │ English reading copy,
    │   ├── assessment.md          + assessment.en.md        │ reachable by a switcher
    │   ├── offline-activities.md  + offline-activities.en.md┘
    │   ├── slides.html            ┐
    │   ├── game.html              │ shown to the children —
    │   ├── worksheet.html         │ Filipino only, enforced
    │   └── wall-chart.html/.png/.pdf ┘
    │                              g01: no class-record — descriptive grading, enforced
    │                              g02, g03: class-record with teacher-entered weights
    └── g04-math/ … g10-math/      Key Stage 2 and 3 — taught in English
        ├── index.html             Grade landing page
        ├── syllabus.md
        ├── lesson-plan-ilaw.md    The week, in the prescribed format
        ├── lesson-plan.md         Day 1, at teaching depth
        ├── assessment.md          TOS, three papers, answer keys, rubrics
        ├── class-record.html      WW 20 / PT 50 / EX 30, transmutation as a year switch
        ├── slides.html
        ├── game.html
        ├── offline-activities.md
        ├── worksheet.html         The page a learner holds
        └── wall-chart.html/.png/.pdf

Two design systems, one conviction

In both, the mathematics is the organising principle of the design — not something the design decorates. The mathematics differs by seven years, so the system does too.

Grade 4 — "Ten Times", for nine and ten year olds

Student-facing artifacts follow "Ten Times" (docs/templates/DESIGN-PHILOSOPHY.md) — a system in which the mathematics is the organising principle of the design, not something the design decorates.

• Six places, six colours, stepping along the spectrum in the direction the places grow. The same hue means the same place on the slides, in the game, and on the wall chart — which is what turns colour into vocabulary rather than decoration.
• Value bars drawn to true linear scale. In 47 205 the bar for the 4 fills the row and the bar for the 5 is a dot. That gap is the lesson, so it is never normalised away — it refutes "a digit is worth its face value" faster than any explanation.
• Expanded form breaks every number into its parts in the matching colours.
• Concrete before abstract. Nine-year-olds are in the concrete operational stage; a bare five-digit numeral means nothing until it is anchored to something with size and position.
• Big kids, not babies. No cartoon mascots or bubble letters — this age reads those as an insult. Large, confident, unambiguous figures instead.
• No failure state. No lives, no game-over; every learner finishes every round. Wrong answers get the reason, never a bare cross.
• Every hue is verified at 4.5:1 contrast against its own tint and against white, and colour never carries meaning alone — every place is also labelled and positioned.

Grade 1 — "Buo at Bahagi", for six and seven year olds

(DESIGN-WHOLE-AND-PARTS.md) A six-year-old is not doing place value. They are discovering that a quantity can be taken apart and put back together and still be the same quantity. Five is five, whether you see it as 4 and 1 or 3 and 2.

• The whole never changes size. Every whole-bar in the deck is rendered at exactly the same width — the browser test asserts one distinct width across all nine of them. The moment a bar shrinks to fit a layout, the argument collapses, because the learner's eye is the proof.
• Three colours, three roles — whole, first part, second part. Orange is always left, indigo always right, so the pair survives a black-and-white photocopy.
• Five is drawn as half of ten, because it is. The bar lengths tell the truth across sets as well as within them.
• Nothing instructional is carried by text. The curriculum guide itself says Grade 1 problems are "given orally or in pictures" — so every instruction is a picture, a numeral, or the teacher's voice.
• 88 px touch targets, not 44 — hand control is still developing.
• One screen, forty-five learners. The interactive is whole-class and teacher-driven, not per-learner, because that is what a Grade 1 classroom actually has.

Language

Grades 1 to 3 are taught in Filipino, Grades 4 to 10 in English. That is not a preference — under MTB-MLE the mother tongue is the medium of instruction through Grade 3 for every learning area except Filipino and English as subjects. Grade 3 is the last year of it, which is why that grade's syllabus treats the year as preparation as well as content.

In each of those three grades the five teacher documents have an English reading copy, reachable by a switcher on the page. The four artifacts shown to the children do not, and a test fails if one ever appears: an English slides.html is a route to projecting English at a class the curriculum says must be taught in the mother tongue. The rule is asserted per key stage, not per named grade, so adding a grade cannot quietly opt out of it.

Inside the English documents, the ~60 lines the teacher says aloud stay in Filipino, marked <span class="say" lang="fil">, with a short glossary of the recurring phrases at the top. Translating them would produce a plan that reads correctly and teaches in the wrong language — the kind of mistake that looks like an improvement in review, which is why the test suite counts those spans rather than trusting judgement.

The English copy turned out to be worth more than convenience. The MATATAG curriculum guide is written in English, so the English syllabus quotes its competencies where the Filipino one translates them. Writing it immediately surfaced a phrase — "with the use of technology" — that was in the guide and missing from the Filipino translation. It is now in both.

Design commitments

The games

Buo at Bahagi (grades/g01-math/game.html) — three rounds of four questions, built for a class of forty-five sharing one screen. Ilan lahat? · Ilan ang nakatago? · Buuin ang bilang. Almost no words: the counters, the ten-frame and the numerals carry everything, and the teacher reads the rest aloud. When an answer is wrong the display shows the truth — the hidden cells open, the correct pair appears — rather than explaining it in text a six-year-old cannot read.

Place Value Builder (grades/g04-math/game.html) — three rounds of escalating demand mapped to the lesson's sub-skills:

1. Build It — read the number in words, build it in the place value chart
2. Place and Value — name the place value of a highlighted digit, then its value
3. Challenge — reverse reasoning with six-digit numbers

What makes it more than a quiz:

• Feedback names the misconception. Choose the bare digit instead of its value and it says so explicitly — "that is the digit itself, not its value" — rather than just marking a cross.
• Distractors are misconception-driven, not random: the bare digit, the place value with the digit ignored, and values one place off in each direction.
• Questions are generated fresh every session, so it cannot be memorised.
• No lives and no game-over. Every learner finishes every question. Consistent with the MATATAG learner-well-being agenda, and it keeps the formative data complete.
• A Teacher Panel reports per-round accuracy against the named competency, lists the items missed, and suggests the next instructional step. It prints as a result slip.

Verification and testing

The artifacts are tested, not just written.

node test/logic.test.js          # Grade 4 question generation — 8 000+ questions
node test/browser.test.js        # Grade 4 in real Chromium, all network blocked
node test/logic-g01.test.js      # Grade 1 question generation — 69 000+ assertions
node test/browser-g01.test.js    # Grade 1 in real Chromium, all network blocked
node test/browser-all.test.js    # all ten grades — decks, games, 320px, no network
node test/gallery.test.js        # gallery filters, search, viewer, live thumbnails
node test/render-wall-chart.js   # renders every wall chart, fails if clipped
npm run inventory:check          # every figure the site quotes still matches disk
npm run test:deploy              # builds dist/, then serves and drives it over HTTP

The breadth test is why three shipped bugs are not still shipped. browser-all.test.js plays every grade's game to the teacher panel and navigates every deck end to end. It found that the Grade 2 and Grade 3 games threw on the first answer of every session — the engine was copied from Grade 1 and one line inside it kept Grade 1's round keys, so the tally lookup was undefined. It found the Grade 9 game throwing two questions from the end, where a question with a deliberately empty stage fell through to a Grade 5 fraction renderer. Neither was reachable by the generator tests, which exercise the question makers and never click anything.

Logic tests confirm that across thousands of generated questions: every question has exactly one defensible answer, no duplicate options are ever offered, the correct answer is always present, the misconception distractor is always offered, and number-to-words conversion round-trips exactly. They cover Grades 1 and 4 in depth.

Browser tests drive the real files in real Chromium with every network request intercepted and failed. In depth for Grades 1 and 4: the deck navigates end to end, the game completes all its questions and produces a teacher panel, the place value chart never wraps to a second row, and the Round 1 context line never leaks the answer. Across all ten grades: every deck navigates and its counter agrees, every game plays to the teacher panel with no console error, every option is at least 44 px tall, and nothing overflows a 320 px screen.

Curriculum accuracy — verified

The official curriculum guide is committed to this repository:

• docs/research/source/MATATAG-Mathematics-CG-2023-Grades1-10.pdf — MATATAG K to 10 Curriculum of the K to 12 Program: Mathematics, Grades 1–10, Department of Education, August 2023, 73 pages, plus a plain-text extraction.

Grade level standards, content domains, all four CG quarter maps, and every learning competency in all ten grades' artifacts are quoted from it — the English ones directly, the Filipino ones as a labelled translation with the English original beside it. The Grade 1–10 spine in ARTIFACT-SPEC.md §6 is verified the same way.

What verification corrected

Earlier drafts were assembled from search-result summaries, because the environment blocks deped.gov.ph. Checking against the real document found the Grade 4 quarter map substantially wrong and seven of the ten proposed grade topics wrong. Both are itemised — in the syllabus §9 and the spec §6 — so the same mistakes are not repeated.

The headline errors: multiplication and division are Quarter 2, not Quarter 1; decimals are Quarter 4, not Quarter 3; Grade 4 covers no area and no probability at all; and every Quarter 1 in Grades 1–10 leads with Measurement and Geometry, which the earlier sequencing had backwards.

The lesson itself survived verification — place value and the value of a digit is genuinely Grade 4 Quarter 1, competencies 8 and 9.

Still unverified

Every flagged row comes from search reporting, not from the DepEd Orders themselves, which this environment cannot reach — egress was re-tested on 17 August 2026 and is now a blanket block rather than an allowlist. The calendar and weights are adopted because a syllabus has to commit to a calendar and half-migrating would be worse than either state; all of them are labelled at every point of use.

The ❌ row is the one that matters. A second research pass found that Grade 1 does not receive a numerical grade this school year — a consequence of an order this repository had already adopted for other reasons — and that ILAW is the prescribed lesson plan format. Both have since been acted on: the grading sections are corrected, both lesson plan formats ship, and the assessment instruments that were missing are written. What remains unverified is the source, not the work.

What to obtain is catalogued in docs/research/source-catalogue.md. DO No. 015, s. 2026 is now the single most valuable file — it settles what replaces the Grade 1 weights — followed by DO No. 009, s. 2026, which carries both the calendar and the ILAW template.

Deploying

The site is static with one build step, and deploys to Cloudflare as a Worker with static assets — npm run build, then npx wrangler deploy, with wrangler.jsonc pointing at dist. That config file is not optional: without it wrangler uploads the repository instead of the build and dies on a 144 MiB binary inside node_modules. Pages works too, unchanged. Full settings, what the build does and why, and the header choices are in docs/DEPLOY.md.

The build exists for one reason: Cloudflare serves .md as a download or as raw text, and a syllabus with 800+ table rows is unreadable that way. So every markdown document is rendered to a styled page carrying the right language, and .md links are rewritten to .html in the deployed copy — the repository keeps working on GitHub, the site works in a browser.

npm ci
npm run docs          # re-render every .md to the .html beside it
npm run inventory     # re-count what ships, for the index, the gallery and the portal
npm run test:deploy   # build, then verify the output the way Cloudflare will serve it
npm run preview       # http://localhost:8788

npm test runs everything, and starts by failing if any generated .html is out of date with its .md, or if the gallery quotes a file size that no longer matches the file.

The site states its own inventory, and every figure is read off disk. The portal carries an index of artifacts — a row per artifact, a column per grade, the whole artifact's size in every cell, so the columns add to the grade totals and the rows add to 8.7 MB. inventory.html is the same inventory turned the other way up: grouped by grade and by learning area, every artifact labelled with its asset type — navigation page, document, presentation, interactive activity, interactive tool, printable sheet, printable poster — and with the learning areas MATATAG prescribes but this repository does not build named grade by grade. Ten subject–grade pairs of the seventy-two the curriculum defines; saying so on the page is cheaper than letting a school discover it. Every gallery card names the formats it can hand you — HTML 39 KB, EN HTML 38 KB, MD 27 KB — one badge per link on that same card, so a format shown is always a format you can open. Each grade header carries its artifact count, file count and total; both page headers carry the collection's.

All of it comes from tools/inventory.mjs, which walks the grade directories once and rewrites the index table and tally in index.html, the three generated regions of inventory.html, and the two tables in gallery.html. It groups files by the name before the first dot — which is what makes syllabus.html, syllabus.md, syllabus.en.html and syllabus.en.md one artifact rather than four — and fails if any file lands outside a known family, so a new artifact type cannot go uncounted. Hand-typed byte counts are wrong within a week, so npm test runs it with --check and fails on drift.

Licence

Intended for free use by Philippine public school teachers. Adapt freely.