Written reflections or responses can encourage learners to think deeply about a topic and consider how it applies to them. And they’re easy to include in a Storyline 360 course by simply adding a da...
Published 3 years ago
Version 1.0
Blog Post
This template is very useful! I'm so glad to have a better option for learners to reflect rather than telling them to write something down on a piece of paper! One question though, we found that it did not function well unless you were using a computer to take the RISE course. Formatting was lost when using a smartphone. Any thoughts or recommendations?
- 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();