Need some Javascript help

Question

I'm not a JavaScript developer, so I'm hoping that someone can tell me if what I'd like to create is even possible. Actually, this idea is a result of a customized Progress Bar that was posted as a free eLearning Project by James Kingsley: Progress Bar

I'd like to apply it to only one slide, instead of an entire project. Specifically, I'd like to use it for a Slide Video as I am not using the Captivate Playbar. I need to somehow adjust the "progress_bar" display and movement to match the timing of my video frames. I did modify the variable for the "totalFrames" to match the frame count of my video and as long as this is the first slide in the course, it works great! But if you place the slide elsewhere, the progress bar begins at a frame count associated with that point in the module. Attached is James's code. Any ideas would be greatly appreciated! Thanks in advance!!

TLCMediaDesign · Accepted Answer

I tinkered around with the original code and the concept of subtracting off the elapsed frames leading up to the slide. I now have something that seems to work including the clickable area and the replay button.

You will need a transparent shape over the top of the progress bar with the exact same width.

In this code - you'll need to name it progClick

You will also still need to indicate the total seconds of the slide in line two.

var thisSlideStart=cpInfoCurrentFrame;
var thisSlideSec=10;
var thisSlideFrames=thisSlideSec*30;
var pauseFrame;

window.cpAPIEventEmitter.addEventListener("CPAPI_TIME_UPDATE", function(evt) {
if (evt.cpData.frame === pauseFrame) {
cpCmndPause = 1;
pauseFrame = null;
return;
}

var pctSlide = (((evt.cpData.frame-thisSlideStart)/ thisSlideFrames) * 100).toFixed(0);
$("#slideBarc").width(pctSlide + "%");
$("#slideBarc").css("visibility", "visible");
});

window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function(cpEvt) {
  pauseFrame =
    cpEvt.cpData.to === thisSlideFrames ? thisSlideFrames : cpEvt.cpData.to - 1;
  $("#progClick").click(function(evt) {
    var barPercent = evt.offsetX / $(this).width();
    cpCmndGotoFrameAndResume = Math.floor(thisSlideFrames * barPercent)+thisSlideStart;
  });
});

Your replay button just needs a single line of code to return you to the starting frame of the slide.

cpCmndGotoFrameAndResume=thisSlideStart;

Keep the names of all your objects.

Just add the transparent box for click area.

Hope this works!

@Stagprime2687219 @kimb89954555

I rewrote @Stagprime2687219's code to get the slide length dynamically. There is a ton of information in the slide enter event. Try logging cpEvt.Data in the slide enter event.

var thisSlideStart = cpInfoCurrentFrame;
var thisSlideSec;
var thisSlideFrames;
var pauseFrame;

window.cpAPIEventEmitter.addEventListener("CPAPI_TIME_UPDATE", function(evt) {
if (evt.cpData.frame === pauseFrame) {
cpCmndPause = 1;
pauseFrame = null;
return;
}

var pctSlide = (((evt.cpData.frame-thisSlideStart)/ thisSlideFrames) * 100).toFixed(0);
$("#slideBarc").width(pctSlide + "%");
$("#slideBarc").css("visibility", "visible");
});

window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function(cpEvt) {
thisSlideFrames = cpEvt.Data.to - cpEvt.Data.from;
thisSlideSec = thisSlideFrames / 30;
pauseFrame =
cpEvt.cpData.to === thisSlideFrames ? thisSlideFrames : cpEvt.cpData.to - 1;
$("#progClick").click(function(evt) {
var barPercent = evt.offsetX / $(this).width();
cpCmndGotoFrameAndResume = Math.floor(thisSlideFrames * barPercent)+thisSlideStart;
});
});

Stagprime2687219 · Answer

The tricky part is that you don't have a native variable to track the number of frames and current frame for an individual slide. You only get one for the current frame and total frames relative to the entire project.

So tweaking that code will certainly be a hassle as it is based on the entire project.

That said - you could create a few variables of your own and do some math to get there.

You would need to change the value in red below to match your slide length.

This assumes your slide length and slide video are the same.

Certainly - there is a bit more to it than this but it seems to me that it would be possible.

Here are some thoughts for additional variables for capturing the individual slide data to be used for a slide specific progress bar. You could name your variables however you wish.

var thisSlideStart=cpInfoCurrentFrame;

//This should capture whatever the frame number is on enter to the slide
var thisSlideSec=20;

//Enter the length of your slide in seconds here. Example is 20 seconds.
var thisSlideFrames=thisSlideSec*30;

//This will calculate the total number of frames for the slide based on the length provided.
var thisSlideCurrent=cpInfoCurrentFrame-thisSlideStart;

//This will track the current frame of the slide by subtracting off the number of frames elapsed prior to the slide.
var pctComplete=((thisSlideCurrent/thisSlideFrames)*100).toFixed(0);

//This will calculate the percent elapsed of the current slide in whole number increments.

I know it is not an end solution but hopefully it is helpful.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded