Printing User Entry Text in Notes Field Using Articulate Storyline

Printing User Entry Text in Notes Field Using Articulate Storyline

In the past four months, I have shared a lot of things which we can do with Articualte Stroyline to satisfy online training requirements. Here, I would like to share a requirement of one of our clients and how we satisfied it.


The client wanted to enable his learners to enter text in the notes pane of the slides of the eLearning course and also enable the learners to take a print of the text they have entered.

Our Solution :

We have followed the below steps to meet that requirement.

Step 1 : 

Create a layer called “Notes_Layer”, and insert a text entry field into it.


Step 2 : 

When we insert a text entry field, a default variable “TextEntry” will be created. For our convenience,we can rename that variable as “notes1”.

Step 2

Step 3 : 

Insert a textbox containing the text “Take Notes” and assign a trigger “Show layer Notes_Layer when user clicks Take Notes”.

Step 3

Step 4 : 

Repeat the steps 1, 2 and 3 in all slides and make sure that the names of the text variables are different for each slide. Here, I took four slides. So,I have named the the text variables as “notes1”, “notes2”, “notes3” and “notes4”.

Step 5 : 

Create a summary page so that the learner knows the text he has entered in each page. For this, we should display the values of all the text variables(notes1, notes2, notes3 and notes4)

Step 5

Step 6 : 

Now add a button and name it as “Print Notes” and assign a trigger “Execute JavaScript when user clicks Print Notes button”.

Step 6

Step 7 : 

Write the below code in the javascript window.

myWindow =“”,”Print”,”width=810,height=610,scrollbars=1,resizable=1″);

var player=GetPlayer();
var unotes1=player.GetVar(“notes1”);
var unotes2=player.GetVar(“notes2”);
var unotes3=player.GetVar(“notes3”);
var unotes4=player.GetVar(“notes4”);
var contents = “<html><head></head><body style=’width:650px;padding:20px;’>”
contents+=”<div style=’font-size:17px;margin-top:5px;’>”+unotes1+”</div>”;
contents+=”<div style=’font-size:17px;margin-top:5px;’>”+unotes2+”</div>”;
contents+=”<div style=’font-size:17px;margin-top:5px;’>”+unotes3+”</div>”;
contents+=”<div style=’font-size:17px;margin-top:5px;’>”+unotes4+”</div>”;

Step 7

Step 8 :

Now publish your course and check your output.

This is how we can enable the learners to take the print of the text they have entered. Have anything to say? Please do share!

View eBook on Articulate Storyline for Building E-learning Courses

  • Mandy

    I can’t get this to work.. Do you know if it is an Articulate 2 problem or a browser issue perhaps?