Skip to main content
devinw64588189
devinw64588189
Known Participant
May 4, 2018 9:03 PM UTC
Answered

Captivate Help for a JavaScript beginner.

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

This topic is closed to new replies. Start a new post to keep the conversation going.
Stagprime2687219
Stagprime2687219Correct answer
Legend
May 7, 2018 3:43 PM UTC

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")

};


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");

}

View reply

12 replies

Stagprime2687219
Stagprime2687219
Legend
May 5, 2018 5:31 AM UTC

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");

}

Translate
sabre123
sabre123
Participating Frequently
May 5, 2018 3:56 AM UTC

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.

Translate
devinw64588189
devinw64588189Author
Known Participant
May 7, 2018 1:47 PM UTC

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!

Translate
Stagprime2687219
Stagprime2687219
Legend
May 7, 2018 2:28 PM UTC

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.

Translate
Lilybiri
Lilybiri
Legend
May 4, 2018 9:14 PM UTC

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?

Translate
devinw64588189
devinw64588189Author
Known Participant
May 7, 2018 1:08 PM UTC

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.

Translate
Lilybiri
Lilybiri
Legend
May 7, 2018 1:33 PM UTC

Did you ever try shared actions?

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices