Creating a Printable Notes Feature in Articulate Storyline

Creating a Printable Notes Feature in Articulate Storyline

17:12 17 September in Articulate Storyline, eLearning, mLearning, Storyline
12 Comments

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.

  1. //First we need to get the player. We do this in a variable called player
  2.  
  3. var player = GetPlayer();
  4.  
  5. //Now we need to add a variable for the course title
  6.  
  7. var course = "Starter_Course";
  8.  
  9. //Here we access the variable we have for our text entry fields so we can use it
  10.  
  11. var notes = player.GetVar("TextEntry");
  12.  
  13. //Now we need to create a new window which will be an HTML window
  14.  
  15. newwindow=window.open();
  16. //Couple more variables for date and the new window
  17. newdocument=newwindow.document;
  18. d = new Date();
  19.  
  20. //Javascript to write out the HTML in the new window
  21.  
  22. newdocument.write('<style>body{padding:20px;font-family:arial,sans-serif}</style>'
  23. +'       <span style="font-size:24px; font-weight:bold">'+ course +'</span><br>'
  24. +'       <span style="font-size:18px;">Notes - '+(d.getMonth() + 1)+'/'+d.getDate()+'/'+d.getFullYear()+'</span>'
  25. +'       <br><br>'
  26. +'       <span style="font-size:12px">'+ notes +'</span>');

Here is the code without the comments

  1. var player = GetPlayer();
  2. var course = "Starter_Course";
  3. var notes = player.GetVar("TextEntry");
  4. newwindow=window.open();
  5. newdocument=newwindow.document; d = new Date();
  6. newdocument.write('<style>body{padding:20px;font-family:arial,sans-serif}</style>'
  7. +' <span style="font-size:24px; font-weight:bold">'+ course +'</span><br>'
  8. +' <span style="font-size:18px;">Notes - '+(d.getMonth() + 1)+'/'+d.getDate()+'/'+d.getFullYear()+'</span>'
  9. +' <br><br>'
  10. +' <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.

Be Sociable, Share!
12 Comments
  • Ms. Diva2005 22:31h, 20 September Reply

    Do you have the steps outlined in a video?

  • jeff@kinetic-media.com 23:01h, 20 September Reply

    Not yet. It is on my list to do.

  • Nicola Avery 09:30h, 18 February Reply

    Hi,

    I had been trying to find something beyond printing the window which although it opens the printer dialogue box, it prints everything in that window. This is a nice alternative. As this opens a new window you can then have more options before pressing print.

    I was able to follow these instructions, I only have locally at the moment as I’m still working on the project (will post a link when it’s live); but it looks really nice, thank you very much !

  • Dave Bull 08:32h, 18 March Reply

    Hi Jeff,

    Love this! fantastic bit of work 🙂

    Just a quick question, do you know how to keep the formatting of the text box when it is transferred to the HTML page?

    Thanks

    Dave

  • Mark Jenkinson 02:46h, 30 March Reply

    Hi Jeff, this looks good, I tried following but couldn’t capture the input text in the browser that is launched, it only displayed the styling javascript, any chance of showing you my file? Maybe now the storline 2 is different as well causes a problem

    thanks
    Mark

  • Andy 16:05h, 16 April Reply

    Hi Jeff,

    Thanks for this great post I have used it as a starting point to create a notes button in a course I will be developing soon, but I have come across an issue with line breaks. I wonder if you have had a similar issue and if you have managed to solve it?

    My issue is that when a user uses line breaks within their notes, these aren’t stored or passed to the output properly, It all just gets pushed together into one continual note! As far as I can see there isn’t a way to address this because of the way it is being stored as a variable, but I’d love to hear if you have found a way around it!

    Thanks,

    Andy

    • Jeff Batt 19:35h, 18 April Reply

      Hey Andy – Do you have a file that I could look at? I would love to see what I can do.

      • Andy 10:00h, 21 April Reply

        I can share my test build with you sure, what is the best way of getting it to you?

  • Jeff Batt 01:27h, 07 May Reply
  • Hassan Mourad 11:47h, 03 May Reply

    Same issue here, we are using the same method but cant get past the fact that text variables in Storyline do not see line breaks.

    Any ideas how to make this work?

    • Jeff Batt 02:05h, 11 May Reply

      From what I know Storyline removes links breaks when it stores it in a variable. It may be feedback you could submit to Articulate. Sorry 🙂

Post A Comment