Tabs Interactions in E-Learning #272: Challenge | Recap
Challenge of the Week
This week, your challenge is to share a fresh example that demonstrates how tabs interactions can group relat...
Published 5 years ago
Version 1.0
Blog Post
This did not turn out the way I had initially planned for as I had hoped to use layers but had to use states instead.
I was inspired by the old World Book Encyclopedia human anatomy pages. They'd come on transparencies you could layer one on the other or peel back to see more.
Functionality: Click tab once to reveal the anatomy layer. Click again to hide layer. You can have some or all of the anatomy layers turned on at the same time.
https://360.articulate.com/review/content/16b10c5e-66d6-44f4-9d6e-b4d944cbf6a9/review
EDIT: Most file-sharing options are restricted on my computer. Google Drive, Dropbox etc are blocked. I'd be curious to know of other methods to easily share the SL file for this challenge.
I was inspired by the old World Book Encyclopedia human anatomy pages. They'd come on transparencies you could layer one on the other or peel back to see more.
Functionality: Click tab once to reveal the anatomy layer. Click again to hide layer. You can have some or all of the anatomy layers turned on at the same time.
https://360.articulate.com/review/content/16b10c5e-66d6-44f4-9d6e-b4d944cbf6a9/review
EDIT: Most file-sharing options are restricted on my computer. Google Drive, Dropbox etc are blocked. I'd be curious to know of other methods to easily share the SL file for this challenge.
- Hi Bernie - This is a really cool concept. I'm really interested in your comment about the interaction now working the way you'd hoped. You have my attention:-) What is it you wanted to do? Why couldn't layers work? One way you can share your file is to add it as an attachment to your Review 360 link above. In the comments field you can add the story file. Happy to take a look to see if I can offer any ideas.
- Hi David Anderson, thanks for the great idea on how to attach my SL file - I have gone ahead and done that.
With the layers, the issue I had is they were not maintaining the intended depth order. I sought to have the human systems go Skeletal, Nervous, Respiratory, Circulatory, Digestive and then Muscular on top. This works with using states - the systems are always in the correct order so if you select them all Muscular is on top. However, when I used layers, the system that was on top was always the last one selected.
I attached my SL file to the Resources tab to download and look. You can also find my attempt using Layers instead of States by clicking Next and viewing it on the 2nd slide in my Review 360 link.
Thanks for any help!
Edit: My colleague just sent this old community thread to me and it sounds like a solution is listed within it for how layers stack.
https://community.articulate.com/discussions/articulate-storyline/slide-layers-and-stacking-order- Thanks for attaching your source file, Bernie. Do you want me to include it as a download in tomorrow's recap post? Just wanted to check before including it.
The layers are not the best approach as you discovered. What I really like about your project is that you built the same file several ways. We not only encourage that in our workshops but we often make that part of our activities. When you build the same interaction multiple ways, you get to see how the features work together.
Thanks again for sharing your ideas and source file this week.
- Hi again David, I managed to do something using T/F variables and triggers to make the layers work. I have updated my 360 Review link.
Slide 1 is my original submission using states. Slide 2 is using layers that did not keep the systems in the correct stacking order.
For slide 3, I created a T/F variable for each system and when the tab is clicked triggers toggle the variable and do a sweep (in order) opening and closing layers based on the T/F variable. (Would have been a good example for last week's challenge!)
I would bet this isn't the most elegant solution but it seems to work.
- This is beautiful Bernie, lovely simple design and a great way to peel back the layers of the anatomy.
- Cool concept, I like how it adds and subtracts depending on what icon you click, really nice
- Great interaction. I love cross sections so I was interested.
- I like the white background, so it's easier to focus on the body and icons.
- Nice work! I was the talking to my coworkers about Body: The Exhibition and this reminds me so much of that (though a little less frightening).
- HI Bernie, that's really nicely done! Clear and effective. I'd love to take a look at the .story file!
- Geez thanks for the nice comments, folks. You have all set my mind at ease with sharing my effort for this challenge.
I have attached the SL file in the Resources tab of my Review 360 link. Cheers.
- Well done! Great example
- Neat! It's similar to the iPhone App Complete Anatomy. :)
I really need to learn more, these examples are out of my league. I can't believe what can be done with Storyline. I just started using it a few months ago. I love it!
