Copy link to clipboard
Copied
Captivate has lots of bug apparently. I am trying to change the object state with Javascript.
my code is like this:
if(var_Progress_Percent>0 && var_Progress_Percent <21) {
cp.changeState("progress_image_745","p5");
} else if(var_Progress_Percent>21 && var_Progress_Percent <41) {
cp.changeState("progress_image_745","p10");
}
but when I paste this to captivate Javascript Panel, it displayed like this:
if(var_Progress_Percent>0 && var_Progress_Percent <21) {
cp.changeState("progress_image_745","p5");
} else if(var_Progress_Percent>21 && var_Progress_Percent <41) {
cp.changeState("progress_image_745","p10");
}
So nothing works. What is the workaround for this issue?
Copy link to clipboard
Copied
Perhaps we need to nest that a bit further.
Notice the extra parentheses
if ((var_Progress_Percent>0) && (var_Progress_Percent<21)) {
cp.changeState("progress_image_745","p5");
}
else if ((var_Progress_Percent>21) && (var_Progress_Percent<41)) {
cp.changeState("progress_image_745","p10");
}
Be careful with copy and paste - that can sometimes be the very reason things break.
Copy link to clipboard
Copied
Thanks for your suggestion but didn't work.
Copy link to clipboard
Copied
The Captivate JavaScript window is not the greatest editing environment for coding. As you have discovered, certain characters (e.g. the > and < characters) get changed or misinterpreted. The better way to handle more complex JS code is to put it in an external file and reference that file in the head of the index.html file. If you search this forum, you should find several threads about how to set up the template file that Captivate uses to generate the published index.html and where you can put your custom code.
Copy link to clipboard
Copied
I tired to manually replace < > symbols with with ( <, >) but still doesn't work.
if(var_Progress_Percent>0 && var_Progress_Percent <5) {
cp.changeState("progress_image_745","p5");
} else if(var_Progress_Percent>5 && var_Progress_Percent <10) {
cp.changeState("progress_image_745","p10");
} else if(var_Progress_Percent>10 && var_Progress_Percent <15) {
cp.changeState("progress_image_745","p15");
} else if(var_Progress_Percent>15 && var_Progress_Percent <19) {
cp.changeState("progress_image_745","p20");
} else if(var_Progress_Percent>19 && var_Progress_Percent <25) {
cp.changeState("progress_image_745","p25");
} else if(var_Progress_Percent>25 && var_Progress_Percent <30) {
cp.changeState("progress_image_745","p30");
} else if(var_Progress_Percent>30 && var_Progress_Percent <35) {
cp.changeState("progress_image_745","p35");
} else if(var_Progress_Percent>35 && var_Progress_Percent <40) {
cp.changeState("progress_image_745","p40");
} else if(var_Progress_Percent>40 && var_Progress_Percent <45) {
cp.changeState("progress_image_745","p45");
}
---
The issue is this, I have created a circular progress bar. It uses javascript to display the progress percentage(count the slides etc.).
I utilized the on-enter event of slides and created advanced actions to this. It works without any problem. But instead of just displaying the number with textcaption. I also want to display the percentage indicator. So according to my progress value, it has to change states. Unfortunately, I cannot use advanced actions because there are lots of slides and in each slide this progress bar has a different name. So it is not possible to use this advanced action because my image name changes as follows:
progress_image_745
progress_image_746
progress_image_747 etc.
Copy link to clipboard
Copied
I would suggest that your life would have been simpler in this instance if you had used Advanced Actions as your FIRST choice and resorted to JS as a last resort when you ran into things that Advanced Actions could not do. Why go the harder route first? You'd have been done by now instead of having wasted a lot of time.
JS is certainly a more powerful tool, but that doesn't mean it's easier to use.
Copy link to clipboard
Copied
Thanks. but How can I achieve this vit Advanced Actions. I want to display a different state of the progress circle. I can count number of slides viewed but at the same time if a slide is already seen, I don't want to increase the number of slides viewed variable.
Copy link to clipboard
Copied
Are you aware that you can place a shape on an early slide and set it to time for Rest of Project? Then you can use actions to SHOW or HIDE it as well as change its state.
Whether you use JS or Advanced Actions to change the states, you are still going to need variables to track how many slides have been seen, and you will still need some way to ensure that visited slides don't get counted twice. Conditional Advanced Actions can do this, but you need to work out your logic before you start building anything. From what I am seeing, you do not appear to have done that.
Copy link to clipboard
Copied
Just one idea... there are for sure multiple ways.
Need a Boolean variable for each slide, default value = 0, will be changed to 1 on first visit to the slide.
Shared action to be triggered On Enter for each slide:
IF v_slidex == 0
Assign v_slidex with 1
Go to next state .... for the progress object
Continue
ELSE
Continue
Parameters: progress object and variable
I suppose here that you have a state for each slide. It would be a lot easier than the long scripts you posted so far. Seems boring, having to add the shared action to each slide, but with only two parameters, the filter feature and the shotcut PgDown to go to the nest slide, will work pretty fast.
Copy link to clipboard
Copied
When is the JavaScript being executed?
OnEnter?
Are there multiple slides?
If across multiple slides - your progress circle set for show rest of project? Otherwise your stuff will get new names and break after the first slide.
Do you have the code execute onEnter of each slide?
If this is all on one slide - How do you ensure that the script is executed when progress is made?
Copy link to clipboard
Copied
The code change I offered you is sound.
Something else is in the way.
Typo, case sensitivity, object naming change, pasted quotes, code not being executed at the right time, etc.
As an idea for troubleshooting the code...
Use the same slide...
Make a button that will increment your progress percent variable and also run the code with every click.
Use a SmartShape on the slide to display your variable so you can track where it is also.
Click the button until the variable passes to the next range. Should work. I ran a quick test and it worked fine.
For simplicity I just changed the object names and variable name.
I made a rectangle with a few different lengths and named the states in a similar way to yours. I just named the original box "p" and called my variable "bar". I had my button increment my variable by 2 and when it went into the ranges, the rectangle changed as expected.
This is the code I used on the button.
bar=bar+2;
if ((bar>0) && (bar<10)) {
cp.changeState("p","p1");
}
else if ((bar>9) && (bar<20)) {
cp.changeState("p","p2");
}
else if ((bar>19) && (bar<30)) {
cp.changeState("p","p3");
}
else if ((bar>29) && (bar<40)) {
cp.changeState("p","p4");
}
Also - I am going to recommend changing whatever program you are copying and pasitng from. When I reuse code like this - I copy and paste some things too but I have never had it change my code in that way. Only the subtle rendering of quotes as ticks. If I write my code in Notepad++ or Brackets and then copy and paste from there - I've had no issues.