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

237 Replies

EricaBerghout-1
Community Member
9 years ago
Absolutly love it!! was exactly what i was looking for and chalenged me to get to know a little java-script to remodel it. Thank u so much for sharing, Stephanie!
BredellEvansJr
Community Member
9 years ago
Ok, so here the file I was referencing earlier. I want to do the exact same thing Stefanie did, but have everything on this slide go to email. Having the recipient auto populate. If anyone could help with this I would really appreciate it!
Email_Quiz.story1.8 MB
TracyCarroll
Community Member
9 years ago
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/
EricaBerghout-1
Community Member
9 years ago
Hi Tracy,

Thanks for your reply! i used the print option, adjusted the java-script to fit my project.
One question. do you know how to ad a print-buton or an automatic function to open the print window??

Our workers ar not very used to work with computers, and i would help them to get the document printed.

In IE i can use the wright mouse button, but in firefox i cant find a way to print.
- TracyCarroll
  Community Member
  9 years ago
  Hi Erica,
  
  In Firefox, if the window that opens doesn't display the usual toolbar buttons or the ≡ Menu Button, you can simply hold down the Ctrl key and press P. This also works when you just want to print the selected text rather than the whole page.
EricaBerghout-1
Community Member
9 years ago
hmmmm.... I would have to explane it to the user, i would love to have a solution i dont have to explane.
- TracyCarroll
  Community Member
  9 years ago
  Sorry, I don't have another solution.
EricaBerghout-1
Community Member
9 years ago
thanks for the help! im going to look what i can find out.
- OwenHolt
  Super Hero
  9 years ago
  Erica,
  
  In a different post (about html course certificates) I proposed a solution that builds your html print window with content from StoryLine and includes a print button on the page that is ignored by the printer. I think this process should work for you with user notes even in firefox. :-)
  Link to post with code.
EricaBerghout-1
Community Member
9 years ago
Hi Owen,

Thanks again for your help. im going to study the post you added and try to transelate it to my project.
MadelaineWhalen
Community Member
9 years ago
This is exactly what I'm trying to do for a course, but I can't get the Java run! All the variables are working perfectly within my course, but when I click my Print button nothing happens.

I checked all my Storyline settings and they seem to match the file given in the original post, except I'm building in SL2 not 1. Help!!!
Storyline_Java_Issues.zip10.5 MB
EricZorab
Community Member
9 years ago

Great this community, it brings us a lot further in the development of eLearning.

The script for sending data to Outlook works fine. Unfortunately, the number of characters is limited which makes nothing happens when I click the email button. Does anyone have a solution?
JamesONeal
Community Member
8 years ago
Does this script work with Storyline 360? I used it with Storyline 2 and it worked, but not having any luck with it since installing 360.

Forum Discussion

User notes that they can print and email

237 Replies

Related Content

Notes

Hidden Developer Notes

Javascript for sending an email

Email with subject line

Note Tab is laggy

Learn

Connect

Discover

Community

Company

Trust Center