Hacking the TOC: Why Do It

When building web-based lessons for clients, instructional developers and designers can find themselves looking for more integrated interactive tools, to provide a better user experience. Adobe Captivate provides just such a tool, called the Table of Contents, or TOC, but treats it like an unwanted child, separate and hidden away by default. These posts will show you how to manipulate the TOC so that it appears integrated into a presentation or lesson.

This approach involves more development and QA time, too. It can be a difficult task. Why do it at all?

An object referred to as a “book”, in this case “The Elements of Color” by Johannes Itten
A web-based learning experience has a number of particular navigational challenges because, well, it’s not a book. We are culturally inclined to learn via the interactive tools of a textbook. A textbook is a physical object in physical space with a width, height and thickness that instantly communicates the general amount of information contained within. That information is also easily accessible through the flipping of distinct, tactile pages.

A web-based lesson doesn’t automatically reveal its amount of content, nor does it automatically display the location of that content. The designers and developers of the lesson need to add specific features to address these critical functions or a student can get lost pretty easily. As designers of courses we have to constantly ask ourselves whether the student is at any moment wondering:

  • How far along they are in the lesson
  • How many more slides they still need to access
  • If they will be able to review the material for greater retention at a later date

On-screen user interface tools need to be present to communicate this information. One particular solution for a way-finding challenge like the above is to include a navigation menu as a sidebar. It’s not necessarily an exciting solution, but it’s highly functional. And once we decide to include a menu, we then have to ask the client a bunch of questions, such as:

  1. What’s in the menu?
  2. Are all menu items accessible or only those that have been visited?
  3. Is the menu too big for the screen and need to be collapsed?
  4. If the menu is collapsed, how are their parent containers labelled?

A good learning environment puts the learner first, and an easy-to-use, interactive menu that tracks progress, provides instant navigation and feedback, and appears visually integrated into the environment are all positive steps towards that goal.

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.

Burning Man Art Visualizations

Presentation images and construction documents of sculptures for Burning Man, designed by artist Michael Emery. Projects secured funding from the Burning Man organization based in part on clear visualizations.
• Provided modeling, rendering, construction documents, contractor consulting
• Software used: 3D Studio Max, Maya, Photoshop
Michael Emery Artworks

Identity Reorganization Portal 2016

Psyche’s Journey 2015

The MerKhana 2014 & The MerKaBa 2013

Nelumbo Nucifera 2011

You Are All So Many of Me 2008

Burning Man Temple Crew (2007)

Crew member on the temporary structure the Temple of Forgiveness at Burning Man 2007, designed by David Best and Tim Duncan. I provided a bunch of designs for the alters that weren’t used, and one sketch that was, plus I used a nailgun for a week and rode a cherry picker.

Architecture & Sculpture (1996-2004)

Clients and employers included:

Alice Aycock, Artist. January 2002 – March 2004.
3D models, animation, graphic design in production of sculptural work for national venues. Used form•Z, Maya, Photoshop, Illustrator, After Effects.

Diller + Scofidio Architects, July – November 2001.
3D models, digital video for Eyebeam Atelier Museum design presentation. Exhibited at the Whitney Museum. Used form•Z, Photoshop, After Effects.

Open Office Architects / Diller + Scofidio Architects, Summer 2001.
3D models for Shiseido cosmetic counter designs. Used form•Z, Photoshop.

Morris Sato Studio, January – December 2000.
3D models, animation, analog video shoot for Vineyard Theater interior design and for Grey Art Gallery exhibit on designer Shiro Kuramata. www.nyu.edu/greyart/exhibits/shiro/index.html. Used After Effects, form-Z, Media 100.

Duany Plater-Zyberk & Company, April 2000.
3D models for town planning charrette for Liberty Harbor, NJ. Used form•Z, Photoshop.

