Add A Print Button To Your Printed Results

Oct 23rd 2009
3 Comments
respond
trackback

Here’s a little tip on how to further customize your Quizmaker report.html page with a Print Button. We saw in Customizing the Printed Results in Quizmaker ‘09 how we could adapt the content of that report according to our needs. In response to that article, Stacy asked if we could add a print button that the user could press on rather than having to go the sometimes confusing procedure of clicking on File -> Print etc.

Have a look at this two-question quiz and check out the Printed Results at the end.

View Print Results Button

The Print Results button at the bottom of the report brings up the printer-selection dialog box so the user can cancel the print if they wish.

How do you do it?

There are two ways to do this. Either

You manually add some code to the published files each time you publish a quiz or
You manually add some code to the program files so that each time you publish a quiz, the button appears automatically.

Let’s look at the second option as it is defintely less cumbersome to change some code just once.

Step by Step

Navigate to Program Files -> Articulate -> Articulate Quizmaker -> Content -> report.html

Change the name of the file to report_original.html

Copy the report_original.html file and place it on your desktop for editing.

In XP, you don’t need to copy the file, but in Vista, you may encounter permission rules when trying to edit a program file so copying and editing the file on the desktop will work around that.

Open the report_original.html file with Notepad (right-click and select “Open with” Notepad)

Copy the code below and insert it right at the end just before
the final </HTML> tag.

 
<br>
<br>
<body>
<style type="text/css" media="print">
.printbutton {
  visibility: hidden;
  display: none;
}
</style>
<center>
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print Results'/>");
</script></center>
</body>

Save the file on your desktop and rename it report.html

Copy the file and paste it back in Program Files -> Articulate -> Articulate Quizmaker -> Content

If you are using Windows Vista, you may need to give permission to your computer to copy the file into your program files.

That's it.

Now when you publish any quiz in Quizmaker '09, be it for the Web or your LMS, the Print Results button will appear in your Printed Results page.

If you want to remove the button, change the name of your report.html file to report_print_button.html and then change the report_original.html file to report.html. Quizmaker always looks for the file report.html. Then republish your quiz in Quizmaker.

Notes:

This method is not supported by Articulate. You need to be very careful when editing your program files. If you make a mistake or you delete your files by accident, you may need to reinstall the software. That is not a disaster in itself as your work will not be affected but just be warned.

The alternative solution mentioned above is to copy the code into your published report.html file. This will be located in the quiz_content folder of your PUBLISHED files which, by default, are located in My Documents -> My Articulate Projects.

You can change the button label by editing the appropriate words in the code.

Finally the code above was taken and adapted from this page. Thanks to Boutell.com.

This post is tagged

3 Responses

brian wrest says:

October 26, 2009 at 11:41 am

One thing to remember is to make a backup of the file before you place it back in the Program Files -> Articulate -> Articulate Quizmaker -> Content folder. That way if it doesn’t work… you can always “restore” the original with the backup.
Fraser says:

January 20, 2010 at 3:13 am

I must be doing this wrong, Dave, but I followed the instructions and couldn’t get a print button to appear.

I can get the button to appear if I tick the relevant check box inside Quizmaker’s Pass/Fail options however.
daveperso says:

January 25, 2010 at 6:14 am

Hi Fraser,

You need to check the “Allow user to print results” option the Pass/Fail options to get the Printed Report to appear but, even if you do that, there isn”t actually a button you can press on the report to print the results. You need to go to your web browser and select File -> Print etc. The purpose of this article was to put a button on the report itself to make it that much easier for the user to print. Let me know if I am missing the point you are making.

Daveperso’s Articulate eLearning Blog