Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Using JavaScript to trigger a slide's On Enter Advanced Action for a Replay Button

New Here ,
Jun 14, 2018 Jun 14, 2018

Hello,

Prelude: My project needs a Pause/Play button and a Rewind button. I am creating a project in Captivate 2017 where each slide needs to play to the end of the slide before the on screen buttons are enabled on the user's first visit. On the second visit, everything needs to be enabled at the beginning of the slide. I tried using Conditional statements where on the first pass, everything is Disabled in the On Enter Advanced Action, then after a Delay Next Action By action everything is enabled. Because my project has a Pause/Play, the inability to control the Delay Next Action By action with a Pause command means that I am now trying to use JavaScript timers with my On Enter Advanced Action that will enable the interactions when the timers run out.

With my Replay button, I am able to go back to the beginning of the slide with an Advanced Action like this:

Replay Advanced Action.PNG

But this only brings me to the first frame of the slide and does not trigger the slide's On Enter Advanced Action again, meaning that the Javscript for the timers are not triggered again, which would reset the timers for me.

Question: I have looked into JavaScript where you can use the line cp.runJavascript(cp.model.data.objectname.oca); to trigger an Advanced Action on a slide's object, but is there a way to run the JavaScript for the slide's On Enter Advanced Action using a similar line of code? I am hoping to add something with that functionality as an Execute Javascript action to the above Replay button Advanced Action, so it will jump to the initial frame of the slide, and also trigger the On Enter Advanced Actions, so that on a first visit, everything will still function how I need it to. If that makes sense.

I also found the below code that would allow me to find the slide's ID, which I was hoping I could put into the cp.runJavascript(); code and it would trigger the On Enter Advanced Action, but I have not been able to make that work either.

var getSlides = cp.model.data.project_main.slides;

var currentSlideID = getSlides.split(",")[window.cpInfoCurrentSlide - 1 ];

cp.runJavascript(cp.model.data.objectname.oca);

I have also seen where you go to the use a v_enter variable that is set to the slide's first frame, then when you click Replay, it jumps to a few frames before the current slide's initial frame, then plays again so it will actually trigger the On Enter Advanced Action, but that creates a flicker when the slide has to reload again from the previous slide, which I cannot have in my final product.

Any guidance would help. I have exhausted so much time trying to find a solution to this issue, and every time I find a semblance of a solution, something about it doesn't seem to work 100%.

Thank you,

Sean

1.6K
Translate
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
Contributor ,
Jun 14, 2018 Jun 14, 2018

What I do is have a one frame long slide at the beginning of my captivate and bounce off of that back to the slide I want users to go to.

You can do that by setting a var before you go to slide 1 and on enter slide 1 goto the slide you want.

Need to set up some logic to make sure users who are entering the lesson for the first time just pass on to slide 2.

You also need some logic to help with when users resume the lesson, by that I mean leave and the resume at a bookmarked location. I do the same thing, bounce off slide 1 to make sure all the javascript and advanced actions are set up before the user starts view the lesson.

Sorry, I am walking out the door for vacation or I would put in some example code.

Translate
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 Expert ,
Jun 14, 2018 Jun 14, 2018

Did you see this solution?

Force First View (micro-navigation) - Captivate blog

I converted the advanced action later on to a shared action:

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

For a Replay slide button:

Replay (slide) Button - Captivate blog

Of course you can continue with JS, but I prefer simple solutions.

Translate
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
Contributor ,
Jun 14, 2018 Jun 14, 2018

Lilybiri

I have seen your tutorials on micro nav, very helpful. I think the issue the original poster and I both had was that we had actions on Enter Slide, which is not triggered when you send the playhead back to the first frame of the slide.

Translate
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 Expert ,
Jun 14, 2018 Jun 14, 2018

Sorry, I did explain what has to happen in that case, that is why I rewind the playhead to a couple of frames before the first frame of the slide, to allow the On Enter action to be done. I described both scenarios extensively in the Replay button post.

Translate
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
Engaged ,
Jun 14, 2018 Jun 14, 2018

I use the same procedure as chrism45366180​ . I have a variable tracking if a slide has been visited, something like v_mySlideVisited (initialized to 0, set to 1 on slide enter or when a required action has been taken). An On Enter action checks If the slide has been visited, show Next button (or whatever); else hide Next button and do any other necessary resets to states or show/hide actions on the slide.

To replay and reset the slide to its initial state, a Replay button will:

1. set the visited variable = 0

