Print Canvas Quizzes UserScript

[chadscott]

Print Canvas Quizzes is a script that will allow a user to print a quiz from the preview page.

1. Features
   1. Adds a "Print Quiz" button below the question navigation pane
   2. Auto-page break: This will keep all question content on the same page and prevents a page break in the middle of a question
   3. The page is set to zoom to 74% to make it sized appropriately for printing
   4. Hides "This is a preview..." banner
   5. The print dialog will automatically pop-up for the user
   6. Adjusts certain question types for legibility and space efficiency 
      • Multiple Choice: Left aligns choices, all one column
      • Matching: Removes drop-down menu and creates an "answer bank" at the bottom of the question box
      • Multiple Dropdowns: Expands the dropdowns to width and height of content
2. Limitations
   1. The quiz must be viewed from the "Preview Quiz" page
   2. All questions must be visible on the page, which means the "Show one question at a time" must be unchecked
   3. Currently, the zoom level of the page is not editable by the user, except through the printer dialog window
   4. Not usable in the Quizzez.next LTI

If you want to print canvas quizzes, do the following –

Install tampermonkey chrome extension

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

Then copy/paste or open this link in Chrome
https://github.com/sukotsuchido/CanvasUserScripts/raw/master/printCanvasQuizzes.user.js

A tampermonkey install page will pop up, click “install”

To Print – make sure “show one question at a time” is Unchecked in quiz settings

Click “Preview” on the quiz page

On the right side, there is now a “Print Quiz” button

If you want to deploy to all staff, copy the script into the custom Javascript folder.

As always, I welcome feedback and improvements. This is something our teachers were absolutely demanding and this was a rudimentary attempt at giving them something usable.

Enjoy!

 @G_Petruzella ‌ has created a bookmarklet that also allows for printing quizzes. It was his post that reminded me I needed to share this out!

[kona]

Thank you!! I'm already using Tampermonkey, so this was quick and easy to install! I then went to one of my quizzes, clicked the preview button and there it was PRINT! Less than 2 minutes total and I was printing my first quiz! 🙂

[ejackson]

I have Tampermonkey installed so decided to install this script and try it out. It installed in seconds and works beautifully! Thank you for sharing this, it will definitely help me out in the future.

[lindalee]

 @chadscott ‌,

Oh this is brilliant! Like Kona and Elizabeth, I already use Tampermonkey, so it was easy to install and try this out. For those (albeit rare) times when we need to print out a quiz, this will be save us so much time compared to manually making sure that quizzes are properly formatted.

THANK YOU!

-Linda

[thompsli]

Thank you for creating this script! My only criticism is that I end up having to edit the "submit quiz" button back in after printing the quiz so I can then print the answer key for that quiz (I use a lot of multiple choice/numerical answer problems drawn from test banks with multiple versions for each problem). I'm not sure of a particularly good way to avoid printing the submit quiz button but keep it there on the webpage, and it's really not a problem for me to hack around in the div afterward to make it show again, but that's a step some other teachers might not feel comfortable taking.

[James]

 @thompsli , use @media print {} block in the CSS. With that you don't need to hide anything on the screen, you just use the CSS within the @media block to style it how you want it for the printer.

[thompsli]

Thanks! I'm still learning all of the ins and outs of CSS (I'm more of a low-level C programmer/mathy algorithms in pseudocode person than a web developer by background). If I have time, I see if I can get that working sometime in the next few weeks. If I do, I'll posted the modified code here. 

[James]

I suspect that most of what the script does could be accomplished using CSS. Anything that has a .style. in it probably could be wrapped in a @media print {} block and then just inserted into the documents stylesheets. The JavaScript stuff like adding a print button or opening the print dialog cannot be done through just CSS, but if the CSS is set right, then you could just the browser's print capability without needing to add a button. One thing the button does is hold off inserting the CSS unless you're going to print, meaning that you could still print the page the normal way if you wanted to. But since Canvas doesn't really support printing, it's questionable as to whether or not you would want to.

[cohenf]

Wow! I cannot thank you enough! I had to do this for students that needed a special accommodation. Thank you.

[chadscott]

You are totally right about the styling being doable with CSS via the @media print {} tag, which is why it baffles me why this isn't hard-baked into the source code.

[chadscott]

 @thompsli ‌ I had not thought of that use case. I only removed it since it was "clutter" for a printed version of the quiz. I will add it back in. Thank you for the feedback!

[James]

I think it goes back to the line that Canvas doesn't officially support printing.

I ran into that back in January 2016 and wrote this one-liner to keep the URLs from printing after a link.

@media print { a:link:after, a:visited:after { content: none; }}

I used the GM_addStyle() command to insert it, and there is probably a better way that doesn't require escalated privileges or that would work outside a user script manager. But at the time, I was going for quick and Greasemonkey / Tampermonkey made it easy to do. The only thing I ran into was that the CSS has to be on a single line to use the GM_addstyle().

