Scenario Editor interface¶

The Scenario Editor is the tool for creating and modifying scenarios.

Layout¶

A scenario is the set of nodes (which the user sees as cards in the Navigator) and connections between nodes (which the user sees as choice buttons within the cards). Scenarios are saved as JSON files.

The interface is divided into two parts.

Left column¶

The left column is dedicated to managing general operations and the open scenario.

At the top it shows a row with buttons for:

• New: create a new scenario
• Open: open an existing scenario
• Save: save the current scenario as a JSON file
• Map: activate the map visualization

Button names are in English by default, but can be customized through Settings.

Below the button row appears the list of nodes that are part of the open scenario: only the Start node if starting with a new scenario, a complete list if you're already advanced in creation or if you open an existing scenario.

Each node in the list shows:

• the title (extracted from the content)
• the technical identifier
• informational badges: level and position (e.g., L2-P1), START for the initial node, END for terminal nodes

Editing area¶

The right part is dedicated to editing the selected node.

The top row contains:

• on the left: the scenario file name and total nodes. For a new scenario "New scenario" appears, the name changes automatically after saving
• on the right: the Settings button for metadata and translations

Below the header row appear the blocks that define the node:

• Node: node identifier management
• Content: the text content
• Choices: the choices available to the user
• Resources: attachments and linked resources

Map view¶

The map view shows the scenario as a visual tree.

Each node shows its identifier and title. Connections between nodes represent available choices, arrows indicate the path direction. The automatic layout arranges nodes in levels, with the start node at the top and branches expanding downward.

Border color codes:

• green: start node (START)
• orange: terminal node (END)
• red: orphan node, unreachable
• purple: selected node

Backward connections (loops) are colored orange to distinguish them from forward connections.

Clicking on a node in the map opens it directly in the editing area. To close the map, click the X button at the top right.

Editing area blocks¶

Node¶

The Node block manages the node identifier. It contains:

• Rename: opens a field to modify the identifier. The ID must be unique in the entire scenario and can only contain letters, numbers, and underscores
• DELETE: deletes the entire node from the scenario. Not available for the START node. Before deleting, the system asks for confirmation

Content¶

The Content block contains the text that the user will see in the Navigator card.

The content uses a simplified Markdown syntax:

Choices¶

The Choices block defines the choices available to the user, i.e., the buttons that allow proceeding in the path.

Clicking + Add Choice adds a new choice with two required fields:

• Button Text: the text that appears on the button
• Target Node: the destination node, selectable from a dropdown menu listing all existing nodes

The Target Node menu also includes the option + Create new node which opens a popup to directly create a new destination node.

Visual status indicators:

• gray border: newly created choice, not yet filled in
• amber border with "● unsaved": unsaved changes
• green border with "✓": complete and saved choice
• red border: validation errors

The Save Choice button saves the choice only if both fields are filled in. The REMOVE button deletes the choice.

A node can have multiple choices leading to different nodes. It's possible to create loops by connecting a node to one of its ancestors.

Resources¶

The Resources block allows attaching external resources to the node.

Clicking + Add Resource adds a resource with three required fields:

• Type: the resource type
  • Link: link to a web page
  • Download: downloadable document (must be accessible via URL)
  • Video: YouTube video (use the share link)
• URL: the resource address, can be either a web link or a relative URL to a local resource. In this case, it's convenient to define a subfolder to collect elements, the URL could be "docs/element1.pdf"
• Label: the description that appears to the user in the Navigator

Visual status indicators work the same as for Choices. The Save Resource button saves only if all fields are filled in.

Settings: metadata and translations¶

The Settings button opens a panel to configure scenario metadata and interface labels.

Metadata:

• Title: the scenario name, visible in the Navigator header
• Description: brief description (optional)
• Author: author name (optional)

UI Labels: allows translating or customizing all user interface labels (step, restart, endOfPath, resources, viewMap, back, download, openLink, watchVideo).

The JSON file¶

A scenario is saved as a structured JSON file in three sections:

• meta: metadata (title, description, author)
• translations: customized labels
• startNode: the identifier of the start node
• nodes: the object containing all nodes with their content, choices, and resources

Saving¶

The Save button generates a JSON file. There is no auto-save: save regularly during work.

In the status bar at the bottom, the state is always visible:

• "● Unsaved" (orange): there are unsaved changes
• "✓ Saved" (green): everything saved