Build your first branching scenario with H5P (free)

“Branching scenarios need expensive software.”

You hear this a lot, usually right before someone signs another authoring-tool invoice. But the tool was never the hard part. Most branching scenarios fail in the writing: mushy decisions, joke options, feedback that lectures instead of showing what happened. No license fixes that.

The better sequence is to design a tiny scenario on paper first, then build it with H5P — free, open-source software that runs on an ordinary WordPress site. Below, you’ll design and build a working three-decision scenario, end to end, and walk away with a process you can reuse for bigger ones.

What you need

  • A WordPress site where you can install plugins (H5P also runs on Moodle and Drupal)
  • The free H5P plugin
  • About an hour
  • One decision your learners actually face at work — the ingredient that matters most

1. Write the scenario on paper first

Most scenarios fail in the writing, not the tool. So before you open any editor, map the whole thing on paper. Keep your first scenario small: one situation, three decisions, a few endings. If it doesn’t fit on an index card, cut it down until it does. Paper is also the cheapest place to be wrong — deleting a sticky note costs nothing, while deleting a node with six children in the editor hurts just enough that you’ll talk yourself into keeping a bad branch.

Our example is customer support, because almost every organization has some version of it. You’re Sam, on the support team at Northwind Apps, a fictional software company. A ticket arrives from Maria, a customer:

“Your latest update deleted a week of my work. I want this fixed today.”

The three decisions

Decision 1: What does Sam write first?

  • Best: apologize briefly and ask Maria to walk you through what she saw. She replies with details — people calm down when someone listens.
  • Defensive but tempting: explain that updates can’t delete files. Maria hears “you’re wrong” and gets angrier. The learner loops back and tries again.
  • Generous but premature: offer a full refund on the spot. The money goes out, but Maria still doesn’t have her files. The scenario ends early, badly.

Decision 2: Maria answers: “I opened the app after the update and my recent files were gone from the list.” What next?

  • Best: thank her and ask one targeted follow-up question. Her answer reveals that the update reset her file associations — the files were never deleted at all.
  • The information dump: paste a link to the full troubleshooting guide and wish her luck. Feedback, then loop back and try again.
  • The overpromise: “I’ll have this fixed by Friday.” Sam has no idea whether that’s true. Feedback, loop back.

Decision 3: Maria finds her files. What does Sam tell her?

  • Best: explain in plain words what happened and how to avoid it next time. Best ending: files back, trust intact.
  • The shrug: “Anything else I can help with?” Middling ending: the files are found, but Maria still believes the app ate them once.
  • The blame: “You must have moved them yourself.” Worst ending, and it earned it.

Why this structure works

Every option is plausible. There are no joke answers — each wrong turn is a mistake real support agents actually make, which is what makes the scenario practice instead of trivia.

The feedback shows the consequence instead of lecturing. Nobody reads “Incorrect, you should have empathized.” They read Maria’s reaction and draw their own conclusion.

And the loops keep the tree small. Wrong turns return the learner to the same decision instead of spawning new branches, so three decisions and four endings stay manageable — about a dozen nodes in total. Sketch yours before you touch the tool:

Story map for the three-decision support scenario: one backstory node, three decision points, and four endings, sketched before opening any tool

2. Install the H5P plugin

H5P is free and open source, released under the MIT license.[1] The WordPress plugin — listed as “Interactive Content – H5P” — has more than 40,000 active installations.[2]

  1. In your WordPress admin, go to Plugins → Add New.
  2. Search for “H5P”.
  3. Click Install Now, then Activate Plugin.

A new “H5P Content” entry appears in the admin menu. That’s the whole installation.

Two honest notes. First, if you’d rather not install anything yet, H5P.org lets you test-drive the authoring tool in your browser, and there’s a paid hosted version, H5P.com, with extras like hosting and LMS integrations. The plugin is the free route: fewer features than the hosted service and no official support, but everything a branching scenario needs. Second, if your organization runs Moodle or Drupal instead of WordPress, H5P has plugins for those platforms too.

3. Build the scenario in the editor

In the admin menu, open H5P Content and click Add New. The H5P Hub loads, offering the available content types. Choose Branching Scenario. If the content type isn’t on your site yet, the Hub is where you fetch it.

Name it and meet the canvas

