Accessing functions & css classes of a webobject through an added JS file

Question

I'm trying to acess elements inside of a web object that I've added into my Captivate project, through an external javascript file that I've linked to the index.html output file of my project. I'm pretty stuck on how to do this, but essentially I'd like to be able to control my webobject via the external JS file.

I built my webobject with an html/css/js file structure and it uses css classes to toggle some animations. Is there any way possible I could call the function I created in my webobject from my external JS file? In my external JS file I made function for custom navigation back/forward buttons, and I'm hoping that once the user lands on the slide with the web object, the next button would then activate the function of my webobject, instead of taking the user to the next page, then once that's done it would move the user to the next page?

I hope some of this makes sense, any point in the right direction would be greatly appreciated!

KeelyM · Accepted Answer

Thanks so much kdmemory!

I'm trying out this method - I've added my function inside of the webobject's JS page as such -

window.myWebObjectFunction = function() {

// function stuff 

};

Then once placed into my Captivate project and the project is published, I attach a new JS file and I try to call the function like you have written out -

window.frames[0].myWebObjectFunction();

Though it is returning as an undefined function in the console log.

It's the only webobject on this slide of my project and I have it set inside of a function that listens for new slide enter, then inside of a function which listens for if the user is on the correct page, it's something like -

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide");

function runByPages(){
if (currSlide==27){
window.frames[0].myWebObjectFunction();
}

runByPages();

Would something about the way my WebObject is built be causing issues? My webobject is essentially a zipped file including an html, css, and js file along with any images that are used inside of it. Then I just drag and drop the zipped file into my Captivate project.

An update - I wasn't able to get the WebObject function working when being called from an external JS file, so instead I added the function to an object in my Captivate project from the WebObject's JS page. So it looks something like this -

window.parent.window.myCaptivateButtonVariable.addEventListener("click", myFunction);

Which so far, seems to be working! It's a pain, because any changes I need to make I have to go back and edit my WebObject files, zip them again, replace the WebObject in my Captivate file, then republish my Captivate file. But it's working!

Stagprime2687219 · Answer

I do not work with external files but I do quite a bit of scripting within Captivate. Perhaps the issue here is the same.

Captivate will append a lower case 'c' to the end of the name of your Web Object.

For example - if I have a web object named web1 I would need to address it as web1c in order to find stuff within it and do something to it.

At least this has been my experience. Perhaps you might try addressing it the same way with the external file.

I realize it is not necessaily the same but I did a series on sliders which are entered as web objects. I talk about using JavaScript to work with it here.
https://elearning.adobe.com/2018/05/set-variables-interactive-sliders-part-4-javascript/

Maybe you can get something helpful to get you going in the right direction with it.

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