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.
