• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

< smybol not is replaced with &lt; in Execute Javascript window, a bug!!

Explorer ,
Feb 14, 2020 Feb 14, 2020

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 &lt;21) {
    cp.changeState("progress_image_745","p5"); 
  
} else if(var_Progress_Percent>21 && var_Progress_Percent &lt;41) {
    cp.changeState("progress_image_745","p10"); 
    
} 

 

 

So nothing works. What is the workaround for this issue?

 

 

TOPICS
Advanced , Advanced actions , Getting started

Views

523

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Feb 14, 2020 Feb 14, 2020

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2020 Feb 14, 2020

Copy link to clipboard

Copied

Thanks for your suggestion but didn't work.  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2020 Feb 14, 2020

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2020 Feb 14, 2020

Copy link to clipboard

Copied

  1. Hi Rodward, Thank you for your answer. I searched and found out that I can use external js file. But in that case In preview mode, I can't access the js file. So, publishing the e-learning course each time while develoing it will take lots of time.
  2. I have already used js code in some slides so it will also take time for me too transfer them into a separate js file.

 

I tired to manually replace < > symbols with with ( &lt;, &gt;) but still doesn't work.

 

 

if(var_Progress_Percent&gt;0 && var_Progress_Percent &lt;5) {
    cp.changeState("progress_image_745","p5"); 
  
} else if(var_Progress_Percent&gt;5 && var_Progress_Percent &lt;10) {
    cp.changeState("progress_image_745","p10"); 
    
} else if(var_Progress_Percent&gt;10 && var_Progress_Percent &lt;15) {
    cp.changeState("progress_image_745","p15"); 
    
} else if(var_Progress_Percent&gt;15 && var_Progress_Percent &lt;19) {
    cp.changeState("progress_image_745","p20"); 
   
} else if(var_Progress_Percent&gt;19 && var_Progress_Percent &lt;25) {
    cp.changeState("progress_image_745","p25"); 
  
} else if(var_Progress_Percent&gt;25 && var_Progress_Percent &lt;30) {
    cp.changeState("progress_image_745","p30"); 
  
} else if(var_Progress_Percent&gt;30 && var_Progress_Percent &lt;35) {
    cp.changeState("progress_image_745","p35"); 
  
} else if(var_Progress_Percent&gt;35 && var_Progress_Percent &lt;40) {
    cp.changeState("progress_image_745","p40"); 
  
} else if(var_Progress_Percent&gt;40 && var_Progress_Percent &lt;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.

 

Screen Shot 2020-02-15 at 10.29.43.pngScreen Shot 2020-02-15 at 10.29.49.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2020 Feb 14, 2020

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2020 Feb 15, 2020

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. 

 

 

Screen Shot 2020-02-15 at 12.22.30.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2020 Feb 15, 2020

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2020 Feb 15, 2020

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.

 

    

    

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Feb 17, 2020 Feb 17, 2020

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Feb 17, 2020 Feb 17, 2020

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources