Print Canvas Quizzes UserScript

chadscott · ‎02-01-2018

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

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

printquizzesdialog

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!

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?

ClaireFirman · ‎05-22-2023

Thank you so much for this. In South Africa we need to get our Tests and Exams moderated by an external body who do not have access to Canvas. Sending them pdf's is perfect. This makes it possible to create beautiful pdf's of our Tests and Exams from the preview.
To create pdf's of the student's work from Speedgrader I found that the gofullpage Chrome extension works perfectly. (It's a good idea to click on the three dots before using gofullpage on a student's quiz so that the marks and comments do not take up a whole column to the right of the quiz).

jlgathright · ‎03-01-2024

We just noticed that for every answer, the radio button is in its own line above the corresponding text answer instead of on the same line and the box that grouped the question/answer choices together is gone. We tried this in Chrome and Firefox and got the same result. Would love to know if there is a fix! (We are moving to New Quizzes...but haven't gotten everyone moved there yet!)Classic Quiz Showing Radio Button ABOVE Answer Choice

robotcars · ‎04-19-2024

Someone mentioned yesterday to me that 'questions no longer have a border'. Seems that was only true for Matching Choices, I found it necessary to make a few changes.

Chad is no longer around, he mentions this in his repo, but I'll contribute these changes here in case anyone wants to maintain some of this functionality.

added border around each question
removed 'Match Choices' as it's english specific
set the match choices across from each other for drawing a line between
bolded the Question to separate it from the points
set labels on the same line as the radio or checkbox @jlgathright
ok for either LTR and RTL language settings
no jQuery

(function () {
  function printQuizStyle() {
    // lang direction
    let dir = document.querySelector('html').getAttribute('dir') ?? 'ltr';
    let float = dir == 'ltr' ? 'right' : 'left';
    let padding = dir == 'ltr' ? 'left' : 'right';

    // add a border around each question
    [...document.querySelectorAll('div.display_question')].forEach(q => {
      q.style.border = 'thin dashed black';
			q.style.margin = '0 0 5px';
    });

    // add emphasis to the question number
    [...document.querySelectorAll('span.question_name')].forEach(qn => {
      qn.style = 'font-weight: bold';
    });

    // visually separate question points
    // in RTL language the question number lands in the middle of points, natively :(
    // [...document.querySelectorAll('span.question_points_holder')].forEach(ph => {
    // 	ph.style = `margin-${padding}: 20px; padding: 2px;`;//border: thin solid grey; border-radius: 15% 25%`;
    // });

    // radio and label on same line
    [...document.querySelectorAll('input[type="radio"],input[type="checkbox"]')].forEach(rd => {
      document.querySelector(`#${rd.id}_label`).style = `float: ${float}; clear: none; display: inline; padding-${padding}: .5rem;`;
    });

    // collect and display options for matching questions
    [...document.querySelectorAll('div.matching_question')].forEach(mq => {
      let qt = mq.querySelector('div.question_text');

      let selects = [...mq.querySelectorAll('select.question_input')];
      let options = selects[0].options;
      var matchBox = document.createElement('div');
      matchBox.id = mq.id + '_printQuiz_matchBox';
      matchBox.style.position = 'absolute';
      matchBox.style.margin = '-10px 0';
      var matchList = document.createElement('ul');
      matchList.style.padding = '0px 0px 0px 10px';
      // not multilingual
      //var matchText = document.createElement('p');
      //matchText.innerHTML = '<strong>Match Choices:</strong>';
      //matchBox.appendChild(matchText);

      for (var o = 0; o < options.length; o++) {
        if (options[o].value !== '') {
          let match = document.createElement('li');
          match.style.margin = '0 0 10px';
          match.style.padding = '5px';
          match.innerHTML = options[o].text;
          matchList.appendChild(match);
        }
      }
      matchBox.appendChild(matchList);
      selects[0].before(matchBox);
      selects.forEach(s => s.style.visibility = 'hidden');
    });
    
    // show all options for dropdowns
    [...document.querySelectorAll("input.question_input")].forEach(qb => {
      qb.style = 'border: none; width: 120px; box-shadow: none; border-bottom: 1px solid #000;';
    });

    [...document.querySelectorAll("div.multiple_dropdowns_question select")].forEach(dd => {
      var len = dd.options.length;
      dd.setAttribute('size', len);
      dd.style.width = 'fit-content';
      dd.style.maxWidth = '';
    });

    // hide submit, tiny mce, shorten essay space
    [...document.querySelectorAll('div.alert,div.ic-RichContentEditor,div.form-actions')].forEach(e => {
      e.style.visibility = 'hidden';
      if (e.classList.contains('ic-RichContentEditor')) {
        e.style.height = '200px';
      }
    });

    window.print();
  }
  function printQuiz() {
    var parent = document.querySelector('#right-side');
    var el = document.createElement('button');
    el.classList.add('Button', 'element_toggler', 'button-sidebar-wide');
    el.type = 'button';
    el.id = 'printQuizButton';
    var icon = document.createElement('i');
    icon.classList.add('icon-document');
    el.appendChild(icon);
    var txt = document.createTextNode(' Print');
    el.appendChild(txt);
    el.addEventListener('click', printQuizStyle);
    parent.appendChild(el);
  }

  printQuiz();
})();

DiquiLaPenta · ‎09-08-2024

I followed these steps, and I do not get a "print" option. The tampermonkey extension is installed, and I can see that the "print canvas quiz" is enabled. I even logged out of Canvas completely, chose a different quiz to preview, and there is no print option anywhere on the quiz preview screen.

Suggestions?

thanks!

Dr. Diqui LaPenta

robotcars · ‎09-09-2024

@DiquiLaPenta,

Are you tried Chad's original version, or the version I posted in April 2024?

I haven't tried this as a user script, but it should work.

DiquiLaPenta · ‎09-10-2024

@robotcars

Thank you for your quick reply.

I tried the original. I just checked your post from April, and I have to admit that I have no idea how to use it.

robotcars · ‎09-10-2024

@DiquiLaPenta

Instead of Chad's userscript, you can replace everything below `// ==/UserScript==` with what I posted, and remove the `// @require` jquery line.

DiquiLaPenta · ‎09-10-2024

@robotcars

I'm grateful for the suggestion and your patience. However, it appears that I did not adequately explain my level of utter ignorance regarding scripts. For Chad's method, there was a Chrome extension.

I do not know what to *do* with script code, meaning I have absolutely no idea how or where to deploy it or how to access/use it once I do.

robotcars · ‎09-10-2024

@DiquiLaPenta

That would go into TamperMonkey just like the first one you tried. Here's a tutorial on how to setup tamper monkey userscripts, https://github.com/jamesjonesmath/canvancement/blob/master/USERSCRIPTS.md

dhensley · ‎09-12-2024

Hi, I have used this script for several years and it has worked great! I am running MacOS Sonoma 14.6.1 and it is not behaving as it used to. Is there an updated script to make this work?

Thanks!