Conditional include in Table of Contents
October 5, 2017 12:00 AM
Is there a way that I could set a Table of Contents to only include certain pages/sections IF a specific page has been completed? I have an interaction that is required before the learner can move on to the final test. Otherwise, the learner can navigate to any page in the course except the final section prior to completing the activity. I peeked at the code for the TOC, but don't see anything there that leads me anywhere.
So far, the only ideas I've had is to create two TOCs and show one or the other based on the activity completion state. Doable, but not the most ideal.
Discussion (11)
I dont think anything is impossible. The route your considering is how I would try to tackle it. Go for it.
undefined
As far as I know, no, there is no way to do this.
What I tend to do in this situation is create a TOC but instead of having the menu link go to a page, I have each one run an Action Group.
So I create one action group for evey menu item. If for example, it's the first page in the course, the action group would have a single action that says Go To ON CONDITION, PAGE1,2,3,4 are all completed. OR ELSE, Display Message "You must visit all pages in the course before continuing to this page" or something like that.
It's not idea but it beats having multiple menus.
One other option is to include them, but make them inactive by adding a blocker to the page that prevents any userinteraction. If conditions are met, then you free up the page(s).
undefined
I'll probably go with the dual TOCs - They don't have to review the entire course and can go in any order except for a couple of specific pages with an activity. I already have a toggle show/hide for the existing TOC, so I think creating a second and then making the Show/Hide TOC button conditional makes the most sense. Thanks for the ideas!
Depending on how in-depth you want to go with your conditions, it might be better to build a TOC page yourself instead of using the built-in TOC. You would definitely be able to control any and all conditions that way and (from reading your post on the popups page) it would likely be better for accessibility as well.
It would definitely be more work, but I've noticed that everything I really want to put in a course usually is.
Ok - So I have a new hurdle to overcome. My original TOC always appears above all the elements when shown from the button. However, the new TOC is BEHIND all of the elements. I have the TOC(s) in a group along with the button at the AU level with the group set to last in reading order.
I tried to recreate it for a sample, but in the sample, they would both be behind all the elements. I cannot figure out for the life of me how I got the original TOC to appear above all elements on all pages/why I can't get the new TOC to behave the same way. (I even copied the original, pasted and only changed the included pages.)
I tried moving it from the AU to the Title level, and nothing is working. Ugh!
It seems to be an issue with "Set Reading order to last". Although this sets the tocs (and all the other elements with it) to the end of the Dom, it does not influence the z-index, i.e. although the toc is the last element to be read, it keeps its z-index of e.g. "8", meaning its behind the page elements. For some reasons I can't find, the second toc gets a higher z-index and is above the page. With no accessibility requirements you'd set it "Always on top" which would solve it.
Does the z-index influence accessibility? If I add CSS to raise the z-index for both tocs, it'll be displayed correctly .
I can test how z-index affects the reading order - Can you post the CSS and I'll add it as a test. It may not impact it since it's an initially hidden element and may only affect the visibility to a sighted user. If this is true, it's a workable solution.
What's crazy is that I can't remember how I even got initial TOC to show on top of the page elements. When I tried recreating from scratch, both behaved the same way, displaying behind the elements on the page.
I was able to get a sample put together that demonstrates what's happening. I'm wondering if it has something to do with multiple iframes for the TOC?
The example is set up so that that "new" TOC I created is displayed onClick for the TOC button IF the Accessibility statement page has not been completed. If you click from the Welcome page the first time, this is the TOC (no test) that does not display correctly. If you go to the Accessibility Page, then to the next or any previous page, the TOC displays correctly (Test started)
Normally the z-index should only influence the (visible) layering of the objects. Although the two tocs are in the same group and beside one another in the title explorer, the "no test" toc gets a z-index of "15" while the "Test started" toc is on layer 38, with the page elements between them.
CSS for it would be:
div[id^=undefined] {z-index: 500 !important;
}
That did it - The only caveat for reading order is that in the Title Explorer, the TOC group had to be ABOVE the Nav buttons group in order for it to read correctly. This somewhat contradicts the help information for grouping and setting reading order to last, which I've brought up a few times when it comes to reading order with groups.
Also, I discovered a quick trick for "hiding" HTML elements from the screen reader. In my case, there's a group of CSS files at the title level. I set the group to read last and initially hidden and NVDA never even read them. The next test is to make sure the CSS still applies on elements later, but I doubt that hiding the group is going to impact that.
Thanks for the help, Tim!
Discussions have been disabled for this post