Teach Terminal

A browser-based game that teaches Linux terminal commands through interactive lessons and missions.

Today

Today I built the lesson window - the floating panel that runs inside the terminal during lessons. This is the piece that connects the lessons page to the terminal itself.

When a user picks a lesson from the overview, the terminal opens with ?lesson=N in the URL. The lesson window reads that number, finds the lesson in the data file, and appears in the top-right corner of the screen.

The window has three states:

Lecture - shows the lesson text explaining the concept. The user reads and clicks “Start Practice” (or “Complete” for intro lessons).

Practice - the window changes visually. Its border and title switch to an amber color, and a “PRACTICE:” prefix appears in the title. This makes it obvious that it’s time to do something, not just read. The user types the command in the terminal below.

Success - when the expected command is typed, the window shows the success message and a “Next Lesson” button appears. Clicking it swaps the window content to the next lesson without reloading the page.

The window is also draggable by its title bar. The user can move it anywhere, minimize it with -, or close it with × (which returns to the lessons page). Pressing Escape hides and shows the window.

I also added replay support. If a lesson is already complete, the user can open it again, read the lecture, and try the practice a second time. The window still shows the success message, but the lesson status stays DONE - it does not re-mark anything.

Some issues I hit:

• The intro lessons blocked the “Next Lesson” button because they were being re-completed in a loop. I fixed this by tracking a showingSuccess variable that tells the code whether we’re on the success screen or the lecture.
• The practice mode class wasn’t being added because the flow checked lessonComplete before checking whether we were in the practice phase. I reordered the checks so practice renders correctly even for replayed lessons.

Completed

• index.html - Start menu with Start and Settings buttons
• settings.html - Settings page with three themes (Ubuntu, Hacker, Kali)
• login.html - Login page with username, machine name, and password validation
• mode.html - Mode selection: Free Exploration or Guided Path
• lessons.html - Course overview with sections and lesson cards
• main.html - Interactive terminal interface
• style.css - Main styling, animated gradients, glassmorphism UI, theme colors
• login.css - Login page styling with themed backgrounds
• settings.js - Saves the selected theme using localStorage
• theme.js - Loads the saved theme and applies it automatically
• login.js - Form validation and redirect to mode page
• filesystem.js - Fake Linux filesystem with files, folders, permissions, owners, groups, sizes, and modification times
• terminal.js - Terminal input handling, prompt display, line management, colored output
• command.js - Command recognition and execution
• lessons-data.js - All 25 lessons organized into 6 sections
• lesson.js - Renders the lessons page timeline
• lesson-window.js - Runs the lesson window inside the terminal

Current Commands

pwd, ls, cd, mkdir, touch, echo, cat, rm, cp, mv, clear, help, history

With flags for most commands, redirection (>, >>, <, 2>), Tab autocomplete, arrow-key history, !! and !n expansion, and per-command help.

Goal

My goal is to create a realistic Linux terminal that teaches beginners how to use common commands through interactive lessons instead of just reading documentation.

Next Steps

• Build chmod, chown, sudo for the Permissions section
• Write lesson content for lessons 21-24
• Build the Final Mission with a timer and game-style objectives

Try It

Live Demo