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

I'm glad this is useful for you. I can't take credit for the code portion, but I can tell you that our need was to have learners reflect without concern that their responses would be monitored. The code was designed not to record the responses in an LMS. If, with your coding background, you come up with an adjustment to the code to do so, I'm sure many people would love to have you share your solution.

Hi Traci,

I recorded a quick Peek video to show how updating that text should work: https://360.articulate.com/review/content/336e48c6-0896-41f6-922f-4023cca89543/review

If it isn't working like this on your end, just let me know.

Hi Nia,

I was able to check out the original Reviewlink you shared. It's tough to say without looking at the Storyline file and the exact updates to the JavaScript you made, but I wonder if some of the issue here may be in shifting to use a single print button collecting the answers to all six questions instead of one print button per screen?

In the original template, the print button was included on each slide and the JavaScript associated with it was designed to print the title and content of the slide the button was on. So if you wanted to include multiple copies of this slide in a course and use the JavaScript as is, you'd need to have a print button on each slide that would then print each response separately. Consolidating all the questions and responses together on a single print screen would likely require edits to multiple places in the JavaScript.

Julie's original discussion post about this project may be able to give you some additional ideas for how to customize the JavaScript further: https://community.articulate.com/discussions/building-better-courses/storyline-free-response-component-in-rise-javascript

Alternately, in the BuildIng Better Courses discussion board we do have a number of JavaScript experts. You can post your Storyline file there and see if they can help troubleshoot the JavaScript tweaks you'll need to consolidate all the questions and responses into a single printable sheet. https://community.articulate.com/forums/building-better-courses

Hello Trisha,

Our goal when developing this print/PDF options was to allow learners to reflect honestly to themselves, and specifically NOT to record the reflection in an LMS. To achieve this, I worked with a developer to come up with the Javascript included in the downloadable SL file.

I'm thinking that the Javascript may be able to be adjusted to submit an answer to an LMS, but not being a developer myself, I can't provide you with the proper direction. If you do find a solution, I'm sure many in the community would love to see a post from you sharing that solution.