Storyline - Printing Learner Text with Javascript - Question

Sep 05, 2022

Good afternoon, all!

I'm working on a learner reflection.

2 Problems with the Javascript that I would appreciate guidance on!:

Problem 1

When the user clicks "Print" a small window opens with just the text. Which is good, I don't want the whole window to print.

However, when the learner has reviewed the to-be-printed text and clicks "Print Reflection" the ability to actually print does not materialize. How can I fix this so the learner can save their work?

 

Problem 2:

When I add the full question text to be printed along with the user's answers the initial print window for the user to review the text to be printed won't open at all. 

For example,

Instead of:

  • contents += "<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print Reflection</button></div>";  
     contents+="<div style='font-size:20px;font-weight:bold;margin-top:10px;'>Module 1 Reflection</div>";  
     contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Question 1</div>"; 
     contents+="<div style='font-size:17px;margin-top:5px;'>"+modulereflection1+"</div>";  

I would like Question 1 to be replaced with  

  • contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Question 1- List 1-3 Level 5 leaders that you look up to. What can
    you learn and apply from their leadership example?
    </div>"; 

Any tips? 

4 Replies
Sandeep Gadam

Hello Jessica Davis, I'm not familiar with JavaScript, but I'm able to find a way to fix your problem!

So, if you're willing to place the entire question part by replacing "Question 1", simply copy and paste the question text and remove the extra break in both questions and that should work fine as it worked for me.

Hope to hear back from you.

Sandeep Gadam

Hi Jessica Davis, I apologize for the delay. Yes, the text from the question didn't appear in the print preview when I just copied and pasted the question content. 

As a result, I pasted the text into notepad, eliminated the excess space (/div>), and then changed the text for Question 1 to reflect the actual content of the question in the existing JS code.

Select the text box properties in the SL file and turn on wrap text for both text boxes.

Please refer to the screenshots I've attached, where I've shown where to delete the additional space. After doing this, everything worked perfectly on my end.