678 lines
32 KiB
JavaScript
Executable File
678 lines
32 KiB
JavaScript
Executable File
//Critical:
|
|
// TODO: Think about what should be done for an essay question.
|
|
|
|
//Accessibility:
|
|
|
|
//Enhancement:
|
|
// TODO: Have randomize check that new seed is actually producing new HTML.
|
|
// TODO: Don't offer randomize button unless we know a new version can be produced after trying a few seeds.
|
|
|
|
//Styling:
|
|
// TODO: Review all styling in all scenarios (staged/not, correct/partly-correct/incorrect/blank, single/multiple)
|
|
|
|
async function handleWW(ww_id, action) {
|
|
const ww_container = document.getElementById(ww_id);
|
|
const ww_domain = ww_container.dataset.domain;
|
|
const ww_processing = 'webwork2';
|
|
const ww_origin = ww_container.dataset.origin;
|
|
const ww_problemSource = ww_container.dataset.problemsource;
|
|
const ww_sourceFilePath = ww_container.dataset.sourcefilepath;
|
|
const ww_course_id = ww_container.dataset.courseid;
|
|
const ww_user_id = ww_container.dataset.userid;
|
|
const ww_passwd = ww_container.dataset.coursepassword;
|
|
const localize_submit = ww_container.dataset.localizeSubmit || "Submit";
|
|
const localize_check_responses = ww_container.dataset.localizeCheckResponses || "Check Responses";
|
|
const localize_reveal = ww_container.dataset.localizeReveal || "Reveal";
|
|
const localize_randomize = ww_container.dataset.localizeRandomize || "Randomize";
|
|
const localize_reset = ww_container.dataset.localizeReset || "Reset";
|
|
const runestone_logged_in = (typeof eBookConfig !== 'undefined' && eBookConfig.username !== '');
|
|
// will be null on pages generated prior to late December 2022
|
|
const activate_button = document.getElementById(ww_id + '-button')
|
|
|
|
// Set the current seed
|
|
if (!action) {
|
|
ww_container.dataset.current_seed = ww_container.dataset.seed;
|
|
if (runestone_logged_in) {
|
|
ww_container.dataset.current_seed = webworkSeedHash(eBookConfig.username + ww_container.dataset.current_seed);
|
|
}
|
|
}
|
|
else if (action == 'randomize') ww_container.dataset.current_seed = Number(ww_container.dataset.current_seed) + 100;
|
|
|
|
let loader = document.createElement('div');
|
|
loader.style.position = 'absolute';
|
|
loader.style.left = 0;
|
|
loader.style.top = 0;
|
|
loader.style.backgroundColor = 'rgba(0.2, 0.2, 0.2, 0.4)';
|
|
loader.style.color = 'white';
|
|
loader.style.width = '100%';
|
|
loader.style.height = '100%';
|
|
loader.style.display = 'flex';
|
|
loader.style.alignItems = 'center';
|
|
loader.style.justifyContent = 'center';
|
|
loader.style.marginTop = '0';
|
|
loader.tabIndex = -1;
|
|
const loaderText = document.createElement('span');
|
|
loaderText.textContent = 'Loading';
|
|
loaderText.style.fontSize = '2rem';
|
|
loader.appendChild(loaderText);
|
|
ww_container.appendChild(loader);
|
|
loader.focus();
|
|
|
|
if (!action) {
|
|
// Determine if static version shows hints, solutions, or answers and save that information in the container dataset for later runs.
|
|
ww_container.dataset.hasHint = ww_container.getElementsByClassName('hint').length > 0;
|
|
ww_container.dataset.hasSolution = ww_container.getElementsByClassName('solution').length > 0;
|
|
ww_container.dataset.hasAnswer = ww_container.getElementsByClassName('answer').length > 0;
|
|
// Get (possibly localized) label text for hints and solutions.
|
|
ww_container.dataset.hintLabelText = ww_container.dataset.hasHint == 'true'
|
|
? ww_container.querySelectorAll('.hint-knowl span.type, details.hint span.type')[0].textContent : 'Hint';
|
|
ww_container.dataset.solutionLabelText = ww_container.dataset.hasSolution == 'true'
|
|
? ww_container.querySelectorAll('.solution-knowl span.type, details.solution span.type')[0].textContent : 'Solution';
|
|
|
|
ww_container.tabIndex = -1;
|
|
}
|
|
|
|
let url;
|
|
if (ww_processing == 'webwork2') {
|
|
url = new URL(ww_domain + '/webwork2/render_rpc');
|
|
}
|
|
let formData = new FormData();
|
|
let generatedPG = 'generated/webwork/pg/';
|
|
if (runestone_logged_in) {
|
|
generatedPG = `/ns/books/published/${eBookConfig.basecourse}/${generatedPG}`;
|
|
}
|
|
|
|
if (action == 'check' || action =='reveal') {
|
|
const iframe = ww_container.querySelector('.problem-iframe');
|
|
formData = new FormData(iframe.contentDocument.getElementById(ww_id + "-form"));
|
|
formData.set("answersSubmitted", '1');
|
|
formData.set('WWsubmit', "1");
|
|
if (action == 'reveal' && ww_container.dataset.hasAnswer == 'true') {
|
|
formData.set('WWcorrectAnsOnly', "1");
|
|
}
|
|
if (ww_origin == 'generated') {
|
|
const rawProblemSource = await fetch(generatedPG + ww_problemSource).then((r) => r.text());
|
|
formData.set("rawProblemSource", rawProblemSource);
|
|
}
|
|
else if (ww_origin == 'webwork2') formData.set("sourceFilePath", ww_sourceFilePath);
|
|
} else {
|
|
formData.set("problemSeed", ww_container.dataset.current_seed);
|
|
if (ww_origin == 'generated') {
|
|
const rawProblemSource = await fetch(generatedPG + ww_problemSource).then((r) => r.text());
|
|
formData.set("rawProblemSource", rawProblemSource);
|
|
}
|
|
else if (ww_origin == 'webwork2') formData.set("sourceFilePath", ww_sourceFilePath);
|
|
formData.set("answersSubmitted", '0');
|
|
formData.set("displayMode", "MathJax");
|
|
formData.set("courseID", ww_course_id);
|
|
formData.set("user", ww_user_id);
|
|
formData.set("userID", ww_user_id);
|
|
formData.set("passwd", ww_passwd);
|
|
formData.set("disableCookies", '1');
|
|
formData.set("outputformat", "raw");
|
|
// note ww_container.dataset.hasSolution is a string, possibly 'false' which is true
|
|
formData.set("showSolutions", ww_container.dataset.hasSolution == 'true' ? '1' : '0');
|
|
formData.set("showHints", ww_container.dataset.hasHint == 'true' ? '1' : '0');
|
|
formData.set("problemUUID",ww_id);
|
|
}
|
|
|
|
// If in Runestone, check if there are previous answer submissions and get them now to use in the form.
|
|
let checkboxesString = '';
|
|
if (runestone_logged_in && !action) {
|
|
const answersObject = (wwList[ww_id.replace(/-ww-rs$/,'')].answers ? wwList[ww_id.replace(/-ww-rs$/,'')].answers : {'answers' : [], 'mqAnswers' : []});
|
|
const previousAnswers = answersObject.answers;
|
|
if (previousAnswers !== null) {
|
|
formData.set('WWsubmit', 1);
|
|
}
|
|
for (const answer in previousAnswers) {
|
|
if (previousAnswers[answer].constructor === Array) {
|
|
for (const k in previousAnswers[answer]) {
|
|
checkboxesString += '&';
|
|
checkboxesString += answer;
|
|
checkboxesString += '=';
|
|
checkboxesString += previousAnswers[answer][k];
|
|
}
|
|
} else {
|
|
formData.set(answer, previousAnswers[answer]);
|
|
}
|
|
}
|
|
}
|
|
// Need to get form data as a string, including possible repeated checkbox names
|
|
// Do not pass post data as an object, or checkbox names will overwrite one another
|
|
const formString = new URLSearchParams(formData).toString();
|
|
|
|
$.post(url, formString + checkboxesString, (data) => {
|
|
// Create the form that will contain the text and input fields of the interactive problem.
|
|
const form = document.createElement("form");
|
|
form.id = ww_id + "-form";
|
|
form.dataset.iframeHeight = 1;
|
|
|
|
// Create a div for the problem text.
|
|
const body_div = document.createElement("div");
|
|
body_div.id = ww_id + "-body";
|
|
body_div.classList.add("exercise", "exercise-like");
|
|
body_div.lang = data.lang;
|
|
body_div.dir = data.dir;
|
|
|
|
// Dump the problem text, answer blanks, etc.
|
|
body_div.innerHTML = data.rh_result.text;
|
|
|
|
// If showPartialCorrectAnswers = 0, alter the feedback buttons according to whether or not the score is 100%.
|
|
if ('showPartialCorrectAnswers' in data.rh_result.flags && data.rh_result.flags.showPartialCorrectAnswers == 0) {
|
|
if ('score' in data.rh_result.problem_result && data.rh_result.problem_result.score >= 1) {
|
|
body_div.querySelectorAll('button.ww-feedback-btn').forEach(
|
|
function(button) {
|
|
button.classList.remove('btn-info');
|
|
button.classList.add('btn-success');
|
|
button.setAttribute('aria-label', 'Correct');
|
|
button.dataset.bsCustomClass = button.dataset.bsCustomClass + ' correct';
|
|
button.dataset.bsTitle = button.dataset.bsTitle.replace('Answer Preview', 'Correct');
|
|
button.firstChild.classList.add('correct')
|
|
}
|
|
);
|
|
} else {
|
|
body_div.querySelectorAll('button.ww-feedback-btn').forEach(
|
|
function(button) {
|
|
button.setAttribute('aria-label', 'One or more answers incorrect');
|
|
button.dataset.bsTitle = button.dataset.bsTitle.replace('Answer Preview', 'One or more answers incorrect');
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
// Replace all hn headings with h6 headings.
|
|
for (const tag_name of ['h6', 'h5', 'h4', 'h3', 'h2', 'h1']) {
|
|
const headings = body_div.getElementsByTagName(tag_name);
|
|
for (heading of headings) {
|
|
const new_heading = document.createElement("h6");
|
|
new_heading.innerHTML = heading.innerHTML;
|
|
cloneAttributes(new_heading, heading);
|
|
new_heading.classList.add('webwork-part');
|
|
heading.replaceWith(new_heading);
|
|
}
|
|
}
|
|
|
|
// Hide textarea input and hide associated buttons
|
|
var textareas = body_div.getElementsByTagName("textarea");
|
|
for(var i = 0, max = textareas.length; i < max; i++)
|
|
{
|
|
textareas[i].style.display = "none";
|
|
textareas[i].className = '';
|
|
}
|
|
var textareabuttons = body_div.querySelectorAll(".latexentry-preview");
|
|
for(var i = 0, max = textareabuttons.length; i < max; i++)
|
|
{
|
|
textareabuttons[i].remove();
|
|
}
|
|
|
|
adjustSrcHrefs(body_div, ww_domain);
|
|
|
|
translateHintSol(ww_id, body_div, ww_domain,
|
|
ww_container.dataset.hasHint == 'true', ww_container.dataset.hasSolution == 'true',
|
|
ww_container.dataset.hintLabelText, ww_container.dataset.solutionLabelText)
|
|
|
|
// insert previous answers
|
|
if (runestone_logged_in) {
|
|
const answersObject = (wwList[ww_id.replace(/-ww-rs$/,'')].answers ? wwList[ww_id.replace(/-ww-rs$/,'')].answers : {'answers' : [], 'mqAnswers' : []});
|
|
const mqAnswers = answersObject.mqAnswers;
|
|
for (const mqAnswer in mqAnswers) {
|
|
const mqInput = body_div.querySelector('input[id=' + mqAnswer + ']');
|
|
if (mqInput && mqInput.value == '') {
|
|
mqInput.setAttribute('value', mqAnswers[mqAnswer]);
|
|
}
|
|
}
|
|
const answers = answersObject.answers;
|
|
for (const answer in answers) {
|
|
const input = body_div.querySelector('input[id=' + answer + ']');
|
|
if (input && input.value == '') {
|
|
input.setAttribute('value', answers[answer]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// insert our cleaned up problem text
|
|
form.appendChild(body_div);
|
|
|
|
// Set up hidden input fields that the form uses
|
|
const wwInputs = {
|
|
problemSeed: data.inputs_ref.problemSeed,
|
|
problemUUID: data.inputs_ref.problemUUID,
|
|
psvn: data.inputs_ref.psvn,
|
|
courseName: ww_course_id,
|
|
courseID: ww_course_id,
|
|
user: ww_user_id,
|
|
passwd: ww_passwd,
|
|
displayMode: "MathJax",
|
|
session_key: data.rh_result.session_key,
|
|
outputformat: "raw",
|
|
language: data.formLanguage,
|
|
showSummary: data.showSummary,
|
|
disableCookies: '1',
|
|
// note ww_container.dataset.hasSolution is a string, possibly 'false' which is true
|
|
showSolutions: ww_container.dataset.hasSolution == 'true' ? '1' : '0',
|
|
showHints: ww_container.dataset.hasHint == 'true' ? '1' : '0',
|
|
forcePortNumber: data.forcePortNumber
|
|
};
|
|
|
|
if (ww_sourceFilePath) wwInputs.sourceFilePath = ww_sourceFilePath;
|
|
else if (ww_problemSource && ww_origin == 'webwork2') wwInputs.problemSource = ww_problemSource;
|
|
|
|
for (const wwInputName of Object.keys(wwInputs)) {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = wwInputName;
|
|
input.value = wwInputs[wwInputName];
|
|
form.appendChild(input);
|
|
}
|
|
|
|
let buttonContainer = ww_container.querySelector('.problem-buttons.webwork');
|
|
// Create the submission buttons if they have not yet been created.
|
|
if (!buttonContainer) {
|
|
// Hide the original div that contains the Activate.
|
|
ww_container.querySelector('.problem-buttons').classList.add('hidden-content', 'hidden');
|
|
|
|
// Create a new div for the webwork buttons.
|
|
buttonContainer = document.createElement('div');
|
|
buttonContainer.classList.add('problem-buttons', 'webwork');
|
|
if (activate_button != null) {
|
|
// Make sure the button container follows the activate button in the DOM
|
|
activate_button.after(buttonContainer);
|
|
} else {
|
|
ww_container.prepend(buttonContainer);
|
|
}
|
|
|
|
// Check button
|
|
const check = document.createElement("button");
|
|
check.type = "button";
|
|
check.id = ww_id + '-check';
|
|
check.style.marginRight = "0.25rem";
|
|
check.classList.add('webwork-button');
|
|
|
|
check.textContent = runestone_logged_in ? localize_submit : localize_check_responses;
|
|
|
|
check.addEventListener('click', () => handleWW(ww_id, "check"));
|
|
|
|
buttonContainer.appendChild(check);
|
|
|
|
// Show correct answers button if original PTX has answer knowl.
|
|
if (ww_container.dataset.hasAnswer == 'true') {
|
|
const correct = document.createElement("button");
|
|
correct.classList.add("show-correct", 'webwork-button');
|
|
correct.type = "button";
|
|
correct.style.marginRight = "0.25rem";
|
|
correct.textContent = localize_reveal;
|
|
correct.addEventListener('click', () => handleWW(ww_id, 'reveal'));
|
|
buttonContainer.appendChild(correct);
|
|
}
|
|
|
|
// randomize button
|
|
const randomize = document.createElement("button")
|
|
randomize.type = "button";
|
|
randomize.classList.add('webwork-button');
|
|
randomize.style.marginRight = "0.25rem";
|
|
randomize.textContent = localize_randomize;
|
|
randomize.addEventListener('click', () => handleWW(ww_id, 'randomize'));
|
|
buttonContainer.appendChild(randomize)
|
|
|
|
// reset button
|
|
const reset = document.createElement("button")
|
|
reset.type = "button"
|
|
reset.classList.add('webwork-button');
|
|
reset.textContent = localize_reset;
|
|
reset.addEventListener('click', () => resetWW(ww_id));
|
|
buttonContainer.appendChild(reset)
|
|
}
|
|
|
|
if (runestone_logged_in && action == 'check') {
|
|
// Runestone trigger
|
|
$("body").trigger('runestone_ww_check', data)
|
|
}
|
|
let courseUrlBase = '';
|
|
if (runestone_logged_in){
|
|
courseUrlBase = '/ns/books/published/' + eBookConfig.basecourse + '/';
|
|
}
|
|
let iframeContents = '<!DOCTYPE html><head>' +
|
|
'<script src="' + ww_domain + '/webwork2_files/node_modules/jquery/dist/jquery.min.js"></script>' +
|
|
`<script>
|
|
window.MathJax = {
|
|
tex: { packages: { '[+]': ['noerrors'] } },
|
|
loader: { load: ['input/asciimath', '[tex]/noerrors'] },
|
|
startup: {
|
|
ready() {
|
|
const AM = MathJax.InputJax.AsciiMath.AM;
|
|
|
|
// Modify existing AsciiMath triggers.
|
|
AM.symbols[AM.names.indexOf('**')] = {
|
|
input: '**',
|
|
tag: 'msup',
|
|
output: '^',
|
|
tex: null,
|
|
ttype: AM.TOKEN.INFIX
|
|
};
|
|
|
|
const i = AM.names.indexOf('infty');
|
|
AM.names[i] = 'infinity';
|
|
AM.symbols[i] = { input: 'infinity', tag: 'mo', output: '\u221E', tex: 'infty', ttype: AM.TOKEN.CONST };
|
|
|
|
return MathJax.startup.defaultReady();
|
|
}
|
|
},
|
|
options: {
|
|
processHtmlClass: "process-math",
|
|
renderActions: {
|
|
findScript: [
|
|
10,
|
|
(doc) => {
|
|
for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
|
|
const math = new doc.options.MathItem(
|
|
node.textContent,
|
|
doc.inputJax[0],
|
|
!!node.type.match(/; *mode=display/)
|
|
);
|
|
const text = document.createTextNode('');
|
|
node.parentNode.replaceChild(text, node);
|
|
math.start = { node: text, delim: '', n: 0 };
|
|
math.end = { node: text, delim: '', n: 0 };
|
|
doc.math.push(math);
|
|
}
|
|
},
|
|
''
|
|
]
|
|
},
|
|
ignoreHtmlClass: 'tex2jax_ignore'
|
|
}
|
|
};
|
|
</script>` +
|
|
'<script src="' + ww_domain + '/webwork2_files/node_modules/mathjax/es5/tex-chtml.js" id="MathJax-script" defer></script>' +
|
|
`<script src="${courseUrlBase}_static/pretext/js/lib/knowl.js" defer></script>` +
|
|
'<link rel="stylesheet" href="' + ww_domain + '/webwork2_files/node_modules/bootstrap/dist/css/bootstrap.min.css"/>' +
|
|
'<script src="' + ww_domain + '/webwork2_files/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" defer></script>';
|
|
|
|
// Determine javascript and css dependencies
|
|
const extra_css_files = [];
|
|
const extra_js_files = [];
|
|
|
|
if (data.extra_css_files) data.extra_css_files.unshift(...extra_css_files);
|
|
else data.extra_css_files = extra_css_files;
|
|
for (const cssFile of data.extra_css_files) {
|
|
iframeContents += '<link rel="stylesheet" href="' + (cssFile.external !== '1' ? ww_domain : '') + cssFile.file + '"/>';
|
|
}
|
|
|
|
if (data.extra_js_files) data.extra_js_files.unshift(...extra_js_files);
|
|
else data.extra_js_files = extra_js_files;
|
|
for (const jsFile of data.extra_js_files) {
|
|
iframeContents += '<script src="' + (jsFile.external !== '1' ? ww_domain : '') + jsFile.file + '" ' +
|
|
Object.keys(jsFile.attributes || {}).reduce((ret, key) => {
|
|
ret += key + '="' + jsFile.attributes[key] + '" '; return ret;
|
|
}, "") + '></script>';
|
|
}
|
|
|
|
iframeContents +=
|
|
`<link rel="stylesheet" href="${courseUrlBase}_static/pretext/css/theme.css"/>` +
|
|
'<script src="' + ww_domain + '/webwork2_files/node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>' +
|
|
`<style>
|
|
html { overflow-y: hidden; }
|
|
html body { background:unset; margin: 0; }
|
|
body { font-size: initial; line-height: initial; padding:2px; }
|
|
.hidden-content { display: none; }
|
|
span.nobreak { white-space: nowrap; }
|
|
div.PGML img.image-view-elt { max-width:100%; }
|
|
.graphtool-answer-container .graphtool-graph { margin: 0; width: 300px; height: 300px; }
|
|
.graphtool-answer-container .graphtool-number-line { height: 57px; }
|
|
.quill-toolbar { scrollbar-width: thin; overflow-x: hidden; }
|
|
</style>` +
|
|
'</head><body>' +
|
|
'<main class="pretext-content problem-content" data-iframe-height="1">' + form.outerHTML + '</main></body>' +
|
|
'</html>';
|
|
|
|
let iframe;
|
|
// If there is no action this is the initialization call.
|
|
if (!action) {
|
|
// Create the iframe.
|
|
iframe = document.createElement('iframe');
|
|
iframe.style.width = '1px';
|
|
iframe.style.minWidth = '100%';
|
|
iframe.classList.add('problem-iframe');
|
|
|
|
// Hide the static problem
|
|
ww_container.querySelector('.problem-contents').classList.add('hidden-content', 'hidden');
|
|
|
|
if (activate_button != null) {
|
|
// Make sure the iframe follows the activate button in the DOM
|
|
activate_button.after(iframe);
|
|
} else {
|
|
ww_container.prepend(iframe);
|
|
}
|
|
|
|
iFrameResize({ checkOrigin: false, scrolling: 'omit', heightCalculationMethod: 'taggedElement' }, iframe);
|
|
|
|
iframe.addEventListener('load', () => {
|
|
// Set up form submission from inside the iframe.
|
|
const iframeForm = iframe.contentDocument.getElementById(ww_id + '-form');
|
|
iframeForm.addEventListener('submit', (e) => {
|
|
handleWW(ww_id, "check");
|
|
e.preventDefault();
|
|
});
|
|
|
|
iframe.contentDocument.querySelectorAll('.collapse.in').forEach(collapse => collapse.classList.add('expanded'));
|
|
iframe.contentWindow.jQuery('.collapse').on('shown', function(e) { if (e.target != this) return; this.classList.add('expanded'); });
|
|
iframe.contentWindow.jQuery('.collapse').on('hide', function(e) { if (e.target != this) return; this.classList.remove('expanded'); });
|
|
|
|
iframe.contentWindow.MathJax.startup.promise.then(() => iframe.contentWindow.MathJax.typesetPromise(['.popover', '.popover-content']));
|
|
});
|
|
} else {
|
|
iframe = ww_container.querySelector('.problem-iframe');
|
|
}
|
|
|
|
iframe.srcdoc = iframeContents;
|
|
|
|
iframe.addEventListener('load', () => {
|
|
// Remove the loader overlay
|
|
loader.remove();
|
|
}, { once: true })
|
|
|
|
// Place focus on the problem.
|
|
ww_container.focus()
|
|
}, "json");
|
|
}
|
|
|
|
function WWshowCorrect(ww_id, answers) {
|
|
const ww_container = document.getElementById(ww_id);
|
|
const iframe = ww_container.querySelector('.problem-iframe');
|
|
|
|
const body = iframe.contentDocument.getElementById(ww_id + '-body')
|
|
$("body").trigger("runestone_show_correct", {
|
|
"ww_id": ww_id,
|
|
"answers": answers
|
|
});
|
|
|
|
let inputs = body.querySelectorAll("input:not([type=hidden])");
|
|
for (const input of inputs) {
|
|
const name = input.name;
|
|
const span_id = `${ww_id}-${name}-correct`;
|
|
|
|
if (input.type == 'text' && answers[name] && !(iframe.contentDocument.getElementById(span_id))) {
|
|
const input_id = input.id;
|
|
const mq_span = iframe.contentDocument.getElementById(`mq-answer-${input_id}`);
|
|
if (mq_span) {
|
|
mq_span.style.display = 'none';
|
|
}
|
|
label = iframe.contentDocument.getElementById(`${span_id}-label`);
|
|
if (label) {
|
|
label.parentElement.insertBefore(input, label);
|
|
label.remove();
|
|
}
|
|
input.type = "hidden";
|
|
// we need to convert things like < in answers to <
|
|
const correct_ans_text = iframe.contentDocument.createElement('div');
|
|
correct_ans_text.innerHTML = answers[name].correct_ans;
|
|
input.value = correct_ans_text.textContent;
|
|
const show_span = iframe.contentDocument.createElement('span');
|
|
show_span.id = span_id;
|
|
show_span.appendChild(answers[name].correct_ans_latex_string
|
|
? iframe.contentDocument.createTextNode('\\(' + answers[name].correct_ans_latex_string + '\\)')
|
|
: iframe.contentDocument.createTextNode(answers[name].correct_ans));
|
|
input.parentElement.insertBefore(show_span, input);
|
|
}
|
|
|
|
if (input.type.toUpperCase() == 'RADIO' && answers[name]) {
|
|
const correct_ans = answers[name].correct_choice || answers[name].correct_ans;
|
|
if (input.value == correct_ans) {
|
|
input.checked = true;
|
|
} else {
|
|
input.checked = false;
|
|
}
|
|
}
|
|
|
|
if (input.type.toUpperCase() == 'CHECKBOX' && answers[name]) {
|
|
const correct_choices = answers[name].correct_choices;
|
|
if (correct_choices.includes(input.value)) {
|
|
input.checked = true;
|
|
} else {
|
|
input.checked = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
const hiddenInputs = body.querySelectorAll("input[type=hidden]");
|
|
for (const input of hiddenInputs) {
|
|
const name = input.name;
|
|
if (!input.nextElementSibling) continue;
|
|
const graphtoolContainer = input.nextElementSibling.nextElementSibling;
|
|
if (graphtoolContainer && answers[name] && graphtoolContainer.classList.contains('graphtool-container')) {
|
|
const correct_ans_div = iframe.contentDocument.createElement('div');
|
|
input.parentElement.insertBefore(correct_ans_div, graphtoolContainer);
|
|
graphtoolContainer.style.display = 'none';
|
|
input.value = answers[name].correct_ans;
|
|
iframe.contentWindow.jQuery(correct_ans_div).html(answers[name].correct_ans_latex_string);
|
|
const script = iframe.contentDocument.createElement('script');
|
|
script.textContent = correct_ans_div.querySelector('script').textContent
|
|
.replace('\nwindow.addEventListener("DOMContentLoaded",', '(')
|
|
.replace(/;\n$/, '();');
|
|
iframe.contentDocument.body.appendChild(script);
|
|
}
|
|
}
|
|
|
|
let selects = body.querySelectorAll("select:not([type=hidden])");
|
|
for (const select of selects) {
|
|
const name = select.name;
|
|
const span_id = `${ww_id}-${name}-correct`;
|
|
if (answers[name] && !iframe.contentDocument.getElementById(span_id)) {
|
|
select.style.display = "none";
|
|
select.value = answers[name].correct_ans;
|
|
const show_span = iframe.contentDocument.createElement('span');
|
|
show_span.id = span_id;
|
|
show_span.appendChild(answers[name].correct_ans_latex_string
|
|
? iframe.contentDocument.createTextNode('\\(' + answers[name].correct_ans_latex_string + '\\)')
|
|
: iframe.contentDocument.createTextNode(answers[name].correct_ans));
|
|
select.parentElement.insertBefore(show_span, select);
|
|
}
|
|
}
|
|
|
|
// run MathJax on our new rendering
|
|
// FIXME: We only need to typeset the added elements, not the entire body.
|
|
const mathjaxTypesetScript = iframe.contentDocument.createElement('script');
|
|
mathjaxTypesetScript.textContent = 'MathJax.startup.promise.then(() => MathJax.typesetPromise([document.body]));';
|
|
iframe.contentDocument.body.appendChild(mathjaxTypesetScript);
|
|
}
|
|
|
|
function resetWW(ww_id) {
|
|
const ww_container = document.getElementById(ww_id);
|
|
const activate_button = document.getElementById(ww_id + '-button');
|
|
|
|
ww_container.dataset.current_seed = ww_container.dataset.seed;
|
|
|
|
iframe = ww_container.querySelector('.problem-iframe');
|
|
iframe.remove();
|
|
|
|
ww_container.querySelector('.problem-contents').classList.remove('hidden-content', 'hidden');
|
|
|
|
ww_container.querySelector('.problem-buttons.webwork').remove();
|
|
ww_container.querySelector('.problem-buttons').classList.remove('hidden-content', 'hidden');
|
|
// if the newer activate button is there (but hidden) bring it back too
|
|
if (activate_button != null) {activate_button.classList.remove('hidden-content', 'hidden');};
|
|
}
|
|
|
|
function adjustSrcHrefs(container,ww_domain) {
|
|
container.querySelectorAll('[href]').forEach((node) => {
|
|
const href = node.attributes.href.value;
|
|
if (href !== '#' && !href.match(/^[a-z]+:\/\//i)) node.href = ww_domain + '/' + href;
|
|
});
|
|
container.querySelectorAll('[data-knowl-url]').forEach((node) => {
|
|
const dku = node.dataset.knowlUrl;
|
|
if (dku !== '#' && !dku.match(/^[a-z]+:\/\//i)) node.dataset.knowlUrl = ww_domain + dku;
|
|
});
|
|
container.querySelectorAll('[src]').forEach((node) => {
|
|
node.src = new URL(node.attributes.src.value, ww_domain).href;
|
|
});
|
|
}
|
|
|
|
function translateHintSol(ww_id, body_div, ww_domain, b_ptx_has_hint, b_ptx_has_solution, hint_label_text, solution_label_text) {
|
|
// The problem text may come with "hint"s and "solution"s
|
|
// Each one is a div.accordion > details.accordion-item > summary.accordion-button
|
|
// Styling is not the PTX way, so we change it to one div.solutions
|
|
// with (potentially multiple) details.born-hidden-knowl > summary.knowl__link
|
|
// Also if hint/sol were missing from the static version, we want these removed here
|
|
|
|
const hintSols = body_div.querySelectorAll('.accordion.hint,.accordion.solution');
|
|
if (hintSols.length == 0) {return};
|
|
|
|
for (const hintSol of hintSols) {
|
|
const parent = hintSol.parentNode;
|
|
solutionlikewrapper = document.createElement('div');
|
|
solutionlikewrapper.classList.add('solutions');
|
|
parent.insertBefore(solutionlikewrapper, hintSol);
|
|
|
|
const hintSolType = hintSol.classList.contains('hint') ? 'hint' : 'solution';
|
|
|
|
if ((hintSolType == 'solution' && !b_ptx_has_solution) ||
|
|
(hintSolType == 'hint' && !b_ptx_has_hint))
|
|
continue;
|
|
|
|
const knowlDetails = hintSol.getElementsByTagName('details')[0];
|
|
knowlDetails.className = '';
|
|
knowlDetails.classList.add(hintSolType, 'solution-like', 'born-hidden-knowl');
|
|
solutionlikewrapper.appendChild(knowlDetails);
|
|
|
|
const knowlSummary = knowlDetails.getElementsByTagName('summary')[0];
|
|
knowlSummary.className = '';
|
|
knowlSummary.classList.add('knowl__link');
|
|
|
|
const summaryLabel = knowlSummary.children[0];
|
|
summaryLabel.remove();
|
|
|
|
const newLabelSpan = document.createElement('span');
|
|
newLabelSpan.innerHTML = hintSolType == 'hint' ? hint_label_text : solution_label_text;
|
|
knowlSummary.appendChild(newLabelSpan);
|
|
|
|
const newLabelPeriod = document.createElement('span');
|
|
newLabelPeriod.innerHTML = '.';
|
|
knowlSummary.appendChild(newLabelPeriod);
|
|
|
|
adjustSrcHrefs(knowlDetails, ww_domain);
|
|
hintSol.remove();
|
|
|
|
const originalDetailsContent = knowlDetails.getElementsByTagName('div')[0];
|
|
const newDetailsContent = originalDetailsContent.getElementsByTagName('div')[0];
|
|
newDetailsContent.className = '';
|
|
newDetailsContent.classList.add(hintSolType, 'solution-like', 'knowl__content');
|
|
knowlDetails.appendChild(newDetailsContent);
|
|
originalDetailsContent.remove();
|
|
}
|
|
}
|
|
|
|
function cloneAttributes(target, source) {
|
|
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) });
|
|
}
|
|
|
|
function webworkSeedHash(string) {
|
|
var hash = 0, i, chr;
|
|
if (string.length === 0) return hash;
|
|
for (i = 0; i < string.length; i++) {
|
|
chr = string.charCodeAt(i);
|
|
hash = ((hash << 5) - hash) + chr;
|
|
hash |= 0; //Convert to 32bit integer
|
|
}
|
|
return Math.abs(hash);
|
|
};
|