Skip to content

README.md

Latest commit

 

History

History
112 lines (75 loc) · 4.42 KB

README.md

File metadata and controls

112 lines (75 loc) · 4.42 KB

Tree Traversal Explorer

An interactive, visual explorer for binary and n-ary tree traversal algorithms, designed for A-Level Computer Science students and anyone learning tree traversals for the first time.

🚀 Live demo →

Features

  • Three traversal algorithms — Pre-order (Root, L, R), In-order (L, Root, R), Post-order (L, R, Root)
  • Animated step-by-step playback with adjustable speed
  • Manual stepping — click once to advance one step, hold to auto-step at the current speed
  • Configurable tree — set min/max depth and min/max children per node; regenerate instantly with the ↻ button
  • Live code panel — syntax-highlighted pseudocode in JavaScript, Python, or C#, with the active line highlighted as the traversal runs
  • Call stack panel — real-time call stack visualisation showing recursive calls and their return values
  • Sequence bar — the visited node sequence builds up as the traversal progresses
  • Dark / light theme toggle
  • Resizable panels — drag the dividers to customise the layout; hide the Code or Call Stack panels independently

URL Parameters

You can customise the initial state of the application using URL parameters. This is useful for creating shareable links with specific configurations.

  • lang — Set the initial language (e.g., ?lang=python).
  • categories — Filter the language dropdown to show only languages matching the specified categories (comma-separated, e.g., ?categories=AQA,OCR).
  • settings — Toggle the visibility of the settings (left) panel (true or false).
  • code — Toggle the visibility of the code panel (true or false).
  • callStack — Toggle the visibility of the call stack panel (true or false).
  • sequence — Toggle the visibility of the sequence bar (true or false).
  • traceLine — Toggle the code line tracing (true or false).
  • focus — Toggle focus mode, hiding boilerplate code (true or false).

Running locally (self-hosting)

No build step is required — this is a plain HTML/CSS/JS application.

Option 1 — npx serve (recommended)

git clone https://github.com/DevDecoder/tree-traversals.git
cd tree-traversals
npx serve .

Then open http://localhost:3000 in your browser.

Option 2 — Python simple server

git clone https://github.com/DevDecoder/tree-traversals.git
cd tree-traversals
python3 -m http.server 8080

Then open http://localhost:8080.

Option 3 — VS Code Live Server

Install the Live Server extension, open the repo folder, and click Go Live in the status bar.

Note: The app uses ES modules (type="module"), so it must be served over HTTP — opening index.html directly as a file:// URL will not work.

Project structure

tree-traversals/
├── index.html          # Application shell
├── styles.css          # All styling
├── languages/          # Language template specifications (.lang files)
├── docs/               # Documentation
└── src/
    ├── main.js         # Entry point
    ├── ui.js           # UI controller — event handling, panel visibility, animation loop
    ├── tree.js         # Tree data structure and SVG renderer
    └── traversal.js    # Generator-based traversal algorithms and Animator class

Deploying to GitHub Pages

The repository includes a GitHub Actions workflow (.github/workflows/deploy.yml) that automatically deploys the main branch to GitHub Pages on every push.

To enable it for a fork:

  1. Go to Settings → Pages in your repository.
  2. Set Source to GitHub Actions.
  3. Push any change to main — the workflow will build and deploy automatically.

The live site will be available at https://<your-username>.github.io/<repo-name>/.

Contributing

We welcome community contributions! The easiest way to get involved is by adding support for new programming languages or pseudocodes.

The application uses a custom, language-agnostic template format (.lang) to build code snippets and logic block highlighting.

Licence

MIT