A bookmarklet for (neatly) printing WebAssign

bookmarklet.js

javascript:(()=>{if(!document.URL.includes("www.webassign.net"))return;Array.from(document.querySelectorAll(".mathpad-wrapper")).map((e=>[e,e.getBoundingClientRect()])).forEach((([e,{width:t,height:r}])=>{const n=document.createElement("div");n.style.borderStyle="solid",n.style.borderColor="black",n.style.borderWidth="1px",n.style.width=t+"px",n.style.height=r+"px",n.style.display="inline-flex",e.parentNode.style.display="flex",e.replaceWith(n)})),Array.from(document.querySelectorAll(".js-question-resources")).forEach((e=>e.remove())),document.querySelector("#js-assignment-header svg")?.remove(),document.querySelector("#js-assignment-wrapper")?.remove(),document.querySelector("#webAssignTop")?.remove(),document.querySelector("#js-assignment-take-footer")?.remove(),document.querySelector("#js-student-footer")?.remove(),Array.from(document.querySelectorAll(".mathpad-wrapper ~ *")).forEach((e=>e.remove())),Array.from(document.querySelectorAll("input[checked]")).forEach((e=>{e.setAttribute("disabled",""),e.removeAttribute("checked")})),Array.from(document.querySelectorAll(".multBox")).forEach((e=>{const t=e.querySelector(".mCorrect");t&&Array.from(t.children).forEach((t=>e.appendChild(t))),e.querySelector(".waMarkWrap")?.remove(),e.querySelector(".badgeWrap")?.remove()})),Array.from(document.querySelectorAll(".correctHint")).forEach((e=>e.remove())),Array.from(document.querySelectorAll(".mCorrect")).forEach((e=>e.remove())),Array.from(document.querySelectorAll(".watex span.static")).forEach((e=>{const{width:t,height:r}=e.getBoundingClientRect(),n=document.createElement("span");n.addClass("static"),n.style.borderStyle="solid",n.style.borderColor="black",n.style.borderWidth="1px",n.style.width=t+"px",n.style.height=r+"px",n.style.display="inline-flex",e.parentNode.style.display="flex",e.parentNode.style.justifyContent="center",e.parentNode.style.alignItems="center",e.replaceWith(n)})),Array.from(document.querySelectorAll(".fitb span.static")).forEach((e=>{const{width:t,height:r}=e.getBoundingClientRect(),n=document.createElement("span");n.addClass("static"),n.style.borderStyle="solid",n.style.borderColor="black",n.style.borderWidth="1px",n.style.width=t+"px",n.style.height=r+"px",n.style.display="inline-block",e.replaceWith(n)})),Array.from(document.querySelectorAll(".wa1ans span.static")).forEach((e=>{const{width:t,height:r}=e.getBoundingClientRect(),n=document.createElement("span");n.addClass("static"),n.style.borderStyle="solid",n.style.borderColor="black",n.style.borderWidth="1px",n.style.width=t+"px",n.style.height=r+"px",n.style.display="inline-block",e.replaceWith(n)}));const e=document.createElement("style");e.textContent="\n @media print {\n @page {\n margin: 0;\n }\n \n figure img {\n max-width: 50%;\n height: auto;\n }\n \n .accplotmc {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;\n gap: 0.5em !important;\n }\n \n .accblock {\n display: block !important;\n margin: 0 !important;\n }\n \n .accplotmc figure img {\n max-width: 100% !important;\n height: auto !important;\n }\n \n #js-assignment-header {\n max-width: 100% !important;\n \n div {\n flex-wrap: none;\n margin: 0;\n \n div#assignmentInfo {\n h1 {\n font-size: 1.5em;\n }\n }\n }\n }\n }\n ",document.head.appendChild(e),window.print()})();

make-webassign-printable.js

