Introducing Note-Taking feature in Elearning: Print or Email Learner’s Notes in Articulate Storyline 2

Note-Taking feature in Elearning-Type-and-Send-1

What do students or learners do when they want to remember something during a lecture or a classroom session? — They simply take notes. Every learner gains knowledge and understanding of same information differently, so they take notes differently. Notes taking is one of the important tools to enhance the learning process. Since most of modern day’s leaning has moved to the internet in the form of eLearning, Mobile Learning, Microlearning, etc., it can be life changing if we could introduce notes taking in eLearning as well. You can now encourage your learners to take notes while going through an eLearning course.

In this blog, we will demonstrate how to add Notes-taking feature for Articulate Storyline courses which can be printed or emailed.

Let’s get started.

Before we jump in to the steps, let’s have a look at our final output with the help of the animations below.

Print Feature – Demo
Print-Animation_Note-Taking feature in Elearning-Type-and-Send
Email Feature – Demo

email-animation_Print-Animation_Note-Taking feature in Elearning-Type-and-Send

Step: 1

Create a “Notes” layer in the Master slide and a button that toggles the visibility of the Notes layer.

Step: 2

Add a text entry box in the Notes layer and give a variable name as “MyNotes”. We need to make sure that the text entry box variable is named exactly as “MyNotes”.

Step 3:

Add two buttons, Print and Email in the Notes layer.

Step 4:

Here comes the magic of JavaScript.

Add a trigger on Print button to execute JavaScript and paste the following code.

myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");

var player=GetPlayer();

var exercisenotes1=player.GetVar("MyNotes");

var contents = "<html><head><title>Anti-Bribary and Corruption Notes</title></head><body style='width:650px;padding:20px;'>"

contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>My Notes</div>";

contents+="<div style='font-size:17px;margin-top:5px;word-wrap:break-word'>"+exercisenotes1+"</div>";

contents+="</body></html>"

myWindow.document.write(contents);

myWindow.document.close();

myWindow.focus();

myWindow.print();

Step 5:

Add another layer in the Master slide with another text entry box and make sure to assign it a variable name as “Email” and a button labeled as “Send”.

Step 6:

Next, we need to add “Execute JavaScript” that executes on clicking the Send button and paste the following code.

var player = GetPlayer();

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

var subject="Anti-Bribary and Corruption Notes";

var notes1=player.GetVar("MyNotes");

var content="Anti-Bribary and Corruption Notes%0d%0A%0d%0A";

content+=notes1;

var mailto_link='mailto:'+useremail+'?subject='+subject+'&body='+content;

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

That’s all we need to do to add notes-taking functionality to Articulate Storyline projects.

Please click the below link to access the sample course.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *