States or Javascript

Dec 20, 2021

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! :)

4 Replies
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