2. send the user to a blank slide at the beginning of the course that has a timing of 0.1 sec.

The blank slide at the beginning of the course has an On Enter action that sends the user back to the last visited slide. Since the user is entering the slide and its visited variable is now set to 0, it plays as if entered for the first time. This blank "bounce" slide can serve as the replay mechanism for all the slides in the course.

If you want to trigger an action with JavaScript, put a tiny transparent clickbox in a corner of the slide where users won't accidentally click. The clickbox action can be a duplicate of the On Enter action, or whatever subset you need. Use the following to trigger the clickbox:

box = $('#nameOfClickBox')[0];

cp.clickHandler(box);

Theoretically you can have a chain of clickboxes that run actions which include a JS line that hits another clickbox that runs another action with a JS line .......

But I've only ever used one per slide.

Translate
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
New Here ,
Jun 14, 2018 Jun 14, 2018

Thank you everyone for your responses!

My biggest hope was that there would just be a way to trigger the On Enter slide without having to jump back and forth.

Lilybiri, I did see the links you provided before bringing this question to the discussion board. For your solution to the micro navigation, I did go that route initially to double up the next button and have one hidden until the second visit, but the client wants everything disabled on the slide until the audio finishes the first time around, but then everything enabled from the start of the slide the second time around. So that means I could have a slide with numerous buttons that would all require a second version. I was trying to avoid all of the extra work by using timers. I'm tasked with building hundreds of slides with potentially multiple interactions on each slide that need to follow these rules, so I am looking for the most efficient means to get everything to work.

For the solutions that chrism45366180​ and dan56​ are using with a dummy slide, this is potentially a route that I can go in, but I do have a slide counter on the project, so it would throw off the counter, but I guess I could create an expression variable that removes one from the current slide number and the total slide number. It still creates a bit of a "flicker," because some of the elements on the slide would still disappear then reappear with this approach.

It just seems bizarre to me that the Advanced Actions tied to the On Enter cannot be accessed through a command and I was hoping someone could prove me wrong on that.

Translate
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 Expert ,
Jun 14, 2018 Jun 14, 2018

Sorry, but I never used two buttons at all, that is the big advantage of using the shared action solution which I explained.

I have explained the dummy slide solution multiple times on my blog a well, and if you have a slide counter, you'll have to skip the system variables and create a custom counter.

As for the problem with the On Enter action: was much easier for SWF output, doesn't help of course.

Translate
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
Engaged ,
Jun 14, 2018 Jun 14, 2018

The only way I know to trigger advanced actions through another advanced action is using JS with the clickbox method.

I also fought with a situation where I had narration and buttons that should appear/be enabled in a sequence the first time around, but no narration and full button functionality the second time through a slide. I found the Delay action didn't work for me since the advanced action containing the Delay statement would continue to run even if the user clicked another button. The first action was not aborted when the second action started and they overlapped each other. Without seeing your exact situation, the best solution seems to be to have elements disabled/enabled or hidden/shown through conditional actions that have the slide counter as the condition.

Translate
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 Expert ,
Jun 14, 2018 Jun 14, 2018

CpExtra widget by InfoSemantics allows calling another advanced action from an advanced action. In many cases it can be solved with one action with multiple decisions in the correct sequence.

I explained the possible problems with Delay action in my Timeline blog posts and interactive movies. But you are already aware of that.

I used the same shared action to have the situation where audio plays only the first time:

Play Audio once on First Visit - Captivate blog

The described workflow can certainly be adapted to your situation.

Translate
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 ,
Mar 04, 2019 Mar 04, 2019
LATEST

You can trigger a slides On Enter Action using the following JavaScript.

cp.movie.frameBasedExecuteAction(cp.D[cp.D.project_main.slides.split(",")[cp.currentWindow.cpAPIInterface.getCurrentSlideIndex() - 1]].sea);

Breaking it down

This method runs the action once it's found

cp.movie.frameBasedExecuteAction();

This accesses the sea variable for a slide, aka slide enter action. The value that goes between the brackets is a slide name which is explained below

cp.D[].sea

This gets the project slide names as an array

cp.D.project_main.slides.split(",")

This gets a slides current index. We subtract 1 because we want an array based index starting from 0 whereas this method returns the actual slide number in Captivate aka the cpInfoCurrentSlide variable value.

cp.currentWindow.cpAPIInterface.getCurrentSlideIndex() - 1

Translate
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
Resources
Help resources