Computerfuchs

A learning computer for children aged about 5 to 15 that runs in the browser. Computerfuchs ("computer fox") simulates a friendly desktop with windows, a taskbar and a start menu, and the desktop grows with the child. A five-year-old starts with big icons that open with one click. Through the mouse course they unlock what a real computer does: double-clicking, dragging windows, right-click menus and window buttons. Older children get the full desktop right away. The goal is the one the toy learning laptops have, on any old laptop: learn how to use a computer, and learn maths, reading and more on it.

→ technikweber.github.io/Computerfuchs

Early prototype, version 0.3 in progress. The mouse course, keyboard, maths, "What is the internet?", the paint box, files and the app store are playable. Letters and more are on the roadmap (see the concept).

Screenshots

The interface is in German.

Login: every child has a profile, optionally with a secret code.	Age 5: big icons, one click opens. The mouse course unlocks the rest.
Mouse course: in Colour magic, the right-click paints.	Maths: plus and minus to 20, with the 20-frame as help.
Keyboard: in the key zoo the key you need lights up – T for Tulpe (tulip).	Ten fingers: every finger has its own colour.
What is the internet? A photo travels to Grandma in four packets, from router to router.	Cables in the sea: a shark has bitten the cable, so the photo needs another way.
Paint box: colouring pages, a paint bucket, stamps – and undo, like on a real computer.	My own wallpaper: the picture is saved in "Bilder" and becomes the desktop.
Files: folders, drag and drop, recycle bin – with Flinn's tasks.	App store: Bytes buy wallpapers, mouse pointers, stickers and songs.

What it does

• A desktop that grows with the child. Four desktop features are earned in the mouse course rather than handed out: open by double-click, move windows, right-click menu, and minimise/maximise/resize. Flinn the fox announces each one and lets the child try it straight away. Ages 7–9 start with the first two, ages 10 and up with all of them. Parents can switch each one on or off, or open everything at once: all levels and tiers, without handing out stars.
• Mouse course, 8 levels × 3 tiers.
  • Flashlight: move the pointer to find hidden animals in the dark.
  • Balloons: click to pop them. Tier 3 pops only the red ones.
  • Presents: double-click to open. The allowed gap between the two clicks gets shorter on every tier.
  • Feeding: drag each food to the right animal.
  • Bee path: follow a road, with checkpoints after a slip.
  • Colour magic: a right-click menu colours a picture. Tier 2 matches a template, tier 3 hides the colours in a submenu.
  • Diving: scroll through an ocean.
  • Window pro: move a window, resize it, minimise, restore, maximise and close it.
• Keyboard, 7 levels × 3 tiers, with an on-screen keyboard in the German QWERTZ layout:
  • Key zoo: find the key with the first letter of the picture ("A wie Affe"), on tier 3 by ear only.
  • Hopping hare: jump over hedgehogs with the space bar.
  • Hamster path: arrow keys through a maze, collecting cookies on tier 3.
  • Star rain: catch falling letters before they land.
  • Picture words: type the word for the picture, later with backspace and capitals.
  • Ten fingers: the home row, every key in the colour of its finger.
  • Typing pro: shift, punctuation, the @ (AltGr+Q) and a race against Flinn, measured in keystrokes per minute.
• Maths, 6 levels. Counting to 10, plus and minus to 10, to 20 (mostly crossing ten, with the 20-frame as optional help), times tables and mental arithmetic to 100. Rounds are generated, so every round is new. Small numbers are grouped in fives, as in German primary schools. Answers go in with an on-screen number pad or the real keyboard. A wrong answer gets a second try plus a picture of the task.
• "What is the internet?", 5 chapters × 3 tiers, one tier each for ages 5–7, 8–10 and 11 and up. Children build and use a network instead of reading about it:
  • The network: plug the laptop, computer and TV into the router (the phone uses Wi-Fi), lay the cables to Grandma via both internet providers, and connect six German cities so that no city is cut off when a single cable breaks. A tractor tests every cable.
  • Picture post: a photo travels in four packets. Routers read the address and pass each packet on, following their signposts. Numbered packets arrive in the wrong order, and a lost one is simply requested again.
  • Cables in the sea: a shark bites through a sea cable and the photo takes another way. Two routes race at the speed of light in fibre. A real ping to the server, compared with Paris, Tokyo and the Moon.
  • The phone book: names become numbers (DNS). Find the right picture, type an address (a typo gets explained), and work out who really owns an address.
  • The lock: postcard or treasure chest, past a nosy raccoon; a secret code with a Caesar strip; and would you type your password here – is there a padlock, and whose address is it?
