Storyline: Printable Free-Response Slide Template

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.

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

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.

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.

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..."

Same here Stephen! I'd be very interested in knowing if there's a smart way to achieve that!

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