Common E-Learning Interactions #307: Challenge | Recap
Challenge of the Week
This week, your challenge is to share one or more examples of a common e-learning interaction.
New Entries ...
Published 4 years ago
Version 1.0
Blog Post
My design for this week's demo was inspired by some snow flurries we got earlier this week. This example features both accordion and drag-and-drop interactions.
Link to demo: https://360.articulate.com/review/content/21b51917-9721-4ec8-a506-ae35ff783659/review
Link to demo: https://360.articulate.com/review/content/21b51917-9721-4ec8-a506-ae35ff783659/review
I love this! You always inspire me! I have no idea how you programmed all that though!
- Thanks!!
The background was made in Vyond and it's a looping video.
The accordion interaction was done by having three layers, one for each tab. Movement was done through line motion paths.
For the drag-and-drop, all of the clothing options are all hidden on the base layer. The items you can drag are on each of the layers with a target hotspot to drop it on. Triggers were added to make the clothing appear on the base layer (and hiding the rest of them) depending on which item you dragged and dropped.
The tricky part was figuring out how to make an undo button since the clothing option disappears once you dragged and dropped it on the hotspot, plus I wanted to avoid completely undoing all of the options (i.e., the "restart course" trigger). This was done by setting triggers so that when you select the undo button, the layer is hidden (which will reset the options for the items you can drag) and hiding everything on the base layer depending on the clothing item.
I just added the Storyline file to the comments panel on the right-hand side of the demo if you want to check it out.- Thank you! I am always learning!
