6 Steps on How to Make a Printable Results Page in Articulate Storyline

Interaction

Making a custom print page in Articulate Storyline is a great way to show results for your users. By results I mean tracking user data and printing off user’s answers to questions for later review. That means you can create a FAQ, a quiz, user notes, or any kind of user input interaction to be printed. This gives the user has a unique take away from your course that they created for themselves. This post will show you six steps on how to make your printable results page awesome.

Step 1: Download the Zip File

Download the zipped file PrintPageBlog.zip .

Within your zipped file we will mainly use the following files:

  • story.story file
  • The Publish folder
  • HTML file print.html*
  • image logo.png*

*Found inside the Publish folder.

Step 2: Incorporate Your Own Variables in Your .story File

Create your variables for the text entry boxes. I named these variables: TextEntry1, TextEntry2, and TextEntry3. Make sure to make your variable type as “text.”

variables

Step 3: Make Three Layers

Make three separate layers for each question and place a trigger setting for the variables TextEntry1, TextEntry2, or TextEntry3 to the typed values.

Triggers of Three Layers

 

Notice I’ve inserted a print button so only after the learner is finished typing it will be active. To clarify how this print button becomes active, it needs three triggers in the “base layer.” These three triggers need to check whether the questions have been answered.

When the user puts text in TextEntry1, TextEntry2, or TextEntry3 these triggers will automatically check whether the other two entries have text or not. Once they are all full of text, the print button will become active for the user.

 

Untitled-2v2

Step 4: Activate Print Button to Execute JavaScript

Once the print button is active it needs to have an “Execute JavaScript” trigger attached to it, such as the example below:

execute java script

 

Step 5: Open JavaScript and Add Your Questions in Storyline

Open your JavaScript in Storyline and change questions to match your content. Inside JavaScript will be as follows:

var player = GetPlayer();

var header = “Title of the Slide~~”

var args =(

“Question 1?~~” +

player.GetVar(“TextEntry1″) +

“~~Question 2?~~” +

player.GetVar(“TextEntry2″) +

“~~Question 3?~~” +

player.GetVar(“TextEntry3″)

)

var url = (“print.html?=” + header + args);

window.open(url,”_blank”,”width=800,height=600,menubar=no,scrollbars=yes”);

javascriptInclude

 As you can see, I used Question1, Question2, and Question3 as place holders for you to put in your own questions.

Step 6: Add Two Files to Your Published Folder

In your published folder you will need to add two files.

  • HTML document (needs to be named print.html)
  • A logo (needs to be named logo.png)

For now just know that the print.html document works and it is found in the publish folder I provided.

Once you have a logo name it logo.png.

Now that you have your logo.png and your print.html files, drag and drop them into the “root folder” of your published file version. The files should be organized in your published file version like this:

 

BryceBlogPic

After you have published out your story and placed the two files in that root folder test it out yourself. Now a user can print out the questions and answers in a print friendly document.

print sample

53 Comments

  1. Great info thanks!!! Question I would like to take this a step further… I have custom feedback for each answer user selects. How can we get the feedback to print also.

    For example :

    Question 1: This is my answer. This is the feedback based on my answer

  2. I enjoyed the Tutorial, very easy to follow
    Is there a way of passing new lines entered in the textEntry boxes to the Print.html?
    They just end up on the same line at the moment
    Thanks
    Doug

  3. Fantastic info! Thanks!
    Will this work in all browsers?

  4. Yes, it’s been tested in all browsers as early as IE 8.

  5. Yeah, let me check into that. Also, are you not seeing line returns in your text entry box (in your course) OR are your line returns no showing up in the actual print page?

  6. That is an awesome question.

    To answer this in short. What you need is a variable that will change its content depending on the answer that was chosen. Then all you need to do it take that variable and put it in the execute java script shown in this post.

    This is kind of a broad answer and might take a little bit more explaining. I’m thinking I will be able to address this in more detail in my next blog post. Thanks for your comment!

  7. This works great unless the user is entering a long paragraph of text into each box. In this case on my webservers it trigger an error because the data is sent by URL which is says is too long. Would a POST method work instead for longer text?

  8. Hi !!

    Can somebody help me wthis regarding Articualte Storyline pl…

    Dear Community Members,
     
    I am building a test generator program…
     
     
    The Report.html is showing those survey based slides questions also which the user skipped ….
     
    I wanna show only those slides to appear in the Report.html page
    where there was a response from the user…That is only those questions in a survey slide should appear
    Which the user selected from a slide and not otherwise for my test generator program…
     
     
    Thanks,
     
    Sam Jay
    India
    sumeet_jay@hotmail.com

  9. From what I understand, you want all the test questions and answers on one print page. In that case, have the print function at the end of the course after the user has entered in all their answers. Instead of on the same page. If you have any further questions, let us know.

  10. Great script but it does not work for me. At all. NOTHING happens when I click the Print button. Is it possible to use numeric variable too in this example?
    I know nothing about javascrips so I wonder if it is correct that there should be no ~~ in front of the header and in front of question1. The other two questions have ~~ on both sides.

    br

    Gustaf

  11. Hi. It is a great script and it work in preview and when I made a link to it from our LMS but when I tried to open it as a course from the “Learning Tree” it wouldn’t open the script.

    Please help

    Regards
    Martin

  12. Hey! I’m at work browsing your blog from my new iphone 4!
    Just wanted to say I love reading your blog and look forward to all
    your posts! Keep up the excellent work!

  13. To make it work you have to edit the first and last lines, removing ‘window.top’ from the first one, so it just reads:

    var player = GetPlayer();

    and taking out the ‘top’ from the last line so it reads:

    window.open(url….. etc);

  14. I seem to be running into trouble when I add the print.html and logo.png file to the zip package and then upload into the LMS. The package fails when I add those two files and doesn’t launch. When I remove those files, the package uploads correctly.

    Can anyone help?

    On a side note, I did test outside the LMS environment and it works slick!! Thanks for this.

  15. Update: I figured out the problem…
    After I added the two files, I was zipping the folder they resided in. Per Articulate’s website:

    “If you manually zip the output files, make sure to only zip the contents of the output folder, not the folder itself.”

    Once I only zipped the contents, it worked just fine. Hope this might help someone in the future.

  16. Thanks so much Jennifer! Can I get a round of applause for Jennifer? Nice work!

  17. This is a great resource! Thank you for sharing it!

    And thanks to Jennifer, too! Without her comment, I think I would have had the same problem. :)

  18. I’d like to print a certificate of completion from the results page. I do not need much besides a title, the course name, a student name, total score, and date. Any ideas?

  19. Hi Rick, thanks for your comment. I think you are referring to your LMS. That is a feature within your LMS.

    Don’t forget to use one of our certificate templates from the Template Library. Let us know if you need anything else.

  20. Hi i am facing the same problem that Jennifer was facing and i tried to do as Jennifer mention in above comment but i am not able to figure it out can Jennifer or anyone help me to resolve it out?

  21. What Jenifer was saying, is that if you select just the output folder to zip up you will experience problems. What you need to do is open the output folder select all the files and folders inside that folder, then you can select “Compressed (zipped) folder” (on a windows machine). So, it will only work if you zip the contents of the folder not the folder itself.

    Does this help?

  22. This is how Jennifer figured out the problem:

    “After I added the two files, I was zipping the folder they resided in. Per Articulate’s website: ‘If you manually zip the output files, make sure to only zip the contents of the output folder, not the folder itself.’ Once I only zipped the contents, it worked just fine. Hope this might help someone in the future.”

  23. Sorry, I have done the same process but it’s not working correctly. When I added both files and uploaded it to the SCORM CLOUD, the Print.html file doesn’t launch. Is there any alternate way to do this? Any suggestions?

  24. Hi Amar, thanks for reaching out to us about your questions. There are a few solutions to this in the comments section but let me check with my developers to see if there is another possible obstacle you may be encountering. I’ll get back to you soon.

  25. Hi Amar, I got a hold of one of our developers and he suggests sending him your published files to support@elearningbrothers.com. Once we have the file, we can take a look at it to see what issue you might be having. Thanks!

  26. I’ve followed the instructions but the print button doesn’t seem to work – nothing happens when I press ‘print’. I then went to your sample file and opened the IE story icon file, and the same happened – no action when I press print :( the player in IE is Flash – could this have something to do with it?

  27. Hi Rachel, thanks for reaching out to us. Please send your published files to support@elearningbrothers.com and explain the issue you are having. Once we have the file, we can take a look at it to see what issue you might be having. Thanks!

  28. Thank you for this great resource! I am also wondering about using a numeric variable in this situation. How does the code need to change to use a number instead of a text value?

  29. Hi Nick, thank you for your comment. What exactly did you have in mind doing with the number value? What would you use it for? If it is just placing a number in the Text entry field you wouldn’t have to do anything different.

  30. Hi,

    I made some test today. On windows (with Parallels desktop), everything run fine. But on macos, I try with some browsers (firefox, Chrome) offline and it doesn’t work.
    I have an error message saying “custom javascript was disabled on your local browser beacause…”.

    Is it possible to make a “Printable Results Page” and use offline with macos browser ?

    Best regards.

  31. Hi Clémentp, thank you for your comment. Unfortunately, Javascript can’t run offline through Storyline. A server needs to support Javascript. Have a good day!

  32. I can get the script to work with Firefox. While the print page does pop-up in IE 10, it is blank. It does not come up at all in Chrome.

    Also, while it is a print friendly page in Firefox it does not actually trigger the printer dialogue. Should it? If not, is there a way to add that option?

    Thanks!

  33. Awesome help here! Thank you! The key (relative to other such posts) was placing the print.html file in the published folder (other sample scripts have you point to a file on your hard-drive). The other thing I learned is, for my current versions of Chrome and Firefox, I need to point at the story_html5.html page in order for the pop-up to open (i.e., script to run as it should). IE works fine when pointing directly at story.html.. This may be a plugin/browser setting issue but, if I have the problem, users will likely, too… Again, thanks!

  34. Um. As I understand things, Javascript is a client-side language; not server-side. Thus, it can run without an internet connection.

    I might be wrong (have been before :), but I think Clémentp’s issue is just a setting in his browser.

  35. Thank you for your comment Richard! It is good to hear you learned something new. Let us know if you need anything. Hope that you have a good day!

  36. Thanks for the tip Richard. If Clémentp needs any more help I will let him know. Thanks for jumping in and helping the eLearning community.

  37. Hi Karen, thanks for the comment. Have you placed it on a server yet? A lot of the issues most people are having is because they haven’t put it on a server. If you continue to have issues send us a link to support@elearningbrothers.com and we can see what is happening. Thanks, and have a good day!

  38. Silly me; I had pop-ups blocked in Firefox… all is grand now… I am curious about how to send better formatting instructions to the print.html page (after monkeying around without great success with the placement and number of titles)… I will stop (for this week, at least)… thanks so much for this discussion platform, though! Really helpful.

  39. Putting it on a server took care of the blank page issue in IE10. I also edited the print.html page and added window.print(); directly after and now a print dialogue window comes up along with the print friendly page! Thanks!!

  40. Thank for your comment Richard. It takes a little time to test and try things out a bit. Yes, and good job on figuring out the pop-ups setting. The thing with this tip is there is always things to improve and test. Let us know of any discoveries you find. Hope you have a great day!

  41. Hi Karen, so glad you fixed your blank page issue. Putting it up on a server seems to be the most helpful solution if you are having issues. Oh! The window.print(); addition sounds awesome. Thank you for sharing that tip with us. Have a good day!

  42. Thank you very much for the detailed tutorial.

  43. Hi Patricia, you are welcome. Thank you for the feedback. Hope you have a great day.

  44. Hello,
    Thank you you the tutorial, this is exactly what i need for the project i’m working on. Unfortunately, I dont know my way around the LMS very well. If there was a video tutorial for it, I’ll really appreciate if you direct me there. Thanks

  45. Hey Silas!

    Each LMS is going to work a little differently from another, so a lot of it is dependent on which one you’re using. Most LMSes should have some tutorials on their website to familiarize you with their product. Which one are you using? We might be able to help find some videos to help you out.

  46. Thanks for your response Brother Shawn.
    I’m using Articulate storyline 2.

  47. No problem, Silas! I’m going to have someone whip up an email to you with some resources that hopefully you might be able to find helpful.

  48. Hi Brother Shawn,
    I discovered this thread with great enthusiasm, since this function is exactly what I needed for an eLearning course I am currently working on. However, our course comprises some more questions, so I thought I could simply add as many TextEntries as I want to the course.

    My code is then as follows:

    var player = GetPlayer();

    var header = “Your Results~~”
    var args =(
    “Question1~~” +
    player.GetVar(“TextEntry1″) +
    “~~Question2~~” +
    player.GetVar(“TextEntry2″) +
    “~~Question3~~” +
    player.GetVar(“TextEntry3″) +
    “~~Question4~~” +
    player.GetVar(“TextEntry4″) +
    “~~Question5~~” +
    player.GetVar(“TextEntry5″) +
    “~~Question6~~” +
    player.GetVar(“TextEntry6″) +
    “~~Question7~~” +
    player.GetVar(“TextEntry7″) +
    “~~Question8~~” +
    player.GetVar(“TextEntry8″)
    “~~Question9~~” +
    player.GetVar(“TextEntry9″) +
    “~~Question10~~” +
    player.GetVar(“TextEntry10″) +
    “~~Question11~~” +
    player.GetVar(“TextEntry11″) +
    “~~Question12~~” +
    player.GetVar(“TextEntry12″)
    )

    var url = (“print.html?=” + header + args);

    window.open(url,”_blank”,”width=800,height=600,menubar=no”);

    This worked out pretty smoothly when I only used 4 TextEntries. However, it doesn’t work anymore when I go up to 12 questions.

    Is there a “maximum” to the questions? Do I need to make any changes to the code such that Storyline can handle more than 4 TextEntries?

    Your help would really be appreciated since I am getting really frustrated looking for my possible mistakes :)

    By the way: I am running into the same problem with using JavaScript for emailing results (with 4 TextEntry fields –> no problem; as soon as I go up to 12 –> doesn’t work anymore). This is the code I am using:

    var email=”Usermail”;
    var subject=”My results”;

    var player = GetPlayer();
    var notes1=player.GetVar(“TextEntry1″);
    var notes2=player.GetVar(“TextEntry2″);
    var notes3=player.GetVar(“TextEntry3″);
    var notes4=player.GetVar(“TextEntry4″);
    var notes5=player.GetVar(“TextEntry5″);
    var notes6=player.GetVar(“TextEntry6″);
    var notes7=player.GetVar(“TextEntry7″);
    var notes8=player.GetVar(“TextEntry8″);
    var notes9=player.GetVar(“TextEntry9″);
    var notes10=player.GetVar(“TextEntry10″);
    var notes11=player.GetVar(“TextEntry11″);
    var notes12=player.GetVar(“TextEntry12″);

    var content=”Topic%0d%0A%0d%0A”;
    content+=”Topic1:%0d%0A”+notes1+”%0d%0A%0d%0A”;
    content+=”Topic2:%0d%0A”+notes2 + “%0d%0A%0d%0A”;
    content+=”Topic3:%0d%0A”+notes3 + “%0d%0A%0d%0A”;
    content+=”Topic4:%0d%0A”+notes4 + “%0d%0A%0d%0A;
    content+=”Topic5:%0d%0A”+notes5+”%0d%0A%0d%0A”;
    content+=”Topic6:%0d%0A”+notes6 + “%0d%0A%0d%0A”;
    content+=”Topic7:%0d%0A”+notes7 + “%0d%0A%0d%0A”;
    content+=”Topic8:%0d%0A”+notes8 + “%0d%0A%0d%0A”;
    content+=”Topic9:%0d%0A”+notes9 + “%0d%0A%0d%0A;
    content+=”Topic10:%0d%0A”+notes10+”%0d%0A%0d%0A”;
    content+=”Topic11:%0d%0A”+notes11 + “%0d%0A%0d%0A”;
    content+=”Topic12:%0d%0A”+notes12;

    var mailto_link=’mailto:’+email+’?subject=’+subject+’&body=’+content;

    win=window.open(mailto_link,’emailWin

    Henning.

  49. Hiya Henning!

    I’m going to copy/paste this one into a support email (which I will CC you on). Hopefully we can have a little more back and forth with one of our developers so we can get it resolved. :)

  50. Hi there. I am trying to use this in Storyline 2, but I can’t seem to make this work. Any thoughts?

  51. Hi Kristen!

    That all depends on what’s not working. Are you able to get any of the code working? Is there a particular step in the process that you’re having trouble with? We are going to need some more details before we can really help you tech through this. Thanks!

  52. Fantastic piece just what I need but has the issues for people who couldn’t get anything to happen when they clicked on Print been resolved, I have the same issue. Works for the sample file but for my articulate file i created when i copy the files over and then launch nothing happens?

  53. Hey Lyn!

    The dreaded “nothing happens” issue could be indicative of a few different problems. We would need more information (and potentially your new code) on what exactly you’ve done and what the outcome is. I would suggest sending in a ticket to our Support folks (support at elearningbrothers dot com) with as much information about what you’ve done in trying to integrate in your own Articulate files as possible. I would also make sure to reference this blog. Hopefully they can help get you through this!

Trackbacks/Pingbacks

  1. Showcasing Our Award-Winning eLearning Development Course - eLearning Brothers | eLearning Brothers - […] course and show you how this was done. A few of our favorites elements of this course was the …

Submit a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pin It on Pinterest