March 6, 2018
Create multi-level TOC in Adobe Captivate 2017 [Responsive]
Comments
(0)
March 6, 2018
Create multi-level TOC in Adobe Captivate 2017 [Responsive]
I have worked in the eLearning industry for over 15 years. I enjoy making tools/applications/web apps do things they were not meant to do. I have launched several tools to help develop better eLearning. CoursePortfolios.com: Explore demos from the world's best eLearning designers and developers. Where the most creative eLearning professionals share demos of their craft. ReviewMyElearning.com :  The is the best way to collect feedback from SMEs, Team Members, Clients, etc. Plus it's all in the cloud. I use my skills to create custom solutions for Web, Mobile, and Desktop. Primarily in the eLearning arena but we provide solutions for many other industries.
Newbie 17 posts
Followers: 44 people
(0)

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.

0 Comments
Add Comment