Command Syntax Explorer¶
Specification¶
The full specification below is extracted from Chapter 11: Booting, the Desktop, and the Linux Terminal on the Pi 500+.
Type: interactive-infographic
**sim-id:** command-syntax-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/learning-linux/tree/main/docs/sims/command-syntax<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how a Linux command is built from a command name, options, and arguments, using `ls` and `cd` as examples.
Canvas: 700x380px, responsive — recompute segment widths as fractions of `width` inside `windowResized()`.
Layout: a large monospaced text rendering of `ls -la Documents`, broken into three color-coded, boxed segments: `ls` (command name, raspberry `#C2185B`), `-la` (options, copper gold `#D4AF37`), `Documents` (argument, circuit green `#2E7D32`). A `createSelect()` dropdown labeled "Example Command" lets a student switch between three preset commands: `ls -la Documents`, `cd Documents`, and `ls /home`, each re-rendering the color-coded segments (the `cd Documents` example has no options segment, illustrating that options aren't always present).
Interaction: clicking any colored segment opens an infobox explaining that part's role in general (command name = the program being run, options = flags that change its behavior, argument = the target the command acts on) and, specifically for `-la`, notes that `-l` shows details like permissions and `-a` includes hidden files. Hovering a segment (desktop) lightens its border color before a click opens the infobox, supporting both mouse and touch interaction.
Implementation: p5.js. Store each preset command as an object `{command, options, argument, notes}`; render with `text()` at fixed monospaced positions recalculated on resize. Hit-test each segment via its bounding box in `mousePressed()`.