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 — thumbnails, grouped by grade
├── inventory.html                 The inventory by grade, learning area, asset type, audience
├── inventory.json                 The same walk, generated, for anything that reads rather than looks
├── data/
│   ├── grades.json                What ships — the one hand-maintained description
│   └── site.json                  The origin, and the address a teacher writes back to
├── worker/index.js                The only server-side code — counts downloads, then defers
├── assets/
│   ├── css/eturo.css              Shared design system
│   └── thumbs/                    A picture of every artifact worth looking at (generated)
├── docs/
│   ├── research/
│   │   ├── matatag-brief.md       What MATATAG is; sources; verification record
│   │   ├── learning-areas.md      The seven unbuilt areas; the CGs to obtain
│   │   ├── source-catalogue.md    What is available, and what it would change
│   │   └── source/                The official CG PDF + text extraction
│   └── templates/
│       ├── ARTIFACT-SPEC.md       The contract every grade's set must satisfy
│       ├── NEW-LEARNING-AREA.md   How to build the next area, and what will bite
│       ├── 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, cards, hubs, feedback, thumbnails, inventory, zip, build
└── 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

Live at https://contents.e-turo.app.

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.

There is exactly one piece of server-side code — worker/index.js, about forty lines — and run_worker_first confines it to /downloads/*. Every page, artifact and thumbnail is served by Cloudflare's asset layer with no Worker invocation, so a bug in it cannot take the site down. It exists to answer the one question the static site cannot: which grades do teachers actually download? It writes a single Analytics Engine data point per download and hands the request straight back. Assembling the zips on demand instead would have cost a hundred milliseconds of CPU against the free plan's ten-millisecond budget, to save 15 MB of a 30 MB deploy that is at 2% of its file limit — so the zips stay built at deploy time.

Assets are content-hashed and cached for a year. assets/css/eturo.css ships as eturo.1f8ba45c.css, and each of the 99 thumbnails likewise, with every reference rewritten to match. Only dist/ is hashed — the sources keep plain names so a clone still opens with no build step — and nothing under grades/ is, because those files are the deliverable. immutable is only safe once the name changes with the bytes; the test suite fails the build if an un-hashed reference survives.

The artifacts stay hermetic; the portal does not have to. The CSP sets connect-src 'none' everywhere except /, /gallery.html and /inventory.html, which may talk to the Cloudflare Web Analytics beacon. A document should behave the same served over HTTPS or opened from a USB stick, and one that phones home does not.

Overriding a header in _headers takes an explicit ! Header-Name first: Cloudflare applies every matching rule and appends, so without the unset both policies are sent and the browser enforces their intersection. That made the override inert for a day, and did the same to the year-long immutable on /assets/*, which arrived behind the catch-all's max-age=300. The failure stayed on the safe side — no analytics, never a loosened artifact — but "safe" is not "working", and reading _headers could not show it: the bug exists only in the response. Both the unset rule and the redirect loop that took the site down are now guarded in test/deploy.test.js, which models the platform's own rewrites rather than trusting the file.

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 generate      # every generated file, in dependency order
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 the collection's. inventory.html is the same inventory turned the other way up: grouped by grade and by learning area, every artifact carrying a thumbnail, its asset type — navigation page, document, presentation, interactive activity, interactive tool, printable sheet, printable poster, desk card, home guide — and who it is for: teacher, learner, or home. Three values rather than two, because a binary files the parent sheet under "teacher" and then leaves it out of everything sent to families. The learning areas MATATAG prescribes but this repository does not build are named grade by grade: ten subject–grade pairs of the seventy-two the curriculum defines, and 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.

data/grades.json is the one hand-maintained description of what ships. It used to be a literal inside gallery.html, which meant the inventory tool recovered its own input by scraping a <script> block out of the page it was about to rewrite; the literal there is now generated from the data file and inlined, because the deployed CSP sets connect-src 'none' and the page has to work from a USB stick.

Everything derived comes from six tools, and npm run generate runs them in dependency order — which is load-bearing, because each edits files the next one measures or photographs:

The inventory 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 every one of these with --check and fails on drift.

Three cards per grade are generated rather than written. The misconceptions desk card, the observation card and the rubric poster all restate something the grade's own documents already say — the misconceptions table in the lesson exemplar, the success criteria in the ILAW plan, the Term 1 performance-task rubric in the assessment pack. Writing them by hand would mean keeping thirty files in step from memory, and the first reworded misconception would leave a card quietly lying. Change the plan and the card changes with it.

Download bundles are built, not committed. tools/build.mjs emits twenty-four zips into dist/downloads/: each grade whole, each grade documents-only for a teacher on a phone, one per audience, and one of everything. No archive contains another, every entry is prefixed with its grade folder, and each carries an index.html. tools/zip.mjs is a dependency-free writer with fixed timestamps, so the same input produces the same bytes.

A fourth rule now: every link in a bundle either resolves inside it or points at the site. The bundles used to ship 1,312 dead links, and the worst of them were invisible on the website — every generated document page links ../../assets/css/eturo.css, no bundle contained an assets/ directory, and so every downloaded syllabus, lesson plan and assessment rendered unstyled, against a syllabus that promises a teacher can copy it to a USB stick and run it at home. Each bundle now carries the stylesheet, and whatever genuinely is not in the archive becomes an absolute link to the site, decided from the bundle's real contents rather than guessed at. 5,288 local links, 0 broken, and the test suite reads the archives to prove it.

There is a way to write back. Every document artifact carries a line in its footer, in its own language, linking to a mailto — puna@e-turo.app from the Filipino pages, feedback@e-turo.app from the English ones, both set in data/site.json and routed by Cloudflare Email Routing, which takes unlimited inbound mail free. This is the only part of the project that can answer its own two open questions: no artifact has been used with real learners, and the Filipino needs a Filipino-speaking teacher's eye. A mailto rather than a form because it needs no JavaScript, no consent banner and no server, does not violate connect-src 'none', and still works from a USB stick with no connection — the mail client queues it. The wall charts are the one exclusion: they are a fixed-height A4 sheet that crops its overflow, and one more line of type pushed all ten past themselves.

Licence

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