There’s been some great posts and examples of how Articulate Rise can serve learning designers to tell great stories. This Hero’s Journey adds a little magic to the core features. Enjoy!

Prototype only. Welcome to the future!

LAUNCH THE MAGIC

Download the SOURCE!

How does it work?

First of all, this is not a production value feature add-on. At this point this is just an exploration. Here’s what my objectives were in user stories:

1. Personalization: user launches the adventure and immediately greeted with a popup. The popup informs the user about its purpose and prompts the user to enter a hero name. Once the user enters the hero name, it should be remembered throughout the experience to provide personalized messages.
2. As the popup closes, the title of the course should reflect the hero’s name.
3. This is a linear adventure (as is the Hero’s Journey), so stages should be advanced initially in a locked order. When user attempts to go ahead, a friendly reminder should popup (addressing the user by name) to inform about the locked status and which stage should be completed before.
4. User should be able to see a YouTube video, embedded, initially playing only the relevant part (from time, to time).
5. User will be presented with options such as personality, expertise, or other choices. The system should remember these choices, even if the user leaves the page and returns later (without refreshing the browser).
6. User will unlock the next stage by selecting a gift (advancement is not based on the actual completion of the stage at this point). A gift, again, is a one-time choice.
7. User should see consequences of their actions to enforce meaningful choices. As simple as, using the name in headlines or referring to the selected personality style. Eventually, it could be an expertise level or something similar.
8. User should be able to interact with an embedded Storyline module, where information is passed between the adventure and the module itself. For example, the user’s name should be displayed inside the Storyline module. Gaining information from inside the module should be an option as well (sending back points, unlocking content, etc).
9. User should be able to interact with other embedded objects such as the DeminGO simulator at the end.

+ didn’t make it into this version but I have a working prototype on conditional text. User selects expertise (Novice, Beginner, Expert). Based on the selected role, only relevant information is displayed. Or, user can toggle between roles real-time, showing and hiding information. This can be also used for targeting roles like sales, marketing, support, etc.

After the user stories, here’s what I did:

Build the Core Content

I built the core content in Articulate Rise. The tool does a great job allowing you to author content quickly. (Although, I would love to be able to copy-paste elements between segments!)

Once the course framework was complete, I exported it as a web-only site.

Don’t Break the Framework

One way to manipulate the content itself is post-editing after it’s exported. That itself is a hassle because everything coded and minimized. The other problem with that approach is that if you modify the exported course, and you need to do an update in Rise, now you have two different versions.

Instead, I did a reckless “buit-on” approach. Now, that is why it’s not a production value, just a minimum viable product. I’m relying on how Rise is creating the html and css output.

Adding jQuery

First, I added jQuery to the export. The launch html file is the only thing I edited by adding a line to include jQuery.

 <script src="lib/main.bundle.js"></script>
 <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="zsolt.js"></script>
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

These lines are at the bottom of the launch page.

Once jQuery is loaded, it provides you access to the page to manipulate what the user sees REAL-TIME. That means, I can load the Rise adventure as is, but actually changing how it behaves after it’s displayed to the user. That allows me to add features without breaking the core.

The Messaging

The nice pop up messaging is not my creation. Credit goes Tristan Edwards. His sweet alert plugin is offered under MIT license, and you can download it from here.

This little powerful plugin allows me to throw messages to the user (including warning, error, info or even input). So, the first thing I did was adding a popup that asks the user’s name.

Two things happen here. jQuery has the ability to monitor the site, and when everything is loaded, execute some code. So, as the site is loaded, this message pops up.

In JavaScript, I created a variable to store the user’s name. Once the user enters, the name the popup disappears, and the name is stored in memory. That means, every time I throw up a message, I can display the name as well.

How does the name get into the course?

The bigger problem is how to change the course content. Now, we have a name but the course content is some static text you typed in before.

This is where jQuery comes in. I wanted to include the user’s name in the title.

This is where relying on how Rise creates the output comes in (which is the weak point of this approach because they can always change it).

As you see, the course title on the main landing page has the following CSS class. If you don’t know what CSS means, this might be foreign but the concept is that jQuery allows you to find things in the page, based on that CSS class, and THEN change it on the fly.

So, I added one line to find this text on the screen (original title is Connect) based on the “overview__title” clue, and replaced with the new name the user just entered. This way, I haven’t touched the original course, haven’t broken any of the content or code. I simply manipulated the text the user sees on the screen.

The only thing I modified post-export is the index.html file by adding the following:

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="zsolt.js"></script>
<script src="dist/sweetalert.min.js"></script>

The first file is the jQuery. The second is my collection JavaScript functions. Right now, it’s messy without any comment. Working on it. And the last one is the messaging plugin.

What about this?

There’s nothing more heart-warming that seeing your name in the middle of a sentence, like it had been actually created just for you.

In order to do this magic, you can’t rely on the CSS thing anymore because you need to know WHERE exactly you want this name to appear. My approach was using something like “shortcuts.” Imagine adding some shortcuts to the text itself that would be replaced when the page is displayed. It’s like when Word shows you the smiley face when you type “:).”

I went back to Rise and added something unique where I wanted the name to appear:

You can use anything, but it has to be something unique, so you won’t end up accidentally replacing something like “name” every time. My little shortcut is “_zomagix::pname_”

When the page loads for the user, jQuery runs through the text and replaces every instance of  _zomagix::pname_ with the actual name (remember, the name was stored in a JavaScript variable, so we can access it anytime.)

And that’s it. The user now sees their own name.

Selecting a Gift or a Choice

Next, I wanted to be able to offer three options for the users to choose from. Then, again, store what the choice was in a JavaScript variable, as well as assure that the user won’t be able to select another one. It’s a one-time thing.

First, I built the image carousel in Rise. Each item has an image, a description and author. The first two are not magical. However, I used the author to add the new feature. The author field shows “Select Gift” but what it is actually a link (as you can see from the underline). Rise allows you to add a link to the text. What I added was not a link to a website, but a link to a JavaScript function.

javascript:selectGift("world",1);

In my JavaScript, I created a function called selectGift. (A function is like a collection of commands that does some work for you.) This selectGift function is waiting for two things: a code word and the choice number. So, the first graphic has “world” as the code word, and the choice number 1. The second graphic sends “world” and 2. And the third is sending “world” and 3.

When you click on the SELECT GIFT, it calls this function and tells them to do the following:

1. Store my choice of gift.
2. Disable more clicking on the same gift options.

How does it do it? Well, let’s say you clicked on the second graphic. It sends “world” and 2 to the function. Function stores in memory that the “world” lesson, user chose option 2. Then, it finds all other “world” options and jQuery replaces the links real-time, kind of like disabling from being clicked on again.

Same function also makes sure that the next lesson/stage is unlocked. (Which by the way, again, is a feature I added. When the page loads, all stages are “locked”,  except the first. If you try to go to the next, a message will remind you and takes you back to the first stage. Once a lesson is unlocked, it’s unlocked for ever.)