User notes that they can print and email

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: http://bit.ly/INWKD7

Published Output: http://bit.ly/1gmwbnb

Cheers!

Stephanie

243 Replies
Doug Brown

Hi Bastien

I took a quick look at the javascript you have in the email version.

You have a large amount of corrupt code after the var mailto_link='mailto:'+email+'?subject='+subject+'&body= *************section.

I'm not sure what the code is as it shows spaces BUT it is certainly NOT spaces. You may need a hex viewer to interpret.

I suggest that you remove all the spaces after

var mailto_link='mailto:'+email+'?subject='+subject+'&body=*************

and after the code

'+"Mes Actions“*******************

and again after the code

+exercisenotes1+"Mes actions“*******************

Looks like a cut and paste entry of the javascript has introduced other non viewable characters

Regards

Doug

Doug Brown

Hi Bastien

Try using Sublime text to view javascript files after you publish them.

Sublime text has a free version, and is very easy to use

http://www.sublimetext.com/

The user.js will be in the story content folder (after publishing).

This is where all the user javascript is located

Regards

Doug

Kathy Lee

Hi Everyone,

First, this is amazing! This is exactly what we need in our course to make it interactive and reflective for the learner.

Now, my question: I've seen two other people say that nothing happens when they click the icons. Anyone have any idea why?

I published Stephanie's source file and put it on SCORMCloud, the buttons work. 

I imported the screens onto the template of my file in SL2, put it on SCORMCloud, and it works. 

But when I create the triggers myself and copy-paste the code (making adjustments to only the title of sections, etc), NOTHING HAPPENS!

Any help or insight is greatly appreciated!

UPDATE: My course works now - I just copy-pasted the code and modified them for my course again. I still don't know why it didn't work before, so am very interested if anyone has any ideas of why it didn't work the first time I copy-pasted it (see the code attached). Thanks!

Kathy Lee
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

 

tin C

 

Hi Everyone,

I just found this great resource yesterday and I cannot get it to work, 

What I want is that users can take notes throughout the course, so I created a My Notes in the player in the top right hand corner and when users click it will appear as a light box slide.

 

Now I have made a separate scene which I call mynotes and put in the notepad, the email field  as a text box and also the email and print icons.

 

I created two text variables, 1. coursenotes 2. coursedate (systemdate)

I tried to clean up the JS that stepahnie had and replaced it where appropriate and published it to web and testing on IE locally on my computer but its not working.

 

I am sure the print option is also not working, but I want to get the email option working first.

 

Nick Wilson

Having utilized a variation of this script in a course, we have found that the e-mail function breaks down in IE 11 due to a character limit on mailto: links.  Unfortunately, for the course we are creating, we need to find an alternate solution that will allow the e-mail notes functionality but without the character limit.  Can anyone suggest an alternative that has been successful?  Anyone have experience with server-side scripting?

Jilly Dutton

Hi all,

I stumbled on this thread last week and found myself totally inspired to give Javascript a go using Stephanie's very generous notes... then I realised I'm a newbie to coding and am well out of my depth!

I was wanting to use Stephanie's code for sending an email that includes text inputs pulled from Storyline into the message body. I fear I have mangled the code entirely, but am hopeful I have merely managed to name things incorrectly and it's a quick fix.

If anyone has the time or inclination to have a look over my code I'd appreciate it... I have attached an outline that shows what I have so far and what I hope for it to be.

Thanks in advance!

Jilly

 

Matthew Bibby

Hi Jilly,

Here you go, try this:

var player = GetPlayer();
var email = player.GetVar("Email_TextEntry");
var name = player.GetVar("Name_TextEntry");
var task = player.GetVar("Task_TextEntry");
var subject = "Action Plan for " + name;
var stageOne = player.GetVar("Stage1_Notes");
var emailBody = "Action plan for " + name + "\n\n Who is learning how to: " + task + "\n\n What they need in Stage One: " + stageOne;
emailBody = encodeURIComponent(emailBody);
var mailto_link='mailto: '+email+'?subject='+subject+'&body='+emailBody;
win=window.open(mailto_link,'emailWin');

