Printable Quizzes code-snippet

[G_Petruzella]

In response to a long-standing user need in the Canvas Community, I created the code snippet below. This Discussion (which is derived from this Document, which is pdf-able) documents a simple end-user solution to produce a plain-vanilla version of a Canvas Quiz, which is printer-friendly. I share the code below, as well as describe a couple of its limitations. 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.). Feel free to share your tweaks and improvements in this Discussion - I will probably do so myself.

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 it before relying heavily on it. Also, the code 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 Quiz "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.

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 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 01/26/2018: added code to (1) include Quiz instructions; (2) include date printable Quiz was generated; (3) insert space between questions.]

[fbantlevrms]

I have been trying this today.  I cannot get the link to work in Google URL.  Says I only get 32 words in a query.  I tried setting it up in a bookmark and pasting the code inside the bookmark.  It did not work.  Are there any ways to print a quiz besides using code?