Forum Discussion
Saving Storyline Variables to a PDF
I was asked about an example I created for saving variables from Storyline into a PDF file for download. Rather than fill the ELHChallenge thread with the information I decided to write up a thread on what I did. If you have any questions feel free to reach out.
The course executes JavaScript from within a Storyline (trigger) with the use of a client-side JavaScript PDF generator, jsPDF. This will not work locally, however, I have had successes with it functioning in IE11 without being hosted. It is easiest to design the PDF prior to inputting this into the course as you cannot preview. Thankfully, the jsPDF package contains an editor with their examples to design in.
Script & Demo Files for jsPDF:
Parallax: http://parall.ax/products/jspdf (contains an editor as well)
or via
GitHub: https://github.com/MrRio/jsPDF
1. Add Variables(score)/Text Entry fields
2. Add Trigger to execute JavaScript when user clicks (for downloading the PDF)
3. Retrieve the Player Variables within the .js field of the trigger and attach jsPDF settings per desired result look and feel.
**Notice an additional variable is created to transitioning the Storyline variable for the "Notes" in order to use ".splitTextToSize" for text wrapping within the PDF file. By default text wrapping does not occur.
4. Publish the course and add the applicable JavaScript files needed for your package (I placed mine within the "story_content" directory)
5. Add script files to the HTML <head></head>(story.html)
6. The result: Articulate Storyline Variables pushed to a downloadable PDF.
Storyline:
PDF Output:
Live Version:
https://googledrive.com/host/0B9kY09mQf_iqV3dTQ0Q4cUFvTlU/
Source & Published Files:
Also note that where you put them doesn't matter (they don't have to be in a plugin folder) as long as you specify that location in the script tags.
Saw that and edited - thanks for the heads up, and sorry for the spammy replies!
No worries, not spammy at all - just in case you didn't want it there!
I must still be doing something wrong. I put all of the plug-ins into the plug-in directory and made sure everything was there and put the right HTML in and it still doesn't do anything when I press the download button. This is what I have in the HTML.
<script SRC="story_content/user.js" TYPE="text/javascript"></script>
<script src="story_content/story.js" type="text/javascript"></script><script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script SRC="story_content/jspdf.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.min.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/split_text_to_size.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/canvas.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/cell.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/from_html.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/png_support.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/standard_fonts_metrics.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/addhtml.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/javascript.js" TYPE="text/javascript"></script></head>
And here's a screenshot of my plug-ins folder:
Thanks Kristen and hopefully someone in the community will be able to assist you!
Kristin, I sent you a message. If you're able to share your files I might be able to suss it out.
Sure will. Tomorrow!
Thank you so much for sharing this; you made my year! It works for me in Storyline 2. My only problem is it's not working on a Mac or Ipad. Does anyone know how to make it work on a Mac and Ipad? Is there a plan for Articulate to make this a feature of Storyline?
Hi Gaylen,
What browser are you using to view the output on your Mac or iPad? You'll want to ensure you're using one of the supported browsers here.
We don't announce product plans or roadmaps, but if you'd like to see a particular feature you'll want to submit a feature request as those go to our product development team.
Hi. I am having the same problem. Kristen, could you fix this?
I just took the .story from this example to test, put the plugins into the plugin directory and paste the script in the html, but it doesn't work.
I also make sure that all rutes and names of the files are correct.
Can anyone help me please?!?!?!
