Kingsley eLearning Solutions

You have big dreams for your eLearning.
We'll make them come true.

image of Kingsley

Create multi-level TOC in Adobe Captivate

Submitted by Kingsley on Mon, 03/05/2018 - 17:46
TOC

Chuck Sigmund asked for some help in the Adobe Captivate Users LinkedIn Group. He needs to create a multi-level menu. 

My solution uses a bit of JavaScript/Jquery trickery and I only built it for the Responsive output.

I add a ">" to the beginning of the slide name of any slide I want to indent (ex: >Level 2 slide"). 
Then I run this JS when the course loads:


$( ".tocText nobr:contains('>')" ).each(function( index ) {
	var str = $( this ).text()
	var res = str.replace(/>/g, "  ");
  	$( this ).html(res)
  	$(this).parent().siblings(".tocBookmark").css("left", 20)
});

That code will will check all the TOC entries (.tocText) to see if they contain a ">".
Then it replaces the ">" with two spaces ( "  ").
And finally it finds the items bullet point and moves it to the left as well.
It's not perfect... but it's a great starting point.

Leave a comment if you tweak this or if you have any questions.
Contact me if you have an eLearning Puzzle you need to solve.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Image CAPTCHA
Enter the characters shown in the image.
Tags