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.