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();