Hi all. I built a course earlier this year that contains a "notes" function to allow users to take a moment to reflect and type their thoughts on certain questions. This is used in place of a typical multiple response/choice type question. Thought I'd share it here with you! Here are the files: Screenr Part 1: Demonstration - https://player.vimeo.com/video/204928444 Screenr Part 2: How It Was Built - https://player.vimeo.com/video/204928450 Storyline Source: https://bit.ly/3Kd96as Published Output: https://bit.ly/3Z0hj5X Cheers! Stephanie

In my example, those are the names of Javascript variables that are created by the script and are used to contain the values of various StoryLine variables. I don't remember if it is the same in Stephanie's example but I believe that it is.The code can basically be split into several sections: // Opens a new window for printing myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1"); // Launches the javascript function to get variable values. Gets storyline variables and assigns them to a java variable. The first part (before the =) is the new java variable. The second part (after the =) is a call to storyline to get the value from the specified storyline variable. var player=GetPlayer(); var headline=player.GetVar("PrintTitle"); var date=player.GetVar("SystemDate"); var exercisenotes1=player.GetVar("NotesOne"); var exercisenotes2=player.GetVar("NotesTwo"); // Creates a java variable called contents and assigns it with html content. The html content controls how and where the content appears in the print window. It includes the java variables that you just created and assigned storyline values to. var contents = "< html><head></head><body style='width:650px;padding:20px;'>" contents+="< div style='font-size:22px;font-weight:bold;margin-top:20px;margin-bottom:20px;'>"+headline+"</div>"; contents+="< div style='font-size:16px;'>"+date+"</div>"; contents+="< div style='font-size:18px;font-weight:bold;margin-top:10px;'>Activity Notes 1</div>"; contents+="< div style='font-size:17px;margin-top:5px;'>"+exercisenotes1+"</div>"; contents+="< div style='font-size:18px;font-weight:bold;margin-top:10px;'>Activity Notes 2</div>"; contents+="< div style='font-size:17px;margin-top:5px;'>"+exercisenotes2+"</div>"; contents+="< /body></html>" // Writes the html to the window and initiates the print function myWindow.document.write(contents); myWindow.document.close(); myWindow.focus(); myWindow.print();

