Copy link to clipboard
Copied
I want to execute javascript when I click a button and I want the script to know which button I clicked. If button a, do this, if button b do something else, etc.
In a webpage I would just use the 'this' keyword to refer to the element that fired the event, but when I try it in Captivate, I get the window object!
Any ideas?
It's a long, boring story why I want to do it this way instead of advanced/shared actions, but suffice it to say, if I can get this working it will be better.
'this' seems to work for me to reference the active element, which obviously is the one last clicked:
var buttonID = this.document.activeElement.getAttribute("ID");
Copy link to clipboard
Copied
There definitely is a way to use captivate common variables and event emitters as you suggest, but I wonder if how we implement wouldn’t solve it for you.
I just have the button call a javascript function, and pass the button name as an argument into the function for ‘which button’ it is.
So let me give you an example.
function btnPress(passedValue){
console.log(‘You pressed button ’ + passedValue);
};
Then from captivate when the button is pressed in script window I just call my function upon press
btnPress(‘btn_a’) – or whatever btn value you wanted to have.
That way if you want you could call the same function for every button, and just pass which button to determine what the function does.
If you want to do it your way also possible, but much more technical – If you are not familiar with this, it details what you are doing and a bunch more.
window.cpAPIInterface.getEventEmitter(); - I believe is the javascipt that will give you the name of the button of the button attached to the event but not positive.
https://helpx.adobe.com/captivate/using/common-js-interface.html
This is very timely as I am finally writing ‘the killer captivate wrapper’ to intergrate .js and captivate seamlessly (I want it because we use xAPI and an LRS and I want to be able to track literally everything that happens in captivate almost down to the frame)…not that I will actually use that detailed of tracking, but am writing the .js wrapper for all future captivate projects and am extracting every value from both Captivate and Scorm object that I can.
Hope that helps – Please share any discoveries!
Copy link to clipboard
Copied
Ok I have a much easier answer for you. Your post inspired me to dig around in the window object. When your event fires trigger this
console.log(window.event.path[0].id);
it will display the name of the captivate button
Copy link to clipboard
Copied
'this' seems to work for me to reference the active element, which obviously is the one last clicked:
var buttonID = this.document.activeElement.getAttribute("ID");
Copy link to clipboard
Copied
Thanks! A couple of good solutions here but this was exactly what I was looking for. I tried a lot of different things yesterday but didn't come across the activeElement property, which, being part of the HTML DOM and not Captivate-specific you'd think it would have been easier to find.
Copy link to clipboard
Copied
Hi Gaanf.
Can you please explain why these lines of code do not work for me?
var buttonID = this.document.activeElement.getAttribute("ID");
app.alert(buttonID);
I get these errors in the console when I click on Button1.
this.document is undefined
1:AcroForm:Button1:Annot1:MouseUp:Action1
TypeError: this.document is undefined
1:AcroForm:Button1:Annot1:MouseUp:Action1
I have Acrobat 11 Pro on Win 10.
I've been trying to figure this out for quite some time. I would appreciate any help you can offer.
Copy link to clipboard
Copied
I know this is an old thread and you're probably not monitoring this anymore...but here goes:
I'm using this trick you've mentioned in order to pull the name of the button I'm clicking.
Copy link to clipboard
Copied
You'll notice that if you add a custom state to a button, the hand cursor also disappears as if it's not a button anymore.
Are you using this JS because you have a lot of button that you want to use the same code?
Copy link to clipboard
Copied
Yes, I'm using JS because I'm reusing this same action all over the place and with a ton of buttons. I hadn't noticed the hand cursor not working. I'll have to go look for that now!
Copy link to clipboard
Copied
A thought...
I know this does not directly answer the question but I have often utilized a click box over the top of another shape when I wish to mess with the properties of it. It may seem odd to use a click box when you can simply have the smartShape be a button but as you have learned, buttons can be stubborn.
This allows me to leave my clickable area alone and I can change my states underneath it without breaking things. Your code, then, should still return the name of the click box regardless of the changes to the shape underneath.
Hopefully that is useful to think about.
Copy link to clipboard
Copied
That's a good thought for later if I still need a different workaround. I managed to find a fix though. I just changed the box so that in the Check state it is using an image fill of the checkmark instead of dropping that image on top of it. This is working fine. only a TINY bit less than idea because the original had the check mark sort of going outside the box as if it were actually done by hand on paper, now it's confined to the borders of the box. But it's VERY acceptable.
Copy link to clipboard
Copied
Hmmm.....
Do you intend to let the learner use Android og IOS? I just now work with a
project that is unstable when I use states. I think there might be some mess with CSS and visibility when I use this.id.