Terminal Command Game — Free HTML CSS JS Snippet

Command-line fluency is built from a few dozen commands used often enough to become muscle memory, and the fastest way to build it is to be given a goal rather than a command to copy. This snippet is a playable terminal trainer: each task states an outcome in plain English — list hidden files, search a tree for TODO, make a script executable — and the player types the command they think does it into a working terminal UI, which echoes the input, prints plausible output, and explains what the command actually did.

Grading with regular expressions, not string equality

Real shell usage does not have one canonical spelling. ls -a and ls -la both list hidden files; tail -n 20 app.log and tail -20 app.log are equivalent; grep -rn "TODO" . is as valid as grep -r TODO .. Each task therefore carries an accept array of regex patterns rather than a literal answer, and the patterns are written to tolerate flag order, combined short flags, optional quoting, and trailing slashes on directory names. A lookahead such as -(?=[al]*a)[al]+ accepts any combination of a and l flags as long as a is present, which is exactly the rule the task actually cares about.

Normalising before matching

normalise() trims the input and collapses every run of whitespace to a single space before any pattern runs, so ls -a with stray spacing grades identically to ls -a. Doing this once, in one place, keeps every regex simpler — no pattern needs to litter itself with \s+ alternatives for spacing the player might have typed. It is also the correct order of operations: normalise the input, then test it, rather than trying to write patterns tolerant of arbitrary formatting.

A terminal that behaves like a terminal

Submitted commands are echoed after the prompt exactly as typed, output lines print beneath, and the scroll container is pinned to the bottom on every write so the newest line is always visible. Clicking anywhere in the terminal focuses the input, which is the small affordance that makes a simulated terminal feel real rather than like a form field with a monospace font. Output is written with textContent on generated elements rather than by concatenating HTML, so a player who types something containing angle brackets sees their own text rather than injecting markup.

Explanations that generalise past the answer

Every solved task prints a why line explaining not just what the command did but the rule behind it — that -a reveals dot-prefixed entries because that is how hidden files are marked on Unix, that cp refuses directories without -r, that quoting "*.log" stops the shell expanding the glob before find ever receives it. That last one is the kind of detail that turns a command someone copied into a command they understand, and it is the reason the same command sometimes behaves differently in a different folder.

Task data drives everything

Each task is a single object with the plain-English goal, the accept patterns, the simulated output lines, a hint, and the explanation. Adding a task is one array entry — the counter in the header, the end-of-round reset, and the skip and hint buttons all derive from the array — and no command is ever executed anywhere, since the "output" is authored text chosen to look like the real thing.