(() => {
  if(!document.URL.includes('www.webassign.net')) {
    return;
  }

  /* Replace each MathPad with an identically-sized placeholder. */
  Array.from(document.querySelectorAll('.mathpad-wrapper'))
    .map(el => [el, el.getBoundingClientRect()])
    .forEach(([el, { width, height }]) => {
      const block = document.createElement("div");
      block.style.borderStyle = 'solid';
      block.style.borderColor = 'black';
      block.style.borderWidth = '1px';
      block.style.width = width + 'px';
      block.style.height = height + 'px';
      block.style.display = 'inline-flex';
      el.parentNode.style.display = 'flex';
      el.replaceWith(block);
    })

  /* Remove each 'Resources' footer. */
  Array.from(document.querySelectorAll('.js-question-resources')).forEach(el => el.remove())

  /* Remove the 'back arrow'. */
  document.querySelector('#js-assignment-header svg')?.remove();

  /* Remove the assignment description. */
  document.querySelector('#js-assignment-wrapper')?.remove();

  /* Remove the WebAssign header. */
  document.querySelector('#webAssignTop')?.remove();

  /* Remove the assignment footer. */
  document.querySelector('#js-assignment-take-footer')?.remove();

  /* Remove the WebAssign footer. */
  document.querySelector('#js-student-footer')?.remove();

  /* Remove all annotations after the MathPad input box. */
  Array.from(document.querySelectorAll(".mathpad-wrapper ~ *")).forEach(el => el.remove());

  /* Remove answer from multiple choice questions. */
  Array.from(document.querySelectorAll('input[checked]')).forEach(el => {
    el.setAttribute('disabled', '');
    el.removeAttribute('checked');
  });

  /* Remove green border from multiple choice questions. */
  Array.from(document.querySelectorAll('.multBox')).forEach(el => {
    const answeredMultipleChoiceEl = el.querySelector('.mCorrect');
    if(answeredMultipleChoiceEl) {
      Array.from(answeredMultipleChoiceEl.children).forEach(opt => el.appendChild(opt));
    }
    el.querySelector('.waMarkWrap')?.remove();
    el.querySelector('.badgeWrap')?.remove();
  });

  /* Remove 'correct!' message from multiple choice questions. */
  Array.from(document.querySelectorAll('.correctHint')).forEach(el => el.remove());

  /* Remove green checkmark from multiple choice questions with images. */
  Array.from(document.querySelectorAll('.mCorrect')).forEach(el => el.remove());

  /* Replaces inline MathSpan answers with placeholder blocks. */
  Array.from(document.querySelectorAll('.watex span.static')).forEach(el => {
    const { width, height } = el.getBoundingClientRect();
    const block = document.createElement("span");
    block.addClass("static")
    block.style.borderStyle = 'solid';
    block.style.borderColor = 'black';
    block.style.borderWidth = '1px';
    block.style.width = width + 'px';
    block.style.height = height + 'px';
    block.style.display = 'inline-flex';
    el.parentNode.style.display = 'flex';
    el.parentNode.style.justifyContent = 'center';
    el.parentNode.style.alignItems = 'center';
    el.replaceWith(block);
  })

  /* Replaces each inline textbox with a placeholder block. */
  Array.from(document.querySelectorAll('.fitb span.static')).forEach(el => {
    const { width, height } = el.getBoundingClientRect();
    const block = document.createElement("span");
    block.addClass("static")
    block.style.borderStyle = 'solid';
    block.style.borderColor = 'black';
    block.style.borderWidth = '1px';
    block.style.width = width + 'px';
    block.style.height = height + 'px';
    block.style.display = 'inline-block';
    el.replaceWith(block);
  })
  
  /* Replaces each inline answer box with a placeholder block. */
  Array.from(document.querySelectorAll('.wa1ans span.static')).forEach(el => {
    const { width, height } = el.getBoundingClientRect();
    const block = document.createElement("span");
    block.addClass("static")
    block.style.borderStyle = 'solid';
    block.style.borderColor = 'black';
    block.style.borderWidth = '1px';
    block.style.width = width + 'px';
    block.style.height = height + 'px';
    block.style.display = 'inline-block';
    el.replaceWith(block);
  })
  
  /* Ensures that, when printed, .accplot displays as a grid to compactly position each image. */
  const style = document.createElement("style");
  
  style.textContent = `
    @media print {
      @page {
        margin: 0;
      }
    
      figure img {
        max-width: 50%;
        height: auto;
      }
    
      .accplotmc {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 0.5em !important;
      }
      
      .accblock {
        display: block !important;
        margin: 0 !important;
      }
      
      .accplotmc figure img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      #js-assignment-header {
        max-width: 100% !important;
        
        div {
          flex-wrap: none;
          margin: 0;
          
          div#assignmentInfo {
            h1 {
              font-size: 1.5em;
            }
          }
        }
      }
    }
  `;
  
  document.head.appendChild(style);

  window.print();
})();