• Paint box. Brush, paint bucket, stamps and eraser for everyone; from 7 also lines, rectangles and circles, from 10 an eyedropper and colours of your own. Six colouring pages – a house, a fish, flowers, a rocket, a cat and a butterfly – fill cleanly with the bucket. Undo and redo work as on a real computer, keyboard shortcuts included (Ctrl+Z, Ctrl+Y, Ctrl+S). Saved pictures land as files in "Bilder", open again for more painting, show up in the files app and the viewer, and can become the wallpaper. Flinn sets six tasks, from the first brush stroke to your own wallpaper, and closing the window loses nothing.
• Files with a recycle bin. Every child has a small file system of their own with pictures, music, documents and downloads. They create folders, rename them (with the same rules as on Windows), drag files into folders, copy and paste – with the mouse, the right-click menu, or Delete, F2 and Ctrl+C/V. Deleted things go to the recycle bin and can be restored. File extensions such as .jpg can be shown. Flinn sets six tasks, from the first folder to tidying up the downloads. Pictures, songs and texts open in a viewer.
• App store. Bytes buy wallpapers, mouse pointers in other colours, desktop stickers and songs. Whatever you get lands as a file in "Downloads". Opening it there and setting it as wallpaper is file-management practice on the side. There is no real money, and spending never lowers the rank.
• Made for children who cannot read yet. Every instruction has a picture and can be read aloud (browser speech synthesis). Buttons and targets are big, and nothing has a time limit unless the level is about speed. The mouse pointer comes in normal, large and huge sizes.
• Bytes instead of coins. Every new star earns Bytes. Lifetime Bytes decide the rank: Fuchswelpe, Jungfuchs, Schlaufuchs, then Computerfuchs at 1 kilobyte, and Meisterfuchs after that. Grown-ups can gift Bytes or correct the balance; gifts leave the rank alone.
• Profiles with a secret code. Each child picks an animal, a name and their age. If they like, they protect their profile with four pictures or four digits – their first password. If a child forgets the code, a grown-up resets it. Only grown-ups change the age, because it decides how much the desktop can do.
• Saved in the browser, backed up as a file. Progress is stored locally. A grown-ups' area behind a small arithmetic gate exports all profiles as a JSON file and imports them again, by button or by dropping the file on the login screen. Paintings travel along in the file. Damaged or foreign files are rejected with an explanation instead of crashing.
• Works offline, installs as an app. After the first visit, Computerfuchs lives in the browser's offline storage and starts without internet too. Chrome and Edge install it as an app with its own icon and window (there is a button for that in the grown-ups' area).
• Kiosk-friendly. Add ?kiosk to the URL and the fullscreen toggle disappears; "shut down" returns to the power button. Two scripts turn a computer into a dedicated learning computer: one for Linux with Cage (Raspberry Pi included) and one for Windows. The guide covers all three ways.
• German first. No sign-up, no ads, no cookies, no analytics, no external requests: fonts and images are served from the same origin.

Try it with children

Feedback from real children is the most valuable thing for Computerfuchs. The testing guide shows how a short test works for each age, what to watch for, and has an observation sheet to print.

Development

npm ci
npm run dev        # http://localhost:5173
npm test           # Vitest (logic: profiles, rewards, save files, windows, maths, files, keyboard, networks, painting)
npm run lint       # oxlint
npm run build      # type-check + production build into dist/
npm run preview    # serve dist/ at http://localhost:4173
npm run e2e        # browser walkthrough against the preview (uses an installed Chrome/Edge)
npm run screenshots  # retake the README images (docs/images/), also against the preview

npm run e2e plays through the whole app in headless Chrome: all eight mouse levels, all seven keyboard levels and all 15 stages of "What is the internet?", maths, the paint box with a painted wallpaper, Flinn's file tasks, an app store purchase, stickers, a song, the secret code, settings, the save file, a reload, a second profile, kiosk mode and a restart without internet. It fails on any console error. Pass a URL to test the live site: npm run e2e -- https://technikweber.github.io/Computerfuchs/. Screenshots go to test-results/e2e/.

Stack: React 19, TypeScript 7, Vite 8, Vitest, oxlint — the same as LinuxKompass and JobKompass. Every push to main is tested, built and deployed to GitHub Pages by .github/workflows/deploy.yml. The build uses a relative base path, so dist/ also works on a school server or as a local copy.

Layout:

• src/core/ — profiles, rewards, save files, file system, app store, secret code, songs, sound, speech, small hooks
• src/os/ — the simulated computer: boot, login, desktop, windows, taskbar, stickers, mouse pointers
• src/apps/ — the apps; registry.ts lists them (apps marked "soon" are already in the start menu)
• tools/ — the offline storage (service worker) generated at build time, and the script for the README images
• kiosk/ — the kiosk scripts for Linux and Windows

Licence

Code: MIT (see LICENSE). Images: Fluent Emoji by Microsoft (MIT). Fonts: Nunito and Fredoka (SIL OFL). The songs are traditional public-domain children's songs. Details in THIRD_PARTY_NOTICES.md.