User notes that they can print and email

Dec 10, 2013

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

238 Replies
ronel taruc

Thank you James! That surely solved the issue why not all text appear on the email bocdy. There's one thing still bothering me though. The text seems to ignore line breaks. Even though there are 3 paragraphs in my sample - they were all interpreted as one continuous paragraph. Is there a work around for this? Thanks!

Contimuous

onEnterFrame (James Kingsley)

Hmm I don't recall if SL strips the line breaks out when it saves the variable. If not then they are probably in there as '\n' which will not be displayed in HTML. (Your email editor probably defaults to HTML). So you will need to find all instances of '\n' and replace them with '<br/>'. 

It would be easier if your were using a library like jQuery but it can be done with generic JS something like this:

your_string.replaceAll(new RegExp('\n', 'g'), '<br/>');

We are using the standard JS replaceAll function but have to use a Regular Expression to match the pattern of the unseen ASCII line breaks.

Your milage may vary on the code above as I didn't test it before posting it here.... 

OWEN HOLT

It really isn't that strange. The printable page is being rendered through HTML. In HTML, some characters are 'Reserved'. For example the less than (<) & greater than (>) signs are used to open and close tags and so the browser might be confused by their use as pure text.   Therefore, special characters have an assigned 'entity' that you can use to display them. Character entities look like this:
&entity_name; or &#entity_number;

Note that character entities always start with the ampersand (&) which makes it one of these special characters that html treats differently.  The correct way to display an ampersand in html is to use &amp; or &#38;

Line breaks are similar.  In HTML they require a specific element which is written as: <br>.

StoryLine, on the other hand, is recording your actual text entry and holding it in a variable (that acts like a container).  It has captured and recorded '&' as '&' and not as '&amp'. When you try to take text stored this way in it's native format and render it in html, it is not unlike trying to put a square peg in a round hole. You  need to make some changes first.

Sometimes, it is easier to change your methodology. For example, instruct users to add their notes 1 paragraph at a time and capture each paragraph in it's own variable. Or run JS  'when the user presses a key (enter) to capture what they have input so far and add the appropriate  html line break characters to a different variable to be used when printing.

OWEN HOLT

If your email is not html based, you would need to convert the break to the following hexadecimal equivalent of a carriage return that the computer would then recognize: %0d%0A

So using James suggestion above, try something like the following JS:
your_string.replaceAll(new RegExp('\n', 'g'), '%0d%0A');

You can learn more about the 0d0a pair of characters as the signal for the end of one line and the beginning of another one HERE.

And to steal James' line.... Your mileage may vary on the code above as I didn't test it before posting it here....

GCC Training  Account

I love these posts, especially about Javascript as I find it so dynamic.

I'm still fresh to Javascript and have been using it for a note taking portal for users to take notes and email them upon completion. I've been asked if there is a way to have the user click on a specific sentence on a page in SL and have the text copy to the note taking portal for them to add / remove text as pleased and then email themselves upon completion.

Is anyone aware of how to do this or if it's possible?

ronel taruc

I know the Articulate community's reputation for being helpful is something to be proud of but you Mr. Kingsley definitely proved that as an understatement. You even bothered to create a video tutorial for me :D Very grateful for this community and glad to inform you guys that my issue is solved 100%. THANK YOU.

ronel taruc

Hmm.. bumped into another problem. How come when I add the highlighted lines, storyline does not trigger the email window to pop up anymore? I am using Outlook btw. But without those lines, the email window pop ups just fine. Any help? I attached the whole java script if you need to see it. Thanks!

onEnterFrame (James Kingsley)

A few thoughts on this... 

  • Although the spec for hyperlinks (including mailto) does not define a maximum length, most browsers (and email clients) do. I am not certain what the current maximums are.. but IE's is 2083 characters. You are likely hitting a limit. 
  • Have you tried it in a browser with the Developer Console open? It should list the details of an errors in the console. 
  • Could there be issues with the values of that set of variables (fbk89-93)? Perhaps more invalid characters etc.

For something this complicated I might suggest you display the data in a new HTML page with options to print/save as pdf. Then they can email the PDF. 

Hedrick Ellis

Hi Articulate Community, this is my first post. I know this thread started a while ago but it still seems active since the ability to email and print notes is so cool! Hopefully, someone can help me. I've attached a Storyline file which is a stripped down version of the functionality that Stephanie demoed.

When I click the email button and print button nothing happens. (I've published the file, not viewing in preview). I've also copied the Javascript for the email piece below in case that might be helpful.

var player = GetPlayer();

var useremail=player.GetVar("email");

var subject="ECERS Class Notes";

var usernotes=player.GetVar("notes");

var exercisenotes1=player.GetVar("TextEntry2");
var exercisenotes2=player.GetVar("TextEntry3");

var mailto_link='mailto:'+useremail+'?subject='+subject+'&body=
'+"Activity Notes - My thoughts on the strengths of our program:%0d%0A"
+exercisenotes1+"%0d%0A%0d%0A
Activity Notes - Challenges in our program:%0d%0A"
+exercisenotes2+"%0d%0A%0d%0A"+usernotes;

win=window.open(mailto_link,'emailWin');

Jane Lomas

I know this is an old post, but thanks so much for sharing, this has been a life saver as I need to print a report from the current package I'm working on, and this works perfectly.

Just a note: when I used the date I got 13rd rather than 13th, I've found a comment on the following post with code that works so it will do 1st, 2nd, 3rd but not 13rd, in case it's useful for anyone.

(Courtesy of Mark Bennett)

var today = new Date();
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var s = ["th","st","nd","rd"];
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var v = day%100;
var dd = day+(s[(v-20)%10]||s[v]||s[0]);
var date = dd + " " + monthNames[month] + " " + year;
var player = GetPlayer();
player.SetVar("SystemDate",date);

Bredell Evans Jr.

Hi Stepanie, 

I have a question that I really need your help with. I am wanting to do the exact same thing you did with sending notes to an email, but with what I am doing I am unsure of how to customize yours for what I am trying to do. Would I be able to possibly send you the storyline file of what I am doing and get some input of what I might do? Thanks so much for your post sharing

Tracy Carroll

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/

 

ASVZ Talentontwikkeling

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.