This week’s E-Learning Heroes Challenge is Using Tabs Interactions in E-Learning.
Tabs are a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page.
Used in e-learning, they can be a reliable method of organising large blocks of content into smaller sections, without sending your learner to a new slide or scene.
But tabs can also be a bit ‘vanilla’ and boring if overused. That’s why David Anderson challenged the more experienced members of the E-Learning Heroes Community to add some extra features to our interactions.
I’m fond of intergrating tabs within the learning scenario – making them ‘part of furniture’ – and of using tabs as a soft form of assessment where appropriate, but David’s challenge inspired me to take this a bit further.
Forget everything you thought you knew about tabs interactions and let’s give this trusted but sometimes fusty interaction a makeover!
This week's @ELHChallenge is 𝗨𝘀𝗶𝗻𝗴 𝗧𝗮𝗯𝘀 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻𝘀.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) January 22, 2023
Not only are tabs great for chunking information, but they can also be used to reinforce timelines and sequences.
Can you decipher The Stone Tabs of E'Lurn-Eng? pic.twitter.com/7Osy3kjOIS
Animating the tabs or content layers
When the learner clicks on each of the stone tablets, they move along a circular motion path measuring 0px by 30px.
This thin circle behaves like a straight motion path – but returns the tablet its original starting position without the need for a return path and another trigger. Note, each tablet is immediately disabled by the same click to prevent it being accessed again.
-
- Click to enlarge image
To successfully complete this activity, you need to read the tabs in the correct order. This sequence is controlled by a number variable and conditional triggers, as shown above.
A correct choice will trigger a downward motion path, taking that tab out of play. An incorrect choice will trigger the Wrong Choice layer.
I used the visibility settings in the Wrong Choice layer to hide the cave background and reveal a video beneath it.
This video was created using PowerPoint. I combined the same cave background I used in Storyline with a boulder from MS Paint 3D and added sound effects and a closing fade in Camtasia.
A trigger on the Wrong Choice layer hides the tabs when the boulder reaches the foreground, giving the impression they have been crushed in its path.
-
- Click to enlarge image
When this video completes the demo restarts
Make something happen when a slide layer's timeline reaches a cue point or the end
In Storyline it is possible to ‘trigger’ an entrance animation through a state change, but it’s a bit trickier to control an exit animation without pausing the entire timeline and altering the behaviour of other animations and media.
To ensure the titles faded out smoothly when the learner made an incorrect first choice, I added a Titles Fade layer that is triggered only if the Task_Order variable is equal to 1.
This layer hides the titles on the base layer and shows a copy of the titles in their place. These titles are timed to fade out after 0.5 seconds. Due to the Task_Order condition, this layer will not appear on an incorrect second, third or fourth choice.
The Titles Fade layer has a 1-second timeline and is set to ‘hide when timeline ends’ to ensure it does not interfere with subsequent layers.
If you weren’t aware of this setting you may be using an unnecessary trigger to hide the layer instead. Keep your triggers panel tidy with this handy feature!
Revealing a hidden or disabled button after all tabs are visited
The entrance of the ‘move on’ button is controlled by the last tab in the sequence, Delta.
Only when the Tab_Order variable is set to 4 and the Delta tab completes its downward motion path, does the state of the ‘move on’ button change from Hidden to Normal.
Similar logic could be used to control the entrance of the ‘move on’ button in a free navigation scenario.
Making something happen after the learner clicks all tabs
Accessing all four tabs in the correct order will trigger a state change that reveals an ancient city. (Fun fact: I created this background using the AI image generator, DALL·E 2.)
The END layer is also activated, the timeline on the base layer resumes, and a zoom region creates the impression you are moving deeper into the cave, towards the mysterious, partly submerged ruins.
When combined with a well-placed musical cue or sound effect, zoom regions can create simple but dramtic transitions and animations.
Can you decipher the symbols?
Controlling the order of a tabs interaction can emphasise and reinforce a process or sequence. If you strike a good balance between interactivity, challenge and feedback, it can also be an effective method of formative assessment. Yet as with all such interactions, context is everything. Hopefully, learners won’t feel too ‘crushed’ when they make a mistake and will dust themselves off to try again.
Can you decipher The Stone Tabs of E’Lurn-Eng?
Controlling the order of a tabs interaction can emphasise and reinforce a process or sequence. If you strike a good balance between interactivity, challenge and feedback, it can also be an effective method of formative assessment. Yet as with all such interactions, context is everything. Hopefully, learners won’t feel too ‘crushed’ when they make a mistake and will dust themselves off to try again.