Portfolio Muhammad 'Roel' Islam

Here I am sharing some experience in building a branching scenario e-learning module called The Choice. The Choice is a branching scenario e-learning is part of MTC’s Bribery and Corruption Training suite that I created as a part of the Cursim/Omniplex team. The Choice is build using Articulate Storyline 360.


First, I researched some well know examples of branching scenario e-learning serving as point of refrence and inspiration.

Connect with Haji Kamal’ by Cathy Moore.

The Broken Co-Worker by Anna Sabramowicz and Ryan Martin

How to Survive a Nuclear Bomb by the BBC

Screenshot of Connect with Haji Kamal, Broken Co Worker and How to survive a Nuclear Bomb

I also researched and compared to modern branching scenario games such as Detroit Become Human and The Walking Dead. I am not a gamer so I watched walk through videos from Youtube and Twitch.

The covers of The Walking Dead and Detroit become Human.
image source: WIkipedia

Visual Novels

visual novel (Japanese: ビジュアルノベル, Hepburnbijuaru noberu), often abbreviated as VN, is an interactive fiction video game genre,[1][2] which originated in Japan, featuring text-based story with narrative style of literature and interactivity aided by static or sprite-based visuals, most often using anime-style art or occasionally live-action stills (and sometimes video footage).[3] As the name might suggest, they resemble mixed-media novels. (


After watching ‘What Visual Novels & Indie Comics can learn from each other” there are some interesting points that I took regarding navigation and how the visuals are done.

Visual novels have a standard set of backgrounds for scenes which usually isn’t much such as school, outside, home, so the background is pretty much reused all the time.

From Lars Martinson Video ‘What Visual Novels & Indie Comics can learn from each other” explaining the reuse of backgrounds in Visual Novels

The Characters’ visualization has also one standard pose and the character will show only when they talking or delivering a line. Somehow similar as some of mobile games.

A screenshot from StarCraft Visual Novel on Steam


Considering all the references, I decided to use the static background approach from Visual Novels, which will be a time saver since I need time put aside to build and test.

Backgrounds used in “The Choice”

I really love what BBC did in the How to Survive a Nuclear Bomb. But considering the limitation of Articulate Storyline and me (as I am not a HTML developer), I decided to use standard Articulate Storyline player facilities such as the sound/volume button and the seekbar with a chromeless classic player.

To use a click next button or not that is the question…

Quoting a discussion with Ryan Martin from Broken Co-worker and, that in scenarios the learner holds control on when to move forward in the story which is the contrary of the traditional e-learning where we try to limit the numbers of clicks. I observed the same approach is used in visual novels where you tap or click to progress the story.

As middle ground we used this approach:

The click next button are mostly put next to “Speech Bubbles” as you can see below

This approach seems to work quite well, based on the feedback from learners after the launch. Only about 5% of the 100 person who filled in the survey of the course has put a thumb down to how the navigation is presented.

In the future, I am thinking to get rid of the chevron and just use a click anywhere to progress a scene, although that might pose a challenge for ‘traditional’ people who are looking for an instruction or the same looking chevron to go next.

You can try out ‘The Choice’ here

%d bloggers like this: