Printable / PDF-exportable quizzes

[seth]

This idea has been developed and deployed to Canvas

The Quiz Build page provides quiz printing options. For more information, please read through the  Canvas Release Notes (2021-08-21).

---

As an instructor, I want to be able to export a Canvas quiz as a PDF. This would enable me to easily print quizzes for the purpose of accommodation, for allowing a given student to take a quiz outside the timeframe established for the quiz for all other students, etc.

transferred from the old Community

Originally posted by: Pacific Union College admins

Special thanks for contributions from: Betsy Walker, John Louviere

Community Team Note: This idea remains open for voting. A virtually identical idea was moved forward for consideration in March: https://community.canvaslms.com/ideas/7285-exporting-quizzes-into-word-or-pdf-documents  Contrary to our customary practice, we are allowing both ideas to continue to move forward. Votes and feedback from both ideas will be evaluated.

[G_Petruzella]

Hi all -

In the spirit of community, sharing, hacking, etc., I want to share a half-baked bit of JavaScript that produces a print-friendly version of a Canvas Quiz. The attached screencapture is proof-of-concept only - it won't work, at the moment, in a production environment for various reasons - but I'm sure there are much smarter coders out there who could solve the issues. But the code does work (in a controlled environment) - it's not a mock-up or photoshop job.

First the video demo:

0:01-0:23: the typical experience of browser-printing a Canvas Quiz. Kludgy and long.

0:24-1:00: the print-friendly end-product of the script, and how browser printing looks with it.

Video Demo of Print-Friendly Quiz

Now, the script:

<script>
function printQuiz() {
  var quizUrl = document.getElementById("quizUrlInput").value;
  var quizUrl = quizUrl + "/take?preview=1";
    var zed = document.forms.namedItem("submit_quiz_form").outerHTML;
    var zed = zed.replace(/Links to an external site\./gim , "");
    var zed = zed.replace(/class=\"screenreader-only\"|class=\"form-actions\"/gim , "hidden=\"hidden\"");
    var zed = zed.replace(/class=\"accessibility-warning screenreader-only\"/gim , "hidden=\"hidden\"");
    var myWindow = window.open();
    myWindow.document.write("<p>Here is the printer-friendly Quiz - use your browser's Print feature:</p>" + zed);
}
</script>

Some notes:

The core of it is knowing that, in a Canvas Quiz, the important stuff (content) is contained within

<form id="submit_quiz_form"> ... </form>

Then, using the replace() method to scrub out some stuff that ought'n't be printing;

Then, opening a new browser tab and throwing the results onto it as plain-vanilla HTML.

The undone bit has to do with running that method out to some other webpage, which poses security issues; I cheated in the screencapture by pasting the Canvas Quiz code into a hidden <div> on the very page where I was running the script.

Anyway, I hope it helps some. Alternatively, feel free to immediately tell me why this would never work in production, so I don't get anybody's hopes up.

[jbuchholz]

Gerol,

This is terrific! I know that some of the tags that Canvas uses changed. This impacted one of our vendors and once we all jumped on a call we were able to figure out the error and make the necessary corrections. I bring that to the table in the hopes that it is something similar. Maybe talking with your CSM would be a good place to start or taking this to the next level may be appropriate. I support your efforts and I would love to help in any way that I can.

On a side note, we should all get together and build a better attendance app/feature that we can give back to the community since the one that I was hoping for has yet to materialize........cough, cough.

Jesse

[awilliams]

 @G_Petruzella Welcomeback friend!! It's great to see you and I love what you've got going on here.

[G_Petruzella]

Hi  @jbuchholz -

Thanks! Yeah, it's always a bit dicey relying on tags one doesn't control. But I'm interested in tinkering with it, at least building the general mechanism.

[G_Petruzella]

awilliams! Thanks man. It's been a little crazy busy in my world, hence my low profile. But I just can't stay away, I guess. :smileygrin:

[kmeeusen]

Hi Gerol, and ditto on what Adam said!

suspected you had dropped off the edge of this flat Earth. Glad you are back. Will we see you in Colorado this year? The theme is Carnival, so we should have a very good time!

Kelley

[G_Petruzella]

Heya Kelley! I'm certainly hoping the stars align to get out to CO again. It sounds like it'll be fun as always.

[G_Petruzella]

OK, so I've made a step forward. I now have a fully-deployable end-user solution for anybody to test, tweak, and use. I'll share that code below, as well as describe a couple of its limitations.

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.

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.

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.

The code.

javascript:(function printQuiz(){
var zed = document.querySelector("#submit_quiz_form").outerHTML;
var zed = zed.replace(/Links to an external site\./gim , "");
var zed = zed.replace(/class=\"screenreader-only\"|class=\"form-actions\"/gim , "hidden=\"hidden\"");
var zed = zed.replace(/class=\"accessibility-warning screenreader-only\"/gim , "hidden=\"hidden\"");
var myWindow = window.open();
myWindow.document.write("<p>Here is the printer-friendly Quiz - use your browser's Print feature:</p>" + zed);
})();

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.)

[kona]

 @G_Petruzella , could you create this as a document? That way it's much easier to find and refer to this absolutely amazing resource!!

[G_Petruzella]

https://community.canvaslms.com/docs/DOC-14052-printable-quizzes-code-snippet 

Now just gotta make sure it's visible beyond the Instructional Designers group.