Here is a demo and here is the source file.

Hope that helps.

Jilly Dutton

Wow, Matthew - thanks so much! This has been uber helpful, and now my test module is working the same as yours!

As a tricky workaround I was going to use a pre-populated Stage1_Notes text entry to pull content into the email, but I can't get that bit to work (possibly because I'm making this bit more difficult than it needs to be).

Any ideas how to get this variable to pull through to the email body? I have attached a zipped source file to tinker with if you need. My ultimate goal is to get the notes and functionality for Stage One right and then to dupe the scene for all four stages, changing the Javascript to pull the relevant notes variable into the email.

Thanks again, this is going to make the module so much more engaging for my audience :)

Matthew Bibby

Hi Jilly, glad you got it working. 

I'm not 100% sure what you mean by: 

"As a tricky workaround I was going to use a pre-populated Stage1_Notes text entry to pull content into the email, but I can't get that bit to work (possibly because I'm making this bit more difficult than it needs to be)."

Can you please clarify? 

Holly MacDonald

I am also out of my depth when it comes to javascript. I have the following page set up and the email function didn't execute. I added a trigger to adjust the variable, but I'm not sure it is the right thing to do. Anyone want to help a non-coder with this?

the triggers

Here's the javascript I have

var player = GetPlayer();

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

var subject="Journal Entries";

var Thoughts9=player.GetVar("Thoughts9");
var Thoughts1=player.GetVar("Thoughts1");
var Thoughts2=player.GetVar("Thoughts2");
var Thoughts3=player.GetVar("Thoughts3");
var Thoughts4=player.GetVar("Thoughts4");
var Thoughts5=player.GetVar("Thoughts5");
var Thoughts6=player.GetVar("Thoughts6");
var Thoughts7=player.GetVar("Thoughts7");
var Thoughts8=player.GetVar("Thoughts8");

var mailto_link='mailto:'+useremail+'?subject='+subject+'&body='
+"Journal Entry 1:%0d%0A“
+Thoughts9+"%0d%0A%0d%0A
Journal Entry 2:%0d%0A“
+Thoughts1+"%0d%0A%0d%0A
Journal Entry 3:%0d%0A“
+Thoughts2+"%0d%0A%0d%0A
Journal Entry 4:%0d%0A“
+Thoughts3+"%0d%0A%0d%0A
Journal Entry 5:%0d%0A“
+Thoughts4+"%0d%0A%0d%0A
Journal Entry 6:%0d%0A“
+Thoughts5+"%0d%0A%0d%0A
Journal Entry 7:%0d%0A“
+Thoughts6+"%0d%0A%0d%0A
Journal Entry 8:%0d%0A“
+Thoughts7+"%0d%0A%0d%0A
Journal Entry 9:%0d%0A“
+Thoughts8+"%0d%0A%0d%0A"

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

Many thanks if you can pinpoint what I'm missing (javascript, trigger, variable???)

 

Holly MacDonald

Hi Matthew, I tried that, but it still didn't execute.

I think it's a trigger/variable problem. Where I have var useremail=player.GetVar("email"); I am not sure I have the right variable and/or trigger.

The variable type I have is text entry, but not sure if I should have a trigger that adjusts the variable and if so to what. 

Any other ideas?

onEnterFrame (James Kingsley)

Hi Holly,

A few thoughts from just taking a glance at your code. But I am not sure if your actual code is just like what is above? Or maybe the forum reformatted it?

Generally speaking you shouldn't have a hard line break in the middle of a variable. Your var mailto_link= has a line break after '&body='. And then a bunch more breaks after each entry. You should either make that one long line or append those to the end of the var like this:

var mailto_link='mailto:'+useremail+'?subject='+subject+'&body='
mailto_link += 'Journal Entry 1:%0d%0A'

There are a few other ways to handle that but the solution above should be fine for what you are doing. 

Some of your strings have opening quote marks but no closing quote marks. 

Also some of those quotes in your code are not the normal quotes. This is OK: " this is not “ . I know... they look almost identical. Avoid the curly looking ones.  Using a code editor (like Sublime) will help you see those. 

