How to create dynamic texts/links and dynamic images in Storyline ?
Aug 26, 2022
As i ran int0 an issue i had to publish multiple Storylines and upload them to several spots... and they need to link to eachother with a QR code and a shortURL i decided i didnot want to publish and update these over and over, but rather use dynamic links for the shortcodes and dynamic images for the QR-codes so i only needed to publish once... and if anyone decides to change URLS it just a case of reuploading the QR-code image and changing the shortcode link online.
So how is it looking now...
For the shortcode URL thats clear and easy...change it to a var...and load that from GoogleSheets or a database.
As i use Google Firebase in this project to save and read data, i set the shortcodeURL also there.
Here you see my Firebase Realtimedatabase with the settings for this game.
I am gonna add the shortcodeURL and the url for the QR-code image there now. Both teams will need to have specific own urls, so adding them into the teams.
As i use Cloudinary for image upload and as DAM i made several folders there from which i can get the QR codes. As this game needs to run for at least 2 teams with multiple Storylines for 2 universities and i want to make a mobile only version too for the voting part..i guess the total of the Storylines will be about 16. Thats why i am doing this... to reuse the QR-code images and the links...else 16x publishing, 16 times uploading and changing URLs and stuff.... nah... better this way.
Allright Cloudinary for the QR-code images
And added the QRcodeURL to both Storyline as a variable and Firebase in the settings.
Now to the code in Storyline to read this from Firestore. Immediately noticing i need 2 of each, as the game has 2 rounds. But let us test this first with just 1, to check all works.
The code for getting values from Firestore is quite straightforward.
Firebase/firestore works with snapshots of the data. All data is captured in such a snapshot, so its as easy as just feeding the Storyline variable with the new data. The shortcode link works. Now testing the QRcode image.
Making it dynamic is ofcourse easy enough by using a WebObject pointing to a specific URL, in this case a Cloudinary one.
But we want it a step more dynamic. We want to get the URL from Firebase and set the WebObject to that URL. Well the URL we allready set to the variable 'qrcodeURL'. Now ensure on the start of this slide it loads that specific URL.
As you can see in the image above, the image from Cloudinary gets loaded and shown, but somehow its size isnot the same as the original. Doublechecking my original file, its a 3x.png scaled down to 50%... So best and easiest will be use 100% images in the proper size. Changing that now.
8 Replies
Great work Math
In fact with this technique managed to create fully dynamic Storylines. I create a template with all animation and elements in it... basically dummies... upload that to our LMS ( Instructure Canvas, but can be any ) and all text and images i want the teacher to edit...stays editable as he/she wishes. So now working on creating several nice interactions they can use in their online courses with quizzes and more.
@Math - this is brilliant work. The power you've revealed here using Firebase is like the sun in potential!
Have you written anything else up or could you point me to additional resources to learn more about setting up Firebase variables and integrating with Storyline? I'd be grateful for anything you could share or point me towards.
Working on a multiplayer serious game concept for a presentation / workshop in April. Plan to use that to show how to use Firebase for these kind of games. Also working on tutorials to go step by step for this.. When sharing this i will let you know.
Hi Math, great idea!
"Well the URL we allready set to the variable 'qrcodeURL'. Now ensure on the start of this slide it loads that specific URL." - how did you force Storyline to load that specific URL?
Depends on your case. When using a variable as the URL of a WebObject... it should load that. If that URL is available offcourse.
That's exactly what we could not figure out: How to use a variable as the URL of a WebObject - Storyline does not accept that as a valid URL. Did you use some JS code in your content to change the WebObject's URL?
Ah yes, basically i use GSAP and Javascript to change the default url of the WebObject.
Something like this.
var newSrc = result[0].url;gsap.to($("[data-model-id='5q7M1XX9AaZ'] > div > iframe"),{attr:{src:newSrc}});Although i now generate QRcodes directly in Storyline from a given URL :-)
Here is a post about that including a sample.
https://community.articulate.com/discussions/building-better-courses/qr-code-and-shorturl-generation-in-storyline