Launching PDFs/Hyperlinks from a Course
Oct 02, 2023
Hello!
THE ISSUE WE’RE RUNNING INTO: I recently developed a SCORM course that requires a learner to click a button that opens up a PDF. They must click this button in order to progress forward. I want to highlight this, because we have certainly used this trigger in the past (open a PDF and/or launch a URL hyperlink based on a click) but it was an optional click and not a required click, so we’re thinking it didn’t trip as many people up (sadly because they likely weren’t often clicking on the prompt!)
When clicked, the PDF opens up a new tab on the initial browser where the Cwire landing page is, while the ELearning itself is actually in its OWN separate instance of your web-browser. (SEE ATTACHED IMAGE)
A lot of folks are getting tripped out by this… because when the PDF launches in a new tab, the course window “disappears” behind the launched PDF on the original browser. They must then hover over their Google chrome/browser icon on the bottom ribbon to see the course window.
WHAT WE’RE HOPING TO ACHIEVE: I’ve been testing different launch behaviors with the course, hoping to get to a point where the course opens up in the same original browser (and not in its own pop-up) so that when the PDF opens up, it’s a bit more obvious to the learner where the original course tab is. I’ve been running tests within our LMS, but I can’t get it to work the way we’re hoping it will – running into other errors/issues.
I figured I’d bring it to the community and see if anybody has run into anything like this before and/or has a solution or advice on how I should configure the launching of a PDF/hyperlink.
THANK YOU!
4 Replies
Hi Angela
I may be missing the point, but have you considered putting the content of your pdf in a lightbox (not as a pdf) so your learners can view the content and then including a button to download the same content as a pdf from the lightbox? (This would be a couple of lines in JavaScript)
I suppose it does depend how long the content is...
Best regards
Hello Angela,
Thanks for reaching out!
The browser settings are what determines if a link will open in a new tab or new window. Here's how to change this behavior in Google Chrome for example. There isn't a way to configure this behavior in Storyline 360 so we recommend reaching out to your IT staff so they can check if they can modify this behavior for everyone in your organization who will be taking your courses.
You can also check out this article on how to add Web Objects in your course if you'd like to explore the solution suggested by John. Take note that you'll need a file server for hosting your files if you're going to be testing this method out.
Let me know if you have any questions!
Hi Angela/Joe
I think there's a slight misunderstanding - I wasn't suggesting opening the pdf as a web object - in fact, quite the reverse. If you can insert the content of the pdf as text and images in a lightbox so the learner can view it, this means it is opened within the Storyline window - not a separate tab.
By adding a JavaScript button in the lightbox - saying something like "Download" you can execute JavaScript that would open the pdf file (that could be loaded in the root directory). The code would then convert it to a binary file and "save" it which would mean the learner had the option to download the file. No file server involved...
If I get time I will create a simple demo and post it here. :)
Here's a very brief demonstration of what I was suggesting:
Demo17
In this simple example, you have a screen and you want the learner to open some notes, read the notes (in this case a brief description of a Pareto Curve) and then download the notes as a pdf before they move to the next screen. ..
...PLUS, you would like to do this without opening the pdf in a new browser window (i.e. as a web object) because once you do that the learner gets confused because the new window overlays the Storyline window.
So, the way it works is:
(a) the notes you want to show and download are put into a pdf file "Notestodownload.pdf"
(b) you put the same content in a Storyline screen which you then open as a lightbox when the learner clicks a button on the appropriate screen
(c) in the lightbox you have a button "Download" which, when clicked, executes a short JavaScript routine that 1. opens the "Notestodownload.pdf" 2. reads the contents of the pdf into a binary byte array 3. uses the byte array to create a new pdf file "Document1.pdf" 4. downloads the new pdf as a binary ('blob') file.
When the learner clicks the download button they see a message from the browser asking them if they want to open or download the file. They can save the file with the name of their own choosing....
OK. the JavaScript is more than a couple of lines - but it's fairly straightforward.
NOTE: The JavaScript code also relies on the fact that you have loaded the file "Notestodownload.pdf" into the root folder (i.e. the folder with the story,html file in (or the lmsindex.html file in the case of a SCORM version loaded to an LMS). So this means after you have published the course as a SCORM Package, you unzip the zip file, copy the pdf file to the right folder, re-zip the package, and load the course to the LMS.