Matt Fanuka

Instructional Designer with 5 years of experience. Proficient in:

Articulate Storyline

Articulate Rise

HTML / CSS / JavaScript

UX/UI Design

LMS Management

Affinity Designer

Project Management

Microsoft SharePoint

Spanish

Use the buttons below to navigate around my portfolio.

Vantage Air Traffic Control Training

Articulate Storyline

LMS Compatible WebObject

Custom JavaScript

Overview

This Storyline module is intended to demonstrate how interactivity is hugely beneficial to learners, and that it can be easily integrated into Articulate and thus, existing learner databases and maintain SCORM compliance.

The simulation places learners in the role of a Network Operations Center (NOC) duty analyst at a fictional European airline during an active hub disruption. Rather than presenting information and testing recall, it asks learners to make real operational decisions under time pressure — and then explains, in depth, why each decision was sound or flawed. The result is a piece of training content that feels less like a course and more like a rehearsal.

Instructional Approach

The module is built around scenario-based learning — a methodology grounded in the idea that people retain knowledge better when it is attached to a decision they had to make, rather than a fact they were told.

The use of the interactive globe is central to the learning philosophy of the module as well. The learner interacts with a tangible object on their screen and can use it to examine flight distances and contextualize the geography of different airports. It's intention is to engage the learner as much as possible, so that they internalize as much as possible from the training.

The scenarios are also calibrated so that certain wrong answers are still reasonable. A learner who chooses London Gatwick as a divert airport is not making an irrational choice, they're making a proximity-based judgment that misses an important operational layer. That's where the learning happens.

Each of the three scenarios presents a distinct category of airline operations knowledge:

  • Scenario 1 tests divert airport selection — specifically, the difference between geographic proximity and operational suitability. Learners who choose the closest airport without considering ground crew infrastructure will score lower than those who identify the pre-designated alternate.
  • Scenario 2 tests knowledge of EASA Flight Time Limitation regulations — a hard regulatory constraint that many learners instinctively underweight in favor of passenger convenience.
  • Scenario 3 tests curfew awareness in long-haul Pacific operations, and the ability to evaluate divert options against multiple criteria simultaneously: handling presence, passenger hardship, and noise restriction status.

Critically, the module withholds summarizing information from the option cards themselves. Learners must open a detail card for each option before they can select it. This was a deliberate design choice that forces engagement with the evidence rather than allowing pattern-matching on visible hints. The feedback delivered after each decision is substantive: it explains the operational reasoning behind the correct answer, not just whether the learner was right or wrong.

Articulate Integration

The simulation runs as a single self-contained HTML file embedded in Storyline as a Web Object. At the conclusion of the module, the web object communicates directly with the Storyline player using Articulate's native JavaScript API, passing both a numeric score and a structured data payload containing the learner's full decision history.

javascript

                            // At module completion, the web object calls the Storyline player API
                            // to write variables back into the course for SCORM reporting and results display
                            const player = window.parent.GetPlayer();

                            player.SetVar('quizScore',      payload.totalScore);   // 0–100 integer for LMS reporting
                            player.SetVar('debriefJSON',    JSON.stringify(payload)); // full decision breakdown
                            player.SetVar('moduleComplete', true);                 // triggers Storyline branching logic

The web object sends variables into Storyline, which Storyline stores as course completion data. That data can then be used just like any data created in a natively built Storyline course, meaning you can drive results slides, tracking, and personalized outcomes based on learner performance without needing to hardcode or manually rebuild the experience. The slide that plays after the course is completed is a storyline slide using the data sent from the WebObject.

Modularity

The module is architected so that content and code are fully separated. What that means in practice: adding a fourth scenario, changing the feedback on an existing option, adjusting point values, or updating popup detail cards requires editing data, not touching any rendering or interaction code. A content designer with basic JavaScript familiarity could extend the module without understanding how the globe or popup system works.

This module was built without any frameworks, build tools, or external dependencies beyond globe.gl for the WebGL rendering and Google Fonts for typography. It is a single HTML file that can be opened in a browser, dropped into a Storyline project, or hosted on any static server. There is no backend, no database, no bundler, and no runtime other than a modern browser.