Pages Navigation Menu

Awesome eLearning Templates and eLearning Custom Development

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

19 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.

  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.

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 …

Leave 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>

elearning_template