The Lesson Graph

Most of the Studio asks you to work one scene at a time. The Lesson Graph does the opposite: it shows the whole lesson at once as a flowchart, so you can see — and change — every path a student can take.

The lesson reads left to right, the way you read: the opening scene sits on the left and each step follows to its right. Where the lesson branches, the branches fan out evenly above and below the scene they leave — a scene that splits two ways sits centered between its two destinations — and paths that travel backward (a retry loop, a return to an earlier scene) wrap around the outside of the map so the middle stays clean. The map opens close enough to see each scene's miniature: a short lesson fits on screen whole, and a longer one opens on its opening scene instead of shrinking every card to a sliver — press fit view to see the whole lesson at once. Scroll to move around the map — trackpad, mouse wheel, or the scrollbars — and use the small overview map in the top corner to see where you are in a long lesson. Hold Ctrl (or ⌘) while scrolling to zoom, or use the zoom in / zoom out / fit view buttons in the map's bottom-right corner if you'd rather click than scroll.

Edit Lesson on a lesson's page opens the graph, so the map is where authoring starts. You can start there on a brand-new lesson too: the New lesson dialog carries a quiet or map the flow first link that drops you straight into the graph instead of the canvas — see Creating a Lesson.

From inside the studio there are two doors:

• ← Lesson graph at the top left.
• The flow sentence in the scene info strip above the canvas — "Automatically flows to Question 2", "Manual Scene Flow". Click the phrase and the map opens on the flow it just described. Clicking the destination name in that sentence still jumps to that scene instead, so you can pick whichever you meant. See Studio Overview.

A Berdee lesson is a flow, not a stack of slides. Until now that flow was something you assembled widget by widget: a button here that navigates, a scene there that carries the student onward when they answer correctly. The graph is that same lesson, drawn.

First visit

The first time you open the graph, a short card explains the idea. Dismiss it once you are comfortable — What is this?, in the ⋯ menu above the canvas, brings it back whenever you want it again.

Reading the graph

Scene cards

Every scene appears as a card with a miniature of the scene, so you can recognize it at a glance instead of reading down a list of names. Zoom far out and each card shows the first letter of the scene's name in place of its miniature, which keeps a big map quick to move around. Scenes are laid out by flow: each step follows the one before it, a straight run of scenes collapses into a single row, and branches spread out only where the lesson actually branches.

Arrows are paths

Each arrow is one path a student can take. Small chevrons sit along every line pointing the way a student travels, so you can follow a route even where several paths share the same stretch of line.

There are two kinds of arrow.

• The lesson's default flow. When a scene is set to move the student on after a correct answer — "go to the next scene in order" — Berdee draws a thin dashed arrow with a When answered correctly chip. This is the quiet spine of most lessons, so it stays visually light.
• Paths you authored. A button that navigates, a submit that branches, a path gated by a condition — these get a labeled chip describing in plain language when the path fires.

_Example: A chip reading "When 'Next' is pressed", "After 10 seconds", or "If this scene score is at least 80%". A small funnel on a chip means the path only fires under a condition; a clock means a timer drives it._

Every scene's outgoing paths label themselves beside its card, in the same top-to-bottom order as the scenes they lead to, so a card reads like a list of everything that can happen on that scene. The paths themselves leave the scene as one line and branch off at each destination — like a road with turnings rather than a bundle of separate wires, so a scene with five paths is no harder to follow than a scene with one. Hover (or keyboard-focus) a chip to trace its path: the rest of the map dims, the active path lights up with arrows flowing along it toward the scene it leads to, and both ends — the scene it leaves and the scene it reaches — are outlined. A tooltip also spells out the path's full setup in plain English: what fires it, where it goes, and each condition on its own line. (If your device is set to reduce motion, the arrows stay still.)

The legend

A small legend sits in the map's bottom-left corner, so you don't have to hover a chip just to tell one line style from another at a glance: tapped path, automatic (when correct), from the folder's template — the same dashed line documented above as "via layout" — random pick, router decision, spin wheel (edited on the wheel itself, not the arrow), and broken path.

Layouts, random picks, and spin wheels

