The weekly e-Learning challenge #220 in Articulate’s community was all about using Web Objects for Performance Support in E-Learning. Web objects are a great way to display ‘live’ web-based information, e.g. a webpage, a YouTube video, 3D object or an online survey within a Storyline slide. Here is some info about working with web objects in Storyline 360.

I based my quick example on this webpage here. This page provides several dashboards and graphs that show real-time statistics on security threats to Internet traffic.

My .story file consisted of a single slide with several layers. The slide’s baselayer contains a scrolling panel with a tiled bitmap to mimic the website and some overlaid hotspots. Each hotspot, when clicked, displays a layer which contains a webobject that links to a graph. Here is the published output.

As always, I tested the HTML5 output in a desktop browser and mobile devices (an iOS tablet and an Android phone) and it worked without issues.

I could have spent more time on improving the formatting/scaling of some of the webobjects, but my self-imposed 30-min. time limit for e-Learning challenges was up!

With this year’s Soccer World Cup not that far away, I thought I revisit an interaction I had done for a recent Articulate eLearning Challenge. The idea was to create one long, horizontal interaction to fill out the complete world cup tournament bracket (similar to this one here), starting with the Group Stage, all the way to the Final. Users would navigate back and forth between the various segments of the bracket, all in a single slide. That sounded like a good idea until I started building the first segment: the Group Stage, that requires users to select two teams from each of the eight groups.

I wanted this stage to be a drag-and-drop interaction. The problem is that d&ds cannot be part of a group and that’s what was required to horizontally move the entire bracket. I ended up creating a custom drag-and-drop interaction. I couldn’t use a standard Storyline d&d interaction, because each of the drag objects can have several drop targets.

All other stages (from quarterfinal selections, to the final) were done as one group on a layer.

Combing all the elements into one group allowed me to apply motion path animations to it. BUT, this group then becomes one large clickable object, which doesn’t respect built-in Selected states of group objects anymore. And with 32 teams in the Group Stage, the number of possible pairings in each stage seamed daunting at first. Also, a user can at any time go back to a previous stage, change their selection and then go forward again. The grouped interaction has so many buttons and states that it takes a few seconds to load. I added a ‘loading’ screen to give a visual queue that something is going on in the background. A few hundred triggers later I got a reasonably stable prototype to work.

Although cumbersome to use on a small screen, this interaction even works on my mobile device.

In hindsight, it would have been easier to create each stage on a separate layer (or slide) and forget about the seamless horizontal navigation idea. Some possible ways to enhance this interaction could be to store and display the selections in a GoogleSheet, use a slider to navigate or allow users to print their selections.

I tried to create the same interaction in Adobe Captivate 2017. I didn’t even get past the first d&d screen. It turns out that Captivate has a limit for the number of buttons on one slide and my layout far exceeded that number. Here is the thread in the Adobe eLearning community.

Never mind the soccer theme. This type of interaction may be useful to present step-by-step processes, flow diagrams, decision paths, etc.

Edit 04/30/2018: I just happened to see this web-based bracket challenge here, I guess the folks at FIFA had the same idea.

Edit 05/2018: I created a simplified version in Adobe Captivate 2017, now that the limitation I ran into earlier was fixed with the latest CP update, see here.

Edit 06/28/2018: Now that the group stage is complete, I updated the interaction with the teams that advance to the next stage.

Another week, another Articulate eLearning challenge. I thought it would be a great brainteaser to try and create a table similar to this one here.

When tables were first introduced in SL360, I had a quick look but never really took the time to explore all table options. First, I created the ‘band’ of selectable items along the top. There is not much to it, except for the horizontal scrolling of the seven selectable items. Sure you can group these items and then apply motion paths to the group. But once grouped, the items cannot be individually selected anymore. Clicking one item, select all of them. It took some trigger acrobatics to get this to work.

The next challenge was to set up the table. Since the order of the table columns is based on the randomly selected items, I couldn’t create one static table. Instead I set up one 1-column table for each item and added them the the scrolling panel.

The last hurdle was to find a way to position these table columns based on the selection. Tables cannot have states, so creating three objects with states for each selection wasn’t an option. Saving the table columns as images and then using them in object states didn’t work out either, because the text in saved images is rather blurry. So, I ended up using motion paths to slide the table columns in and out.

As always, I stopped at “good enough” and didn’t try to completely duplicate the original table.

Here is the result of one afternoon’s work. One remaining issue is that the three selected items currently need to be selected/deselected in the same order.

This interaction also works well on a Samsung Galaxy phone.

Articulate’s weekly eLearning Challenge #188 gave me a chance to try out the recently added option to create random numbers in Storyline 360.

In the past creating random numbers required using either Javascript or a random question bank. For my experiment, I wanted to create a mockup for a Drag-and-Drop Interaction that not only randomly generates drag objects/targets, but also shuffles the position of the drag objects.

For each of the eight groups I set up a random number variable that generates a value between 1-4. Based on that variable, I ‘turn off’ one team in each group. These would be used as the drop targets. Then I used another random number variable to assign a position for each of the eight drag objects along the top.

In order to test the setup I added a button that generates new variable values and restarts the slide.

Here is the test file I created. Note: I didn’t implement the D&D actions; the point of this experiment was to get the randomization worked out, without using Javascript or random question banks.

There was a question in the Articulate eLearning Heroes community last week, from a user who wanted to limit learners to making exactly 3 out of 8 choices and then display the choices on the following slide.

In order for the first requirement (exactly three choices) to work, I created a trigger setup that:

1. Counts the number of selected choices
2. Disables any unselected check boxes when three choices are made
3. Enables/disables the Next button when three choices are selected, or not.

To meet the second requirement, I created three variables that are populated with the selected choices and then display these variables on the next slide. This seems simple enough, but it does require quite a few triggers, because there is no way of knowing which of the 8 choices were actually selected. My .story file is attached to the discussion thread listed above.

While I was working on a solution, I thought that the number of required selections should be flexible, rather than being hard-coded to a maximum of three. So, for testing purposes, I added a dial that I used to change the number of required selections between 1 -8. Of course, in a real-world application it would make more sense to use a variable to set the number of required choices, rather than using a dial.

Here is a published version of my extended working file.