Printable Quizzes code-snippet

G_Petruzella
Community Champion
‎01-25-2018 11:47 AM
26
18872

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. Smiley Happy 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? 

26 Comments