States or Javascript

Hi all,

I'm hoping for some guidance please...

We're producing a tool in Storyline which, depending on the results of a calculation presents a graphic.

The graphic is 100 smiley faces, just using something like font awesome rather than an emoji, and depending on the result of the calculation, some of the smiley faces are green, some are red, and some are neutral.

I don't think I can do this with states due to the amount of possibilities, could have been possible if it's just two colours?

Does anyone have an idea how this could be done please? I've used some basic javascript passing variables in and out of storyline files but I can't get my head round this.

Hoping someone can help! :)

7 Replies
Matthew Bibby

300 states? Should be fine. I've done sillier things in the past.

Make sure you test early and often. Nothing worse than setting up 300 states and realising you need to make a tiny change... to all 300 states.

If you wanted to, you could probably use JS to trigger a change in CSS (allowing you to change the colour of the object with code). But I suspect in this case it would be more trouble than it's worth.

David Blanchard

Thanks Matthew, the problem is it will need to be 3 colours.

I've attached an example - this is showing an example where the risk (calculated value) is 90% so 90 of the faces have the colour changed and the other 10 are standard. With this example there is a 30% 'benefit' so 10% are standard, 30% of them need to be green as that is the benefit and the other 60% are shown as amber.

Any advice on how I could do this would be great.

Thanks.

Math Notermans

If the icons are SVG, so either imported as...or from Storyline's own icons... you can colorize the icons with Javascript at will.

Here you can see a sample...
https://360.articulate.com/review/content/66f32775-64b5-44b0-a935-b49ba02ff66f/review

And here read the post i wrote about it in the past.
https://community.articulate.com/discussions/building-better-courses/storyline-svg-icons

Storyline attached to the original post