Articles, Blog

Pop Out Custom Table of Contents in Your Captivate eLearning

November 4, 2019


in This Video I’ll show you how you Can build your own table of Contents Menu using Advanced Actions and Variables I’ve Been using this particular Interaction Now For A few Different Projects for Various Clients and in One of my recent Videos I kind of Revealed that I was doing something like this and One of the viewers Pointed out that they Would love to know how this Works And I debated Whether I was Gonna Share This One Because I’m Particularly Proud of This Particular? Interaction but I thought you know why not the adobe E-Learning Community is all about Sharing and I’d like to do my part and So here it Is let’s Take you Through this Today so as you can See on this This first Slide in my Course I have A Set of Objects That Appear as A table of Contents Menu now this is a grouped Object if You Take a look at my My Timeline Here you can See I have a grouped Object and it’s called table of Contents Group and Within it are a whole Bunch of Different smart Shapes now some of These smart Shapes Actually Perform The Function of Just being of the Square Itself A rectangle Itself There’s A Collapse Square or Icon if You will which I will assign the the Advanced Action to Toggle This whole Table of Contents On and Off There’s the Title of the Project here and There are in This Particular Instance Six Smart Shapes Which I’m using as Buttons That will Navigate to the first Page of all the Main Topics Within this Particular Project There’s of Course I’ve got A Toolbar Here if You will Where The very Top item is this Hamburger Menu and That’s What Triggers the Display of this table of Contents so if you, don’t like the table of Contents That’s built Into Adobe Captivate Or let’s Say you have A client who has a particular need for the table of Contents to perform a particular Function Or or to include additional Information Perhaps This is a way you Can you Can achieve that Now when I’m Actually Working on my Course? This Becomes Problematic Because of Course I’ve Set the Timing for the entire Grouped Object to Display for the rest of the Project So it’s one of These things that you build it Once and you put it on your first Slide and it’s effective including all These Toolbar Buttons and Especially the table of Contents Button will Appear for the rest of the Project and of Course Now if I need to Edit this Slide that becomes Problematic so the easiest Solution in Addition to the The Table of Contents Object Being not Visible and Output you Also want it not Visible on your stage so you Can actually Underneath The Icon for Show, Or hide all items you Can, actually put A slash Through that and hide it so that you Can build the rest of your Course But for Right Now We’ll Keep it open Because We need to do A few things to it So all of These as I indicated all of These are Buttons or they’re smart Shapes being used as Buttons and they will Simply Navigate to the Various Other Sections of the Course Now I could Simply have a jump to slide for These Particular Modules but I want to make sure of a couple of things So instead There’s an Advanced Action for each one of these let me Show you a sample of One Here Now This Advanced Action will do two things in Addition to Jumping to the appropriate Slide It’s going to hide that table of Contents Group Because We want Every Time that you Click something Whether it be A next Button or one of These? Module Buttons, We want to hide the table of Contents? Incidentally how We Keep Track of The State of That Table of Contents Menu is Through a Variable that in This Case I’ve Called V? Underscore Custom Underscore Toc Underscore open I know it Seems like a complicated Name for in This case A Variable but Keep in Mind I wanted to design this Course so that other users in the Future Could Update it and so on so I want to give very Descriptive Meanings Or titles for all my variables and of Course all my objects and Grouped objects as well So this Variable Simply Stores either a value of 0 which means that the table of Contents Slot or? Object Is Closed Or value Of 1 If it’s open so all of These Jump to Module Buttons include These Two additional Commands and That’s why, We needed Advanced Actions for Those Incidentally all my next Buttons Throughout the entire Course do Something very similar so I wrote a a simple Advanced Action for the next and The Back Buttons and That includes Those Two additional Commands as, well so even Though I could have just Simply used go to next Slide By including These Two additional Commands of Hiding the table of Contents Group and Assigning The Value Back to Zero of my Variable I Accomplished The Ability to Have an Interface that Truly Will Respond the Way users Expect it to so rather than Simply go to Next Slide I have a go to next Slide Advanced Action that I use as Well so that’s Pretty much It for the basics let’s Show you how the advanced Action that’s Going to Toggle the thie Menu Works and that’s going to be Triggered by two Buttons Actually The First One Is this smart Shape that I’m using as a Button Now I’ve Created an Additional State for it in Addition to the Rollover in the down State I have a menu open State and When the menu Is Open I’m going to have it Glow green to allow users to know That the menu Is Open or to Make it very Clear that this has Been Activated The other Thing I have here of Course is a small Little Icon in the Menu Itself that looks Kind of like A collapse Feature and Really All that I do There Is I’m going to assign the Same Advanced Action That Same Toggle Advanced Action which will Write in A moment here So that People Can Close it using that Control as, well because that’s a natural Control That People Expect to See On A table of Contents Feature like this so let’s get Started Creating That Advanced Action We Already Have the Variable in Place and That Variable has A default Value of Zero and We’ll Be using that Variable in This Advanced Action so we’re Gonna go to our Actions Tab Here Currently There’s no Action associated With that that table of Contents Menu Button but We’re Gonna Create it right now so we’re Gonna Select Execute Advanced Actions and we’ll Click on the Advanced Actions Icon and We’ll Start to Build this new Advanced Action here so it’s a conditional Action in other Words We’re Going to look at that Variable and See its Current State to Decide Which set of Actions Were going to run so let’s do that so we’re Gonna Call this one Toggle Underscore Toc That’s Pretty Self-Explanatory So if We’re Gonna Look at that Variable and To Make Things Easy if You Name all your variables with the Same Prefix in This case i’m using V Underscore it Makes it very Easy to find all your Variables so we’ll Just select that and We’re Asking Is this Variable Equal to in This Case The Literal Value of The Literal Value of Zero In other words is the table of Contents Closed Presently and? If it is We want to show that Group? So, we select The Show Command and? Again Because, We We have This Already Group Together I just need to select that Group? Incidentally There’s A fake table of Contents for A help Screen that I’ve Created for this Course as Well We don’t want to select that, We want to select the actual? Table of Contents Now We also need to change the State of our Button so that We Can Indicate to users that the menu is open so, we’re Going to choose the Command to change State of and In This case here, we’re Going to choose the name of the Button and that is Open Toc that’s what I’ve Called that Object again it’s Really Helpful to to Name all of your objects Within A course Because it Makes it Easier When You’re Writing Advanced Actions to find them so we’re Gonna Choose menu open that’s the state That I’ve Created for just This Circumstance Now, We, also need to change the value of this Variable so, we’re Going to use the assign Command And we’re Going to choose That again That Variable? With A value Now of one so we’re letting the System know that the table of Contents Is Open Now in This case, We want some Else Commands as? Well and Else Commands Basically Address The Question if the table of Contents Is equal to one Already What do, We want it to do so we’re going to add those, we’re Going to now hide Our table of Contents There it is There We’re Going to change the State of our Button To Reflect that the table of Contents is now Closed So we’ll put that Back To normal and again We need to Update the Variable Itself so, we’re Going to assign The Variable With A value of Zero or back to Zero if you will and That’s our Advanced Action it’s not that Complicated so Really what it does is it just Asks the Question what’s the current State of the table of? Contents if it’s Zero in other Words Closed Show it Change the State of the Button and Update the Variable With The value of one if that Variable Or the Current State of the table of Contents is Open Close it in other words hide it Change the State of The Button Back To normal and Then Assigning a value of Zero to Keep track of the current State So we’ll save this as an Action And Let’s Make Sure We assign it to the Appropriate Button so here we’ve got you know the the first Choice that’s Available In our List of Advanced Actions And we’re Just Gonna select Toggle? Toc we’re Gonna, also Grab this Button here Because, we wanted to do the same Thing and We’ll Just go to Actions Execute Advanced Actions and Once Again Select Toggle Toc So i think, we’re Pretty much good to go here let’s Test the step we’ll just do a Preview in Html5 So here we are on our Opening slide let’s test out the table of Contents Button it’s got a nice Rollover Effect There There it Is so. We Can of Course now Have the rollover effects for all the Buttons There let’s Try Module Two We’ll Jump to that and of Course the simple fact of going to Module two Also closes your table of Contents Let’s Open The table of Contents and Click our next Button here That will Close the table of Contents as, well and of Course, we can use the Collapse Button to do the same Thing as Well and again it’s just a toggle so it will Keep Working for as long as the Course Is Available Remember of Course that the menu Itself Is Visible for the Rest of the Course A rest of the Project so it doesn’t Matter what slide you’re on this This Table of Contents Menu will Work on any Slide for the rest of that Particular Project Guys if You Thought this Video was useful Please Share it With your Colleagues if You need Help Building your next E-Learning? Project Consider Hiring me my Focus is to always Create effective Learning that helps you Achieve your Business Goals visit my Website at paul Wilson Learning com Follow me on twitter at paul Wilson LD and don’t forget to subscribe to my youTube Channel

