Creating a Printable Notes Feature in Articulate Storyline

One thing that I was recently asked to see if we could have inside of Articulate Storyline was a way for a student to enter in some notes at any point of the course. That way they could reflect on the content they have just learned in written form and save it so they could add on to it as they go throughout the course.

That sounded easy enough and I was feeling pretty confident that I could knock that out of the park pretty quickly until they asked the next part. “Oh yeah, and we want the students to be able to print out their notes.” That sounds easy enough for the person requesting it but I always thought it was harder to do than it sounded. Luckily I found a way, while this method may not work for everyone, I think it should get you started on the path to what you want.

Here is how I did it, first I started with my Storyline project file. The first step was to a text entry form on something that could be accessed at any given time. Two ways come to mind for doing this: 1 you could create a text entry field on a normal slide and then just use a lightbox trigger at any point in your course to lightbox that slide or 2 you could create a layer on the master slide that would show if a variable was changed to true. I wanted the window to be fairly small when it opened so they could still see the content and take notes at the same time so I decided to go the layer on the master slide method.

So first go into your master slide by clicking on View > Slide Master. Once you are there go to your main slide master which in most cases would be #1. From here we will need to create a variable that when it changes it will show the layer so that means we need to have a trigger on the master slide always listening for that variable change. The naming of the variable is really up to you but keep in mind you should name it something you will remember or something that will make sense when you read it later. In this example I am going to name that variable showNotes. As with all variables it cannot have spaces in the name so that is why we use camel case which is every word is capitalized with the exception of the first word.

showNotes

Ok so with that variable created we can now create our content. We will come back to the main slide later but for now we are going to create a new layer on the master slide that will have the contents of the notes when that variable changes. This way they can enter in their notes and still see most of the page content. So create a new layer on the master slide. I am calling the new layer Notes.

On the notes layer I mocked up a top bar (with a title of Notes), bottom bar, middle text area that has a text entry area in it and on the bottom bar a button that we will trigger the print functionality. You can create this in whatever way you want but here is a screen shot of what I did.

notes

You can see that the top and bottom bars are transparent so you can see the content. The X button will do a simple hide layer.

Every text entry field you insert inside of Storyline has a variable that goes with that text entry field. Usually this is named for you so you may want to notate what that variable name is. You can see that in the trigger window which is usually something like set textEntryVariable equal to textEntryValue so set the variable equal to whatever is typed in the text entry field. This is good because with knowing the name of that variable we could grab that content and generate an HTML file that will allow us to print. If you wanted to go even further you could generate a HTML certificate that would populate someone’s name using this same type of method.

Ok so I have notated that my text entry field is setting the variable name of TextEntry. Probably took a long time to come up with that name ;). On this layer let’s add a simple trigger to hide this layer when the learner clicks the close button.

hideLayer

Ok so let’s go back to the main master slide layer. Now we need to add a trigger that will show that layer if the variable of showNotes changes from false (because it will not be shown by default) to true. The reason we do this is this will cause Storyline to trigger this if we change that variable no matter how we do it, whether form a button, dropped item or anything else. Another way would be to create a button on the master slide to show the layer but then that button would have to be visible on every page so in this way we still show the layer when we do a simple variable change.

Ok so that trigger is to show layer Notes when the variable showNotes changes to true. Here is the image of that trigger in Storyline. Notice that the trigger is just attached to that adjust variable.

(Image if this trigger to show layer when variable is changed)

Ok so we will come back to the print feature in a second but go ahead and close the slide master and go to any slide on your page. Create an object or a button on that page and add a trigger to adjust the variable showNotes to true and that is all the triggers you will need to add. Once you have done that and preview your course, once you are on that page and click the button than you will see your notes magically appear.

So that is how you see your notes and you can trigger that from any page you may be on by duplicating that button or adjusting the variable on any other event. But you will notice an issue. Once you close the notes they will not come back up or you may see our notes show sporadically. Remember that we changed the variable to true with the button but we never change it back to false so here is what you need to do, go back into your master slide and on the Notes layer add a trigger that will automatically change the variable back to false when the close button is clicked. That way it is set back to normal and now waiting for the variable to change again. Keep in mind you can have more than one trigger fire on any event.

adjustVariable

Ok so we got that working and now we can type in notes. Since this is on the master slide and I am using 1 text box you can see that on any page I show that notes the text entry field still carries over what I type. That way you can have the same notes on every page. If you want different notes than you might want to create a notes layer on every page so the text entry field is different on each page.

Ok so here is the tricky part. The print feature. Go back into the master slide and click on the notes main master slide and then go into the notes layer. We need to add a trigger on the print button to execute some javascript. That javascript needs to be the following. You may not be familiary with javascript so I added some notes on most lines that start with a // that means these are not the code those are just notes to explain what the code below it is doing. You can copy and paste this code in and just change the third line of code var notes = player.GetVar(“TextEntry”) to be your variable within the quotes.

Here is the code with comments to explain each line.



//First we need to get the player. We do this in a variable called player

var player = GetPlayer();

//Now we need to add a variable for the course title

var course = "Starter_Course";

//Here we access the variable we have for our text entry fields so we can use it

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

//Now we need to create a new window which will be an HTML window

newwindow=window.open();
//Couple more variables for date and the new window
newdocument=newwindow.document;
d = new Date();

//Javascript to write out the HTML in the new window

newdocument.write('<style>body{padding:20px;font-family:arial,sans-serif}</style>'
+'       <span style="font-size:24px; font-weight:bold">'+ course +'</span><br>'
+'       <span style="font-size:18px;">Notes - '+(d.getMonth() + 1)+'/'+d.getDate()+'/'+d.getFullYear()+'</span>'
+'       <br><br>'
+'       <span style="font-size:12px">'+ notes +'</span>');

Here is the code without the comments



var player = GetPlayer();
var course = "Starter_Course";
var notes = player.GetVar("TextEntry");
newwindow=window.open();
newdocument=newwindow.document; d = new Date();
newdocument.write('<style>body{padding:20px;font-family:arial,sans-serif}</style>'
+' <span style="font-size:24px; font-weight:bold">'+ course +'</span><br>'
+' <span style="font-size:18px;">Notes - '+(d.getMonth() + 1)+'/'+d.getDate()+'/'+d.getFullYear()+'</span>'
+' <br><br>'
+' <span style="font-size:12px">'+ notes +'</span>');

Within the () after write you could really style your HTML however you want, but we take the variables we got in the first couple lines and insert them where we want them. So this pops open a new window in whatever browser you are using and it writes out the code in that HTML window. From here the learner just needs to hit print. Yes we do have to write it out in HTML before it can print so that is why there is an extra print. The button inside Storyline you could name something else like generate printable file or something like that.

That is it! So now if you wanted to create some HTML file or generate a certificate you could do that was well using this same type of method.

Leave a Reply

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