Skip to main content
devinw64588189
devinw64588189
Known Participant
May 4, 2018
Answered

Captivate Help for a JavaScript beginner.

  • May 4, 2018
  • 3 replies
  • 1235 views

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 has been closed for replies.
Correct answer Stagprime2687219

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

}

3 replies

Stagprime2687219
Stagprime2687219
Legend
May 5, 2018

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

}

sabre123
sabre123
Participating Frequently
May 5, 2018

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
devinw64588189Author
Known Participant
May 7, 2018

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!

Stagprime2687219
Stagprime2687219
Legend
May 7, 2018

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.

Lilybiri
Lilybiri
Legend
May 4, 2018

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
devinw64588189Author
Known Participant
May 7, 2018

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
Lilybiri
Legend
May 7, 2018

Did you ever try shared actions?

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