Quick reference¶

Operational checklist for those already familiar with the manual who want a reminder of essential steps.

Start local server¶

Windows (double-click batch scripts):

• start-navigator.bat → opens the Navigator
• start-scenario-editor.bat → opens the Scenario Editor
• start-theme-editor.bat → opens the Theme Editor

Manual (Mac/Linux or without scripts):

python -m http.server 8000

Addresses:

• Navigator: http://localhost:8000/navigator.html
• Scenario Editor: http://localhost:8000/scenario-editor.html
• Theme Editor: http://localhost:8000/theme-editor.html

Create a scenario¶

1. New → creates empty scenario
2. Settings → title, description, author, edit key labels
3. Select node → write Content
4. + Add Choice → button text + destination node
5. + Add resource → type, link and button label (if there are attachments)
6. Repeat for all nodes
7. Map → verify structure (no red borders = ok)
8. Save → downloads JSON file

Modify an existing scenario¶

1. Open → select JSON file
2. Modify nodes and choices
3. Save

Customize the theme¶

1. Open Theme Editor
2. Brand → logo, company name, website
3. Typography → choose font
4. Colors → background, text, buttons, map
5. Verify in preview
6. Save → downloads JSON file

Configure config.json¶

{
    "scenario": "scenario-name.json",
    "theme": "theme-name.json",
    "showCredits": false
}

Test locally¶

1. Update config.json with correct file names
2. Reload the Navigator (Ctrl+Shift+R)
3. Go through the entire scenario verifying paths

Publish¶

Required files (only these):

• navigator.html
• config.json
• defaults.json
• shared-utils.js
• shared-styles.css
• Scenario JSON file
• Theme JSON file (if customized)
• Resources folder (if used)

Do not include: scenario-editor.html, theme-editor.html

GitHub Pages:

1. Create repository
2. Upload required files
3. Settings → Pages → enable from main branch
4. URL: https://username.github.io/repo-name/navigator.html

Map positioning (Scenario Editor only)¶

Map color codes (Scenario Editor)¶

Connection colors:

Markdown in content¶

# Large heading
## Subheading
**bold**
*italic*
- list item
> quote

Quick troubleshooting¶