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

5 months ago12/20/21 at 10:01 am (UTC)

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
Author

5 months ago12/20/21 at 12:27 pm (UTC)

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.

Example.png

5 months ago12/20/21 at 7:08 pm (UTC)

This should get you started down the right path David.

Math Notermans

5 months ago12/21/21 at 7:01 am (UTC)

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

5 months ago12/21/21 at 7:02 am (UTC)

:-) should first check your link Matthew ;-)

Matthew Bibby

5 months ago12/21/21 at 7:22 am (UTC)

I appreciate you Math. I've been doing a lot with SVGs in Storyline lately and am finding the experience surprisingly bug-filled, which is disappointing.

5 months ago12/21/21 at 12:14 pm (UTC)

Agree completely. They rushed to push it out whereas in Beta there still were issues. Too quick, too soon.