Captivate 8 Javascript smartshape properties

[pkoel1]

I am using Captivate 8 to create a responsive project. When a button is pressed I would like to execute Javascript to change the background color of textbox1 to red and if a captivate user variable named Age is greater than 21 set the color of textbox2 to green. Where can I find examples of how to do this? Is it possible to also change the action of a smart shape button using Javascript?

Thank you!

Peter

[RodWard]

If by 'text box' you mean a text caption (not a Smart Shape) then the answer is that you cannot change this with JavaScript.

Captivate 9 introduced Object States.  You would be a lot closer to your goal with that version of the product.

I'm not sure why you would be so keen to use JavaScript, when most of the things you are trying to do can already be achieved using Advanced Actions.  When CPTX projects are published out to HTML5, the Advanced Actions get converted to JavaScript then anyway.  Why try to do it yourself if Captivate can do it automatically for you?

[Lilybiri]

Can you explain what you mean by "change the action of a shape button using JavaScript"? Based on what? Why not use a conditional action (advanced or shared)? Or use hide/show and replace by another button with an advanced/shared action? You'll find some examples in my blog post about toggle buttons:

Toggle Shape buttons - Captivate 6 - Captivate blog

Changing the look of an object (I'm also wondering what you mean by Textbox: is that a text caption, a Text Entry Box or a shape functioning as a text container) can be done with an advanced action applying an effect. However some effects are not supported for responsive projects and that is the case for most color effects.

[pkoel1]

Hello Rod and Lilybiri,

    Thank you for your replies.Let me try to restate what I want to do: I have a smart shape rectangle named rec1. I am using it as a button. I have enabled the down state for the smart shape button. I would like to change the solid fill color for the  down state of the smart shape when a captivate variable Age is > 21. If the Age is greater than 31 then I want to change the Normal state fill color to red. I wish I could use Captivate 9, but my organization has deferred that purchase until next year. Age represents a product age in days (days on the shelf). My flowchart is:

Age = Age + 1

if Age > 21 then set rec1 down state fill color to green

else if Age > 31 then set rec1 normal state fill color to red

Thanks,

Peter

[Lilybiri]

You'll have to use two buttons in that case.  It is possible to change the normal state to a custom state, but not to change the down or rollover state on one button. In the blog post for which I posted a link before I illustrated that behavior. Moreover that is only possible with Captivate 9, not with Captivate 8.

You don't tell how you get the value for the user variable v_Age (I always add v_ to the name of a variable)?

Using two buttons is one of the scenarios in this older blog post: Toggle Shape buttons - Captivate 6 - Captivate blog

[pkoel1]

Ok, I think I understand. Perhaps my perspective is wrong. I have been trying to use as few objects (smart shapes) as possible to keep the project size small and make the change using programming logic. It appears that the better approach is to use multiple objects as in your blog post. Let me ask the question this way:

How can I change a smart shape's 'normal' state fill color using JavaScript. I understand that it may not be the best way to go, but I would like to see an example of how to change a smart shape's property using JavaScript (if it is possible).

I appreciate your assistance! 

[pkoel1]

Hi,

   Any suggestions on this? I would like to know how to change a smart shape's fill color using Java script. I appreciate all suggestions!

Peter

[Guest]

re; Smarter Dynamic State Smart Shapes. ( Version 9 )

I Agree. How do you change a smart shapes properties via JavaScript ?  This would be a very useful tool.  I'm trying to achieve something similar and find this Captivate Interface very clunky and limiting, however I see its benefits and use it for that. That said the ability to change a smart shape's properties via JavaScript would make this extremely powerful.

I'm trying to make a smart shape behave differently depending on its current state and the only way I can see this achieved is via JavaScript. i.e. I want a dynamic smart shape, not just a static dumb smart shape.

I'm trying to design a basic finite state machine loop kind of functionality, just as a proof of concept.