How do you automatically number the table of contents?

[ruthg84]

I want to automatically number the table of contents in the skin editor. Is it possible to do this? This is so that when I add a new slide, I don't have to manually re-number everything. I want the slide numbers to be visible in the table of contents so that the user can navigate back easily to particular slides when prompted.

Thanks!

[Lilybiri]

Bit confused by your question. If you keep the automatic numbering of slides, and refresh the TOC you'll have it there as well. Maybe you missed the Refresh TOC button?

[ruthg84]

Ah yes. I realise this is possible but I want to retain the titles I have given to each slide in the table of contents, but also for them all to have an automatic number.

[Lilybiri]

Same solution. Slide labels do not change when you insert or move slides, only the automatic number is adapted to the new sequence.

[ruthg84]

But when I press reset, my slide titles are replaced with 'slide 1' etc. I want them to be '1.slide title'. Only, I want the slide titles I give them to stay the same, but the number at the beginning to change. Here is my TOC at the moment:

I simply want each title to be preceded with its slide number.

[Lilybiri]

Did you perhaps change the names IN the TOC, instead of in the Filmstrip? If you name (and even group) slides in the Properties panel, names show up in the Filmstrip and will automatically appear in the TOC when you reset it.

[ruthg84]

But even after going through the slides and labelling them all, it doesn't give automatic numbers. So now, if I rearrange the slides, I will still need to alter the numbering of the slide, right?

I want to know if there is some way that when you move slides around, you can automatically add a number to the beginning of the slide title.

[Paul Wilson CTDP]

No, there is no automatic numbering of the slides in the TOC. However, whatever text you enter into the slide name in the properties panel will end up in your TOC (you may need to refresh it as Lilybiri suggests). If you label your slides to include a number, it will not be automatic but will accomplish the same thing. For example: 

[ruthg84]

OK, thanks for clarifying. So I'd still have to go through and change the name on a slide I rearrange. Oh well!

[TLCMediaDesign]

This code will number the TOC for you automatically for HTML5, you will need to put it in the head section of the index.html. Find <script> and put the code on the next line:

<script>

window.addEventListener( 'moduleReadyEvent', function ( e )
{
var myText = document.getElementsByClassName('tocText');

for ( var i = 0; i < myText.length; i++ )
{
  var getText = myText[ i ].childNodes;
  var str = ( i + 1 ) + ' ' + getText[ 0 ].innerHTML;
  getText[ 0 ].innerHTML = str;
}
});

[PJF WW]

I gave this a shot and it worked as advertised. I noticed, however, that it numbers every entry in the TOC, including topic headings that are either added in the skin editor or pulled in from group names. Both of these items show up in the published TOC but do not correspond to an actual slide. The yellow highlighted item in the screengrab below was generated from a slide group name.

Is there a way to modify your script to skip these?

[TLCMediaDesign]

I'm sure that the script could be modified if the headings are labeled differently than the actual entries. I don't have a menu currently that has a structure like that to check it and my Captivate is currently down due to some security restriction placed on it from our computer support so I can't test it from my current location.

I'll see if I can figure something out in a few days.

[TLCMediaDesign]

This script will take the sub heading into account.

window.addEventListener( 'moduleReadyEvent', function ( e )
{
//internal objects and methods supplied by Captivate
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();

var myText = document.getElementsByClassName( 'tocText' );
var checkLeft = parseInt( myText[ 0 ].style.left );
var breaks = 0; 

if ( myText != null )
{
  for ( var i = 0; i < myText.length; i++ )
  {
   if ( parseInt(myText[ i ].style.left) > checkLeft + 10 )
   {
    breaks++;
   }
   else
   {
    var getText = myText[ i ].childNodes;
    var str = ( ( i + 1 ) - breaks ) + '  ' + getText[ 0 ].innerHTML;
    getText[ 0 ].innerHTML = str;
   }
  }
}
});

[Paul Wilson CTDP]

Seems to me the easiest solution would still be to just label each slide in the slide properties exactly how you want it to display in the table of contents. 

[TLCMediaDesign]

Or with the script, you can create it once and then never have to touch it again.

My scripts attached to my files are over 1200 lines. I may have to add to it depending on functionality, but for the most part everything is done with an external JS file.

Our TOC open on the right side, but appears from the bottom up. I wrote it once and the scripts are dynamic enough to handle every project.

If you add or delete slides, the numbering accommodates, manually you need to go in a renumber every slide past the change.

We rarely if ever use any advanced actions, just actions to execute JavaScript functions and our developers love it. Most things you just name things correctly and you don't even need to execute JavaScript as we check if certain variable and button names exist and then the scripts know how to handle those situations.

I think that since JavaScript is the tool to manipulate the DOM, and it's written dynamically, you can't go wrong.

[PJF WW]

Not in this case. I've got just over 200 slides.

[Paul Wilson CTDP]

For sure, in this case, yes it makes sense.

[PJF WW]

That's awesome. Thanks again!

[PJF WW]

That last script numbered only the subheads, but not the pages.

[TLCMediaDesign]

I thought that is what you wanted. You want it the other way around, with the headings not numbered?

You should just be able to reverse the if/else statement:

window.addEventListener( 'moduleReadyEvent', function ( e )
{
//internal objects and methods supplied by Captivate
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();

var myText = document.getElementsByClassName( 'tocText' );
var checkLeft = parseInt( myText[ 0 ].style.left );
var breaks = 0; 

if ( myText != null )
{
  for ( var i = 0; i < myText.length; i++ )
  {
   if ( parseInt(myText[ i ].style.left) > checkLeft + 10 )
   {

         var getText = myText[ i ].childNodes;

         var str = ( ( i + 1 ) - breaks ) + '  ' + getText[ 0 ].innerHTML;

         getText[ 0 ].innerHTML = str;

   }
   else
   {

     breaks++;
   }
  }
}
});

[PJF WW]

I suppose I could've been a bit clearer there.

Anyhow, that last script nails it.

[TLCMediaDesign]

Not a problem, I guess intuitively I should have realized my first script would have been backward.

Happy to help.

[ruthg84]

Thanks Paul, this is interesting. However, I don't know how to get to the place where I would insert that code. I always just publish mine and then upload them as Scorms to my LMS.

Does it still apply if I am working with Scorms?

Apologies for the lack of knowledge around this!

Ruth