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.
So what is this code?
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.
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.
- The script grabs the content from the "taking" or "previewing" environment. If you're just viewing the Quiz, you won't get anything.
- 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".
- 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?
- Copy the code below.
- 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".)
- In the "Location" or "URL" field, paste the code, then save the bookmark.
- Navigate to the Quiz, and click the "Preview" button.
- 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.
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 Matt Hanes :) 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.)