User notes that they can print and email

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.

Stephanie,

How is your client's implementation saving the Notes that people create? Do they retain when they close and reopen?

John.a.

this is a great asset to have in a course! Thanks so much for sharing!

I'm not sure I see the difference there.... 

Thank you for sharing Stephanie. This is terrific. I love looking at other people's ideas and solutions to similar requirements and challenges I have encountered in my own courses. This would be a fun course to take.

Hi John. In this case the client doesn't save the notes typed in their LMS.

Owen - the forums took the command literally and embedded it as a hyperlink hence you couldn't see the difference. Here is what I was trying to do:

"<button onclick='javascript:window.print();'>"  becomes "<button onclick='window.print();'>"

Thank you Thank you Thank you! I love this community!!

I think I love you!  :- )

I've been looking for something like this all day, and you have given us not just the print option, but the email option too, which was not working for me.

Thank you so much,

KP

Great work!  Thank you for sharing.

I am struggling to get the print and email button to work... Can anyone please help. It is such a great function and I would really like to use it. I have copied Stephanie's Java Script and changed the variables (that is the ones indicated and replaced them with mine) I am not sure what I am missing. I have no Java script experience so I am following her instructions as they are...

Many Thanks

Michelle

How are you testing it? Java won't work at all from preview so you have to publish it "to cd" to test the published file from your desktop or publish it using your final setting, host it on the server where it will reside, and test it there. It may be that you've done everything right but that the problem is with how you are testing it.

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.

Made a few modifications and have it working in a slightly different way. Since the problem seemed to be getting the print button to work in the pop-up, I just removed the button from the code and added code to launch the print function auto-magically.

Attached is my modified code. (Working in I.E. 9 but not working in Google Chrome)

And here is a simple .story file with both email and printing functions currently working in I.E.9

Thanks Owen.  I'll take this for a test drive.

This is absolutely brilliant. Thank you!

Thank you very much for your help Owen. I really appreciate it!

My department and I were so excited when we saw this function and this would really really help with our 6 hour course, Employee Performance Appraisals: The Foundation for Performance Management. I would love to have some help clarifying part of the Javascript code.

I have only minor experience with editing code, but I’ve managed to customize parts of it. The sections I don’t understand at this point are locating in the downloadable project where you use “exercisenotes1” “exercisenotes2” and “exercisenotes3.” I’ve studied the .story file provided extensively and can’t find a sign of it (or reference, or variable, etc.), so I’m not sure exactly what to name and reference to within the code for my own project (or what I should be naming within Storyline).

I’m also uncertain about what to name different bolded areas of the code provided in the Powerpoint file. I noticed that the blue words are references to names of variables you created so the code can “grab” onto the text learners enter. However, I’m not sure about how to develop and customize the other bolded words.

I tried customizing everything as best I could and publishing my project to LMS to test the function. Nothing happens when I hit either the “send” or “print” buttons.

I also downloaded Owen's .story file where he created this function and compared the 2 versions of codes. Still stumped! (Lovely project, Owen!)

Any help would be massively appreciated!! : )

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(); 

This is great. thank you so much for sharing. 

Thanks, Stephanie! This is great. I would also hope that the notes typed by the user would be available if they open the course in the future. But I can't seem to wrap my head completely around that. My users will be taking the course through an LMS. What do you think?

wow. fantastic work.

I don' t think it is ever too late to say thank you and good job. It is very inspirational.