Building Your Experio

The Experio Builder takes you through a structured authoring flow — you start by setting up your map with Points and Stages, then open each Stage to add your content Blocks, reorder everything using the Overview Panel, and finally preview before publishing. This guide covers the full building process from start to finish.

The Experio Builder is available for Educators on the web platform.

Ready to start building? Let's take a closer look below.

Before You Begin

1. Log in to BeED using your account credentials.
2. Make sure your active role is set to Educator.
3. Open an Experio from the Unified Library to enter the Experio Builder.
4. Ensure your Experio Details and Settings are configured before building. See the Experio Details & Settings guide for more.

Part 1 — Building Your Map

The Map Frame is the starting point for every Experio. This is where you create the top-level structure using Points, and add Stages under each Point.

The Map Canvas

When you open a new Experio, the map canvas displays an empty state with a prominent call-to-action:

"Begin structuring your Experio by adding your first Point"

A default text box with the placeholder "Click to Add Text" is also displayed on the canvas. You can click it to enter edit mode and type directly on the canvas, or drag it to reposition it. Click outside the text box to exit edit mode.

To add additional text boxes to the canvas at any time, click the Add Text button.

How to Add a Point

1. From the Map Frame, click the (+) Add First Point button on the canvas empty state, or the Add Point button once Points already exist.
2. A Point Holder is created on the canvas with a default label — the first Point is labelled "A" with the placeholder name "Point Name".
3. Subsequent Points are labelled alphabetically: B, C, D, and so on.
4. Hover over the Point Holder to reveal the Edit and Delete action buttons.
5. Click Edit to enter edit mode for the Point Label and Point Name fields simultaneously.

The Add Point button is disabled once 26 Points (A to Z) have been created. Hovering over the disabled button shows the tooltip: "Maximum number of Points reached."

How to Rename a Point

1. Hover over the Point Holder you want to rename.
2. Click the Edit button that appears.
3. The Point Label and Point Name fields enter edit mode simultaneously.
4. Edit the Point Label — accepts a single alphabetical character from A to Z only.
5. Edit the Point Name — type your preferred name for the Point.
6. Click outside the fields to save your changes.

How to Reposition a Point Holder

1. Click and hold anywhere on the Point Holder frame.
2. Drag it to your preferred position on the map canvas.
3. The Point Holder follows your cursor in real time.
4. Release the mouse to place it at the new position — the position is saved immediately.

Point Holders are restricted to the map canvas boundaries — they cannot be dragged outside the canvas area.

How to Delete a Point

1. Hover over the Point Holder you want to delete.
2. Click the Delete button that appears.
3. A confirmation popup appears — confirm the deletion.
4. The Point and all its associated Stages and Blocks are permanently removed.

Deleting a Point removes all content inside it. This action cannot be undone.

Part 2 — Adding and Managing Stages

Stages sit inside Points and represent the individual learning steps within each Point. You manage Stages from the Stage Bar at the bottom of the map canvas when a Point is selected.

How to Add a Stage

1. Click on a Point Holder on the map canvas to select it.
2. The Stage Bar slides up from the bottom of the screen.
3. If no Stages exist yet, a prompt and a (+) icon are shown — click (+) to add the first Stage.
4. A Stage is created with the default name "Stage Name".
5. To add more Stages, click the (+) icon again.

How to Rename a Stage

1. Locate the Stage you want to rename in the Stage Bar.
2. Click the pencil icon on the Stage bar.
3. The Stage name enters edit mode — type your preferred name.
4. Click outside the field to save.

How to Reorder Stages

1. Locate the Stage you want to move in the Stage Bar.
2. Click and hold the rearrange icon on the Stage bar.
3. Drag the Stage to its new position.
4. Release to place it — the order updates immediately.

Locked Stages cannot be reordered. Drag interaction is disabled for locked Stages.

How to Lock a Stage

Locking a Stage requires learners to complete the previous Stage before they can access the locked one. The first Stage within each Point cannot be locked.

1. Locate the Stage you want to lock in the Stage Bar.
2. Click the lock icon on the Stage bar.
3. A confirmation popup appears with the message: "Stage Restriction. This action will lock the selected stage, requiring learners to complete the previous stage before proceeding. Locked stages cannot be reordered. Are you sure you want to proceed?"
4. Click Yes to lock the Stage.
5. The lock icon turns orange and is visible on both the Stage node and the Stage Bar.

To avoid seeing this confirmation in the future, check the "Don't show this again" checkbox in the popup before clicking Yes.

To unlock a Stage:

1. Hover over the orange lock icon — it turns green to indicate an unlock action is available.
2. Click the icon to unlock the Stage.

⚠️ A Stage cannot be unlocked once the Experio has been attempted by a learner.

How to Delete a Stage

1. Locate the Stage you want to delete in the Stage Bar.
2. Click the delete icon on the Stage bar.
3. A confirmation popup appears — confirm the deletion.
4. The Stage and all its Blocks are permanently removed.

Deleting a Stage removes all Blocks inside it. This action cannot be undone.

Part 3 — Adding Content Blocks

