Minor: AI, Games & Digitale geletterdheid
Work from my minor, collected on one small site: educational browser games, reports and other pieces.
🌐 Live site · 🎮 Game skill tree · 💼 Portfolio
About
A plain HTML/CSS/JavaScript site, no framework or build step, for the work I make during the minor
AI, Games & Digitale geletterdheid. The home page has one track per part of the minor:
Computational thinking (the game skill tree), Internet & multimedia (the ON AIR podcast) and
Digitale fabricatie (things I made with a 3D printer, a laser cutter and micro:bits). The site is in
Dutch, with a light, dark and system theme. Every game is registered in games/games.json; the home
page and the skill tree at /games/ both read it.
The skill tree
/games/ is the heart of the site: eight games on one route, from recognising your
first HTML tag to building a small website on your own. Every game trains one level of Bloom's taxonomy
(remember, understand, apply, analyse, evaluate, create), and passing a game unlocks the next one. After
Build the DOM the route splits: Style Lab and Layout Builder open together, and Bug Hunter waits until
both are passed.
- Play with a player ID to save progress: enter a made-up code (no real names), and every passed game is
stored and unlocks what comes next, with a short unlock animation when you get back to the tree.
- Free play opens every game and saves nothing.
- Passing means at least 80% on the first try; extra points don't buy your way in.
- Games run in a dialog on the page. Each one is a stand-alone page with its own theme and mechanic, and
talks to the tree only through
GAME_COMPLETED and GAME_EXIT messages.
All eight games are playable: the route runs from recognising your first tag in HTML Hunter to launching your own website in Website Challenge.
Games
All games are in Dutch.
The ON AIR podcast
/podcast/ is the Internet & multimedia part of the minor: ON AIR, a Dutch
series about what AI does to us as people. It alternates podcast conversations with a guest and videos where an AI is
the other voice. The series page holds the main question, target audience and story arc;
every worked-out episode has its own page in podcast/aflevering-<n>/ with its question, doelgroep, structure, the
research analysis and the script, plus the filled-in podcast template (episode 1) or the shotlist (episode 2).
Digital fabrication
The Digitale fabricatie track collects the physical side of the minor. Each piece has its own page in
fabricatie/<name>/ with photos, how it was made and the source files:
- Kwartet Softwareontwikkeling:
a 32-card quartet game about software development, laminated, in a folding box I designed with the rules
printed on it. The page shows the iterations, with the cards (PDF and PowerPoint) and the box template to download.
- Light Fury & Night Fury: two 3D prints
of the same dragon model from How to Train Your Dragon, at 60% and 35% scale, with credit to the model's
designer.
- Laser-cut card box: a 3 mm wooden box with
finger joints and a lid that opens on a hinge, glued by hand.
- Hide-and-seek with micro:bits: the
hider sends a radio signal, and the seeker shows how close you are with a bar graph and beeps. The
.hex
files and the MakeCode program are on the page.
Photos live in images/fabricatie/.
Adding a game
-
Put the game in games/<name>/ with an index.html. When the player passes, the game sends one
message to the page around it:
window.parent.postMessage({ type: "GAME_COMPLETED", gameId, score, maxScore }, location.origin).
-
Add it to games/games.json (schemaVersion 1, same format as the course's basisskilltree):
{
"id": "build-the-dom",
"title": "Build the DOM",
"learningGoal": "Ontdek hoe HTML-elementen samen de structuur van een webpagina vormen.",
"path": "/games/build-the-dom/",
"requires": [{ "gameId": "html-hunter", "type": "completed" }]
}
id is exactly the gameId the game sends; never rename it.requires: [] opens it at once; {"gameId": "…", "type": "completed"} needs that game passed;
{"gameId": "…", "type": "minPercent", "value": 80} needs at least that percentage. All conditions must hold.- Unknown fields, unknown ids, a game that requires itself or a circle are reported on
/games/
and that entry is left out.
-
Give it a place on the route in the GAMES list in games/index.html (Bloom level, key question, position),
and an emblem in games/emblems/<id>.svg.
-
Give it a share preview: a 1200×630 image in og/<id>.png in the game's own style, plus the favicon links and
the og: and twitter: tags in the head of its index.html (copy them from another game). The Dockerfile
copies og/ into the image.
Players save progress under a made-up player code on /games/: the page opens the game in a dialog,
receives GAME_COMPLETED and stores {pseudonym, gameId, score, maxScore} through api.php, then reads
the progress back. Free play opens every game and saves nothing.
Running it
Open index.html through any static file server, for example:
npx serve .
That serves every page and game, and free play works. Saving progress with a player ID needs api.php
and its database, so it only works in the full stack.
In production compose.yml runs the full stack behind a reverse proxy: the site as an nginx:alpine
container (Dockerfile), api.php on PHP-FPM (Dockerfile.php), MariaDB for the progress, and
phpMyAdmin for managing it, reachable only on the local network. The database credentials are kept in
private/, outside git. A push to main deploys automatically with GitHub Actions.
Made by Anthony Inocencio Ramos · anthony-air.nl · LinkedIn
