Branching Course Editor

What is the Branching Course Editor?

The Branching Course Editor is a visual, node-based authoring tool for creating adaptive learning experiences. Unlike traditional linear courses, branching courses let learners take different paths based on their choices, performance, and attributes -- creating personalized journeys through your content.

Overview of the Workspace

The editor has three main areas:

Creating Your First Course

1. 1
   Open the editor -- click "Open Editor" at the top of this page, or navigate to course-editor-enhanced.html.
2. 2
   Add a Content node -- click "Add Node" in the toolbar and select "Content". This is your starting point.
3. 3
   Edit the node -- click the node to select it. The properties panel on the right lets you set a title and body text.
4. 4
   Add a Decision node -- this gives the learner choices. Connect the Content node's output port to the Decision node's input.
5. 5
   Add End nodes -- every path needs to terminate. Add End nodes and connect them to your branches.

Nodes are the fundamental units of your course. Each node represents a step, screen, or decision point that the learner encounters. There are 11 types, each serving a distinct purpose.

Creating Connections

Connections are the arrows that link nodes together, defining the flow of your course. To create one:

1. 1 Hover over a node's output port (the small circle on the right side). It will glow purple.
2. 2 Click and drag from the output port. A line will follow your cursor.
3. 3 Drop the line onto another node's input port (the circle on the left side). The connection is made.

Connection Types

Editing and Deleting Connections

• -- Click a connection to select it. The properties panel shows its label and type.
• -- Edit the label in the properties panel to change what the learner sees on decision branches.
• -- Press Delete or Backspace to remove a selected connection.
• -- If confirmDelete is enabled in settings, you will be asked to confirm before deletion.

What Are Attributes?

Attributes are numeric variables that track the learner's state throughout the course. Think of them as RPG-style stats: knowledge, confidence, skill level, or any custom metric you define. They change as the learner progresses and can influence which paths are available.

Defining Attributes

In the editor's settings, you define attributes with:

Attribute Effects on Nodes

Each node can modify attributes when the learner visits it. Effects can be:

• + Delta values: Add or subtract from an attribute. E.g., knowledge +10
• ? Conditional effects: Only apply if a condition is met. E.g., "If confidence > 50, knowledge +15; otherwise knowledge +5"

Using Attributes in Conditions and Gates

Condition nodes evaluate attribute expressions to route learners. Gate nodes block until an expression is true. Supported operators: >= <= == != > <

Opening the Layout Editor

Double-click any Content node to open its Layout Editor. This gives you a WYSIWYG canvas for designing rich, structured content with drag-and-drop blocks.

Block Types

Templates

The Layout Editor includes pre-built templates to speed up content creation:

Canvas Width Presets

Control the content width to match your target device: narrow (mobile), medium (tablet), or wide (desktop). This affects how blocks reflow and stack.

Exporting Your Course

Click the Export button in the toolbar. You can export as:

Importing Courses

Click Import in the toolbar and select a .json or .yaml file. The editor will parse it and load all nodes, connections, attributes, and settings.

The Course File Structure

Courses are saved as portable single-file documents containing everything:

// Simplified course structure
{
  "meta": {
    "title": "My Branching Course",
    "version": "1.0",
    "created": "2026-03-28"
  },
  "attributes": [
    { "name": "knowledge", "default": 0, "min": 0, "max": 100 }
  ],
  "pages": [
    {
      "id": "page-1",
      "nodes": [ ... ],
      "connections": [ ... ]
    }
  ],
  "settings": { ... }
}

Auto-Save

The editor automatically saves your work to the browser's localStorage as you edit. This means you can close the tab and return later without losing progress. For permanent storage, always export to a file.

The canvas is your infinite workspace. Here is how to navigate it efficiently:

Open the settings panel via the gear icon in the toolbar. Each toggle customizes the editor experience:

General Tips

Common Course Patterns