Playing With Event Listeners

User Creation Hub ActivePresenter
1

I recently was asked to help solve a JavaScript problem for someone.
They were working on a project where they needed a button that would take them to the next slide.
Now this may seem like a very easy task that does not require any JavaScript but there was a catch. This particular button was to be held for a minimum amount of time in order for the desired action to fire. If the learner released the button too early, nothing should happen.

I decided that I should try this with ActivePresenter to see if I could achieve the same result with JavaScript.
My solution involves only two slides. The first slide has a square with a semi-transparent shape over the top to serve as the object to be held for three seconds to trigger the navigation to the next slide. This slide also has a little code in the onLoad portion.
The second slide simply has a circle to show that we have moved to another slide.

This was a little tricky as I had to change the code quite a bit to fit the ActivePresenter API but it does indeed work. I am sure there are other, easier ways to achieve this but this was the way I came across first.

Here is the code I used with some commenting to help explain, along with the sample project to play with.

// Declare the variable that will hold the
// timeout function for our object
var goNext;

// Declare the variable that will hold the
// object that will be held for three seconds
var myObj = $(prez.object("Shape_4").node);

// Assign the event listener to the object
myObj.mousedown(function() {
  goNext = setTimeout(execNext, 3000);
  
// If the object is not held for three seconds
// cancel the timeout function
  myObj.mouseup(function() {
    clearTimeout(goNext);
  });
});

// Define the function that triggers when
// the object is held a full three seconds
window.execNext = function() {
  prez.nextSlide();
};

Hopefully this helps someone figure something out someday!
You must press and hold the box on slide one for three seconds in order to navigate to slide two.

listener.approj (280 KB)

3 Likes