Printable Quizzes code-snippet

[G_Petruzella]

In response to a long-standing user need in the Canvas Community, I cobbled together the code snippet below. This page documents a fully-deployable end-user solution for anybody to test, tweak, and use to produce a plain-vanilla HTML version of a Canvas Quiz, which is printer-friendly from a browser. I share the code below, as well as describe a couple of its limitations.

[for visibility, this document is duplicated as a Discussion in Q & A‌. There may be versioning discrepancies between them.]

So what is this code?

It's a bookmarklet - a tiny piece of JavaScript you save as a bookmark in your browser, then click to run when you're on the page where you want it to execute.

What does it give me?

A browser window containing the Quiz content in plain HTML. This can be either printed to paper, or saved as a pdf.

How is this useful?

As many have noted in the Idea forum, an easily-printable Quiz meets needs for accommodations and accessibility broadly, as well as students and schools in limited-connectivity or limited-hardware situations, and teachers and administrators in workflow and documentation situations which require hard copy.

Is any admin-level support/installation needed?

No - this code can be deployed by any Canvas user on their own.

Are there any browser-specific caveats?

Edge makes it annoyingly complex to manually create a bookmark(let). I honestly haven't found how to do it. The other browsers (Firefox, Chrome, Safari) are fine with it. I've tested the code in all 3 of these successfully.

Other caveats?

The usual: this is home-grown code, so I make no warranties. Test before deploying to production. Also, it relies upon the specific element id assigned to Quiz content as of this date - future changes to Canvas production code may break it.

So you mentioned limitations.

1. The script grabs the content from the "taking" or "previewing" environment. If you're just viewing the Quiz, you won't get anything.
2. The script grabs the Quiz questions that are loaded onto the screen - meaning it's great unless... your Quiz has selected "Show one question at a time".
3. There's zero capacity for handling anything to do with question banks, shuffling questions, etc. Straight-up wysiwyg.

How do I deploy and use the code?

1. Copy the code below.
2. In your browser, create a new bookmark. (In Safari, you'll have to create the bookmark from some random website, then go back and "Edit Address".)
3. In the "Location" or "URL" field, paste the code, then save the bookmark.
4. Navigate to the Quiz, and click the "Preview" button.
5. Once you're previewing the Quiz, click your bookmark, and watch the magic happen.

Can I see it in action?

Sure. Here's a 1-minute video demo.

The code.

javascript:(function printQuiz(){ 
var zed = document.querySelector("#submit_quiz_form").outerHTML; 
var zed = document.querySelector(".quiz-header").outerHTML + zed; 
var zed = zed.replace(/Links to an external site\./gim , ""); 
var zed = zed.replace(/aria-level=\"2\">/gim , "aria-level=\"2\"><br />"); 
var zed = zed.replace(/class=\"screenreader-only\"|class=\"form-actions\"|class=\"accessibility-warning screenreader-only\"|class=\"alert\"/gim , "hidden=\"hidden\""); 
var zed = zed.replace(/class=\"answer_input\">/gim, "class=\"answer_input\" style=\" width: 25px;\">"); 
var dt = new Date(); var dd = dt.getDate(); var mm = dt.getMonth()+1; var yy = dt.getFullYear(); 
var myWindow = window.open(); myWindow.document.write("<p>Printer-friendly Quiz generated: " + mm + "/" + dd + "/" + yy + "</p>" + zed); })();

[edit 02/13/2019: added code (courtesy of  @MattHanes  🙂 to properly align question answers.]

[edit 01/26/2018: added code to (1) include Quiz instructions; (2) include date printable Quiz was generated; (3) insert space between questions.]

Have fun, and I'd love to hear about how it turns out for you. It goes without saying, but anybody's free to share and tweak at will (for you geeks, I hereby license it under GNU GENERAL PUBLIC LICENSE Version 3. It's also hosted on my github.)

  Comments from Instructure

With the depreciation of Classic Quizzes in 2024, The Community Team would like to encourage Community Members to explore New Quizzes! Printing is included in the New Quizzes experience: How do I print a quiz in New Quizzes? 

[cstevenson]

Awesome!  Thank you

[jbuchholz]

Gerol,

Yes, Yes, YES!!!!! This is terrific and a great explanation of what you are creating and how it works. This is a great document and really gives a good foundation for what you are working on and the application of how it can work. 

Jesse

[G_Petruzella]

You're quite welcome! I hope it's useful.

[deb_maeder]

This code is amazingly wonderful.  Thank you so much for taking the time to create and share it!

[G_Petruzella]

Thanks  @deb_maeder ‌

[chadscott]

Great Job Gerol! Not to hijack your post, but this reminded me I needed to share my userscript for printing quizzes. I like the ease of use of yours since it's just a bookmark. I can see it being really useful for simple MC/FIB type quizzes, but it has issues with dropdowns and longer quizzes (creates some odd spacing issues).

[kbink]

Thank You!  We are planning on using Canvas as a Question bank for a class still giving paper exams.  I used your tool and showed the instructor the PDF printout, a doc with the the exam copied and pasted into a doc, and copied and pasted into a doc with formatting removed.  She said those would work and Would not require too much effort to make them pretty.  Thanks!

[G_Petruzella]

 @kbink ‌, I'm glad that it's turned out to be useful for you and your faculty! You're welcome - and I appreciate your letting me know.

[kroeninm]

Works great  @G_Petruzella ‌, I found a use for this today.  Also  @chadscott ‌ seemed to work well too.  Both are much cleaner than what I was coming up with on my own.  

Melanie

[tdcrow]

Thanks!  The ability to print a quiz made in Canvas is needed!  Until Canvas can add that feature, I will be using your code-snippet.  I followed Ms. Binkowski's suggestion, too.  

Thank You, Thank You, Thank You!!!

[BradMoser]

Dude.....this is rad!!!!            But seriously          

[cpadavano]

Did ayone else run into the following issue I have with the preview? I followed the directions, but maybe something is off? As you can see, the text is all over the place instead of next to the bubble.

Note, the following quiz was put into a Question Group and linked from a Question Bank. Does that have any effect on the code?

[kbink]

I've been digging through printing options again this week too.  An earlier comment sugggested that he could print directly from chrome pretty easily. My instructor said it was taking a lot of time to edit the test down.  We were looking for a quick, pretty looking, way that did not use up tons of pages.  So here's what I found.

Do the print preview from Canvas, then choose File, Print from Chrome.  In the print menu expand the more settings heading.  In there you can print two pages per sheet.  That helps cut down on the size of the print job.  All the images, the choice options, the circles to fill in all come across.  It looks just like the test.

One other option was if you have adobe pro.  You can print 1 page per sheet as a PDF and open that in adobe pro.  From there, you can print 4 pages per sheet, set to align vertically.  What that gives you is what looks like a two column multiple choice test.  The pages do have a separation but everything is lined up correctly. (Chrome 4 page lines them up horizontally and I couldn't find a place to switch that.)

Hope that helps.

Kalli

[MattHanes]

I think this might fix it, try this instead:

javascript:(function printQuiz(){ 
var zed = document.querySelector("#submit_quiz_form").outerHTML; 
var zed = document.querySelector(".quiz-header").outerHTML + zed; 
var zed = zed.replace(/Links to an external site\./gim , ""); 
var zed = zed.replace(/aria-level=\"2\">/gim , "aria-level=\"2\"><br />"); 
var zed = zed.replace(/class=\"screenreader-only\"|class=\"form-actions\"|class=\"accessibility-warning screenreader-only\"|class=\"alert\"/gim , "hidden=\"hidden\""); 
var zed = zed.replace(/class=\"answer_input\">/gim, "class=\"answer_input\" style=\" width: 25px;\">"); 
var dt = new Date(); var dd = dt.getDate(); var mm = dt.getMonth()+1; var yy = dt.getFullYear(); 
var myWindow = window.open(); myWindow.document.write("<p>Printer-friendly Quiz generated: " + mm + "/" + dd + "/" + yy + "</p>" + zed); })();‍‍‍‍‍‍‍‍‍

That's the code in my bookmark which I think I edited. It is also possible that I stole the solution from someone else...I honestly can't remember. 

[G_Petruzella]

Woohoo, thanks  @MattHanes ‌! I'm going to edit the original above to include your update.

[cpadavano]

Matt, you are awesome! It worked! The only thing everyone should make sure of is the text margin. I had aligned a picture to the center, so it till shows up in the center. But otherwise, everything else works great! 

Could you let me know what changed? I am trying to learn coding, so future reference on this would be great in case another adjustment needs to be made again.

Thank you,

[MattHanes]

Greetings cpadavano,

I'm not sure what changed on the Canvas side, but I added this line to force the answers to a particular spot on the page:

var zed = zed.replace(/class=\"answer_input\">/gim, "class=\"answer_input\" style=\" width: 25px;\">");‍

I had to Google what the /gim stuff meant but I learned a lot from dissecting this code-snippet. Thanks  @G_Petruzella !

[judy_harmon]

Just a word of thanks Gerol Petruzella, from Trinity Valley Community College in east Texas.  I used the code tonight to help a faculty member with 15 quizzes, each 100+ questions, and it worked smoothly.  Your instructions were clear and the video helped put it all together for me!  Now on to Spring Break.....!  Thanks again!

[G_Petruzella]

 @judy_harmon ‌, I'm so glad you found it helpful. Enjoy your spring break!

[jamie13]

This is such a great workaround! Does anyone know if it can be edited to align the radio buttons, etc., to align with the top line of each multiple choice answer? For answer choices that have more than one line, it is showing the radio button aligned with the middle, which looks confusing on some of the answer choices on exams I have been looking at.

[alan_zansler]

This is AWESOME, though Canvas really should have this option built in!  I have used your code for the "old" quizzes, but does anyone have a solution for the quizzes.next version of quizzes?  I have started to build quizzes in the new format, and I cannot find a way of printing, short of taking screen shots.

Thanks again!

[kbink]

It's worse than that. At least in classic quiz you could even print the

quiz preview in PDF or copy and paste. I don't think that works in new

quiz. You only get the part of the quiz showing on the screen. I haven't

found any way to get any printed version out of new quiz.

On Wed, Apr 15, 2020 at 12:47 PM alan.zansler@osceolaschools.net <

[acgottfr]

Is there anyway to print from new quizzes yet?  I built my first quiz of the term in new quizzes and would like to be able to create a pdf file with all of the questions so we can go through them as a class but....

[krislars]

Love this!  I needed to get 100s of quiz questions into a spreadsheet to keep track of data like dates assigned and item effectiveness.  Cutting and pasting out of this simple HTML output is so much smoother, and now I have a template and (even more) motivation to learn javascript to make my own CSV bookmarklet in the future.

[nhge]

@G_Petruzella Thank you for the code! I was able to use it to print a multiple choice quiz, but for every answer, the radio button is in its own line above the corresponding text answer. Is there a way to modify the code to make them appear on the same line? I would much appreciate your help.

[nhge]

@MattHanes I also want to bring my comment above to your attention. Please let me know if it is possible to make the radio button and the text answer appear in the same line. Many thanks!