Activate/Deactivate Next Button based on Previously Viewed

[#1]

We have custom previous and next buttons in our module. Our client want to deactivate the next button until the end user finishes the slide and then have it active once they've viewed it. Plus, have their LMS remember each users location in order to continue at a later time. Has anyone figured out a solution? If so, could you please share?

[#2]

For the first question, have a look at:

Force First View (micro-navigation) - Captivate blog

Second question is difficult. If you are sure that the learner will use the same system, you could store a variable (tracking if slide has been viewed) in Local Storage and retrieve it in a next session.

[#3]

Lily, I have multiple slides that this needs to be applied on. Is there a quick way (shared action) that this can be implemented?

[#4]

I did it with a shared action. The blog post was one out of 4 articles. Here is the last one

Advanced to Shared Action: Step-By-Step (micro-navigation showcase) - Captivate blog

[#5]

Unfortunately, I can't skip ahead a number of seconds per slide. I have voice over narration for each slide. Scratching my head on this one.

[#6]

I had the same issue - just created a second 3-sec slide with all objects visible, no voiceover or other animations that only is seen if the first (full) version had been viewed. If the first version is viewed, jump to the short static version. I also included a button to "replay" the first version if wanted, which reset the "slide_x_viewed" variable to 0 so the system would think it was indeed the first time through.

Not the most elegant way, I admit, but it works if the micronavigation can't do the trick for you.

[#7]

Do yolu want to hear the narration also on revisiting? In that case: do you need CC? If CC is not necessary, replace the slide audio by either an Audio object or by the command Play Audio triggered on Enter. You can have the audio played in that case at all visits and have the Next button displayed using the shared action.

[#8]

There is a very easy way to do this with JavaScript, easier if you put it in an external file, but you can execute this onEnter of every slide:

The next button in the script is "next_btn".

Create a Captivate variable called myProgress and set it's value to 0

var slideData = null;

window.cpAPIEventEmitter.addEventListener('CPAPI_SLIDEENTER',checkSlide,false);

function checkSlide(e)

{

     slideData=e.Data;

     if (window.myProgress>=slideData.slideNumber)

     {

     cp.show('next_btn');

     }

     else

     {

     cp.hide('next_btn');

     window.cpAPIEventEmitter.addEventListener('CPAPI_VARIABLEVALUECHANGED',checkEnd,cpInfoCurrentFrame);

     }

}

function checkEnd()

{

     if ( window.cpInfoCurrentFrame > slideData.to - 5 )

    {

          window.cpAPIEventEmitter.removeEventListener('CPAPI_VARIABLEVALUECHANGED',checkEnd,cpInfoCurrentFrame);

          if (slideData.slideNumber !== window.cpInfoSlideCount )

          {

               cp.show('next_btn');

          }

          window.myProgress = slideData.slideNumber;

     }

}

[#9]

David, I am sure you have a perfect solution there. If it is easier eepends on the developer's skill.  You know that I am telling this with a smile. In a consultancy job I prefer advanced/shared actions because they can be handled  by the company in an easier way than a JS file. If  this is a solution to be used in one company, certainly would go for your solution.

As a user recently commented... I prefer to 'learn to fish' over 'provding a meal'.

[#10]

I understand, but it is easy to copy and paste!

I love my projects to have 0 advanced actions, you can execute anything on slide enter if need be.

The best thing about using the JavaScript and CP's Events is that so much more information is available. Wish they would expose more variables, but as of now...

[#11]

Sure, David, agree about that. And an easier way to inttegrate external JS files... You are the JS expert, I don't like to offer copy/paste solutions myself, but that is my teacher history.

[#12]

Is the ('next_btn') a class that is being grabbed? So I don't have to worry about making sure that this script matches each next button variable. Sorry, I'm a beginner with JavaScript. So this may not be the right question.

I usually just copy and paste custom navigation button on each slide, and I know when I do it that way, Captivate won't let me name them the same, because it treats it as a variable, right? I know this is not the most efficient. If I put the custom next button in the master slide with this script, will it "grab" it every time for lack of a better term.

Thanks!

[#13]

What I do is put the next button on the first slide and display for the rest of the project. If you name it 'next_btn' the code I posted will work. The name of the button becomes an ID, not a variable.

If not, the code would need to be modified to find the next button on every slide as long as there is something common in their names.

So if you called the first next button 'next_btn_100' and the copy and pasted it, just the number would increment and each of them could easily be found.

If you paste this JS just above the function checkSlide(e) line in the code:

var d = document.getElementsByTagName('DIV');

var nextID = null;

Array.prototype.forEach.call( d, function( elem )

{

     if ( elem.id.indexOf( 'next_btn_' ) === 0 )

     {

          nextID = elem.id;

     }

});

then in the cp.show() and cp.hide() statements make them:

cp.show( nextID ); and cp.hide( nextId ); ( 3 places in the code)

You can paste the name of your next button in where the Bold text 'next_btn_) is, just use the name of your buttons that is common, not the numbers.

nextID is a variable that contains the ID of the next button.

[#14]

The CpExtra HTML5 widget also has a couple of functions to help with this: @syntax and #syntax

@syntax | Infosemantics Pty Ltd

[#15]

I'll read up on that!

Thanks Rod.

[#16]

Awesome!

Thanks for the quick reply.