How To Immediately Generate A Document During A Storyline Activity

How To Immediately Generate A Document During A Storyline Activity

To initiate a PDF generation from within a Storyline 360 project, simply add a standalone Execute JavaScript trigger on a relevant slide or layer. Use the following example code as a base:

var filename = "Conversation_Summary.pdf";

var docTitle = getVar("Doc_Title");
var docIntro = getVar("Doc_Intro");
var Cell1L = getVar("Cell1_L");
var Cell1R = getVar("Cell1_R");
var Cell2L = getVar("Cell2_L");
var Cell2R = getVar("Cell2_R");
var Cell3L = getVar("Cell3_L");
var Cell3R = getVar("Cell3_R");
var docFooter = getVar("Doc_Footer");

// Dynamically build table_data
const table_data = {};

if (Cell1L) table_data.LHC01 = Cell1L;
if (Cell1R) table_data.RHC01 = Cell1R;
if (Cell2L) table_data.LHC02 = Cell2L;
if (Cell2R) table_data.RHC02 = Cell2R;
if (Cell3L) table_data.LHC03 = Cell3L;
if (Cell3R) table_data.RHC03 = Cell3R;

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-WP-Nonce", parent.storylineMagicRestNonce);

const data = {
document_name: filename,
document_heading: docTitle,
introduction_text: docIntro,
table_data: table_data,
footer_text: docFooter,
nonce: parent.storylineMagicNonce
};

fetch(parent.storylineMagicEndpointGeneratePdf, {
method: 'POST',
headers: myHeaders,
body: JSON.stringify(data)
})
.then(response => {
if (!response.ok) {
throw new Error('PDF generation failed');
}
return response.blob();
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(url);
document.body.removeChild(a);
console.log('PDF generation successful');
})
.catch(error => {
console.error('Error generating PDF:', error);
});

Notes:

• Any number of Cell#_L and Cell#_R variable pairs can be provided. These values will populate a left-hand and right-hand column table in the document.
• Use the getVar method in order to bring into the script as many dynamically generated variables from the platform as you may wish to include in the document. You can also freely hard-code any specific section of the document by writing each section’s content directly into the script.

Element-by-Element Breakdown:

• filename – This sets the name of the PDF file that will be saved to the learner’s computer.
• docTitle (Doc_Title) – Appears as the heading or title at the top of the document body.
• docIntro (Doc_Intro) – A paragraph of introductory text shown beneath the document heading.
• Cell#_L and Cell#_R pairs – Populate the rows of a two-column table within the main content area of the PDF. The left cell (L) acts as a label or heading, and the right cell (R) holds the corresponding learner response or data.
• docFooter (Doc_Footer) – A final paragraph at the bottom of the document body, ideal for conclusions or next-step instructions.

This script works instantly—learners will receive a PDF download in seconds, tailored to their experience in the course. This process supports highly engaging, personalised learning and can even be repeated or triggered at multiple points in an activity.

With this new feature in version 2.15, the eLearning Magic Toolkit opens up exciting possibilities for learning designers to enrich and extend the value of online learning, making every interaction more meaningful, memorable, and measurable.

Read the rest of our Knowledge Base pages to make the most of the eLearning Magic Toolkit.