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 a unique handout from your course that they created for themselves. This post will show you six steps on how to make your printable results page awesome.
Download the zipped file PrintPageBlog.zip .
Within your zipped file we will mainly use the following files:
*Found inside the Publish folder.
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."
Make three separate layers for each question and place a trigger setting for the variables TextEntry1, TextEntry2, or TextEntry3 to the typed values.
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.
Once the print button is active it needs to have an “Execute JavaScript” trigger attached to it, such as the example below:
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”);
As you can see, I used Question 1, Question 2, and Question 3 as place holders for you to put in your own questions. Also Title of the Slide is a placeholder that can be changed with your own information.
Do not replace or remove the ~~ symbols, though. These are important markers for the HTML document later.
In your published folder you will need to add two files.
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:
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.
