Exporting Storyline data to Word – JavaScript in Storyline 360 #2
August 8, 2022
A well-known strategy to assist in helping your learners retain information is to get them to make notes. It may be something that you are familiar with already! It’s a common tactic employed by schools, and it’s also very commonly seen in elearning. So, to aid in this we’ve created a JavaScript solution to allow learners to download a dynamic word document that includes their notes! That way, they can take these notes with them, to revise or improve upon what they have learnt, or to remain saved in their downloads folder for years to come, only to never be opened again… (Let’s hope it’s not the latter).
You can click on the images below to enlarge them in a new tab! 🙂
How to
Step 1: Set up your Storyline file, include a Text Entry box for the learner to record their notes and a download button which will act as way to trigger our JavaScript.
Your project doesn’t have to include a cute dog… but it certainly helps!
Step 2: Create a variable called “Notes” with the type of Text, and modify the trigger on the Text Entry Box to “When Text Entry loses focus – Set ‘Notes’ equal to the typed value.”
Step 3: Add a trigger, “When the user clicks on the Download button, Execute JavaScript“.
Step 4: Open the JavaScript editor and Paste in the following code:
const player = GetPlayer();
// Custom Styles
let headingFont = "'Arial Rounded MT Bold', sans-serif";
let headingSize = "24pt";
let headingColour = "#356AB1";
let headingText = "My Notes";
let bodyFont = "'Lato', sans-serif";
let bodySize = "16pt";
let bodyColour = "#213454";
// Get text entry variable from SL
let myTextEntry = player.GetVar("Notes");
// File name
let filename = "Module notes";
// Style for document heading
let docHeader = `<h1 style="font-family: ${headingFont};color:${headingColour};font-size:${headingSize};">${headingText}</h1>`;
// Style for the body
myTextEntry = `<pre style="font-family:${bodyFont};color:${bodyColour}; white-space:pre-wrap;font-size:${bodySize};"><br>${myTextEntry}</pre>`;
//Declare Document Variables
let html = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta><title>Export HTML To Doc</title></head><body>";
let footer = "</body></html>";
//append variables to html
html = html + docHeader + myTextEntry + footer;
//link url
let url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
//file name
filename = filename ? filename + '.doc' : 'document.doc';
// Creates the download link element dynamically
let downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
//Link to the file
downloadLink.href = url;
//Setting up file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
//Remove the a tag after donwload starts.
document.body.removeChild(downloadLink);
Step 5: Publish and view your storyline project, fill out your text entry and click your download button and you will see that your file has been downloaded. Open the word document and you will see that it contains your written text.
Modify the document style
If you want to change how the document looks, open the JavaScript editor and you will see a variety of variables at the top of the code. These variables can be tweaked to change how the document looks. Change the value inside the quotation marks to update them.
- headingFont controls the font of the heading, be aware that a font a user doesn’t have installed may not show up, and so a fallback like “sans-serif” is always handy.
- headingSize controls the size of the heading.
- headingColour controls the colour of the heading.
- headingText controls the text value of the heading.
- bodyFont controls the font of the body text. Again, use a fall-back like “sans-serif”.
- bodySize controls the size of the body text.
- bodyColour controls the colour of the body text.
- myTextEntry controls which variable in Storyline to extract the user’s notes from.
- filename controls the name the file will be saved as.
For further information on how to modify these, check out our video tutorial below!
Watch our video tutorial
If you found this useful and there are other topics you would like us to cover, feel free to leave a comment on the video! We look forward to hearing from you.
Be sure to Subscribe to our channel for future tips and tricks.