Blocks are the individual units of content within a Stage. Each Stage can contain up to a maximum of 20 Blocks.

Opening a Stage

1. Click on a Point Holder on the map canvas to select it.
2. Click on a Stage in the Stage Bar.
3. The builder switches to the Stage Frame — a full-page editing view for that Stage.
4. Use the breadcrumb at the top to navigate back to the Map Frame at any time.

The Empty Stage State

When you open a Stage for the first time with no Blocks, the Stage Frame displays:

"Start Building Your Content — Add your first block to begin creating engaging educational content."

An Add First Block button is displayed prominently. Click it to reveal the available Block options.

Block Types

⚠️ Add from Question Bank is currently being rolled out and may not be available yet. Expected availability: end of August 2026.

⚠️ Conference Block is currently being rolled out and may not be available yet. Expected availability: end of August 2026.

How to Add Your First Block

1. Open a Stage from the Stage Bar.
2. Click Add First Block in the empty state.
3. The available Block options appear with icons and descriptions.
4. Click the Block type you want to add.
5. The Block is created within the Stage and the empty state header disappears.

How to Add More Blocks

Once one or more Blocks exist in a Stage:

1. Scroll to the bottom of the Stage content.
2. Click Add More Block after the last Block.
3. The available Block options appear — select the type you want.
4. The new Block is added after the last existing Block.

Once the maximum of 20 Blocks is reached, the Add More Block button disappears and the insertion toolbar between Blocks is disabled and greyed out.

How to Insert a Block Between Existing Blocks

1. Hover between any two existing Blocks in the Stage Frame.
2. A Block Insertion Toolbar appears showing the available Block options as icon-only buttons.
3. Click the icon for the Block type you want to insert.
4. The new Block is inserted at that specific position.

How to Expand All Blocks

1. While inside a Stage Frame, locate the Expand All button — a sticky button fixed at the bottom of the viewport.
2. Click Expand All to expand all collapsed Blocks within the Stage at once.

The Expand All button appears blue and active when one or more Blocks are collapsed. It appears grey and inactive when the Stage is empty or all Blocks are already expanded.

Part 4 — Reordering with the Overview Panel

The Overview Panel gives you a bird's-eye view of your entire Experio structure and lets you reorder Points, Stages, and Blocks without navigating away from your current view.

Opening the Overview Panel

1. Click the Overview button in the Main Frame header.
2. The Overview Panel slides open showing the full hierarchical list: Points → Stages → Blocks.
3. Click the button again to close the panel.

How to Reorder Using the Overview Panel

Reorder Points:

1. Open the Overview Panel.
2. Click and hold the drag handle next to a Point.
3. Drag it to its new position in the list.
4. Release to place it — the map canvas updates immediately.

Reorder Stages within a Point:

1. Open the Overview Panel.
2. Expand a Point to see its Stages.
3. Click and hold the drag handle next to a Stage.
4. Drag it to its new position within the same Point.
5. Release to place it.

Locked Stages cannot be reordered from the Overview Panel. The drag handle is disabled for locked Stages.

Stages cannot be moved between Points — reordering is restricted within the same Point only.

Reorder Blocks within a Stage:

1. Open the Overview Panel.
2. Expand a Stage to see its Blocks.
3. Click and hold the drag handle next to a Block.
4. Drag it to its new position within the same Stage.
5. Release to place it — Block labels (B1, B2, B3…) update automatically to reflect the new order.

Blocks cannot be moved between Stages — reordering is restricted within the same Stage only.

Part 5 — Previewing Your Experio

⚠️ Preview is currently being rolled out and may not be available yet. Expected availability: end of June 2026.

The Preview button in the Main Frame header lets you view your Experio as a learner would see it before publishing.

How to Preview Your Experio

1. Ensure all changes are saved.
2. Click the Preview button in the Main Frame header.
3. Your Experio opens in preview mode showing the learner view.
4. Close the preview to return to the builder.

Based on the steps above, here's a quick summary:

1. Start in the Map Frame — add Points and rename them to structure your Experio.
2. Select a Point and add Stages to it from the Stage Bar — rename, reorder, and lock as needed.
3. Open a Stage to enter the Stage Frame — add Lesson Blocks, Question Blocks, and other content.
4. Use the Overview Panel at any time to see your full structure and reorder Points, Stages, or Blocks.
5. Preview your Experio before publishing to check the learner experience.

Your Experio is built — save, preview, and publish when you're ready!

Important Notes / Tips

• A single Experio supports a maximum of 26 Points (A to Z) and a maximum of 20 Blocks per Stage.
• Locked Stages cannot be reordered — via the Stage Bar or the Overview Panel.
• A Stage cannot be unlocked once the Experio has been attempted by a learner.
• Blocks and Stages cannot be moved between their parent containers — Blocks stay within their Stage, and Stages stay within their Point.
• Block labels (B1, B2, B3…) update automatically whenever Blocks are reordered.
• The Expand All button is only active when at least one Block in the Stage is collapsed.
• Features marked with ⚠️ are currently being rolled out — check the expected availability dates noted in each section above.