Need some Javascript help

Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

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!!

 

Views

244

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct Answers

Advocate , Feb 24, 2021 Feb 24, 2021
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  progClickYou will also still need to indicate the total seconds of the slide in line two. var thisSlideStart=cpInfoCurrentFrame; var thisSlideSec=10; var th...

Likes

translate

Translate

Translate
Adobe Community Professional , Feb 25, 2021 Feb 25, 2021
@Stagprime @kimb89954555    I rewrote @Stagprime'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-thisSlideSt...

Likes

translate

Translate

Translate
Advocate ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

In the events used in the example you can get the totalFrames.

 

totalFrames = event.Data.to - event.Data.from

 

I can get the code to work except that the total width of the progress fluid box is returning 300 instead of 519.

These are using the exampe CP file, If I hard code the total width it works perfectly.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

Thank you both for these replies!  Admittedly, I was just hard coding the totalFrames, but can you tell me which Event would return the results for this variable in your example?

 

Also, when you say that you hard coded the width, did you just insert '519' into this line? 

$("[id^=progress_bar]").width(courseProgress + "%");

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

Here would be his JS edited, the second event listener is where you would populate the totalFrames in bold.

 

var totalFrames;
var pauseFrame;
window.cpAPIEventEmitter.addEventListener("CPAPI_TIME_UPDATE", function(evt) {
if (evt.cpData.frame === pauseFrame) {
cpCmndPause = 1;
pauseFrame = null;
return;
}
var courseProgress = (evt.cpData.frame / totalFrames) * 100;
$("[id^=progress_bar]").width(courseProgress + "%");
$("[id^=progress_bar]").css("visibility", "visible");
});
window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function(cpEvt) {
totalFrames = cpEvt.Data.to - cpEvt.Data.from;
cpEvt.cpData.to === totalFrames ? totalFrames : cpEvt.cpData.to - 1;
$("[id^=progress_clickarea]").click(function(evt) {
var barPercent = evt.offsetX / $(this).width();
cpCmndGotoFrameAndResume = Math.floor(totalFrames * barPercent);
});
});

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

Thank you both for taking time out of your schedules to assist me!  I've created a small sample file, using one of the QSP's, to show you what I'm trying to achieve as the updated script still displays the progress bar starting with the frame of the entire course, rather than the current slide.  I understand what Stagprime was saying in regards to determing the number of frames that have elapsed when entering the current slide, but I'm not sure how to update this particular script accordingly.  Also, I wasn't sure if I could insert the assignment of totalFrames variable within the second Event as it's also used in a computation for the assignment of another variable that occurs just prior to the second Event statement.  (Yes, I do need to learn JS!)

  

For some reason, this site isn't letting me attach my cptx file, but I'll just try later.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Does this match what you're after?

I am picturing a progress bar that aligns with just one particular slide - independent of the progress bar of the whole project.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Pretty much!  And in James's example, he has a "clickable" area so that the learner is presented with what looks and feels like a player that's similar to the Event Video.  This option also allows me to insert CC and a few other buttons for FF, Rewind, Replay, Audio, and Play/Pause.  Although it would be nice if Captivate offered a Player with a progress bar that executed on a slide-by-slide basis, similar to what Articulate has, this idea of inserting the JS code also allows the Designer an option to customize the various objects for color, size, shape, placement, etc.  And this customization can occur for different slides within the same project.  

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Really wish I knew why this site won't let me attach my cptx file, only 2.4MB, but here's an mp4 of what I'm trying to accomplish.  You'll see where the progress bar begins with the frame of where the slide is within the course, rather than the starting frame of the slide.  I'm still trying out different designs, but I really like the option of this level of customizations.  Just need to get the script to work!  Thanks again!!!

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Well, to be fair - I deviated from the original code you found in the AI project and came up with my own solution from scratch. As with many things - there are lots of ways to tackle something so I offer this as another way to approach the issue in the hopes it may provide some insight.

This is how I crafted the slide specific progress bar - basically just animating a rectangle.

 

var thisSlideStart=cpInfoCurrentFrame;
var thisSlideSec=5;
var thisSlideFrames=thisSlideSec*30;
var slideProg = setInterval(chkSlideProg,30);

function chkSlideProg() {
var thisSlideCurrent=cpInfoCurrentFrame-thisSlideStart;
var pctSlide=((thisSlideCurrent/thisSlideFrames)*100).toFixed(0);
$("#slideBarc").animate({width: pctSlide+"%"},25);

if (pctSlide>=100) {
pctSlide=100;
clearInterval(slideProg);
}
}

 

On your end - for this code - you would need a progress bar in the shape of a rectangle with the name of
slideBar
Then you would simply need to specify the length of your slide in seconds on the second line
var thisSlideSec=#;
This code would then be placed as the onEnter action for the slide you wish to use it on.

 

I am not a JavaScript expert and I approach things much different than a classically trained programmer so perhaps TLCMediaDesign may have an easier, more flexible solution, but as I said maybe it can help provide some insight.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

I will try this out to see if I can get the progress bar to start at the beginning of the video.  Also, if I wanted to include the "clickable" area, could I just include the event listeners from James's original code, minus the lines for the progress bar and adjusting any variable names to what you have?  Thanks!!!

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

Okay, this is definitely a good-enough for now solution!  Although I'd still like to have my "clickable" area back, I obviously don't know what I'm doing with those event listeners, so I left them out and just used your code, Stagprime.  If TLCMediaDesign can advise me on how to incorporate that code, along with yours, that would be wonderful!!  I still need to work on the Replay button as I can't get the progress bar to reset when the video reaches the last frame.  Still, I'm extremely grateful for ALL the assistance both of you have provided.  Thank you SO much.  Here's a link to the sample file which has 6 slides.  The video is slide #4 and you can either tab through or select the Menu icon and go to the slide titled 'Video Layout'.  

https://slidevideoprogressbar.netlify.app/ 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

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!

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

@Stagprime @kimb89954555 

 

I rewrote @Stagprime'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;
});
});

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

OMG!!!  This is exactly what I've been searching for:  https://slidevideoprogressbar.netlify.app/ 

Both of you are absolutely amazing and I can't thank you enough for your technical expertise!  How do I mark both answers are being correct?

 

I hope other designers in this community bookmark this thread to utilize your code for creating customized Slide Videos that will allow them to meet their requirements, while catering to the 'streaming' generation.  

Kim

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

I have marked both answers as being correct, part of my moderator job. Hope you agree?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

Yes!  Thank you so much Lilybiri!!  Btw...I love your blog posts.  All of them.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

You're welcome. Thanks... why not add comments to my blog posts? It seems to become more and more rare to get comments.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

I will, especially since I've bookmarked so many of your posts as well as passed your site on to others seeking solutions.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines