Captivate Help for a JavaScript beginner.

[devinw64588189]

Good day,

I am playing around with javascript in Captivate the same time I am learning the language in general.  Maybe not the best practice to help me learn the language, but I thought I'd get some relevant practice doing so.  I am looking for a bit of guideance in controling the visibility of smartshapes based upon variables in captivate.  Ultimately I am trying to provide a answer check my revealing correct answers indicators (smartshapes) to a non-widget check box interaction in Captivate using JavaScript.

// I thought I could simply assign a varialbe with this code: //

  (s1 = window.cpAPIInterface.getVariableValue('cps1'));

// Then run this function to hide a particular shape: //

if ( s1 == '1' ) {

cp.hide('s1')

}

Any help for a noob?

Devin

[Lilybiri]

I'm not a JS expert, only use it when a simple shared or advanced action cannot do it. Wonder if you wouldn't first try to do this with an advanced action and a user variable. Reason I tell this: you  seem confused between variables and objects, or you are using the same label for a variable and an object.

I read that cps& is a user variable defined in Captivate.

You read the value of that variable and put it into a JS variable labeled s1.

That same name 's1' is used in Captivate as name for a shape.

I find this very confusing: why do you use the same name for a smartshape in Captivate that is used for a var in JS?

[devinw64588189]

Yes I can see I made that very confusing.  I just threw a sample project together to work out this problem.  I would normally use advanced actions, but in my main project I am trying to condense my work to one action and I am looking to reveal a series of indicators (smart shapes) based upon the selections made by the user.  The selections are check boxes (smart shape buttons) that record interaction by assigning a variable when the user clicks.  I am looking to run a check answer button that will change the state of these buttons or to reveal indicators for answers that are incorrect.  The way I saw it was that this type of advanced action would require a number of conditions that don't all need to be met before the action is run.  I figured JavaScript would allow me to code a more detailed action of if & else than the advanced action in Captivate.

[Lilybiri]

Did you ever try shared actions?

[sabre123]

A few observations on your code (not looking at what you are trying to achieve by it):

When you declare a variable, you should not have parentheses around it. Your var declaration should look like this:

s1 = window.cpAPIInterface.getVariableValue('cps1');

you have not defined a function as you've stated. A function looks like this:

function yourFunction() {

     //code

}

your if statement is comparing the value of s1 with a string value of 1 (think of 1 being a letter, not a number). If you're setting a value of true/false to cps1 (0==false/1==true), then you should use a number 1:

if(s1 == 1)

next, your code is trying to hide s1, which is a variable that stores the value of cps1. As Lieve has mentioned, you are mistaking variables for objects.

[devinw64588189]

As lilybiri mentioned my naming convention made things a bit confusing.  Let me see if I can simplify what I have and what I am trying to do and give this code another shot.

This is what I have:

Objects:

'circle1' (smart shape btn, states available: normal, checked, wrong)

'circle2' (smart shape btn, states available: normal, checked, wrong)

'submit' (smart shape btn)

Variable:

cpcir1 (set to 0)

cpcir2 (set to 0)

'circle1' has a captivate action of that: is seen below: ('cirlce2' has a similar action)

'submit' is controls the js action:

var1= window.cpAPIInterface.getVariableValue('cpcir1');
var2=window.cpAPIInterface.getVariableValue('cpcir2');

if (var1==1) {
     cp.changeState("circle1","wrong")

};

if (var2==1) {
     cp.changeState("circle2","wrong")

};

Again I am looking to replicate this for at least 6 times so that the user is able to click one button and that button reveal if they got it wrong.  I don't see this being able to be done easily with an advanced action if there are 6 different IF conditions in the action.  I could be looking at this the wrong way and am just trying to understand how I can best do this in the context of my main project so please let me know if I have this wrong.  Thank you all so much!

[Stagprime]

No need to getVariableValue...

For the circle button just have it Execute JavaScript on success.

In the script window you could recreate this way.

if (window.cpcir1==0) {
cpcir1=1;
cp.changeState("circle1","checked");
}

if (window.cpcir1==1) {
cpcir1=0;
cp.changeState("circle1","Normal");
}

That is where I get confused with what you are trying to do. It appears as though your advanced action will simply toggle the circle between states. I don't see the wrong state being shown here at all. What/where are we checking for right and wrong? I feel that your "right/wrong" flag should be set elsewhere.

For example... click circle one and a variable is set or click circle two and a variable is set. Then the submit button checks the variable and does the change state.

I believe the JavaScript can make real fast work of this but the logic has to be correct.

[devinw64588189]

I am sorry, the whole js didn't copy the first time.  I have included the getVarialbeValue in the js and there is something still wrong with it.

     var1= window.cpAPIInterface.getVariableValue('cpcir1');
     var2=window.cpAPIInterface.getVariableValue('cpcir2');

     if (var1==1) {
     cp.changeState("circle1","wrong");

     if (var2==1) {
     cp.changeState("circle2","wrong");

The 'circle1' and 'circle2' are currently a toggle.  They act as a check box that the user can turn on and off.  When the user is satisfied with their answer the submit button should verify which objects have been checked via cpcir1 &2 variables.  I know it is probably something simple and I'll probably feel really dumb for missing it.  I'm just not that familiar with js to see what I'm doing wrong.  And I can't seem to get much use of js text editors because I can't test the captivate codes in a console window of a program like Dreamweaver (which is the editor I have and would use if I could figure out a good workflow).

[Stagprime]

In the portion that you shared in your post, the closing curly brackets are missing.

If you are using the Captivate provided script window, you do not need to do the getVariable...

I would also format as

if (window.var1==1) {

....

}

It also helps to then create a var1 and var2 variable in Captivate.

[devinw64588189]

So when writing js in Captivate anytime I need to access Captivate variables I only need to write window.variablename?  I was under the impression I needed to generate js variables for all my Captivate variables.  This is great news!  See what did I tell you? Such a noobie mistake.

So if I am using the captivate script window I can just put in this (example below)?

     if (window.cpcir1==1) {
     cp.changeState("circle1","wrong")

};

     if (window.cpcir2==1) {
     cp.changeState("circle2","wrong")

};

[Stagprime · Accepted solution]

Make sure the semicolon goes after the code to be executed rather than after the closing curly bracket.

No

if (window.cpcir2==1) {
     cp.changeState("circle2","wrong")

};

Yes

if (window.cpcir2==1) {
     cp.changeState("circle2","wrong");

}

[Lilybiri]

May I offer a tip about showing an advanced action in CP2017? Instead of multiple screenshots, use the Preview button, which is the first (arrow) in the top right control panel of the dialog box. You'll find a complete description of all the functionality of that dialog box in:

Advanced Actions Dialog box in Captivate 2017 - Captivate blog

[Stagprime]

Here is how I would do it in the JavaScript window...

To assign a value to a variable - for example, I want the variable  varX to be 7.

     varX = 7;

Make sure you have created the variable under Project >> Variables

To hide a shape based on the variable value...

if (window.varX==7) {

cp.hide("shapeNameHere");

}