The title is for you, not the learner — it identifies the content in your H5P list and never appears in the scenario itself. Then you’re looking at an empty canvas. To build, drag a content type from the left menu and drop it on a dropzone; the editor for that content type loads, and you create the content as usual. The icon in the top left corner opens the editor in full-screen mode, which you’ll want once the tree grows past a few nodes.

The H5P Branching Scenario editor canvas, where content nodes are dragged from the left menu onto dropzones to build the tree

Add the backstory, then a Branching Question

The first node is context, not a choice. Drag a Text node onto the canvas and paste in the backstory and Maria’s ticket. Branching Scenario also accepts Course Presentation, Image, Image Hotspots, Video, and Interactive Video nodes — useful when a scenario needs richer staging, but plain text is plenty for a first build.

Now the decision. Drag a Branching Question onto the dropzone below the backstory. Write decision 1 as the question, then add the three alternatives. Each alternative sends the learner down a different path — which is where your paper map pays off.

Adding a Branching Question node in the H5P editor, with the decision text and the three alternatives the learner can choose

Route every option: continue, jump back, or end

For each alternative, you decide what happens next. There are four possibilities:

  • New content: drag another content node below the alternative.
  • Another decision: drag a new Branching Question below it. This is how the best option of decision 1 continues to decision 2.
  • Jump to another branch: open the “Branching options” group and, under “Special action if selected”, choose “Jump to another branch”, then pick the node. This is how wrong answers loop back for another try.
  • Custom end scenario: the same “Special action if selected” setting — the path ends here with the feedback you write. Leave the feedback empty and the alternative leads to the default end scenario instead.

Map the paper plan onto these routes. The defensive answer in decision 1 jumps back to decision 1. The instant refund ends the scenario early. The best answer continues to decision 2. Decisions 2 and 3 follow the same pattern until all four endings exist on the canvas.

Feedback is optional for each alternative and each content node. When an alternative ends the scenario, its feedback appears on the end screen — so write it like a coach, not a grading rubric.

Set the intro screen and scoring

Under Settings you can configure the starting screen — a title and introduction learners see before the first node. Scoring lives under Settings → Behavioural settings → Scoring options: a fixed score per ending (the default), points collected along the learner’s path, or no scoring at all.[3] For a practice scenario, consider no scoring. The feedback is the assessment.

4. Test every path, then publish

The Preview button in the top right corner plays the scenario from the beginning, and you can preview from a specific node through that node’s menu. Use both. Then test for real: click through every path yourself — every jump, every ending — and confirm the feedback shows up where you wrote it. Test on your phone as well as your laptop; H5P content is responsive, but a scenario that reads fine on a monitor can feel cramped on a small screen. After that, hand the scenario to one other person and watch them play without helping. Where they hesitate, your writing is ambiguous. Where they backtrack in frustration, a route is broken.

Publishing is a shortcode. Save the content, and it appears in the H5P Content list with a shortcode like [h5p id="1"]. Paste that shortcode into any page or post where the scenario should appear, then publish the page. The official setup guide also describes an “Add H5P” button above the post body field that inserts the shortcode for you.

The finished branching scenario embedded in a WordPress page, showing the backstory and the first decision ready for learners

What H5P won’t do for you

It won’t write the scenario. The decisions, the options, the feedback — all still yours. A weak decision in a slick tool is still a weak decision, which is why the paper map came first.

And the model is a tree: choices lead to other nodes, and that’s it. For most practice scenarios that’s exactly enough. When a design starts to need more than the tree can express, that’s when commercial authoring tools earn their price — here’s how H5P compares to Storyline, Rise, and Captivate on exactly that basis.

If you want more scenario examples to steal from before you build your second one, the scenario-based training headquarters is the place.

Parting thoughts

The tool is free. The thinking isn’t — but the thinking is the part that makes scenarios work.

Want feedback on your scenario? My four-week online scenario design course gives you hands-on practice writing scenarios for training, plus my personal feedback on your work. Learn more.

Sources

[1] H5P.org — “H5P is a completely free and open technology, licensed with the MIT license.”

[2] Interactive Content – H5P, WordPress.org plugin directory — active installation count.

[3] Branching Scenario, H5P.org — branching, feedback, and scoring features.