It is generally best practice to use double quotes around strings and to mix them with single quotes. You have some lines that start with single quotes append values in double quotes. 

I think this may work for you:

var player = GetPlayer();
var useremail=player.GetVar("email");
var subject="Journal Entries";
var Thoughts9=player.GetVar("Thoughts9");
var Thoughts1=player.GetVar("Thoughts1");
var Thoughts2=player.GetVar("Thoughts2");
var Thoughts3=player.GetVar("Thoughts3");
var Thoughts4=player.GetVar("Thoughts4");
var Thoughts5=player.GetVar("Thoughts5");
var Thoughts6=player.GetVar("Thoughts6");
var Thoughts7=player.GetVar("Thoughts7");
var Thoughts8=player.GetVar("Thoughts8");
var mailto_link="mailto:"+useremail+"?subject="+subject+"&body="
mailto_link += "Journal Entry 1:%0d%0A"
mailto_link += Thoughts9+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 2:%0d%0A"
mailto_link += Thoughts1+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 3:%0d%0A"
mailto_link += Thoughts2+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 4:%0d%0A"
mailto_link += Thoughts3+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 5:%0d%0A"
mailto_link += Thoughts4+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 6:%0d%0A"
mailto_link += Thoughts5+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 7:%0d%0A"
mailto_link += Thoughts6+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 8:%0d%0A"
mailto_link += Thoughts7+"%0d%0A%0d%0A"
mailto_link += "Journal Entry 9:%0d%0A"
mailto_link += Thoughts8+"%0d%0A%0d%0A"
win=window.open(mailto_link,"emailWin");

 

Hope that help!

 

Holly MacDonald

Going back to square one. I've used Matthew's sample file and while his works, it doesn't work when I try to copy elements onto the slide. I've used James' javascript and no luck. I used someone else's suggested javascript and no luck.

Can someone please let me know if my logic is right/wrong.

1. Create text entry box for user to enter email. Automatic variable is created.

2. Create text variable called useremail

3. Change name of text entry variable to "useremail"

4. Add button

5. Add trigger to execute javascript when user clicks button

6. Enter javascript that starts with 

var player = GetPlayer();

...and ends with ...

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

Thanks!

Matthew Bibby

Hi Holly,

Give this a try:

var player = GetPlayer();
var email = player.GetVar("Email");
var thoughtsOne = player.GetVar("Thoughts1");
var thoughtsTwo = player.GetVar("Thoughts2");
var thoughtsThree = player.GetVar("Thoughts3");
var thoughtsFour = player.GetVar("Thoughts4");
var thoughtsFive = player.GetVar("Thoughts5");
var thoughtsSix = player.GetVar("Thoughts6");
var thoughtsSeven = player.GetVar("Thoughts7");
var thoughtsEight = player.GetVar("Thoughts8");
var thoughtsNine = player.GetVar("Thoughts9");
var subject = "Journal Entries";
var emailBody = "Journal Entry 1:\n\n" + thoughtsOne + "\n\nJournal Entry 2:\n\n" + thoughtsTwo + "\n\nJournal Entry 3:\n\n" + thoughtsThree + "\n\nJournal Entry 4:\n\n" + thoughtsFour + "\n\nJournal Entry 5:\n\n" + thoughtsFive + "\n\nJournal Entry 6:\n\n" + thoughtsSix + "\n\nJournal Entry 7:\n\n" + thoughtsSeven + "\n\nJournal Entry 8:\n\n" + thoughtsEight + "\n\nJournal Entry 9:\n\n" + thoughtsNine;
emailBody = encodeURIComponent(emailBody);
var mailto_link='mailto: '+email+'?subject='+subject+'&body='+emailBody;
win=window.open(mailto_link,'emailWin');

This assumes you have the following text variables set up in Storyline:

Email
Thoughts1
Thoughts2
Thoughts3
Thoughts4
Thoughts5
Thoughts6
Thoughts7
Thoughts8
Thoughts9

Here is a demo and here is the source file.

Thanks

Edit: For anyone else who needs help with writing JavaScript to send an email, please see this article and follow up examples.