JavaScript Challenge: Millennial Aquarium

What’s a Millennial Aquarium? What’s your digital native score?

This is my eLearning Heroes entry for using Storyline with JavaScript. The Millennial Aquarium is the most distracting multiple choice engine. 🙂 By design. It measures how easily you can be distracted.


You goal is simple: match facts with L&D and Game/Gamification experts. (This is a guessing game based on the James Bound #jamification game at the ATD conference. You either guess who did what, or go here and crack the code first. It’s up to you.)

But with bubbles and fishies all over, it’s not as easy as it sounds! Also, you’re under water, so don’t forget to breathe! At the end, you’ll get a detailed result of how much of a digital native you are. And even a button to tweet about it!

Best experience is with modern browsers supporting WebGL.



What’s JavaScript doing here?

The eLearning Heroes Challenge was to demo how to use JavaScript (JS) with Articulate Storyline this week. JS has two important roles in this challenge:

  1. Passing variables back and forth between Storyline and a Webobject (in this case, Construct 2 game engine)
  2. Opening a new window and prepare the tweet at the end.

This is what it looks like + some explanation:

// User defined code goes here

// Called by the Webobject to find out the inibubble Storyline variable. 
// This determines in which round the bubbles start going. 
function getIniBubble()
 p = GetPlayer();
 return p.GetVar("inibubble");

// Called by the Webobject to find out the inifish Storyline variable. 
// This determines in which round the fishies start going.
function getIniFishies()
 p = GetPlayer();
 return p.GetVar("inifish");

// Called by the Webobject when the game is loaded. 
// Changes the Storyline variable from the initial -1 to 0. 
// The change in Storyline triggers to hide the rectangle to reveal the game.
// This is optional, if you don't do it, you would see the game loading...
function ready()
p = GetPlayer();


// Called by the Webobject when the game ends.
// The game also passes a variable x. This is the point the player gained.
// We set the Storyline variable points.
// Then set the Storyline variable done to 1. This triggers to jump to next page.
// We could in theory use the points variable to trigger the jump but it was already 0.
// What if the player has a 0 score? In that case, the trigger would not kick in because the points does not change.
function completed(x)
p = GetPlayer();




Leave a Reply

Your email address will not be published. Required fields are marked *