Javascript for importing variable images from a data base

Hi Donna

I suspect that what you are asking for is really difficult, if not impossible. If I understand it correctly, you want to change an image in Storyline by reading a .png at runtime. AND you want to do it without using a web object.

I couldn't find a way to do it. This post I put up may shed some light on the problem:

Loading an image at run time in Storyline - Articulate Storyline Discussions - E-Learning Heroes

Obviously, this discussion focuses on gamification, but the issue is the same. In theory, GSAP JavaScript methods do allow you to change the ".src" attribute of an image object... BUT, for very valid security reasons, the Storyline player environment prevents that from happening.

The example demo I included in the above post DOES change an image on screen which it reads from a set of 52 images read into a database:

Single Card Turn

BUT - the reading of the images into the database and the selection of the image to be served up in the screen from the database is done by some code loaded into an embeded web object on the screen.

It's the only way I could find to do this....

Hope that helps.

web object would work.

You could import as base64 but would still need the web object to translate and Storyline has a character limit on variable size.

As others have said I'm pretty sure this isn't possible without web objects, but pretty simple to do with them.

The way I did it was to have a storyline variable match a row in a googlesheet, populate a bunch of variables in storyline including an image URL. This is then passed to the web object to display the image.