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!
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:
+ 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:
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.
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.
First, I added jQuery to the export. The launch html file is the only thing I edited by adding a line to include jQuery.
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 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.
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:
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_”
And that’s it. The user now sees their own name.
When you click on the SELECT GIFT, it calls this function and tells them to do the following:
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.)