Forum Discussion
Javascript for importing variable images from a data base
Want to import an image into a course from a database, like you can do with text variables.
Is this possible - and if so, how?
Specific example: The database includes images (PNG) of all organization learners and staff. We want to import the correct image into the course for each learner who takes it.
For text, the JS is player.SetVar ...
I haven't been able to find any documentation or discussion about whether this can be done with a database-stored image. (Web object does not work for this situation.)
After perusing a few online resources on working with databases, I was able to establish a connection between Storyline and a mySQL database. Sending and receiving data between the two is pretty simple once all the parts are playing together nicely. There are quite a few pieces, but its not too bad if you have some familiarity with JavaScript, a little PHP, and basic mySQL. As others have mentioned, it requires adding a web object to facilitate cross-domain communcations.
Note: The web object is just required to be present, and can be placed offscreen. It doesn't do anything but handle communications.
Demo: https://360.articulate.com/review/content/a1f6fb39-d0fe-49fe-8add-3c55e571b462/review
I need to clean up my project some, and will try to post a more detialed discussion in the coming days for anyone who is interested in this topic.
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:
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.
Thanks for the suggestions. I will play around a little more to see if I can get something to work. I doubt I will, as Articulate really doesn't seem capable of this. It's a great product, but there are still lots of limitations.
Please do. I never thought that could be done. Just wondering about any firewall issues.
See the following post for more information.
How to Communicate Between Storyline and a mySQL Database | Articulate - Community
