// Case Study 02 -- Template System

Most teams build courses. I built the engine.

A Storyline template system isn't just a time-saver -- it's infrastructure. Every interaction pattern below is live and working. Click, tap, match, and choose right here.

Tabs

Click through four phases of the template build process.

Storyline 360JS

Accordion

Expand questions about the system design rationale.

One-at-a-time

Drag & Drop

Match the tool to its role in the architecture.

JS Validation

Branching Scenario

A stakeholder makes a request. What do you do?

Consequence Logic

Interaction 01 -- Tabs

Click a tab. Content adapts.

TABS TEMPLATE · STORYLINE 360

Design Phase

Every template started in PowerPoint -- visual design language and interaction blueprint reviewed and approved by stakeholders before a single Storyline slide was built. This eliminated late-stage revision cycles.

PowerPointWireframingStakeholder Review

Build Phase

Approved designs converted into Storyline master slides with JavaScript-enhanced interactions -- dynamic state management, conditional branching, API calls that Storyline's native triggers couldn't handle.

Storyline 360JavaScriptMaster Slides

Test Phase

Each component QA-tested across LMS environments -- SCORM 1.2, SCORM 2004, and xAPI -- to ensure reliable variable passing, completion tracking, and consistent rendering across browsers.

SCORM 2004xAPICross-browser QA

Deploy Phase

Templates published as Storyline packages with full documentation -- usage guides, variable dictionaries, and customisation instructions -- so any developer on the team could use them independently.

DocumentationEnterprise LMSTeam Handoff

Interaction 02 -- Accordion

Expand what you need to know.

ACCORDION TEMPLATE · STORYLINE 360

Every course built from scratch means rebuilding the same interactions, restyling the same layouts, and re-solving the same technical problems. A template system eliminates that overhead -- the infrastructure is built once, and every subsequent course starts from a working foundation rather than a blank slide.

Storyline's native triggers are powerful but limited -- they can't make API calls, dynamically generate content, or handle complex conditional logic. JavaScript embedded in Storyline's Execute JavaScript trigger removes those limits. It can read and write Storyline variables, interact with external systems, and perform calculations impossible with clicks and states alone.

Three things: visual consistency (master slides enforcing brand guidelines automatically), technical reliability (JavaScript components tested across LMS environments), and documentation (clear guides so developers with varying skill levels could use the templates without needing the original designer in the room).

Most L&D teams measure output in courses. This system changed the measurement -- the template infrastructure itself is the output. The value compounds over time: every new course built on the system delivers the same quality faster, and the team's capability ceiling rises without headcount growing.

Interaction 03 -- Drag & Drop

Match the tool to the purpose.

DRAG & DROP TEMPLATE · STORYLINE 360

Drag these →

JavaScript

PowerPoint

SCORM

Master slide

Drop into ↓

Logic layer

Design layer

Tracking layer

Structure layer

Interaction 04 -- Branching Scenario

Every choice has a consequence.

BRANCHING TEMPLATE · STORYLINE 360

A stakeholder reviews your new course template and says: "This looks great, but can we just add 15 more slides explaining each policy in detail? Learners need to know everything."

What do you do?

A Agree and add the 15 slides -- the stakeholder knows their content best.

B Push back with data: propose a 5-slide summary with an accordion template for detail, keeping engagement high while covering the content.

C Say yes in the meeting, then quietly cut the slides later and hope nobody notices.

// All 4 interactions complete

Showcase Complete ✓

You've seen the engine.

Four interaction patterns. One template system. Reusable, documented, and JavaScript-enhanced to go beyond what Storyline does natively.

4×

Interaction types built

∞

Reuse potential

Rebuilds from scratch

What this demonstrates: Systems thinking applied to L&D -- building infrastructure that multiplies team capacity. The difference between a developer who builds courses and an architect who builds systems.

Articulate Storyline 360 JavaScript PowerPoint Enterprise LMS SCORM 2004 xAPI

Full case study →

Under the hood

How I Built This

✓ What's real in this demo

All 4 interaction patterns are the exact patterns built into the Storyline template system, rebuilt faithfully in HTML/JS
Accordion one-at-a-time logic -- matches Storyline's variable-controlled state management
Drag-and-drop validation -- correct/incorrect feedback per item, same scoring logic as SCORM templates
Branching consequence reveal -- mirrors production branching behaviour

~ What's simulated

Storyline environment -- GetPlayer() and SetVar() calls are real Storyline JS API calls, but run here in a browser sandbox
SCORM variable passing -- the xAPI log entries reflect the real event structure but no LMS is receiving them

→ Production architecture

PowerPoint ──approved──▶ Storyline Master Slides
│
└──▶ Interaction templates
    ├──▶ Tabs ── JS state manager
    ├──▶ Accordion ── JS toggle + SetVar
    ├──▶ Drag/Drop ── JS validator + score
    └──▶ Branching ── JS router + xAPI
│
└──▶ SCORM 2004 package ──▶ Enterprise LMS

Next → Case Study 03

From Manual to Automated -- Rethinking Localisation

36 hours → 8 minutes · FFmpeg terminal simulation · 8 languages

FFmpegBash ScriptingAutomation

→