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!
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!
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:
Sadly even after the latest update the breaks in the text entry aren't recognized. It'd quite strange that this would happen since as you said James, variables should save the the content plus its line breaks. :(
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 & or &
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 '&'. 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.
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....
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?
Thanks Matthew, I thought that'd be the case. I think this would become increasingly difficult to update, especially if I had to pass it onto an SME to update the copy etc.
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.
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!
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.
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;
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.
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);
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
You could post your file here and seek feedback from the community. I'm not sure how often Stephanie looks at this thread. Just use the "ADD ATTACHMENT" button when you post.
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!
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!
I've commented in so many places on this thread... Do you mean the print button functionality? If so, I believe you can find my solution on page 2 of the thread along with a .story file.
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.
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.
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.
236 Replies
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!
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....
Sadly even after the latest update the breaks in the text entry aren't recognized. It'd quite strange that this would happen since as you said James, variables should save the the content plus its line breaks. :(
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 & or &
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 '&'. 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.
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....
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?
Thanks Matthew, I thought that'd be the case. I think this would become increasingly difficult to update, especially if I had to pass it onto an SME to update the copy etc.
I'll keep digging for ideas, thanks.
Thank you everyone for your helpful suggestions :)
Sorry Ronel, I accidently mixed jQuery with standard JavaScript. The code should be:
your_string.replace(new RegExp('\n', 'g'), '<br/>');I made a short video to help explain/demo it: https://youtu.be/hskTmJgMTyc
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.
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!
A few thoughts on this...
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.
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');
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);
That's a great solution. I often use this JS library when I need to
display/manipulate time or dates.
https://momentjs.com/
Thank you,
James Kingsley
Need an awesome way to collect feedback?
Don't just collect feedback. Start a conversation.
ReviewMyElearning.com
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
You could post your file here and seek feedback from the community. I'm not sure how often Stephanie looks at this thread. Just use the "ADD ATTACHMENT" button when you post.
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!
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!
This post was removed by the author
Hi Owen, 3 years after your comment, im having the same problem. Did you find a solution?
Erica
I've commented in so many places on this thread...
Do you mean the print button functionality? If so, I believe you can find my solution on page 2 of the thread along with a .story file.
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/
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.
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.