[cohenf]

Is there a way to do this in Quizzes.next? Do quizzes in Quizzes.next already have a function to print quizzes in this way?

[chadscott]

 @cohenf  Quizzes.next is an LTI and is harder to work with. It doesn't have built-in print options. I will take a look and see if I can get this (or something similar) to work with it, but it may not be possible. I'll tag you in a response if I can get it going.

[cohenf]

Let me ask you this, please, as I tried looking it up. Can quizzes.next quizzes be imported by (migrated to) Canvas Quizzes? I couldn't find an answer in guides. I could only find that Canvas Quizzes could be migrated to quizzes.next. Anyhow, if so, then a workaround is to import a quizzes.next quiz to Canvas Quizzes and then using your script. If not, then please don't bother trying to devise something. I, personally, don't want to put you out, as I plan on very infrequent use of quizzes.next and, rarely, anyway, do I need a printed copy of a quiz. Thank you. -Frank

[chadscott]

as far as I know, there is no way to move quizzes.next around.  

[smartell]

Thanks!  We are required to give a hard copy of our finals to administration at the end of the year.  Last year, I was new to Canvas and didn't know of a way to do that, so obviously I will be better able to facilitate that this year!  Thanks!!

[isaac_piercy]

What are my options for printing a student Quiz submission attempt (found in SpeedGrader)? Will this work in that scenario? If not, have you had luck with anything else?

Thanks!

[chadscott]

This won't help with that unfortunately because the speedgrader renders the quiz differently. I've not tried to print a quiz result from speedgrader in the past and I'd suggest making a new Question post so others will see it.

[ronmarx]

 @chadscott ‌, why isn't this working for me?

1. Enabled and updated TamperMonkey.

2. Installed the script.

3. Entered preview mode with correct settings.

4. Note screen shots below; Print Quiz button doesn't appear.

TamperMonkey script install verification:

Thanks for your help.

[chadscott]

I'm at a conference today, but I'll take a look this evening. I did update it recently, so I may have goobered something.

-Chad

[chadscott]

Howdy,

I reverted the script. I’ll figure out what I did later.

https://github.com/sukotsuchido/CanvasUserScripts/raw/master/printCanvasQuizzes.user.js

It will ask you to downgrade your script, just click downgrade and you should be good to go.

Thanks,

Chad

[bogardde]

Hi Chad,

Just checking in to see if you had found a way to print Quizzes.Next. Asking for a friend  . Thanks!

[chadscott]

bogardde‌ Nope, not yet! I'll have some time this summer, so I'll take a look then. The problem lies in that it's built as an LTI and so manipulating items on the page becomes more difficult as it's rendered differently than the traditional quiz feature.

[susan_oconnell]

Hi Chad,

Thanks for doing this - I've used the Print Quiz feature for the past year and it's been wonderful - but yesterday my school district disabled Tampermonkey. Is there any other way to use this script?

Thanks for any advice,

Sue

[James]

 @susan_oconnell  

  
• You can talk to the people at your school and make your case as to why this is beneficial or necessary and see if they can re-enable Tampermonkey -- either for everyone or just for you.
  
• You can see if they will install a version of it in the global custom JavaScript so that everyone has access to it. They then have to maintain it if it breaks. Those are potentially a couple of downsides, so they may not be willing to do this. That's where the case for userscripts get more powerful. It's up to the user to maintain and it keeps it out of their control. On the other hand, some people want a lot of control over their networks to keep bad things out, so it's not always a clear-cut case.
  
• You can access it from a personal computer that they don't control. This computer may not have access to the school's resources to print things.
  
• You can try a different browser and see if they've blocked loading it there. Tampermonkey runs on Chrome, Firefox, Edge, and Safari. Of course, this is getting into ways to skirt the law rather than changing it and the people who locked it down in the first place may not appreciate it.

[troyer_59]

This script used to work for me and now it does not. Any others experiencing the same? Tampermonkey is still installed and so is the script, but I don't get the "Print Quiz" button. Any other tips for getting a printable version with the lovely pagination that ISN'T taking a bunch of screen shots?

[chadscott]

Click here to make sure you updated to 1.2 - Iet me know if you still have trouble.

[troy-carroll]

I was having the same problem. I'm late to the party and just discovered your script today. I use TamperMonkey for other userscripts, and confirmed I have version 1.2. What I believe to have discovered is that the print button is only showing for quizzes that are not published. Every unpublished quiz that I previewed would show the button. Published quizzes would not, or as soon as I would publish a quiz, the button wouldn't show.

[lgines]

Hi, Chad. Thanks so much for sharing this! For quiz questions where I included dropdown menus, none of those dropdown options appear when I use this script to make a pdf version of the quiz. Might there be a way to use this script to make a shareable version of a Canvas quiz where all the dropdown options appear? Thanks!

Leoned

[chadscott]