12 Comments

  • Reply Dave JH December 7, 2016 at 1:22 am

    Thank you, very helpful as always. Much appreciated Paul.

  • Reply richard r December 7, 2016 at 6:53 pm

    AWESOME! Thanks so much. There are the concepts here to do so many things.
    You know people tell me I should use articulate – but am staying on this dial thanks to you
    🙂

  • Reply Mesha L January 11, 2017 at 7:14 pm

    I was wondering where you got the burger smart shape. I don't see it in the list and I can't find any info online where I can get more.

    I'm suuuuper new to Captivate (if my question didn't make that obvious) and your videos have been really helpful. Thank you for posting them. 🙂

  • Reply mombasa321 July 26, 2017 at 2:19 pm

    Hi Paul. Great tutorial. I have made something similar, but the problem i have is that the grouped object (menu) seems to separate apart when i change to lower resolutions, i.e on mobile devices. Is there a way to keep the grouped object together?

  • Reply Marissa Trinidad February 2, 2018 at 9:28 pm

    Thanks for the great videos. They have been very helpful. My menu is always open when the preview starts however. It closes and works correctly after I click the close button. Any advice on what I am doing incorrectly?

  • Reply Fortarrigo Piccolomini August 29, 2018 at 8:51 am

    Hi Paul. Thanks for your tutorials. A question. In the the built-in TOC you can set the option "Navigate visited slides only". In Captivate 2017 is it possible to set this option in custom TOC? If so, can you address me to the correct path? 🙂 Thanks in advance.

  • Reply Fortarrigo Piccolomini September 8, 2018 at 11:02 am

    Hi Paul (again 🙂 ). I'm trying to build this custom TOC in a responsive project (Captivate 2019), but it's impossible to group smart shapes in a fluid box and when you set the display for entire project, the button (smart shape) unlock from fluid box. Is there a way to make custom TOC functioning in a responsive project? Thanks for the patience, I'm new with Captivate, but thanks to your videos I'm improving fastly my knowledge. Have a nice weekend.

  • Reply Keane L November 6, 2018 at 12:10 pm

    Hi Paul. I'm trying to recreate this. It works on the slide where the TOC group exists, but not on other slides. This might be a stupid question, but does the TOC group have to exist or be duplicated on all slides? Thanks 🙂

  • Reply machupiku November 12, 2018 at 5:10 pm

    This is fab…. except for some reason the change state options are greyed out in my advanced actions. Any idea what I might be doig wrong ?

  • Reply Akemi Kawagoe November 20, 2018 at 2:00 pm

    Hi Paul! It works perfectly! But in my case, I had a problema with linear navigation. I set actions to my back button, but instead of back do previous slide (with the previous slide action) it's in loop backing to the last visited slide. Have you ever had this issue? My back button is in a master slide in a responsive project Captivate 2019.

  • Reply Mark Falkland February 19, 2019 at 8:32 pm

    The 'download' project files could say 'buy' the files – it is a bit misleading. Having come from the Javascript community it is strange to see tutorials where you have to pay for the files. It is par-for-course in the JS community to provide files for free on Github

  • Reply Sebastien Arbour February 22, 2019 at 12:43 pm

    Hi Paul! Your videos are incredibly helpful. Many thanks and keep up the amazing work!

  • Leave a Reply