Storyline: Printable Free-Response Slide Template

Wow, I thought we had tested it on all devices...so if nothing has changed on Articulate's side, this got overlooked. Thanks for bringing it to our attention! I pulled my coding expert back in to help out and we have updated Javascript for the Storyline element:

var questionTitleVar = 'Q1TextEntry';
var styles = `
#printHelper, #printHelperTitle {
display: none;
}
@media print {
body {
width: 100% !important;
height: auto !important;
position: relative !important;
}
html {
height: auto !important;
}
body * {
display: none;
}
#printHelper, #printHelperTitle {
display: block;
overflow: visible;
white-space: pre;
white-space: pre-wrap;
}
#printHelperTitle {
font-size: 18px;
}
}
`;
if (!document.head.querySelector('#printHelperStyles')) {
var stylesheet = document.createElement('style');
stylesheet.nodeType = 'text/css';
stylesheet.id = 'printHelperStyles';
stylesheet.innerText = styles;
document.head.appendChild(stylesheet);
}

var player = GetPlayer();
var questionTitle = player.GetVar(questionTitleVar);
var questionTitleEl = document.createElement('h1');
questionTitleEl.id = 'printHelperTitle';
questionTitleEl.innerText = questionTitle;

var printHelperEl = document.createElement('div');
var textarea = document.querySelector('textarea');
printHelperEl.id = 'printHelper';
printHelperEl.style.fontFamily = textarea.style.fontFamily;
printHelperEl.innerHTML = textarea.value;

const mql = window.matchMedia('print');
mql.addEventListener('change', (media) => {
if (media.matches) {
document.querySelectorAll(['#printHelperTitle', '#printHelper']).forEach(el => el.remove());
document.body.appendChild(questionTitleEl);
document.body.appendChild(printHelperEl);
}
else {
printHelperEl.remove();
questionTitleEl.remove();
}
});

window.print();

In Storyline, look at your Object Triggers panel. If you haven't made any adjustments to object names, you will see a trigger under PDF button that reads "Execute JavaScript When the user clicks PDF button." Double click on "JavaScript" to open the JavaScript pop-up window. Replace the code with the new JavaScript I posted above. Make sure in the first line of code (var questionTitleVar = 'Q1TextEntry';) that the text entry field name in the trigger panel (Set Q1TextEntry equal to the typed value When Q1 Text Entry loses focus) matches.

I am having the same issue! And I am trying to use multiple text entries on a page and cant get them them to all print.

Hi, Justyna. I think this should be an easy fix. Go into your variable pop-up menu above the triggers panel. Select the text variable associated with your question and check to see what the Default Value is. I suspect you need to updated it with your question text, "What is the conclusion..."

Anne,
It will need to be changed in 3 places, The SLide. Off the edge of the slide and in the variable default value.