Hmmm, it should work for all dropdowns... but maybe I missed a question type? What question type is it not working with? For matching, it makes a bank to use. For dropdowns, it should expand the dropdowns to show all options.

[lgines]

Cool, that's exactly what I want the pdf version to look like! Here's what happens when I try to do that<https://www.youtube.com/watch?v=8pZL1mbYYE0>. Would appreciate your thoughts on what I might be doing differently than you. Thanks much! -Leoned

[chadscott]

Leo, the bookmarklet was developed by  @G_Petruzella ‌, so I can't really help with that one. I tagged him and hopefully will chime in.

[lgines]

Great, thanks!

Leoned Gines

Biology Instructor

Shoreline Community College, Room 2815

www.shoreline.edu<http://www.shoreline.edu>; | 206.546.4543

Pronouns: he, him, his

[jen_wong]

I am having the same issue when I tried to print a quiz today, it worked perfectly before. It was the same for published and unpublished (classic) quizzes.

[trevor_inso]

Hello Chad,

Thank you for making this script. However, I tried it and I did not find a "Print Quiz" button under the question pane. I'll explain the steps I did below. Please tell me if I'm doing anything wrong. If anyone else can help me, please do so. 

1. I installed the Tampermonkey extension

2. I opened this https://github.com/sukotsuchido/CanvasUserScripts/raw/master/printCanvasQuizzes.user.js in Chrome. I clicked "Install" (and then the tab closed).

3. I went to my quiz in Canvas, and clicked "Preview", but I didn't see a "Print Quiz" button. There are 2 "Preview" buttons; I clicked both, but still did not see a "Print Quiz" button in Canvas

I'm using a Classic Quiz, and the "Show me one question at a time" is unchecked

I'm also using Chrome and a PC.

Cheers,

Trevor Inso 

[giana_daniels]

Thank you so much for this. When I did it, it worked like a charm....OMG I would not have figured this out on my own. So wish I had learned about this months ago I would've been better able to accommodate the students that needed a printed copy.. 

[samiamj]

Chad, Katy is so fortunate to have you.  I was going to retype all of my Canvas quizzes and tests until I saw this post.  You are a time saver.

[pelucchib]

Brilliant! you save my day. I am fully online now I and I have special accommodation students who NEED to have the quiz printed. Plus all the documentation my dept wants when I close the semester.  This solution actually produces a pdf where the questions do not get split over multiple pages. THANK YOU!!!!!

[SraMoreno]

This worked great! Thanks!

[pelucchib]

Thanks so much! it is great when you have students with special accommodation who NEEDS to have a printed copy.

[kaelkanzo]

Is this still working for anyone else? I had it working a week ago but the print button no longer shows up in Chrome. @chadscott 

Update: after further investigation, it appears to be an issue only impacting our production instance of Canvas. Works in our Beta and appears to be working in other Canvas accounts outside of ours.

[bowmanr]

@chadscott 

I really appreciate the script for printing out the blank quiz.

Is it possible to have an addition to this script - and another button to print the quiz with the Answers showing?

I do not know what is possible, just wondering if it is possible.  If it isn't that is okay.

Thanks,

Ron

[chadscott]

@bowmanr it might be possible, but it's not how this script is built based on the preview screen.

[bowmanr]

@chadscott 

I knew that about the way the script was written.  I am wondering if it is possible to read the information from the screen that comes up after you take the quiz in preview mode and it has the answers shown there?  I don't know how the information is obtained.  I am just tossing out an idea with a hope and a prayer.

If not possible, the print of the quiz in preview mode is still nice to have.

[bowmanr]

@chadscott 

Chad I just wanted to post this here and pass it on to you.  In playing around with your script trying to get the preview solutions to post, I came across a simple addition that will allow student answers to be printed.  I had no luck with printing out the preview solutions/answers, but I will still try.

In any case, if you add the following include line in addition to the one you have already, then when you are viewing a students submission in speed grader, the print button shows up and you can print out the student solution.

// @include https://*.instructure.com/courses/*/quizzes/*/history?quiz_submission_id=*

I decided to create a separate version of the script so that I could change the print button information to Print Student Answers and also Print Quiz Preview.  However, both includes in the same script with a generic print works as well.  If I knew more about how the information about the pages was obtained, and a little about javascript, I might be able to put an if statement in that would allow the name change in one script.

One last point (minor and does not matter for execution), but I hate seeing the yield signs and red X next to the first el. statement, the first temp statement and subsequent statements involving those variables.  just adding the var tag before the first instance of the variables removes the warnings seen in tampermonkey and the script still works.

Thanks again for a great add-on.

Ron

[klujam]

Not sure if I did something wrong, as the print icon went away on my quiz preview. The only thing I can think of is that it is because of making quizzes in canvas in the new format? Is there a way to make it work for those as well or should it be the same and I some how am not doing it right any more? 

[bowmanr]

@klujam 

This script only works with classic quizzes.  New Quizzes is not compatible with this script.