Forum Discussion
Turn on/off/control the checkmarks in the menu
Hi Everyone,
This question comes up more and more often in our ID, company and learner community (many learner comments about the misleading checkmarks). And I know that it is a hot topic for all of us and for years now.
Eg. Check / Tick marks in the menu | Articulate - Community
Premise:
So the premise is that we need to have control over the checkmarks in the menu.
Now, the tick shows up immediately after a slide starts, which gives a false image of the slide completion for the learners. The checkmarks should appear only if the actual slide is completed by a condition - regardless of its type: timeline starts/ends, click on a button=states, anything else. (See this later.)
In the LMS publishing options when you set up the course completion for xy% of slides viewed, to count the slides it uses the same idea as the checks have now: when the timeline starts it becomes immediately counted - probably connected.
I think this is okay there, because you can play with it. But here we have other function for the slide ticks in the menu.
UX/UI perspective:
If you have a checkmark next to the slide title in the menu it means, from every perspective, that the slide is viewed and completed, you don't have to do nothing else.
The same idea is used everywhere else:
In any app or online platform a tick shows that a field is completed or not, a question is answered or not, or you need to scroll down the agreement or contract to change the tick to understand the terms etc.
Tick means completed: you don't need to do anything else with the checked part. Our learners (and us too) are adapted to this meaning.
If the actual intention with the checkmarks is to show that a slide is visited, I am afraid that it can lead astray. We see it as a completion.
In Rise the lesson completion in the menu works perfectly fine: an icon shows that something is in progress in the a given part and when it is done it receives a tick.
The desired functions:
In case of the menu checkmarks we should be able to
-turn it on and off, and
-set up a condition when to activate the checkmark of the slide in the menu.
Eg. I turn the automatic menu ticking off. > After I set up this option in the slide properties: when timeline starts, when timeline ends. > Or I could also initiate it with a custom trigger.
Dear Articulate, do you have plans to change this automatic marking and give control to the designers?
I know that it is really complicated and not easy at all from your developer side.
And it also can causes problems if we users forgot to set it up, but I think it is a must have from ux/ui perspective.
Alternatives:
In the article discussion above (and on the web) we have few css and javascript option to turn it off completely in the menu. But in this cases I think we can fall to the other slide: the menu will not show slide completion at all.
I seriously don't know which is the better option. Our users are already adapted to the checkmarks in the menu - elsewhere and in our learnings too.
Just the timing is not perfect.
Question:
And here, after this wall of text I arrived to my personal silly question. :) I am not good in Javascript at all, and probably it is not even possible or you already came up with it. But this could be a good workaround.
I played with javascript triggers:
-I used the mentioned javascript trigger form the article above to remove the ticks (when timeline starts), it worked perfectly.
-And after I used an other javascript trigger to turn it on when timeline ends. Also worked.
-But of course when I go to the next slide, this pair of triggers will cause mess, the first will make the already ticked slide title in the menu disappear. Which is pretty obvious.
But then a question came to my mind:
Is there an option or possibility in javascript to make a trigger where we can turn off and on the checkmarks ONLY on the given line (slide) in the menu?
---
I think we really need a solution or at least a specific and official workaround for this basic UX/UI feature.
Thank you (Articulate and our great Heroes Community) in advance for your help!
Wishing you all the best and great designs!
Tibi
- NedimCommunity Member
I was experimenting with a similar concept a while ago, where ticks (or checkmarks) are displayed only when the timeline ends on a slide, not immediately when the learner visits the slide. This approach ensures that the checkmark indicates the slide is indeed complete, rather than showing it prematurely as the learner progresses through the slides. The ticks/checkmarks would also retain their state throughout the session. What I did was track the slide IDs and ensure that the checkmark is not assigned to a slide ID that has not yet been added to a custom slidesVisited array. When the timeline ends on a slide, the slideID is added to the slidesVisited array, and the checkmark is assigned at the same time. This ensures that each slide is marked only once, and the state persists as the learner progresses through the session.
Example:
Note: The timeline on each slide is 3 seconds long and automatically jumps to the next slide when it ends.I think another function could be called to ensure the checkmark is activated in the menu for selected slides only when the timeline starts on that slide.
- Nathan_HilliardCommunity Member
Here is a basic example of toggling the side menu checkmarks on or off for the current slide. Click the button on the slide to toggle.
https://360.articulate.com/review/content/3a4571cc-8de2-42b6-adfb-d8507f733e55/review
You could run this script on timeline start (maybe on the master slide to apply to all slides) to hide the checkmark immediately. Run the script again to show the check (when finished with the slide).
This assumes that the side menu is present. It looks in the menu for the entry tagged with the cs-selected class (the current slide). It then hides or shows the slide state field (the checkbox).
- Tibor_MarteCommunity Member
Thank you very much Nathan! This is a super great solution. :)
I know I will look greedy, but is it possible to have a javascript only to turn the actual slide checkmark off, and another to turn on? Playing with this set visible/set hidden logic?
Thanks in advance!