Skip to content

Instantly share code, notes, and snippets.

@colejhudson

colejhudson/bookmarklet.js

Last active October 3, 2025 19:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colejhudson/be8bda0fffa4902dbc85cf3b6deec021 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colejhudson/be8bda0fffa4902dbc85cf3b6deec021 to your computer and use it in GitHub Desktop.
Download ZIP
A bookmarklet for (neatly) printing WebAssign
Raw
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()})();
Raw
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();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment