Hacking the TOC Part 1

Adobe Captivate 9, 2017 and 2018’s TOC (i.e. the “Table of Contents”) is often, although not always, an essential navigation tool to a lesson template. Between the application’s Preferences and the application’s TOC Settings, a developer can customize the TOC to a degree. For instance, you can toggle between “Overlay” and “Separate”. The “Overlay” setting presents the TOC to the user as a slide-out feature on top of the presentation. The “Separate” setting positions the TOC next to the presentation, forcing the contents to offset to the right or left.

Here’s an example of a generic course (provided by Captivate for learning purposes) using the TOC’s “Overlay” setting:

A generic course with the TOC closed
A generic course with the TOC open

The TOC in this example slides back and forth from the left edge of the screen. For out-of-the-box course development, the options provided are fine. For a designer, though, they are thoroughly frustrating. This TOC covers up the branding? That’s not ideal. The TOC also feels attached rather than integrated, and rather haphazardly positioned at the top corner.

Designers typically customize products based on the client’s established branding and specific needs for a course. After a period of information gathering, a designer will hone in on an appropriate look-and-feel. Captivate does not visibly support such a level of customization. Some standard customizations include a TOC fully-integrated into a presentation that also contains branding logos, background artwork, text, and special interactive elements.

What about negative space? Look again at that screenshot above. Everything is tight and heavily layered rather than open, comfortable and simple to scan visually. With the TOC open, the interface loses its clear hierarchy of on-screen text. The design’s color harmonies and dedicated zones begin to fall apart.

Trying to achieve an open, non-layered, simple-to-scan aesthetic within Captivate will lead you to many design and development challenges. However, through a combination of tips, tricks, basic Javascript and additional CSS, it’s also totally doable.

Our tools and environments

First of all, here’s the list of presumed tools and testing environments for this work.

Project: An HTML5-based, SCORM-compliant interactive lesson
Tools: Adobe Captivate 9, 2017 or 2018, Adobe Photoshop CC
Platform: Both Win 10 and Mac
Testing: An LMS like SCORM Cloud
Basic template to download: tbd

For Part 1 of this series, Captivate’s Preview feature is sufficient for testing. In Part 2, when JavaScript and CSS additions are introduced, we will need an LMS like SCORM Cloud.

Standard design decision #1: Add a logo to your template

A natural location for a logo and any descriptive content about your course is the top left corner. Like so:

A custom course with a dedicated area for a logo

If you also decide to make use of the TOC, the cascade of decisions and, thus, problems to solve, begins. Do you choose “Overlay” or “Separate” for your TOC? As shown above in the second example of a generic course, overlaying a logo with a fly-out navigation menu is a sub-par look.

The TOC Settings panel doesn’t provide options for adding artwork to the menu area. What about repositioning the TOC? Nothing available except for “Left” or “Right”. What now? Your problem-solving instincts kicks in… maybe make the background of the fly-out nav menu transparent and move the TOC elements down? Then, even though it is always stacked above, the TOC won’t obscure the presentation.

The best approach is to take this one step at a time. Let’s deal with just the transparency.

Problem #1: You can’t set the menu background transparent

At first glance, the TOC Settings panel provides an “Alpha” field right at the top. You know what that value does? It changes the opacity of the whole TOC. Not the background color field. The whole thing. Why would you want a semi-transparent TOC?

TOC Settings

Okay, let’s ignore that field. There must be a way to change the opacity of the various elements of the TOC, right? For some reason, while the TOC Settings “Theme” section provides an editable Background color chip, there’s no option to change its alpha property or to indicate “no background”. Note that there is also no option to add a background image.

Standard palette has no alpha or transparency field
RGB palette has no alpha or transparency field

Going back to the generic example, here’s the TOC Settings panel side by side with the TOC preview:

The TOC Settings panel with a TOC preview

First, figure out which TOC elements the color chips control, because the titles aren’t immediately obvious.

Assigning bright colors to the TOC elements

Next, concentrate on making one color chip transparent. Wait, what? As mentioned above, there’s no alpha field available. No “no background” option. But there is an option to change a color chip to a gradient. And within the gradient palette? An alpha property field.

Solution #1: Use gradients

Start with the “Default Entry” color chip, since it takes up the most space. Change the “Paint Bucket” icon to the “Gradient” icon, click the left color bucket of the gradient’s color ramp and change its alpha from 100% to 0%. Repeat the process for the right color bucket.

Change the Default Entry color chip from a solid to a gradient and set both sides of the ramp to Alpha 0

The TOC Preview now shows the “Background” color chip color through the newly-transparent “Default Entry” color chip.

The result of setting the Default Entry color chip to transparent

Along the way, to verify your changes are working, feel free to reset colors, since the end goal for most of the color chips is complete transparency. Here the “Background” color chip has been changed to a bright pink for clarity:

The result of setting the “Background” color chip to hot pink

The current goal is obvious — eliminate all the colors, including the hot pink of the menu’s background.

As you cycle through the various color chips, setting each to show a gradient, and setting both ends of their gradient ramps to an alpha of 0%, you might find Captivate to be a little touchy. It doesn’t always take the edit. Always double and even triple check your work. In some cases Captivate will seem to refuse to accept a gradient of 0%. In these cases temporarily use 1%. Note that sometimes Captivate doesn’t even initially accept the switch to gradients. If this happens, simply go in and reset all the chips again. After multiple passes your choices will stick.

Along the way you will notice that the “TOC Outline” color chip is a little different than the others. Use the “no outline” option here.

At some point all the color chips, except for the background, will be transparent…

The result of setting all the color chips except for the background to transparent

Finally, set the background to transparent, as well. Don’t panic if the TOC Preview doesn’t show the TOC as transparent…

The result of setting the Background color chip to a completely transparent gradient

When you run a preview of the course in a browser you’ll find that the menu is transparent:

Preview reveals the actual results of this exercise

Clearly the design of this particular course, provided by Captivate a few years ago, is not ideal for showing the value of a transparent menu.

Our goal is a little more evident if you use a custom layout with a dedicated zone for the menu:

A custom course with a dedicated area for the menu

And this is the custom layout with the menu containing most of its color chips set to transparent gradients:

The menu overlayed on the custom presentation

As you can readily see, this is an example of the domino effect one decision can make. You’ve achieved a transparent menu, but what about the width of the menu, the positioning of the elements, the spacing between them, the scrollbar, the expand/collapse button, the search magnifying glass icon, and that yellow menu item?

On top of all that, what if you are building higher resolution training? The example above is 1100px by 627px. The example below is 1920px by 1080px.

The custom template at 1920 x 1080

Suddenly the text is too small. Also note in this new example the additional frame and drop shadow. Small graphic changes intended purely for aesthetic purposes like this have negative consequences not easily solved within the “locked box” of an application like Captivate.

For all of these minor alterations to provide a positive rather than a negative impact on the final learning environment, you must depend on the inclusion of CSS and JavaScript, which we’ll look at in the next post.

A word of caution… A reliance on gradients to achieve full menu transparency will prove to be unpredictable at times. As mentioned above, the settings sometimes have a way of resetting to their defaults all on their own. Thus, a combination of this gradient method along with CSS and JavaScript overrides will support the designer in a more sure-fire manner.