Hi everyone - thanks for all of your comments. Sorry this took so long to reply too (travel and holidays out of the way, I'm back here on the forums daily). Katie - The javascript and email functions should work properly in HTML5. They are basic implementations, however, you may run into issues with the window popping up after clicking the print button on some devices so likely a more detailed css solution would play better across multiple html5 devides (tablets, phones). Seems to work decently in HTML5 on the desktop. The elevator sequence was created in PowerPoint using a single image that I sliced and diced, applied motion path animations too then exported as an .mp4 and imported into Storyline. Amr - There are some examples in the forums for code to print certificates/results. Using the built-in method - http://community.articulate.com/forums/p/36759/198052.aspx#198052 or customized method - http://community.articulate.com/forums/p/12471/75329.aspx Owen - You might need to disable protected mode in thebrowser, add the site to trusted sites or remove "javascript" from the code - what was "<button onclick='javascript:window.print();'>" becomes "<button onclick='window.print();'>" Bruce - Yes, you can enter lengthy text and it will be captured in its entirety in the email body, printed version too.

Hi all, I don't know if this will be helpful, but I have a free Storyline 2 Print/Email Notes Template on my website, along with links to tutorials and resources on the subject.You can download the template and/or read the blog post here: http://tracycarroll.net/storyline2-print-email-notes/

I got it to work! I had to copy the JS from one of the triggers, delete that trigger, create a new trigger with the copied code, and then change the case.

I never could get the print function to work correctly - not even in the downloaded file. The print window with its nice white background opens fine, but the print button in the new window does not function. I've tried both "" and "". Interestingly enough, if I start to change the print code, the email button stops working even though I am not making any changes to it. I settled for just printing the native page using nothing more than window.print(); as the javascript on my button.

User notes that they can print and email

WendyFarmer
Super Hero
10 years ago
Hi Carmen

Try uploading it in Scormcloud and testing to see if it is an LMS issue. I had it working with 27 different variables.
KerriBishman
Community Member
10 years ago
Hi Stephanie (or anyone that would like to answer :),

I'm using your email java (and I've tried another email java script that I've had success with as well) and for some reason the email opens, the words are correct, but anything I'm pulling from a variable is "null" even though it's populated in the training. I just can't figure out what I'm doing wrong.

Does anyone have any suggestions?

Thanks!

Kerri
OwenHolt
Super Hero
10 years ago
Are you first taking the StoryLine variable content and assigning it to a JavaScript variable and then using the javascript variable in the body of the email?
KristineW
Community Member
10 years ago
Hi Stephanie (or anyone who can help!) I've been working with this as well.

Two items I can't seem to resolve:

1. The text isn't wrapping on the print preview, it simply extends out. Is it possible to make it wrap?

2. While my email function works perfectly, I am having issues with the Print and Print Preview function. The Title and Date won't display on my course's print preview. It only shows "Null" for each title and date. The rest of the notes are working just fine on the print preview. I have an Execute JavaScript trigger on slide 1 and used the System Date JS exactly as it was presented on the PPT slide provided above. I made sure SystemDate matched in both places as JS is case sensitive. I'm also a little unclear if I need to add more to have the code retrieve a title/headline for the print preview. Is there a step I'm missing to make these work?

I tried in SCORMCloud with the same result.

Thank you so much!
Kristine
- KathyLee2
  Community Member
  9 years ago
  
  Kristine W
  
  2. While my email function works perfectly, I am having issues with the Print and Print Preview function. The Title and Date won't display on my course's print preview. It only shows "Null" for each title and date. The rest of the notes are working just fine on the print preview. I have an Execute JavaScript trigger on slide 1 and used the System Date JS exactly as it was presented on the PPT slide provided above. I made sure SystemDate matched in both places as JS is case sensitive. I'm also a little unclear if I need to add more to have the code retrieve a title/headline for the print preview. Is there a step I'm missing to make these work?
  
  This was my first time using Javascript in Storyline2, and I was experiencing the same problem. It turns out I needed to create a variable for the title and the date. It may be a given for super users out there, but definitely need-to-know new information for beginners like me.
  
  In the image attached, see the variables "PrintTitle" with set default value of the title you want to appear and "SystemDate".
  
  Now my course works! Thanks Stephanie for the great idea!
  
  ~Kathy
PeterElliott
Community Member
10 years ago
I have just used this as a guide to help me sort out how to use java to insert date and Time and the print a form. It is a great guide. Thank you
DuaneDickey
Community Member
10 years ago
Stephanie,

I am blown away by your creativity and technical skills!

I absolutely love how you created the "notes" portion that can be emailed or printed. I think this part of your project will work beautifully with my current project.

Thank you for being willing to share your ideas and add to the group knowledge base. You are doing a great job of encouraging the rest of us to "up our game".
NickWilson1
Community Member
10 years ago
First off, thank you Stephanie for sharing this example. It is very well done, and I'm looking forward to utilizing this functionality in a course I am currently building. I am running into a problem with customizing the javascript, and wondered if anyone has had the same issue...

I have been able to customize the variables in the script to match the variables in my course, and the email and print functions seem to work fine at that point. However, when I attempt to customize the email body text, the function no longer works. In Stephanie's example, the text reads, "Activity Notes - My thoughts on the Non-Discrimination policy" as a header for one of the text variables. Shouldn't I be able to customize this text to read as whatever header I want in my own course? The email function only seems to work when the text is left as-is. When I change it, the button no longer executes the email function. I should mention that I am definitely a novice when it comes to javascript. Any thoughts?
StevenHeindl
Community Member
10 years ago
Thank you so much for this course file and explanation. This functionality is so great and yet I had such a hard time figuring it out before your post.
HeleneCaura-Yan
Community Member
10 years ago
Thank you for sharing! I am looking for a solution like this, but I would also like the learners to be able to add pictures, to draw, and to print in a nice format... Am I too ambitious here?
NoR
Community Member
10 years ago
Amazing job Stephanie! An inspirational design! Thanks for sharing