Forum Discussion
Is there method to manage the visited state of the default menu?
The menu is Free, allowing users to freely access topics. When a topic is clicked on the menu, a tick mark appears to indicate it has been visited. My queries are:
1) Can we display the tick mark on the timeline's completion or after all layers have been visited?
2) Given the open menu structure, users can navigate to other topics before completing the current one. Is there a method to track missed topics, particularly in scenarios like the Carousel activity shown in the attached sample file ("Third Slide"), where a visited state cannot be applied as with the "Second Slide"?
1) Articulate doesn't provide a way to adjust when the tick mark appears on the built-in Menu. A slide is marked when its timeline starts. (That behavior could probably be altered with JavaScript, but I can't help with that.)
2) You can track completion of any slide using a variable. For example, create a T/F variable with the default value of False. Add a trigger that changes the variable to True when the slide/interaction is complete.
- The "when" in the trigger might be when the timeline ends, when designated objects are in a Visited state, when the user reaches the final layer in a Carousel activity, or whatever means the slide is completed.
- A variable's value stays the same until a trigger changes it. And the value can be accessed from any slide. That means you could use the value of a slide's T/F variable to control what happens elsewhere in the course.
FYI: The interactive slides in your Sample file have a trigger to disable the Next button when the timeline starts.
- That trigger will run every time the user visits the slide, which means the Next button will be disabled even if they already completed the interaction on a previous visit.
- To prevent that from happening, the trigger needs some kind of condition(s).
- This post has a demo for different ways to control the Next button: TIP: Controlling the NEXT Button 101 - Articulate Storyline Discussions - E-Learning Heroes
It’s worth the effort to learn about variables and trigger conditions, because they provide the real power in Storyline. Here’s more info:
Dear Judy,
Thank you very much for your response. I appreciate your help thus far. However, my query remains unresolved. Specifically, we are seeking to have control over the default menu selection, as outlined in the original post.
Here i show a solution for this.
What you would need to get it working in your setup is some conditions ( either plain Storyline or Javascript ) that decide when the menuitems need to be restricted.
https://360.articulate.com/review/content/c6b7e48a-f204-441d-81ea-4cdd5ed6a524/review
One big plus of this approach is that you can customize the menu/listitems if you want to.
https://360.articulate.com/review/content/146cbdd5-f36c-4ce4-a5f6-94effde85c42/review
As you can see in the second review.
And here is the working Storyline.
Kind regards,
MathDear Math,
Thank you very much for your assistance. The sample file you provided is truly impressive. However, I am encountering difficulty in individually controlling each title of the menu.
For example, the JavaScript used for the "Unview" button has two CSS classes, namely "cs-restricted" and "cs-viewed,". These classes are applied universally across the entire menu.
Consequently, when these classes are removed using JavaScript, they affect the entire menu, removing the check marks from all menu items.
Is it feasible to manage the visited state of a single menu title with JavaScript?
Looking forward to your reply.
Thank you :)It for sure is. As the Storyline menu is nothing more then a simple list, you only need to know what element to select and instead of all the 'boxes' only change the one wanted.
Could you please provide guidance on how to select different elements? I've noticed that the same selector has been used for all list items.
Please refer to the attachment.As is this would been easy to show...but as Articulate changes HTML-structure without notice on whats changing on updates, the recent update did this again, and now this doesnot work anymore :-(
We are working on a tutorial-app/website to show and help with things like this. Will be sharing it when live. And will workout a solution for this as one of the tutorials.Correction: original still works... mistake in my code ;-) Will get a working sample of this in the tutorial-app...