• Layouts have no node on the map — a layout is a backdrop, not a step. But navigation wired on a layout's widgets is real for every scene that shows it, so the graph draws it as a dashed path from each scene that uses the layout, labeled "via layout '\<name\>'". Editing one of those paths edits the layout's wiring — it changes the path for every scene using that layout, and the editor says so.
• A random pick — a path that sends students to a randomly chosen scene — draws as a single arrow rather than a fan of arrows to every scene it could pick. You can't add a new random pick, but lessons that already have one keep it, and it still works for students. Click the arrow to edit the pick, including its fallback — where students go once every scene has been used up. The fallback can't be the scene they are already on, since that would leave them stuck, so Berdee leaves it out of the list for you.
• Spin Wheel segments can navigate too. Those arrows are drawn so the flow is complete, but they are edited on the wheel itself — the dialog takes you to the scene with the wheel selected. See Spin Wheel.

Router nodes

A router is a decision, not a scene — it checks its rules and instantly sends each student to the first matching destination. On the map a router is a short amber dashed card (students never see it, so it deliberately doesn't look like a scene), with one labeled arrow per rule plus the Otherwise arrow — read a router's card and its arrows and you've read its whole logic.

• Click the orange dot on the right edge of the scene the branch starts from, then choose A router — the quickest way, and the one that leaves nothing to wire up. The Add next window asks when students go to the router (the same question as adding a path), then lets you write its rules in the next step. The router arrives already connected to that scene, with its Otherwise starting on wherever the scene sent students before.
• Add router, under the ＋ Add scene menu above the canvas, creates one on its own and opens its rules straight away. Nothing points at it yet, so the map flags it as unreachable until you wire a scene into it — handy when you want to build a shared hub first.
• Hover the card and choose Edit rules — or click any of its rule arrows — to change the rules, reorder them, or delete the router.
• Paths _into_ a router aren't drawn by hand: they're Delegate to Router actions on widgets, or a scene's Progression set to Router — the graph draws those arrows for you. Any existing router also shows up in the destination list when you add a path, so several scenes can share one decision.

Ending nodes

Every closing scene draws as a scene card badged End, at the right-hand end of the flow where the lesson finishes. Reaching one completes the lesson and locks the student's answers, so an End card is where every route has to land eventually.

Two things set an End card apart from every other card:

• Nothing leaves it. An ending has no outgoing paths and no connection dot on its right edge. There is nothing to drag from, because there is nowhere for a student to go afterward.
• Anything can lead into it. Drag a path into it from any scene, point a scene's Progression at it, or make it a router's destination. A branch that should stop here simply connects here.

Connect your last scene to the ending. The lesson's last scene flows into the first ending on its own — see Scene Progression — but a branch that finishes anywhere else needs a path you draw. A branch with no route to an ending is one students can never finish from.

When a lesson has several endings — Mastered, Keep practicing, Ask an adult — each is its own card and each badges End. Reading the map then tells you every way the lesson can finish, and which route reaches which.

_Example: A score path from the final quiz scene — "If this scene score is at least 80%" — leads to Mastered, while the scene's wrong-answer path leads to Keep practicing. Two End cards, two visible outcomes._

The problems strip

Above the canvas, a strip counts what the graph found: how many scenes, how many paths, and how many warnings. The warnings answer the two questions educators actually ask about a branching lesson.

• Scenes a student can never reach — nothing in the lesson points at them, or the only thing that does can never fire (a scene's "advance when correct" on a scene with no graded question).
• Paths that point at a deleted scene — drawn as missing scene arrows, so you can remove them or point them at a real scene.
• Random picks with nothing to pick from — drawn as missing folder arrows. A random pick like this leaves students with nowhere to go, and it is easy to miss because the problem only shows up once a student reaches that scene. Open the arrow to fix the pick, or remove it and draw an ordinary path instead.

Click any warning pill and the map recenters on the scene it's about — faster than hunting for it yourself. Past four warnings the strip stops listing them individually and folds the rest into a +N more count, so the strip stays a glance rather than a list; work through the visible ones and the next batch takes their place.

Four more cover the closing scene and the flow into it:

• Scene Has No Way Forward — a scene a student can enter but never leave. Nothing on it advances the lesson: no graded question, no Next button, no timer. An "advance when correct" setting doesn't count on its own: with no graded question on the scene there is nothing to get correct, so that arrow is drawn but never taken. The warning appears even when another branch reaches the ending, because a student who takes this branch is still stuck.
• Students Can't Reach the Ending — no path in the whole lesson arrives at a closing scene, so an attempt can never finish.
• Ending Leads Back Into the Lesson — something on a closing scene navigates away from it, which would drop a student back into a lesson their attempt has already finished and locked.
• Ending Still Grades Students — a question or an answer-checking button sits on a closing scene, where it could never count.

These four warn; they do not block publishing.

Editing a path

Click any arrow to open it — and you get the same dialog you created it with: the five triggers, the same fields, pre-filled with the path's current setup. From there you can:

• Change where it goes — pick a different destination scene (or create a new one).
• Change when it fires — switch the trigger entirely (a tap path can become a timer path), adjust the score cut or the seconds, or edit a tap path's condition.
• Remove the path entirely.

Switching a path's trigger rewires it cleanly: the old wiring is removed and the new one authored in one step, and one undo takes it back. A few special paths open their own editors instead: paths drawn via a layout (they change every scene using that layout), random picks, Spin Wheel segments, and broken paths (which ask for a new destination).

Editing a default-flow arrow (the thin dashed one) edits the same Scene Progression setting you find in scene settings — one source of truth, shown in two places.

Creating a path

Add what comes next

Click the orange dot on the right edge of a scene card — hover it and it turns into a ＋. A short guided window walks you through it one question at a time, with Back and Next to move between steps:

1. What comes after this scene? Choose A new scene or A router — an invisible decision point that sends each student somewhere different based on their score, their answers, or a variable. To connect to a scene you already built, choose Or connect to a scene or router that's already in the lesson instead.
2. When does the student go there? Pick one of the five triggers below. For a new scene, you also name it here.
3. Where does the router send each student? (Routers only.) Add rules and set the Otherwise destination right in the same window — see Routers.

Nothing changes in your lesson until you press the last button (Add scene, Add router, or Add path). The new scene or router and the path to it are then created together, and one undo takes them all back. Cancel at any step leaves your lesson untouched.

_Example: Click the orange dot on Quiz, pick A router, choose They answer wrong, then add a rule "Visit count of Quiz is at least 2 → Hint sheet" with Otherwise set to Quiz. Students who miss the quiz twice get the hint sheet; everyone else tries again._

Drag to connect two scenes

Drag from the orange dot on a scene card's right edge to another card (a click on the same dot opens the guided window above instead). While you drag, every scene you can drop on grows its left-edge dot, and the line snaps onto a dot as you get close — release to connect. Berdee then asks how students take this path — pick one of five triggers:

• They tap something — pick the widget the student taps: a button, an image, or even a question. This adds a new press behavior to that widget and leaves anything already wired there alone. Widgets students drag are listed too: a quick tap that doesn't move one takes the path, and dragging it doesn't. Containers and invisible players aren't listed, because a student can't tap them. You can attach a condition while you create the path, or leave it unconditional and gate it later. Step-by-step: Let students choose their own path.
• They answer correctly — this sets the scene's Progression destination. A scene has only one such destination, so Berdee warns you before replacing one you already set. This option needs at least one scorable widget on the scene; with no graded question there is nothing for Berdee to call correct.
• They answer wrong — when the student presses Submit having answered everything without passing the scene, they take this path. Pair it with an "answer correctly" path to send passing students forward and struggling students to a review or try-again scene. This needs a graded question and a Submit button on the scene, set to check just this scene — the end-of-lesson Submit ends the whole attempt, so it can't send students back for another try. Lead the path forward, to a review scene that then continues on, rather than back to the question: pressing Submit locks the student's answers, so a student sent back to the question can't change them. Step-by-step: Show an explanation when a student gets it wrong.
• Their score is… — you choose the exact cut: _score is below 60%_, _score is at least 90%_, and so on, checked the moment the student presses the scene's Submit (whatever they have answered by then). Add several score paths to fan students out by how they did — just keep the cuts from overlapping, because when two score paths both match, students take the one you added last. Step-by-step: Send students down different paths by their score.
• Time runs out — students move on automatically after the number of seconds you choose. Berdee adds a hidden timer to the scene that starts when the scene opens; it shows on the canvas as a dashed chip, so you can select it later to change the duration. Each one gets its own name (Timer 1, Timer 2, …), so a scene with two timed paths stays readable. Removing the path from the graph also removes its hidden timer, and deleting the timer removes the path — they are one thing.

Drawing a tap or time runs out path also turns off the scene's automatic move-to-next-scene, if you never changed that setting — an explicit path replaces the implicit one, so the map shows exactly the paths you drew. (The dialog tells you when this will happen, and you can turn the automatic advance back on any time in Scene Progression or with an "answer correctly" path.) "Answer wrong" and score paths leave it alone on purpose: they work _alongside_ the pass advance, sending strugglers one way while passing students continue. That holds when the path leads to a new scene too: if the new scene would otherwise become the next scene in order, Berdee points the "answer correctly" path at the scene it led to before, so passing students go exactly where they went before.

Drag to empty space to create the next scene

The most common branch is one to a scene that does not exist yet. Drag a connection out of a card and drop it on an empty spot on the canvas: Berdee creates the new scene and the path to it in one step, and one undo takes both back.

Adding scenes and layouts

You never have to leave the graph to grow the lesson's structure.

Everything you can add sits in one place above the canvas: ＋ Add scene adds a scene on click, and the arrow beside it opens the rest.

• Add scene adds a scene to the lesson. Once your lesson has a layout, it asks which layout the new scene should use first — see Choosing a layout for a new scene.
• Add layout (in the ＋ Add scene menu) creates a lesson-level layout and opens it in the designer — a layout is a shared backdrop whose widgets appear behind every scene it is applied to, so the designer is where you build it.

On a lesson with only one scene, a small card floats over the map — This lesson has one scene — add another to draw a path between them — with its own Add scene button, since there's nothing yet to connect a path to.

To give a scene a backdrop, hover its card and choose Apply layout — the picker shows a live preview of that scene under each layout before you commit. Layouts never appear as cards on the map; their navigation draws as dashed "via layout" paths from the scenes that use them (see above).

Fixing problems

A short loop that catches most flow mistakes:

1. Open the graph and read the problems strip.
2. Open each unreachable scene. Decide whether it needs a path in, or should be deleted.
3. Open each missing scene arrow and either point it at a real scene or remove it. Do the same for any missing folder arrow — a random pick needs scenes to draw from.
4. Open each Scene Has No Way Forward warning — the graph now finds these for you — and give the scene something that advances it, or a path out.
5. Finish in Preview — walk the lesson once succeeding and once failing.

Working scene by scene from the graph

Hover a scene card for its actions — the hovered icon names itself: Edit opens the scene in the designer, Preview plays the lesson from that scene (handy for testing a branch without clicking through everything before it), Layout picks a shared backdrop for it (see Layouts), and Delete removes it. To add what comes after a scene — a new scene, a router, or a path to a scene you already have — click the orange dot on the card's right edge instead (see Add what comes next).

Before a scene is deleted, Berdee shows you how it is connected: which paths lead into it (those break, and show on the map as missing scene arrows until you point them somewhere else), which scenes simply move on to it in order (and which scene they will move on to instead), any scene that would be left with nowhere to go, any random pick that would lose the last scene it can pick from (it then always goes to its fallback), and which paths leave it (those go with it). You can undo a delete. The opening scene and a lesson's only ending can't be deleted, so they have no Delete action. The topbar's Preview button in graph view always starts from the opening scene. Click Edit on a card and the card itself opens out into the designer — the scene grows from the map into the full editor, so you can see exactly which scene you landed in. The button at the top left takes you one step up the lesson rather than out of it, and it names where it goes: from a scene it reads ← Lesson graph and returns you to the map; from the map it reads ← Back and takes you out to the lesson's page. Going back to the map plays the same move in reverse: the editor folds back down into the card for the scene you were working on, so you never lose your place on a large map. (If you have reduced motion turned on in your system settings, both moves switch instantly instead.) The scene list stays where it always is — use whichever way of moving between scenes suits the moment. The scene info strip above the canvas still summarizes the flow for the scene you are editing.

What the graph does not show

The graph maps the paths you authored. It does not simulate a student run. So:

• Widget visibility conditions are not evaluated — a button that is hidden for most students still draws its arrow.
• Disabled states are not evaluated.
• A condition that can never be true still draws a path, because the path exists in the lesson.

Treat it as a map, not a student simulator. When you want to know what actually happens, use Preview and Test a Lesson — that is where flow, conditions, and variables run for real.

Related docs

• Scene Progression — the when-correct setting the auto arrows edit
• The Closing Scene — the End cards, and what reaching one does
• Routers — the amber decision nodes and their rules
• Events, Actions, and Conditions — the triggers, actions, and conditions a path is built from
• Scene Management — the scene panel's view of the same structure
• Preview and Test a Lesson — run the flow as a student would
• Layouts — the shared backdrops behind the dashed "via layout" paths