Susana Torre / Team for Environmental Architects, April 1999 – February 2000.
Construction drawings for the Brooklyn Children’s Museum. Town planning charrette for Liberty Harbor, NJ. Used form•Z, AutoCAD, QuarkXPress.

Karen Van Lengen Architects, July 1997.
3D drawings for “The Busy Woman’s Dream Home” project. Used AutoCAD.

Marpillero Pollack Architects, May – June 1995, May – June 1997.
3D models, graphic design. Used formoZ, Photoshop, QuarkXpress.

Baratloo/Balch Architects, October – November 1996.
3D model, animation for video art project titled “C is less than P minus G times T (Queens Conjecture)” exhibited at Queens Museum of Art. Used formoZ, Alias, Media 100.

Keenen/Riley Architects, July – November 1996.
Construction drawings, photocollage and maquettes for Palm Island aviary and private residence and for Field House. Used pencils, bass wood, Photoshop.

Jody Pinto, artist. May – June 1996, October – December 1998.
3D models, animation, digital video for bridge design presentation. Used Softimage, Media 100, Premiere.

Environmental Simulation Center, May 1993 – December 1994.
3d models of New York City buildings and streets. Used AES.

Sam Anderson Architect, June – September 1995.
Construction drawings for Fogg Art Museum, Harvard University. Used trusty old pencils.

PATH Architecture, May – June 1995.
3D models of Hudson River waterfront for physical exhibit at the Storefront for Art and Architecture. Used formoZ, Photoshop.

Manhattan Timeformations (2000)

Manhattan Timeformations

An old school website consisting of animated, wireframe representations of New York City high rises and urban development since 1890, produced for The Skyscraper Museum with a grant from the New York State Council on the Arts.

12.01.2000: inception date

Manhattan Timeformations was begun in the early 90’s by architect Brian McGrath, author of a folio called Transparent Cities, “a boxed edition of twenty-four historic and contemporary maps on clear acetate — twelve of Rome, twelve of NY — that invites readers to assemble, transform, and contemplate the ever-evolving urban spaces of almost any city”.

In 2000, McGrath and The Skyscraper Museum received public funds from a Technology Initiative Grant from the New York State Council on the Arts, allowing this previous research to be revisited with specific focus on New York and the age of skyscrapers. Designer Mark Watkins was brought in to put the website together, and to help reimagine the project in interactive form.

Throughout the Summer of 2000, The Skyscraper Museum, curated by Carol Willis, held a series of informal discussions with the public, presenting the aims of the project while 3d digital models of New York skyscrapers were constructed in the gallery by Parsons School of Design architecture students Akiko Hattori and Lucy Lai Wong. These models, also built by McGrath and added to his large, historical / analytical model of Manhattan, were exported and formatted for online presentation.

I was responsible for research, analysis, interface design, production, animation, presentation. The project consists of 3D models brought into Flash. Heavy Photoshop preparation. Praised for intuitive navigation. Recognized by the 2001 Prix Ars Electronica (Award of Distinction for Net Excellence), the 2001 New York Flash Film Festival (Winner in the category “3D”), received a Macromedia Site of the Day Award (December 19, 2000). Exhibited at Ars Electronica 2001 in Linz, Austria (background image), in “net.ephemera” at Moving Image Gallery (May 2001, NYC), the 2001 Los Angeles Siggraph Technical Images Gallery, at the MIT “Image and Meaning” conference, on the online art database Rhizome.org, and featured in the 2001 New York Digital Salon and in the pages of Wired (November 2001), Architectural Record (June 2002), Leonardo, and others.

City Speculations (1996)

City Speculations (1996)
Client: Baratloo Balch Architects.
• Video art project titled “C is less than P minus G times T (Queens Conjecture)” AKA City Speculations.
• Project involved building a 3d model of the architects’ physical artwork for the City Speculations exhibit at Queens Museum of Art.
• Provided modeling, rendering, animation, video editing.
• Software used: 3D Studio Max.
View description by Mojdeh Baratloo Achitects.