Using Variables to Create Question-and-Answer Activities

Back in November 2021 I discovered that NASA maintained a publicly accessible API that relays the current longitude and latitude of the International Space Station at any time.

I wanted to make a cool Storyline 360 web app project using this data as soon as I discovered it, and when I found Dog API this month, an open source dog photo library API containing over 20,000 photos of pooches from over 120 different breeds, the very same thought entered my mind!

Putting together Divination Dawg was yet another valuable voyage of discovery for me in terms of finding new ways to control Storyline’s published output through JavaScript, which could be very useful to know for future projects.

For example, the dog photograph shown in the crystal ball initially starts its life as a solid white jpeg until its src value is modified to match the URL that is fetched from Dog API (if a matching breed name is found).

The standard method of switching photographs in Storyline 360 would be through state changes or showing and hiding layers, but in this case I needed a way of telling Storyline what specific image to display dynamically based on what the user has typed into the Text Entry Field, and through trial and error I was able to achieve this using a well-timed setAttribute property that changes the xlink:href value just as the image appears on the slide!

There’s loads more to potentially unpack within this project and I’d definitely like to do a deep dive as part of a future Storyline Magic Series episode, which I hope to find time to be able to record and share with you soon.