Latest build deployed.
This commit is contained in:
andyeisenberg
@@ -0,0 +1,552 @@
|
||||
|
||||
function escapeHTML(text) {
|
||||
if (!text) { return "" }
|
||||
the_ans = text;
|
||||
the_ans = the_ans.replace(/&/g, "&");
|
||||
the_ans = the_ans.replace(/<([a-zA-Z])/g, '< $1');
|
||||
|
||||
return the_ans
|
||||
}
|
||||
function uNescapeHTML(text) {
|
||||
if (!text) { return "" }
|
||||
the_ans = text;
|
||||
the_ans = the_ans.replace(/< /g, "<");
|
||||
the_ans = the_ans.replace(/</g, "<");
|
||||
the_ans = the_ans.replace(/>/g, ">");
|
||||
the_ans = the_ans.replace(/&/g, "&");
|
||||
the_ans = the_ans.replace(/<([a-zA-Z])/g, "< $1");
|
||||
|
||||
return the_ans
|
||||
}
|
||||
|
||||
function dollars_to_slashparen(text) {
|
||||
the_ans = text;
|
||||
the_ans = the_ans.replace(/(^|\s|-)\$([^\$\f\r\n]+)\$(\s|\.|,|;|:|\?|!|$)/g, "$1\\($2\\)$3");
|
||||
//twice, for $5$-$6$
|
||||
the_ans = the_ans.replace(/(^|\s|-)\$([^\$\f\r\n]+)\$(\s|\.|,|;|:|\?|!|-|$)/g, "$1\\($2\\)$3");
|
||||
|
||||
return the_ans
|
||||
}
|
||||
|
||||
/* The structure of a reading question is an erticle with an id (this_ques_id),
|
||||
containing:
|
||||
#this_ques_id_text the answer given (in a div with that id)
|
||||
#this_ques_id_text_hidden the answer in a raw form (in a hidden div)
|
||||
#this_ques_id_text_input the answer in a textinput with that id
|
||||
|
||||
Try to do all operations by id, and not by carrying objects around.
|
||||
*/
|
||||
|
||||
var reading_questions = document.querySelectorAll("section.reading-questions article.exercise-like, #boelkins-ACS .main #content > section:first-of-type > section:first-of-type > .project-like li");
|
||||
|
||||
var reading_answers = {};
|
||||
|
||||
console.log('reading_questions.length', reading_questions.length);
|
||||
|
||||
function make_submit_button() {
|
||||
if (document.getElementById("rq_submit")) { // don't make the button if it already exists
|
||||
console.log("button exists", document.getElementById("rq_submit"));
|
||||
return
|
||||
}
|
||||
last_reading_question = reading_questions[reading_questions.length - 1];
|
||||
answer_button_holder = document.createElement('div');
|
||||
answer_button_holder.setAttribute('class', 'rq_submit_wrapper');
|
||||
answer_button_holder.innerHTML = rq_submit_button;
|
||||
last_reading_question.insertAdjacentElement("afterend", answer_button_holder);
|
||||
}
|
||||
|
||||
function save_reading_questions() {
|
||||
rq_data = {"action": "save", "user": uname, "pw": emanu, "pI": pageIdentifier, "type": "readingquestions", "rq": JSON.stringify(reading_questions_object)}
|
||||
$.ajax({
|
||||
url: "https://aimath.org/cgi-bin/u/highlights.py",
|
||||
type: "post",
|
||||
data: JSON.stringify(rq_data),
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
console.log("something", data, "back from highlight");
|
||||
alert(data);
|
||||
},
|
||||
error: function(errMsg) {
|
||||
console.log("seems to be an error?",errMsg);
|
||||
alert("Error\n" + errMsg);
|
||||
}
|
||||
});
|
||||
|
||||
console.log("just ajax sent", JSON.stringify(reading_questions_object));
|
||||
}
|
||||
|
||||
// no point in handling reading questions if there are not any
|
||||
|
||||
if (reading_questions.length) {
|
||||
|
||||
// retrieve the existing reading questions, if they exist
|
||||
var reading_questions_object_id = pageIdentifier + "___" + "rq";
|
||||
var reading_questions_object = localStorage.getObject(reading_questions_object_id);
|
||||
var reading_questions_all_answered = false;
|
||||
var reading_questions_submitted = false;
|
||||
|
||||
if (!reading_questions_object) {
|
||||
reading_questions_object = {}
|
||||
}
|
||||
|
||||
if (Object.keys(reading_questions_object).length >= reading_questions.length) {
|
||||
console.log("Object.keys(reading_questions_object)",Object.keys(reading_questions_object));
|
||||
console.log("reading_questions", reading_questions);
|
||||
console.log("all reading questions have previously been answered");
|
||||
reading_questions_all_answered = true;
|
||||
}
|
||||
|
||||
answer_css = document.createElement('style');
|
||||
answer_css.type = "text/css";
|
||||
answer_css.id = "highlight_css";
|
||||
document.head.appendChild(answer_css);
|
||||
var css_for_ans = '#rq_submit { background: #FDD; padding: 3px 5px; border-radius: 0.5em}\n';
|
||||
css_for_ans += '#rq_submit.submitted { background: #EFE; color: #BBB}';
|
||||
css_for_ans += '.rq_submit_wrapper { margin-top: 0.5em; float: right}';
|
||||
answer_css.innerHTML = css_for_ans;
|
||||
|
||||
rq_answer_label = '<span'
|
||||
rq_answer_label += ' class="readingquestion_make_answer addcontent';
|
||||
rq_answer_label += ' ' + role + '"';
|
||||
// rq_answer_label += ' style="margin-left:1em; font-size:80%; color:#a0a;"';
|
||||
rq_answer_label += '>';
|
||||
if (role == "instructor") {
|
||||
rq_answer_label += 'Responses→';
|
||||
} else {
|
||||
rq_answer_label += 'Click twice to edit...';
|
||||
}
|
||||
rq_answer_label +='</span>';
|
||||
|
||||
var rq_submit_button = '<span';
|
||||
rq_submit_button += ' class="submit"';
|
||||
rq_submit_button += ' id="rq_submit"';
|
||||
rq_submit_button += '>';
|
||||
rq_submit_button += 'Submit answers';
|
||||
rq_submit_button +='</span>';
|
||||
|
||||
// make reading quesitons active, and insert answers if available
|
||||
for (var j=0; j < reading_questions.length; ++j) {
|
||||
var reading_question = reading_questions[j];
|
||||
var reading_question_id = reading_question.id;
|
||||
|
||||
rq_answer_id = reading_question_id + "_text";
|
||||
// var existing_content = localStorage.getObject(rq_answer_id);
|
||||
var existing_content = reading_questions_object[rq_answer_id];
|
||||
|
||||
if (existing_content && role == "student") {
|
||||
$('#'+reading_question_id).find(".readingquestion_make_answer").addClass("hidecontrols");
|
||||
|
||||
var this_ques_id_text = reading_question_id + "_text";
|
||||
var this_ques_id_controls = reading_question_id + "_controls";
|
||||
var answer_div = '<div';
|
||||
answer_div += ' id="' + this_ques_id_text + '"';
|
||||
answer_div += ' class="given_answer has_am process-math processme"';
|
||||
answer_div += '>';
|
||||
answer_div += dollars_to_slashparen(escapeHTML(existing_content)) + " ";
|
||||
answer_div += '</div>';
|
||||
|
||||
/* need to save the original so that mathjax does not change it */
|
||||
var hidden_answer_div = '<div';
|
||||
hidden_answer_div += ' id="' + this_ques_id_text + '_hidden' + '"';
|
||||
hidden_answer_div += ' class="tex2jax_ignore asciimath2jax_ignore" style="display: none">';
|
||||
hidden_answer_div += escapeHTML(existing_content);
|
||||
hidden_answer_div += '</div>';
|
||||
|
||||
|
||||
var this_rq_controls = '<div id="' + this_ques_id_controls + '" class="input_controls hidecontrols">';
|
||||
this_rq_controls += '<span class="action save_item rq_save">preview</span>';
|
||||
// this_rq_controls += '<span class="action clear_item rq_delete">delete</span>';
|
||||
this_rq_controls += '<span class="action amhelp">typing math?</span>';
|
||||
this_rq_controls += '</div>'
|
||||
|
||||
var this_rq_answer_and_controls = document.createElement('div');
|
||||
this_rq_answer_and_controls.setAttribute('style', 'width:80%; padding-left:10%; padding-right:10%; margin-top:0.5em;');
|
||||
this_rq_answer_and_controls.setAttribute('class', 'rq_answer');
|
||||
this_rq_answer_and_controls.innerHTML = hidden_answer_div + answer_div + this_rq_controls;
|
||||
console.log("appending to ", reading_question_id);
|
||||
$('#'+reading_question_id).append(this_rq_answer_and_controls);
|
||||
// this.parentNode.insertAdjacentElement("afterend", this_rq_answer_and_controls);
|
||||
|
||||
/* typeset the math in the reading questions answers */
|
||||
// MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
if (mjvers && mjvers < 3) {
|
||||
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
|
||||
} else if (mjvers > 3) {
|
||||
MathJax.typesetPromise();
|
||||
}
|
||||
|
||||
} else if(role == "instructor" || role == "student") {
|
||||
|
||||
var this_answer_link = document.createElement('div');
|
||||
this_answer_link.innerHTML = rq_answer_label;
|
||||
console.log("inserting afterend of",reading_question);
|
||||
// reading_question.insertAdjacentElement("afterend", this_answer_link);
|
||||
reading_question.append(this_answer_link);
|
||||
} else {
|
||||
|
||||
console.log("should not be here");
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function allow_student_answers(){
|
||||
/* make a new blank area to answer a question */
|
||||
$('.readingquestion_make_answer.student').mousedown(function(e){
|
||||
console.log(".readingquestion_make_answer student");
|
||||
// $(this).addClass("hidecontrols");
|
||||
// var this_ques_id = this.parentNode.parentNode.id;
|
||||
var this_ques_id = this.parentNode.parentNode.id;
|
||||
var this_ques_id_text = this_ques_id + "_text";
|
||||
var this_ques_id_controls = this_ques_id + "_controls";
|
||||
console.log(".rq", this_ques_id);
|
||||
answer_textarea = '<textarea';
|
||||
answer_textarea += ' class="rq_answer_text"'
|
||||
answer_textarea += ' id="' + this_ques_id_text + '_input"'
|
||||
answer_textarea += ' rows="' + '3' + '"';
|
||||
answer_textarea += ' style="width:95%; height: 63px;"';
|
||||
answer_textarea += '>';
|
||||
answer_textarea += '</textarea>';
|
||||
|
||||
var this_rq_controls = '<div id="' + this_ques_id_controls + '" class="input_controls" style="margin-bottom:-1.9em;">';
|
||||
this_rq_controls += '<span class="action save_item rq_save">preview</span>';
|
||||
// this_rq_controls += '<span class="action clear_item rq_delete">delete</span>';
|
||||
this_rq_controls += '<span class="action amhelp">typing math?</span>';
|
||||
this_rq_controls += '</div>'
|
||||
|
||||
var this_rq_answer_and_controls = document.createElement('div');
|
||||
this_rq_answer_and_controls.setAttribute('class', 'rq_answer editing');
|
||||
this_rq_answer_and_controls.setAttribute('style', 'width:80%; padding-left:10%; padding-right:10%; margin-top:0.5em;');
|
||||
|
||||
this_rq_answer_and_controls.innerHTML = answer_textarea + this_rq_controls;
|
||||
this.parentNode.insertAdjacentElement("afterend", this_rq_answer_and_controls);
|
||||
|
||||
this.remove();
|
||||
|
||||
// MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
|
||||
console.log("adding other keypress listener");
|
||||
var this_textarea = document.getElementById(this_ques_id_text + "_input");
|
||||
console.log("to", this_textarea);
|
||||
this_textarea.addEventListener("keypress", function() {
|
||||
// if(this_textarea.scrollTop != 0){
|
||||
// console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
|
||||
// console.log("this_textarea.clientHeight", this_textarea.clientHeight);
|
||||
this_textarea.overflow = "scroll";
|
||||
// console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
|
||||
// console.log("this_textarea.clientHeight", this_textarea.clientHeight);
|
||||
this_textarea.overflow = "hidden";
|
||||
// console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
|
||||
// console.log("this_textarea.getBoundingClientRect()", this_textarea.getBoundingClientRect());
|
||||
this_textarea.style.height = this_textarea.scrollHeight + "px";
|
||||
// }
|
||||
}, false);
|
||||
var tmp_id = this_ques_id_text + "_input";
|
||||
console.log("want focus to ", tmp_id);
|
||||
console.log("which is ", $("#" +tmp_id));
|
||||
console.log("the active ", document.hasFocus(), "element is", document.activeElement);
|
||||
console.log("or maybe it is ", $(":focus"));
|
||||
$("#" + tmp_id).focus();
|
||||
document.getElementById(tmp_id).focus();
|
||||
console.log("the active ", document.hasFocus(), "element is", document.activeElement);
|
||||
});
|
||||
}
|
||||
allow_student_answers();
|
||||
|
||||
$('.readingquestion_make_answer.instructor').mousedown(function(e){
|
||||
console.log(".readingquestion_make_answer instructor", "instId", uname, "pI", pageIdentifier);
|
||||
if (jQuery.isEmptyObject(reading_answers) || this.classList.contains("reload")) {
|
||||
rq_data = {"action": "retrieve", "instId": uname, "pw": emanu, "pI": pageIdentifier, "type": "readingquestions"};
|
||||
// myjson = {"action": "retrieve", "type": "readingquestions", "instId": "100002000", "pI": "beezer-FCLA___FPm"}
|
||||
|
||||
$.ajax({
|
||||
url: "https://aimath.org/cgi-bin/u/highlights.py",
|
||||
type: "post",
|
||||
data: JSON.stringify(rq_data),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(data) {
|
||||
reading_answers = data;
|
||||
// console.log("something", data, "back from highlight");
|
||||
// alert(data);
|
||||
},
|
||||
error: function(errMsg) {
|
||||
console.log("seems to be an error?",errMsg);
|
||||
alert("Error\n" + errMsg);
|
||||
}
|
||||
});
|
||||
}
|
||||
// var this_ques_id = this.parentNode.previousSibling.id;
|
||||
var this_ques_id = this.parentNode.parentNode.id;
|
||||
console.log("this_ques_id", this_ques_id);
|
||||
var compiled_answers = "";
|
||||
var title_of_this_section = $("section > h2 > .title").html();
|
||||
title_of_this_section = title_of_this_section.replace(/ /g, "%20");
|
||||
title_of_this_section = title_of_this_section.replace(/\?/g, "");
|
||||
var number_of_this_rq = 1 + $("#" + this_ques_id).index(".exercise-like");
|
||||
// console.log("first title_of_this_section", title_of_this_section);
|
||||
// console.log("first title_of_this_section.html()", title_of_this_section.html());
|
||||
// console.log("second title_of_this_section[0]", title_of_this_section[0]);
|
||||
for(var j=0; j < reading_answers.length; ++j) {
|
||||
var this_answer_all = reading_answers[j];
|
||||
var this_student_id = this_answer_all[0];
|
||||
var these_specific_answers = JSON.parse(this_answer_all[1]);
|
||||
console.log("these_specific_answers", these_specific_answers);
|
||||
console.log("this_answer_all[2]", this_answer_all[2]);
|
||||
var this_submitted_time = JSON.parse(this_answer_all[2]);
|
||||
// var this_submitted_time = this_answer_all[2];
|
||||
console.log("looking for this answer:", this_ques_id + "_text");
|
||||
var this_specific_answer = these_specific_answers[this_ques_id + "_text"];
|
||||
console.log("this_answer_all",this_answer_all);
|
||||
console.log("j",j,"this_specific_answer", this_specific_answer);
|
||||
console.log("this_specific_time", this_submitted_time);
|
||||
this_specific_answer = dollars_to_slashparen(escapeHTML(this_specific_answer))
|
||||
if (!this_specific_answer) {
|
||||
this_specific_answer = "no answer submitted";
|
||||
compiled_answers += '<div class="one_answer noanswer">';
|
||||
} else {
|
||||
compiled_answers += '<div class="one_answer">';
|
||||
}
|
||||
if (this_student_id.indexOf('@') > -1) {
|
||||
this_student_id = '<a href="mailto:' + this_student_id + '?Subject=RQ' + number_of_this_rq + '%20of%20' + title_of_this_section +'">' + this_student_id + '</a>';
|
||||
}
|
||||
compiled_answers += '<div class="s_id">' + this_student_id + '</div>';
|
||||
compiled_answers += '<div class="rq_sub_time">' + this_submitted_time + '</div>';
|
||||
compiled_answers += '<div class="s_ans has_am process-math processme">' + this_specific_answer + '</div>';
|
||||
compiled_answers += '</div>\n';
|
||||
console.log(j, "j", these_specific_answers)
|
||||
}
|
||||
// if the answers are being reloaded, remove the previous answers
|
||||
$("#" + this_ques_id + "_ans").remove();
|
||||
var answers_to_this_question = document.createElement('div');
|
||||
answers_to_this_question.setAttribute('class', 'compiled_answers');
|
||||
answers_to_this_question.setAttribute('id', this_ques_id + "_ans");
|
||||
|
||||
// this_rq_answer_and_controls.setAttribute('style', 'width:80%; margin-left:auto; margin-right:auto; margin-top:0.5em;');
|
||||
// this_rq_answer_and_controls.setAttribute('class', 'rq_answer');
|
||||
answers_to_this_question.innerHTML = compiled_answers;
|
||||
$('#'+this_ques_id).append(answers_to_this_question);
|
||||
// this.parentNode.remove();
|
||||
this.innerHTML = "Reload responses";
|
||||
$(this).addClass("reload");
|
||||
// MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
if (mjvers && mjvers < 3) {
|
||||
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
|
||||
} else if (mjvers > 3) {
|
||||
MathJax.typesetPromise();
|
||||
}
|
||||
|
||||
// this.parentNode.insertAdjacentElement("afterend", this_rq_answe
|
||||
|
||||
});
|
||||
|
||||
|
||||
function save_one_reading_question(this_ques_id) {
|
||||
this_ques_id_text = this_ques_id + "_text";
|
||||
var this_ans_text = $("#" + this_ques_id_text + "_input");
|
||||
console.log("the value:", this_ans_text.value);
|
||||
// var this_ques_id = this_ans.parentNode.previousSibling.previousSibling.id;
|
||||
// var this_ques_id = this_ans.id;
|
||||
console.log("this_ques_id", this_ques_id);
|
||||
// console.log("this_rq_ans", this_rq_ans);
|
||||
var this_ans_text_value = this_ans_text.val();
|
||||
console.log("this_ans_text_value", this_ans_text_value);
|
||||
if ( /[^\x00-\x7F]/.test(this_ans_text_value)) {
|
||||
this_ans_text_value = this_ans_text_value.replace(/[^\x00-\x7F]/g, "XX");
|
||||
alert("Illegal characters in answer have been replaced by XX");
|
||||
}
|
||||
this_ans_text_value = $.trim(this_ans_text_value); // jQuery trim (some chrome on windows had trouble with trim)
|
||||
// we have the contents of the answer, so save it to local storage
|
||||
console.log("saving in local storage at", this_ques_id_text, "the answer", this_ans_text_value);
|
||||
reading_questions_object[this_ques_id_text] = this_ans_text_value;
|
||||
localStorage.setObject(reading_questions_object_id, reading_questions_object);
|
||||
console.log("Object.keys(reading_questions_object)",Object.keys(reading_questions_object));
|
||||
console.log("reading_questions", reading_questions);
|
||||
if (Object.keys(reading_questions_object).length >= reading_questions.length && uname != "guest" && role=="student") {
|
||||
console.log("all reading questions have been answered");
|
||||
reading_questions_all_answered = true;
|
||||
make_submit_button();
|
||||
}
|
||||
|
||||
// and save a copy hidden on the page
|
||||
console.log("looking for", this_ques_id + "_text_hidden");
|
||||
// when the initial answer box is created, there is no hidden version
|
||||
if ( !document.getElementById(this_ques_id + "_text_hidden")) {
|
||||
console.log("making a place to hide the answer");
|
||||
var hidden_answer_div = document.createElement('div');
|
||||
hidden_answer_div.setAttribute('id', this_ques_id + '_text_hidden');
|
||||
hidden_answer_div.setAttribute('class', 'tex2jax_ignore asciimath2jax_ignore');
|
||||
hidden_answer_div.setAttribute('style', 'display: none');
|
||||
console.log("this_ans_text", this_ans_text);
|
||||
document.getElementById(this_ques_id_text + "_input").insertAdjacentElement("beforebegin", hidden_answer_div);
|
||||
// hidden_answer_div.insertBefore(this_ans_text);
|
||||
}
|
||||
console.log("hiding the raw answer in", this_ques_id + "_text_hidden");
|
||||
document.getElementById(this_ques_id + "_text_hidden").innerHTML = escapeHTML(this_ans_text_value);
|
||||
|
||||
//and show it on the page
|
||||
var this_ans_static = document.createElement('div');
|
||||
this_ans_static.setAttribute('id', this_ques_id_text);
|
||||
this_ans_static.setAttribute('class', 'given_answer has_am process-math processme');
|
||||
console.log("setting this_ans_static.innerHTML to", dollars_to_slashparen(escapeHTML(this_ans_text_value)));
|
||||
this_ans_static.innerHTML = dollars_to_slashparen(escapeHTML(this_ans_text_value)) + " "
|
||||
|
||||
// this_rq_ans.replaceWith(this_ans_static);
|
||||
console.log("about to replace this_ans_text", this_ans_text);
|
||||
this_ans_text.replaceWith(this_ans_static);
|
||||
|
||||
// MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
if (mjvers && mjvers < 3) {
|
||||
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
|
||||
} else if (mjvers > 3) {
|
||||
MathJax.typesetPromise();
|
||||
}
|
||||
|
||||
|
||||
console.log(" this_ans_text", this_ans_text);
|
||||
|
||||
console.log("this_ans_static", this_ans_static);
|
||||
|
||||
$(this_ans_static).parent().addClass("rq_answer");
|
||||
|
||||
$('#' + this_ques_id + "_controls").addClass("hidecontrols");
|
||||
// $(this_q).parent().parent().addClass("rq_answer");
|
||||
|
||||
/*
|
||||
var edit_button = document.createElement('span');
|
||||
edit_button.setAttribute('class', "action edit_item rq_edit");
|
||||
edit_button.innerHTML = "edit";
|
||||
this.replaceWith(edit_button);
|
||||
*/
|
||||
};
|
||||
|
||||
/* edit an existing answer */
|
||||
function edit_one_reading_question(this_ans) {
|
||||
console.log(".rq_edit", this_ans);
|
||||
// var this_ques_id = this.parentNode.previousSibling.id;
|
||||
var this_ques_id = this_ans.parentNode.parentNode.id;
|
||||
console.log("edditing this_ques_id", this_ques_id);
|
||||
var this_ques_id_text = this_ques_id + "_text";
|
||||
// var this_rq_ans = this.parentNode.previousSibling;
|
||||
var this_rq_ans = this_ans;
|
||||
// var this_rq_ans_id = this_ans.id;
|
||||
console.log("now this_ques_id_text", this_ques_id_text);
|
||||
console.log(".rq_edit", this_ques_id);
|
||||
console.log("this_rq_ans", this_rq_ans);
|
||||
var this_rq_text = this_rq_ans.innerHTML;
|
||||
console.log("looking for", this_ques_id + "_hidden");
|
||||
var this_rq_text_raw = uNescapeHTML(document.getElementById(this_ques_id + "_text_hidden").innerHTML);
|
||||
console.log("this_rq_text_raw",this_rq_text_raw);
|
||||
|
||||
//this is copied from above. need to eliminate repeated code
|
||||
|
||||
var answer_textarea_editable = document.createElement('textarea');
|
||||
answer_textarea_editable.setAttribute('id', this_ques_id_text + "_input");
|
||||
answer_textarea_editable.setAttribute('class', 'rq_answer_text');
|
||||
answer_textarea_editable.setAttribute('rows', '3');
|
||||
answer_textarea_editable.setAttribute('style', 'width:95%; height: 44px;');
|
||||
|
||||
this_rq_ans.replaceWith(answer_textarea_editable);
|
||||
|
||||
console.log("this_ans is",this_ans);
|
||||
console.log("adding editing to the parent of thing with id", this_ques_id_text, "which is the parent of", $('#' + this_ques_id_text));
|
||||
$('#' + this_ques_id_text + "_input").parent().addClass("editing");
|
||||
|
||||
$('#' + this_ques_id + "_controls").removeClass("hidecontrols");
|
||||
|
||||
// WHY? $(this).parent().parent().removeClass("rq_answer");
|
||||
|
||||
/* var save_button = document.createElement('span');
|
||||
save_button.setAttribute('class', "action edit_item rq_save");
|
||||
save_button.innerHTML = "save";
|
||||
this.replaceWith(save_button);
|
||||
*/
|
||||
|
||||
$('#' + this_ques_id + "_text_input").val(this_rq_text_raw);
|
||||
|
||||
answer_textarea_editable.style.height = answer_textarea_editable.scrollHeight + "px";
|
||||
answer_textarea_editable.addEventListener("keypress", function() {
|
||||
// if(answer_textarea_editable.scrollTop != 0){
|
||||
answer_textarea_editable.style.height = answer_textarea_editable.scrollHeight + "px";
|
||||
// }
|
||||
}, false);
|
||||
};
|
||||
|
||||
|
||||
/* handle saving when leaving an answer box, or editing an existing answer
|
||||
when hovering over an existing answer */
|
||||
|
||||
$('body').on('click','.given_answer', function(){
|
||||
// $(this).children().last().removeClass("hidecontrols");
|
||||
edit_one_reading_question(this);
|
||||
$(this).attr('z-index', '2000');
|
||||
});
|
||||
|
||||
$('body').on('mousedown','.rq_save', function(){
|
||||
// $(this).children().last().addClass("hidecontrols");
|
||||
// $(this).attr('z-index', '');
|
||||
// var this_rq = $(this).find(".given_answer");
|
||||
//ooooooooo var this_ques_id = this.parentNode.id;
|
||||
var this_ques_id = this.parentNode.parentNode.parentNode.id;
|
||||
console.log("id of this quesiton", this_ques_id);
|
||||
// var this_rq = $(this).find(".rq_answer_text");
|
||||
// console.log("this_rq iiIIIIII", this_rq);
|
||||
var this_current_answer = document.getElementById(this_ques_id + "_text_input");
|
||||
console.log("this_current_answer", this_current_answer);
|
||||
console.log("this_current_answer.value", this_current_answer.value);
|
||||
// console.log("this_rq IIIIiiii value", this_rq.value);
|
||||
// save_one_reading_question(this_rq.parentNode.id);
|
||||
save_one_reading_question(this_ques_id);
|
||||
console.log("left answer area");
|
||||
$(this).removeClass("editing");
|
||||
});
|
||||
|
||||
$('body').on('click','.rq_delete', function(){
|
||||
console.log(".rq_delete");
|
||||
var this_ques_id = this.parentNode.parentNode.parentNode.id;
|
||||
console.log(".rq_delete", this_ques_id);
|
||||
$('#' + this_ques_id + "_controls").removeClass("hidecontrols");
|
||||
//and now put in controls
|
||||
var this_answer_link = document.createElement('div');
|
||||
this_answer_link.innerHTML = rq_answer_label;
|
||||
console.log("inserting afterend of",reading_question);
|
||||
// reading_question.insertAdjacentElement("afterend", this_answer_link);
|
||||
$(this).parent().parent().replaceWith(this_answer_link);
|
||||
allow_student_answers();
|
||||
|
||||
|
||||
console.log("reading_questions_object", reading_questions_object);
|
||||
console.log("this_ques_id + _text", this_ques_id + "_text");
|
||||
delete reading_questions_object[this_ques_id + "_text"];
|
||||
console.log("now reading_questions_object", reading_questions_object);
|
||||
// localStorage.removeItem(this_ques_id);
|
||||
localStorage.setObject(reading_questions_object_id, reading_questions_object);
|
||||
});
|
||||
|
||||
if(reading_questions_all_answered && uname != "guest" && role=="student") {
|
||||
make_submit_button();
|
||||
console.log("made submit button");
|
||||
}
|
||||
|
||||
$('body').on('click','#rq_submit', function(){
|
||||
console.log("submitting rq answers");
|
||||
$('#rq_submit').addClass('submitted');
|
||||
document.getElementById('rq_submit').textContent = "Resubmit answers";
|
||||
save_reading_questions();
|
||||
});
|
||||
|
||||
$('body').on('click','.amhelp', function(){
|
||||
var amhelpmessage = "Write math formulas as AsciiMath inside `backticks`.\n";
|
||||
amhelpmessage += "For example:\nThe Pythagorean theorem says `sin^2(x) + cos^2(x) = 1`,\n";
|
||||
amhelpmessage += "The quadratic formula is `x = (-b +- sqrt(b^2 - 4ac))/(2a)`. \n";
|
||||
amhelpmessage += "Note the use of parentheses for grouping.\n";
|
||||
amhelpmessage += "Visit http://asciimath.org for a list of AsciiMath commands.\n\n";
|
||||
amhelpmessage += "You can also use LaTeX, with either slash-parentheses \\(...\\)\n";
|
||||
amhelpmessage += "or dollar signs $...$ as delimiters for inline math.";
|
||||
alert(amhelpmessage)
|
||||
});
|
||||
|
||||
if(reading_questions_all_answered && uname != "guest" && role=="student") {
|
||||
make_submit_button();
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,480 @@
|
||||
|
||||
/*
|
||||
highlight_css = document.createElement('style');
|
||||
highlight_css.type = "text/css";
|
||||
highlight_css.id = "highlight_css";
|
||||
document.head.appendChild(highlight_css);
|
||||
var css_for_hl = 'span.hl { background: yellow; }\n';
|
||||
css_for_hl += '#hlmenu { position: absolute; top: 300px; left: 200px;}\n';
|
||||
css_for_hl += '#hlmenu { padding: 8px; background: #FFF; }\n';
|
||||
css_for_hl += '#hlmenu { box-shadow: 8px 10px 5px #888; border: 1px solid #aaa;}\n';
|
||||
css_for_hl += '#hlmenu .hldelete { background: #fdd; }';
|
||||
css_for_hl += '#hlmenu .hldelete:hover { background: #fbb; }';
|
||||
css_for_hl += '#hlmenu .hlcopy { background: #ddf; }';
|
||||
css_for_hl += '#hlmenu .hlcopy:hover { background: #bbf; }';
|
||||
css_for_hl += '#hlmenu .dismiss:hover { background: #ff9; }';
|
||||
css_for_hl += '#hlmenu > div { padding: 4px; font-size: 90%}';
|
||||
highlight_css.innerHTML = css_for_hl;
|
||||
*/
|
||||
|
||||
hlmenu = document.createElement('div');
|
||||
hlmenu.id = "hlmenu";
|
||||
hlmenu.style.display = "none";
|
||||
hlmenu_contents = '<div class="hlcopy" data-hlid="">copy to clipboard</div>\n';
|
||||
hlmenu_contents += '<div class="hldelete" data-hlid="">delete highlight</div>\n';
|
||||
hlmenu_contents += '<div class="dismiss">dismiss menu</div>';
|
||||
hlmenu.innerHTML = hlmenu_contents;
|
||||
document.body.appendChild(hlmenu);
|
||||
|
||||
var all_highlights = localStorage.getObject("all_highlights");
|
||||
if (!all_highlights) {
|
||||
console.log("no highlights on this page",all_highlights);
|
||||
all_highlights= {};
|
||||
} else {
|
||||
console.log("highlights already",all_highlights);
|
||||
}
|
||||
|
||||
console.log("all_highlights.keys()", Object.keys(all_highlights));
|
||||
console.log("waiting for MathJax");
|
||||
MathJax.Hub.Register.StartupHook("End",function () {
|
||||
// need to wait for MathJax, because MathJax changes the number of nodes in a paragraph
|
||||
console.log("MathJax is done");
|
||||
display_all_highlights(all_highlights, Object.keys(all_highlights), 0);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
for (var key in all_highlights) {
|
||||
var this_key = key;
|
||||
var these_highlights = all_highlights[key];
|
||||
console.log("adding highlights to", key);
|
||||
// await display_highlights_on(key, all_highlights[key], 0)
|
||||
for (var i=0; i< these_highlights.length; ++i) {
|
||||
hl = these_highlights[i];
|
||||
console.log("inserting highlight",i,"which is",hl, "on", key);
|
||||
// display_one_highlight(key, hl);
|
||||
//fails because
|
||||
setTimeout(function() { display_one_highlight(this_key, hl)}, i*2000);
|
||||
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function index_of_child(child) {
|
||||
var i = 0;
|
||||
while( (child = child.previousSibling) != null )
|
||||
{i++ }
|
||||
return i
|
||||
}
|
||||
|
||||
function increment_id(list_of_things_with_ids) { // assume ids are of the form xxxxNN with N a digit and x a non-digit
|
||||
console.log("incrementing id on", list_of_things_with_ids);
|
||||
if (list_of_things_with_ids.length == 0) {
|
||||
return 0
|
||||
}
|
||||
|
||||
id_start = list_of_things_with_ids[0]["id"].replace(/^(.*?)[0-9]+$/, "$1");
|
||||
current_endings = [];
|
||||
for (var i=0; i < list_of_things_with_ids.length; ++i) {
|
||||
current_endings.push(list_of_things_with_ids[i]["id"].replace(/^.*?([0-9]+)$/, "$1"));
|
||||
}
|
||||
console.log("existing id endings", current_endings);
|
||||
current_max = Math.max(...current_endings);
|
||||
return id_start + (parseInt(current_max) + 1)
|
||||
}
|
||||
|
||||
function enclosing_p_or_li(obj) {
|
||||
console.log("obj.tagName", obj.tagName, "ggg",obj);
|
||||
if (!obj) {
|
||||
console.log("problem with previous object");
|
||||
return null
|
||||
}
|
||||
else if (obj.tagName == 'P' || obj.tagName == 'LI') {
|
||||
return obj
|
||||
}
|
||||
return enclosing_p_or_li(obj.parentNode)
|
||||
}
|
||||
|
||||
// If you just loop ofer the highlights to add them,
|
||||
// you end up with a race condition because each highlight changes
|
||||
// the structure of the paragraph.
|
||||
async function display_one_highlight(parent_id, hl) {
|
||||
var the_parent = document.getElementById(parent_id);
|
||||
if (!the_parent) {
|
||||
console.log("this id not on this page:", parent_id);
|
||||
return
|
||||
}
|
||||
console.log("setting", hl, "on", parent_id);
|
||||
var st_node_ind = hl['start_nn'];
|
||||
var st_offset = hl['start_offset'];
|
||||
var end_node_ind = hl['end_nn'];
|
||||
var end_offset = hl['end_offset'];
|
||||
console.log("st_node_ind", st_node_ind, "st_offset", st_offset, "end_node_ind", end_node_ind, "end_offset", end_offset);
|
||||
// other error checks: same parent
|
||||
if (st_offset < 0 || st_node_ind > the_parent.childNodes.length || end_node_ind > the_parent.childNodes.length || st_offset > the_parent.childNodes[st_node_ind].textContent.length || end_offset < 0 || end_offset > the_parent.childNodes[end_node_ind].textContent.length) {
|
||||
console.log("highlight data inconsistent with paragraph structure that contains", the_parent.childNodes.length, "nodes");
|
||||
return
|
||||
}
|
||||
|
||||
let this_range = document.createRange();
|
||||
console.log("setting this_range.setStart", the_parent.childNodes[st_node_ind], "with offset", st_offset, "out of", the_parent.childNodes[st_node_ind].textContent.length);
|
||||
this_range.setStart(the_parent.childNodes[st_node_ind], st_offset);
|
||||
this_range.setEnd(the_parent.childNodes[end_node_ind], end_offset);
|
||||
var inside_part = document.createElement("span")
|
||||
inside_part.classList.add("hl");
|
||||
inside_part.id = hl['id'];
|
||||
console.log("inside_part", inside_part, "going inside this_range",this_range);
|
||||
console.log("in the_parent",the_parent);
|
||||
this_range.surroundContents(inside_part);
|
||||
return;
|
||||
}
|
||||
|
||||
//var display_highlights_on = function(parent_id, highlights_on, ind) {
|
||||
async function display_highlights_on(parent_id, highlights_on, ind) {
|
||||
console.log("display_highlights_on", parent_id, "xxxx", ind, "out of", highlights_on.length);
|
||||
if (ind < highlights_on.length) {
|
||||
console.log("about to display one highlight, number", ind, "on", parent_id);
|
||||
await display_one_highlight(parent_id, highlights_on[ind]);
|
||||
++ind;
|
||||
await display_highlights_on(parent_id, highlights_on, ind)
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
async function display_all_highlights(every_highlight, hl_p_keys, i) {
|
||||
console.log("making hl on", hl_p_keys[i]);
|
||||
if (i < hl_p_keys.length) {
|
||||
await display_highlights_on(hl_p_keys[i], every_highlight[hl_p_keys[i]], 0);
|
||||
++i;
|
||||
await display_all_highlights(every_highlight, hl_p_keys, i)
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var DELAY = 500, clicks = 0, timer = null;
|
||||
$("p[id], li[id]").on("click", function(e) {
|
||||
clicks++; //count clicks
|
||||
|
||||
if(clicks === 1) {
|
||||
|
||||
if (e.target.classList.contains("hl")) {
|
||||
modifyhighlight(e);
|
||||
clicks = 0;
|
||||
} else {
|
||||
timer = setTimeout(function() {
|
||||
newhighlight()
|
||||
clicks = 0; //after action performed, reset counter
|
||||
}, DELAY);
|
||||
|
||||
}
|
||||
|
||||
|
||||
} else if (clicks === 2) {
|
||||
timer2 = setTimeout(function() {
|
||||
clearTimeout(timer);
|
||||
// alert("Double Click");
|
||||
clicks = 0;
|
||||
}, DELAY/2);
|
||||
} else {
|
||||
clearTimeout(timer); //prevent single-click action
|
||||
clearTimeout(timer2); //prevent double-click action
|
||||
// alert("Triple Click"); //perform triple-click action
|
||||
clicks = 0; //after action performed, reset counter
|
||||
}
|
||||
});
|
||||
|
||||
function save_highlights() {
|
||||
hl_data = {"action": "save", "user": uname, "pw": emanu, "bookID": bodyID, "type": "highlights", "hl": JSON.stringify(all_highlights)}
|
||||
$.ajax({
|
||||
url: "https://aimath.org/cgi-bin/u/highlights.py",
|
||||
type: "post",
|
||||
data: JSON.stringify(hl_data),
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
console.log("something", data, "back from highlight");
|
||||
// alert(data);
|
||||
},
|
||||
error: function(errMsg) {
|
||||
console.log("seems to be an error?",errMsg);
|
||||
// alert("Error\n" + errMsg);
|
||||
}
|
||||
});
|
||||
|
||||
console.log("just ajax sent", JSON.stringify(reading_questions_object));
|
||||
}
|
||||
|
||||
function newhighlight() {
|
||||
var this_selection = window.getSelection();
|
||||
console.log("UUUUUUUUUUUUUUUUUUUUUUUUUUU");
|
||||
console.log("selection", this_selection, "as string", this_selection.toString(), "length", this_selection.toString().length);
|
||||
if(this_selection.toString().length >= 3) {
|
||||
console.log("this_selection", this_selection);
|
||||
console.log("this_selection parentNode", this_selection.parentNode);
|
||||
|
||||
num_selected_ranges = this_selection.rangeCount;
|
||||
console.log("this_selection.rangeCount", this_selection.rangeCount);
|
||||
console.log("this_selection.getRangeAt(0)", this_selection.getRangeAt(0));
|
||||
console.log("this_selection.getRangeAt(num_selected_ranges)", this_selection.getRangeAt(num_selected_ranges-1));
|
||||
console.log("this_selection.getRangeAt(0).startContainer", this_selection.getRangeAt(0).startContainer);
|
||||
console.log("this_selection.getRangeAt(0).endContainer", this_selection.getRangeAt(0).endContainer);
|
||||
console.log("this_selection.getRangeAt(-1).startContainer", this_selection.getRangeAt(num_selected_ranges-1).startContainer);
|
||||
console.log("this_selection.getRangeAt(-1).endContainer", this_selection.getRangeAt(num_selected_ranges-1).endContainer);
|
||||
console.log("start equals end", this_selection.getRangeAt(0).startContainer == this_selection.getRangeAt(0).endContainer);
|
||||
console.log("this_selection.getRangeAt(0).startContainer.parent", this_selection.getRangeAt(0).startContainer.parentNode);
|
||||
console.log("this_selection.getRangeAt(0).endContainer.parent", this_selection.getRangeAt(0).endContainer.parentNode);
|
||||
starting_parent = enclosing_p_or_li(this_selection.getRangeAt(0).startContainer);
|
||||
starting_parent_id = starting_parent.id;
|
||||
ending_parent_id = enclosing_p_or_li(this_selection.getRangeAt(num_selected_ranges-1).endContainer).id;
|
||||
console.log("starting parent", enclosing_p_or_li(this_selection.getRangeAt(0).startContainer));
|
||||
console.log("starting_parent.childNodes", starting_parent.childNodes);
|
||||
console.log("starting_parent.childNodes.length", starting_parent.childNodes.length);
|
||||
console.log("ending parent", enclosing_p_or_li(this_selection.getRangeAt(0).endContainer));
|
||||
console.log("index of starting node", index_of_child(this_selection.getRangeAt(0).startContainer));
|
||||
console.log("which is", starting_parent.childNodes[index_of_child(this_selection.getRangeAt(0).startContainer)]);
|
||||
console.log("index of ending node", index_of_child(this_selection.getRangeAt(num_selected_ranges-1).endContainer));
|
||||
console.log("which is", starting_parent.childNodes[index_of_child(this_selection.getRangeAt(num_selected_ranges-1).endContainer)]);
|
||||
console.log("XXXXXXXXXXXXXXXXXXXXXXX");
|
||||
starting_node = this_selection.getRangeAt(0);
|
||||
starting_node_container = starting_node.startContainer;
|
||||
starting_node_number = index_of_child(starting_node_container);
|
||||
starting_node_offset = starting_node.startOffset;
|
||||
console.log("starting_node", starting_node, "starting_node_container", starting_node_container);
|
||||
console.log("starting_parent.childNodes[0]", starting_parent.childNodes[0]);
|
||||
ending_node = this_selection.getRangeAt(num_selected_ranges-1);
|
||||
ending_node_container = ending_node.endContainer;
|
||||
console.log("ending_node", ending_node, "ending_node_container", ending_node_container);
|
||||
ending_node_number = index_of_child(ending_node_container);
|
||||
ending_node_offset = ending_node.endOffset;
|
||||
console.log("selection starts at character number", starting_node.startOffset, "in node number", index_of_child(starting_node), "of node", starting_node.startContainer, "within", starting_node.startContainer.parentNode,"which is", starting_node);
|
||||
console.log("selection ends at character number", ending_node.endOffset, "in node number", index_of_child(ending_node_container), "of node", ending_node.endContainer, "within", ending_node.endContainer.parentNode, "which is", ending_node);
|
||||
|
||||
// let this_range = document.createRange();
|
||||
// this_range.setStart(starting_parent.childNodes[starting_node_number], starting_node_offset);
|
||||
// this_range.setEnd(document.getElementById(starting_parent_id).childNodes[ending_node_number], ending_node_offset);
|
||||
// test_inside_part=document.createElement("span")
|
||||
// test_inside_part.classList.add("gggg");
|
||||
// this_range.surroundContents(test_inside_part);
|
||||
console.log("num_selected_ranges", num_selected_ranges, "starting_parent_id", starting_parent_id, "ending_parent_id", ending_parent_id);
|
||||
this_selection.empty();
|
||||
console.log("starting_parent_id", starting_parent_id, "ending_parent_id", ending_parent_id);
|
||||
if (starting_parent_id != ending_parent_id) {
|
||||
alert("Highlights must be within\none paragraph or list item.");
|
||||
return ""
|
||||
}
|
||||
if (starting_parent != starting_node_container.parentNode) {
|
||||
starting_node_number = index_of_child(starting_node_container.parentNode) - 1;
|
||||
console.log("new starting node",starting_node_number, " which is", starting_parent.childNodes[starting_node_number]);
|
||||
starting_node_offset = starting_parent.childNodes[starting_node_number].length;
|
||||
}
|
||||
if (starting_parent != ending_node_container.parentNode) {
|
||||
ending_node_number = index_of_child(ending_node_container.parentNode) + 1;
|
||||
console.log("new edngin node",ending_node_number, " which is", starting_parent.childNodes[ending_node_number]);
|
||||
ending_node_offset = 0;
|
||||
}
|
||||
console.log("starting_parent eq st cont parent", starting_parent == starting_node_container.parentNode, "starting_parent eq end cont parent", starting_parent == ending_node_container.parentNode);
|
||||
// display_one_highlight(starting_parent_id, starting_node_number, starting_node_offset, ending_node_number, ending_node_offset);
|
||||
// console.log("this_range", this_range);
|
||||
this_highlight = {"start_nn": starting_node_number,
|
||||
"start_offset": starting_node_offset,
|
||||
"end_nn": ending_node_number,
|
||||
"end_offset": ending_node_offset};
|
||||
if (starting_parent_id in all_highlights) {
|
||||
console.log("the starting_parent_id", starting_parent_id, "is already in all_highlights", all_highlights);
|
||||
new_id = increment_id(all_highlights[starting_parent_id]);
|
||||
this_highlight['id'] = new_id;
|
||||
all_highlights[starting_parent_id].push(this_highlight)
|
||||
} else {
|
||||
this_highlight['id'] = starting_parent_id + "-" + "hl" + 1;
|
||||
all_highlights[starting_parent_id] = [this_highlight]
|
||||
}
|
||||
display_one_highlight(starting_parent_id, this_highlight);
|
||||
localStorage.setObject("all_highlights", all_highlights);
|
||||
|
||||
if (uname != "guest" && role=="student") {
|
||||
console.log("saving highlights");
|
||||
save_highlights();
|
||||
}
|
||||
console.log("all_highlights", all_highlights);
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function modifyhighlight(e) {
|
||||
this_hl = e.target;
|
||||
console.log("clicked hl", this_hl.id);
|
||||
|
||||
var x = e.clientX, y = e.clientY;
|
||||
console.log("x", x, "y", y);
|
||||
document.getElementById("hlmenu").style.top = (y - 10 + $(window).scrollTop()) + 'px';
|
||||
document.getElementById("hlmenu").style.left = (x + 20) + 'px';
|
||||
document.getElementById("hlmenu").style.display = 'block';
|
||||
document.getElementsByClassName("hlcopy")[0].setAttribute("data-hlid", this_hl.id);
|
||||
document.getElementsByClassName("hldelete")[0].setAttribute("data-hlid", this_hl.id);
|
||||
// tooltipSpan.style.left = (x + 20) + 'px';
|
||||
|
||||
var parent_id = this_hl.id.replace(/^(.*)-[^\-]*$/, "$1");
|
||||
var number_of_this_highlight = this_hl.id.slice(-1);
|
||||
var these_highlights = all_highlights[parent_id];
|
||||
var this_highlight = these_highlights[number_of_this_highlight-1];
|
||||
console.log("parent id", parent_id, "nunber",number_of_this_highlight);
|
||||
var num_child_nodes = this_hl.childNodes.length;
|
||||
console.log("which has", this_hl.childNodes.length, "child nodes");
|
||||
for (var i=0; i < num_child_nodes; ++i) {
|
||||
console.log(i, "node is", this_hl.childNodes[i])
|
||||
}
|
||||
console.log("highlights on this item",all_highlights[parent_id], "of which we clicked", these_highlights[number_of_this_highlight - 1],
|
||||
"number", number_of_this_highlight, "out of", these_highlights.length );
|
||||
for (var i=0; i<these_highlights.length; ++i) {
|
||||
console.log("highilght", i, "is", these_highlights[i])
|
||||
}
|
||||
console.log("this one starts at", this_highlight["start_nn"], "and ends at", this_highlight["end_nn"]);
|
||||
console.log("$(this_hl)", $(this_hl));
|
||||
console.log("$(this_hl).contents", $(this_hl).text());
|
||||
console.log("this_hl.innerHTML", this_hl.innerHTML);
|
||||
|
||||
if (this_hl.childNodes.length == 1) { //highlight contains only text
|
||||
if (this_hl.previousSibling.nodeType == 3 && this_hl.nextSibling.nodeType == 3) { // prev and next are also text
|
||||
console.log("this_hl", this_hl, "this_hl.previousSibling", this_hl.previousSibling, "type", this_hl.previousSibling.nodeType);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//from https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/
|
||||
function copyStringToClipboard (str) {
|
||||
// Create new element
|
||||
var el = document.createElement('textarea');
|
||||
// Set value (string to be copied)
|
||||
el.value = str;
|
||||
// Set non-editable to avoid focus and move outside of view
|
||||
el.setAttribute('readonly', '');
|
||||
el.style = {position: 'absolute', left: '-9999px'};
|
||||
document.body.appendChild(el);
|
||||
// Select text inside element
|
||||
el.select();
|
||||
// Copy text to clipboard
|
||||
document.execCommand('copy');
|
||||
// Remove temporary element
|
||||
document.body.removeChild(el);
|
||||
}
|
||||
|
||||
$('body').on('click','.hlcopy', function(e){
|
||||
|
||||
var hl_to_copy_id = this.getAttribute("data-hlid");
|
||||
console.log("copying highlight", hl_to_copy_id);
|
||||
hl_to_copy = document.getElementById(hl_to_copy_id);
|
||||
the_highlight = hl_to_copy.innerHTML;
|
||||
copyStringToClipboard(the_highlight);
|
||||
// console.log("hl_to_copy",hl_to_copy,"the_highlight", the_highlight);
|
||||
// hl_to_copy.focus();
|
||||
// document.execCommand('copy');
|
||||
document.getElementById("hlmenu").style.display = 'none';
|
||||
});
|
||||
|
||||
$('body').on('click','.hldelete', function(e){
|
||||
|
||||
var hl_to_del_id = this.getAttribute("data-hlid");
|
||||
console.log("going to delete", hl_to_del_id);
|
||||
hl_to_delete = document.getElementById(hl_to_del_id);
|
||||
var parent_id = hl_to_del_id.replace(/^(.*)-[^\-]*$/, "$1");
|
||||
var the_parent = document.getElementById(parent_id);
|
||||
|
||||
//and then update the stored highlights
|
||||
//this is complicated, because highlights are described in terms of the structure
|
||||
//of the paragrpah, which depends on which highlights already xist
|
||||
//So first we determine the order in which the highlights appear
|
||||
//(and find out how many nodes are being deleted)
|
||||
var sibling_nodes = the_parent.childNodes;
|
||||
var node_counter = {};
|
||||
var additional_offset, node_increment;
|
||||
var node_ct = 0;
|
||||
for (var i=0; i < sibling_nodes.length; ++i) {
|
||||
if (sibling_nodes[i].id) {
|
||||
node_counter[sibling_nodes[i].id] = node_ct;
|
||||
node_ct += 1;
|
||||
}
|
||||
if (sibling_nodes[i].id == hl_to_del_id) {
|
||||
node_increment = sibling_nodes[i].childNodes.length - 1
|
||||
}
|
||||
}
|
||||
console.log("node_increment", node_increment);
|
||||
console.log("node_counter", node_counter);
|
||||
console.log("deleting node", node_counter[hl_to_del_id]);
|
||||
//find out the offset of the node to be deleted
|
||||
console.log("all_highlights[parent_id]", all_highlights[parent_id]);
|
||||
for (var i=0; i < all_highlights[parent_id].length; ++i) {
|
||||
var one_highlight = all_highlights[parent_id][i];
|
||||
console.log("checking one_highlight", one_highlight);
|
||||
if (node_counter[one_highlight['id']] == node_counter[hl_to_del_id]) {
|
||||
additional_offset = one_highlight['end_offset'];
|
||||
the_hl_to_delete = all_highlights[parent_id][i];
|
||||
}
|
||||
}
|
||||
console.log("the_hl_to_delete", the_hl_to_delete);
|
||||
console.log("additional_offset", additional_offset);
|
||||
//then we re-make the list of highlights of this parent
|
||||
//go through the highlights, adjusting those which we added after the
|
||||
//lh being deleted, and whcich also occurs later in the text.
|
||||
//Note: this is only for the case if pure text paragraphs
|
||||
var new_highlights = [];
|
||||
var previous_highlight;
|
||||
var past_this_hl = false;
|
||||
for (var i=0; i < all_highlights[parent_id].length; ++i) {
|
||||
var one_highlight = all_highlights[parent_id][i];
|
||||
console.log("again checking one_highlight", one_highlight);
|
||||
console.log("x",one_highlight["start_nn"], "y", the_hl_to_delete["end_nn"], "z", the_hl_to_delete["end_nn"] + additional_offset);
|
||||
if (!past_this_hl) {
|
||||
if (one_highlight["id"] == hl_to_del_id) {
|
||||
console.log("found it", one_highlight);
|
||||
past_this_hl = true
|
||||
} else {
|
||||
new_highlights.push(one_highlight)
|
||||
}
|
||||
} else { // hl occurs after, but maybe not physically after
|
||||
console.log('the_hl_to_delete["start_nn"]', the_hl_to_delete["start_nn"], 'one_highlight["start_nn"]', one_highlight["start_nn"]);
|
||||
if (node_counter[one_highlight["id"]] < node_counter[hl_to_del_id]) {
|
||||
console.log("case 0");
|
||||
new_highlights.push(one_highlight)
|
||||
} else if (node_counter[one_highlight["id"]] == node_counter[hl_to_del_id]) {
|
||||
console.log("ERROR, we shoudl be past this point!");
|
||||
continue
|
||||
} else if (one_highlight["start_nn"] == the_hl_to_delete["start_nn"] + 2){
|
||||
console.log("offset match with", one_highlight);
|
||||
previous_highlight = one_highlight;
|
||||
previous_highlight['start_nn'] += -2 + node_increment;
|
||||
previous_highlight['end_nn'] += -2 + node_increment;
|
||||
previous_highlight['start_offset'] += additional_offset;
|
||||
previous_highlight['end_offset'] += additional_offset;
|
||||
new_highlights.push(previous_highlight);
|
||||
} else {
|
||||
console.log("apparently a far away match", one_highlight);
|
||||
previous_highlight = one_highlight;
|
||||
previous_highlight['start_nn'] += -2 + node_increment;
|
||||
previous_highlight['end_nn'] += -2 + node_increment;
|
||||
new_highlights.push(previous_highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("the new_highlights", new_highlights, "parent_id", parent_id);
|
||||
if (new_highlights.length > 0) {
|
||||
all_highlights[parent_id] = new_highlights
|
||||
} else {
|
||||
delete all_highlights[parent_id]
|
||||
}
|
||||
|
||||
localStorage.setObject("all_highlights", all_highlights);
|
||||
|
||||
|
||||
// hide the current highlight
|
||||
$(hl_to_delete).replaceWith(hl_to_delete.innerHTML);
|
||||
|
||||
document.getElementById(parent_id).normalize(); // because a previous step creates adjacent text nodes
|
||||
|
||||
document.getElementById("hlmenu").style.display = 'none';
|
||||
});
|
||||
|
||||
$('body').on('click','.dismiss', function(e){
|
||||
console.log(".dismiss of",this);
|
||||
the_parent = this.closest("[id]");
|
||||
the_parent.style.display = 'none';
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
|
||||
var icon = {
|
||||
"warning": "⚠️ ",
|
||||
"commentary": "☕",
|
||||
"media": "▶",
|
||||
"tip": "📣",
|
||||
"worksheet": "📄",
|
||||
"assesment": "A<sup>+</sup>",
|
||||
"slides": "📻",
|
||||
"outcomes": "✓"
|
||||
};
|
||||
|
||||
var html_words_of = {
|
||||
"warning": "Common pitfall",
|
||||
"commentary": "Alert",
|
||||
"media": "An amusing demo",
|
||||
"tip": "Tip: discussion point",
|
||||
"worksheet": "Worksheet:",
|
||||
"assesment": "Sample exam:",
|
||||
"slides": "Slides:",
|
||||
"outcomes": "Learning outcomes"
|
||||
}
|
||||
|
||||
// <br> <a href='word'>Word</a> <a href='word'>PTX</a> <a href='word'>PDF</a></span>",
|
||||
|
||||
var type_name = {
|
||||
"warning": "warning",
|
||||
"commentary": "commentary",
|
||||
"media": "media",
|
||||
"tip": "tip",
|
||||
"worksheet": "worksheet",
|
||||
"assesment": "assesment",
|
||||
"slides": "slides",
|
||||
"outcomes": "outcomes"
|
||||
};
|
||||
|
||||
console.log("in instructor.js", role, "role", logged_in, "logged_in");
|
||||
|
||||
if (role=="instructor") {
|
||||
console.log(" loading instructor resources");
|
||||
|
||||
var instructor_resources = document.querySelectorAll(".instructor");
|
||||
|
||||
console.log('instructor_resources.length', instructor_resources.length);
|
||||
|
||||
var icons_on_this_page = [];
|
||||
|
||||
for (var j=0; j < instructor_resources.length; ++j) {
|
||||
var instructor_resource = instructor_resources[j];
|
||||
var instructor_resource_parent_id = instructor_resource.parentNode.id;
|
||||
console.log(" XXXXXXXXXXXX instructor_resource.parentNode", instructor_resource.parentNode);
|
||||
console.log("instructor_resource_parent_id", instructor_resource_parent_id);
|
||||
if(instructor_resource_parent_id) {
|
||||
} else {
|
||||
instructor_resource_parent_id = instructor_resource.parentNode.parentNode.id;
|
||||
}
|
||||
|
||||
this_type = instructor_resource.getAttribute("data-resource");
|
||||
this_icon = icon[this_type];
|
||||
var id_of_this_icon = "resourceid" + j;
|
||||
icons_on_this_page.push([type_name[this_type], this_icon, id_of_this_icon]);
|
||||
|
||||
console.log("this_type", this_type, "this_icon", this_icon, "html_words_of[this_type]", html_words_of[this_type]);
|
||||
this_item_with_resource = document.getElementById(instructor_resource_parent_id);
|
||||
console.log("instructor_resource_parent_id", instructor_resource_parent_id, "this_item_with_resource", this_item_with_resource);
|
||||
|
||||
var this_margin_resource = document.createElement('div');
|
||||
this_margin_resource.setAttribute('class', 'marginresource');
|
||||
this_margin_resource.setAttribute('id', id_of_this_icon);
|
||||
this_margin_resource.innerHTML = "<span class='icon " + this_type + "'>" + this_icon + "</span>";
|
||||
if(!(this_title = instructor_resource.getAttribute("title"))) {
|
||||
this_title = html_words_of[this_type]
|
||||
}
|
||||
if(instructor_resource.hasAttribute("data-content")) {
|
||||
this_content = instructor_resource.getAttribute("data-content");
|
||||
this_title = '<a href="" data-knowl="' + this_content + '">' + this_title + '</a>';
|
||||
}
|
||||
var links_html = ""
|
||||
if(instructor_resource.hasAttribute("data-links")) {
|
||||
var this_links = instructor_resource.getAttribute("data-links");
|
||||
these_links = this_links.split(";");
|
||||
links_html = '<span class="resource_links">'
|
||||
console.log(" OOOOOOOOOOOOOO these_links", these_links, "these_links.length", these_links.length);
|
||||
if(these_links.length > 0) {
|
||||
console.log("these_links[0]", these_links[0]);
|
||||
}
|
||||
tmpJ = these_links.length;
|
||||
console.log("tmpJ", tmpJ);
|
||||
for(var jj=0; jj < these_links.length; ++jj) {
|
||||
console.log( " UUUUUUUUUUUUUu these_links[jj]", these_links[jj]);
|
||||
this_type_and_link = these_links[jj].split(",");
|
||||
if(jj>0) { links_html += ", " }
|
||||
links_html += '<a href="' + this_type_and_link[1] + '">' + this_type_and_link[0] + '</a>';
|
||||
}
|
||||
links_html += 'XX</span>';
|
||||
console.log("done adding links to title");
|
||||
}
|
||||
this_title = '<span class="resource_description">' + this_title
|
||||
if(links_html) {
|
||||
this_title += links_html
|
||||
}
|
||||
this_title += '</span>';
|
||||
this_margin_resource.innerHTML += this_title;
|
||||
// this_item_with_resource.insertBefore(this_margin_resource);
|
||||
this_item_with_resource.insertBefore(this_margin_resource, this_item_with_resource.firstChild);
|
||||
console.log("appended to ",this_item_with_resource);
|
||||
}
|
||||
|
||||
icons_on_this_page.sort();
|
||||
|
||||
var icon_legend_for_this_page = document.createElement('div');
|
||||
var prev_icon = "";
|
||||
var icon_list = '<span class="icongroup">' + "<span class='icon_name'>" + icons_on_this_page[0][0] + ":</span> ";
|
||||
for (var j=0; j < icons_on_this_page.length; ++j) {
|
||||
next_icon = icons_on_this_page[j][1];
|
||||
if(j > 0 && next_icon !== prev_icon) {
|
||||
icon_list += '</span>' + "<br>";
|
||||
icon_list += '<span class="icongroup">' + "<span class='icon_name'>" + icons_on_this_page[j][0] + ":</span> ";
|
||||
icon_list += '<a href="#' + icons_on_this_page[j][2] + '">' + next_icon + '</a>';
|
||||
} else {
|
||||
icon_list += '<a href="#' + icons_on_this_page[j][2] + '">' + next_icon + '</a>';
|
||||
}
|
||||
prev_icon = next_icon;
|
||||
}
|
||||
icon_list += '</span>';
|
||||
|
||||
icon_legend_for_this_page.setAttribute('class', 'iconlegend');
|
||||
icon_legend_for_this_page.innerHTML = icon_list
|
||||
document.body.appendChild(icon_legend_for_this_page);
|
||||
|
||||
} // if logged in as instructor
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
|
||||
(function(b, u, v) {
|
||||
function x(b, f, e) {
|
||||
b = (b + "").match(/^(-?[0-9]+)(%)?$/);
|
||||
if (!b) return !1;
|
||||
var c = parseInt(b[1], 10);
|
||||
b[2] && (c *= f / 100);
|
||||
return 0 > c ? f + c + (e || 0) : c
|
||||
}
|
||||
|
||||
function y(k, f) {
|
||||
function e() {
|
||||
function b() {
|
||||
g = +new Date;
|
||||
f.apply(e, t);
|
||||
c && (c = clearTimeout(c))
|
||||
}
|
||||
var e = this,
|
||||
q = +new Date - g,
|
||||
t = arguments;
|
||||
c && (c = clearTimeout(c));
|
||||
q > k ? b() : c = setTimeout(b, k - q)
|
||||
}
|
||||
var c, g = 0;
|
||||
b.guid && (e.guid = f.guid = f.guid || b.guid++);
|
||||
return e
|
||||
}
|
||||
b.Espy = function(k, f, e) {
|
||||
function c(a, d) {
|
||||
b.isPlainObject(a) && (d = a, a = null);
|
||||
b.extend(t.prototype, d);
|
||||
null !== a && (w = a)
|
||||
}
|
||||
|
||||
function g(a) {
|
||||
if (a =
|
||||
q(a)) {
|
||||
var d = a.$el.offset()[a.settings.horizontal ? "left" : "top"] - p.offset[a.settings.horizontal ? "left" : "top"],
|
||||
h = a.$el[a.settings.horizontal ? "outerWidth" : "outerHeight"]();
|
||||
b.extend(a, {
|
||||
start: d,
|
||||
elSize: h,
|
||||
end: d + h
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function r(a) {
|
||||
// console.log("r(a) with a = ", a);
|
||||
if (a === v) b.each(m, r);
|
||||
else if (a = q(a)) {
|
||||
var d = p[a.settings.horizontal ? "width" : "height"],
|
||||
h = x(a.settings.size, d),
|
||||
d = p[a.settings.horizontal ? "left" : "top"] + x(a.settings.offset, d, -h),
|
||||
c = d + h,
|
||||
h = a.settings.contain ? d <= a.start && c >= a.end ? "inside" : d + h / 2 > a.start + a.elSize / 2 ? a.settings.horizontal ? "left" :
|
||||
"up" : a.settings.horizontal ? "right" : "down" : d > a.start && d < a.end || c > a.start && c < a.end || d <= a.start && c >= a.start || d <= a.end && c >= a.end ? "inside" : d > a.end ? a.settings.horizontal ? "left" : "up" : a.settings.horizontal ? "right" : "down";
|
||||
a.state !== h && (a.state = h, "function" === typeof w && w.call(a.el, "inside" === h, h), "function" === typeof a.callback && a.callback.call(a.el, "inside" === h, h))
|
||||
}
|
||||
}
|
||||
|
||||
function s(a) {
|
||||
if (m.hasOwnProperty(a)) return a;
|
||||
if (b.isPlainObject(a) && m.hasOwnProperty(a.id)) return a.id;
|
||||
a = b(a)[0];
|
||||
var d = !1;
|
||||
b.each(m, function(b,
|
||||
c) {
|
||||
c.el === a && (d = b)
|
||||
});
|
||||
return d
|
||||
}
|
||||
|
||||
// console.log("nothing yet");
|
||||
function q(a) {
|
||||
return (a = s(a)) ? m[a] : !1
|
||||
}
|
||||
"function" !== typeof f && (e = f, f = 0);
|
||||
// console.log("k was", k);
|
||||
var t = function(a) {
|
||||
b.extend(this, a)
|
||||
},
|
||||
u = function(a, d, c, e) {
|
||||
this.id = a;
|
||||
this.el = d;
|
||||
this.$el = b(d);
|
||||
this.callback = c;
|
||||
this.settings = new t(e);
|
||||
this.configure = function(a, d) {
|
||||
b.isPlainObject(a) && (d = a, a = null);
|
||||
b.extend(this.settings, d);
|
||||
null !== a && (this.callback = a)
|
||||
}
|
||||
},
|
||||
n = this,
|
||||
l = b(k);
|
||||
// console.log("l", l, "l==window", l[0]==window);
|
||||
k = b.fn.espy.defaults;
|
||||
// console.log("k is", k);
|
||||
var w, m = {},
|
||||
z = 0;
|
||||
// because window.offset() is not defined in jQuery 3 (why?!?!?!),
|
||||
// we have to treat that as a special case (DF 1/28/19)
|
||||
if (l[0]==window) { offSET = { top: 0, left: 0 } }
|
||||
else { offSET = l.offset() }
|
||||
var p = {
|
||||
top: l.scrollTop(),
|
||||
left: l.scrollLeft(),
|
||||
width: l.innerWidth(),
|
||||
height: l.innerHeight(),
|
||||
offset: offSET
|
||||
/*
|
||||
offset: l.offset() || {
|
||||
top: 0,
|
||||
left: 0
|
||||
}
|
||||
*/
|
||||
};
|
||||
// console.log("p", p);
|
||||
c(f, b.extend({}, k, e));
|
||||
n.add = function(a, d, c) {
|
||||
b.isPlainObject(d) && (c = d, d = 0);
|
||||
b(a).each(function(a, b) {
|
||||
var e = s(b) || "s" + z++;
|
||||
m[e] = new u(e, b, d, c);
|
||||
g(e);
|
||||
r(e)
|
||||
})
|
||||
};
|
||||
n.configure = function(a, d, e) {
|
||||
"function" === typeof a ? (d = a, a = null, b.isPlainObject(d) && (e = d, d = null)) : b.isPlainObject(a) ? (e = a, d = a = null) : b.isPlainObject(d) && (e = d, d = null);
|
||||
null === a ? (c(d, e), b.each(m, function(a, b) {
|
||||
g(b)
|
||||
})) : b(a).each(function(a, b) {
|
||||
var c = q(b);
|
||||
c && (c.configure(d, e), g(b))
|
||||
})
|
||||
};
|
||||
n.reload = function(a) {
|
||||
a === v ? b.each(m, function() {
|
||||
g(this.id)
|
||||
}) :
|
||||
b(a).each(function(a, b) {
|
||||
var c = s(b);
|
||||
c && (g(c), r(c))
|
||||
})
|
||||
};
|
||||
n.remove = function(a) {
|
||||
b(a).each(function(a, b) {
|
||||
var c = s(b);
|
||||
c && delete m[c]
|
||||
})
|
||||
};
|
||||
n.destroy = function() {
|
||||
l.off(".espy");
|
||||
m = {};
|
||||
n = v
|
||||
};
|
||||
n.resize = function() {
|
||||
b.each(m, function() {
|
||||
this.reloadOnResize && g(this)
|
||||
});
|
||||
p.width = l.innerWidth();
|
||||
p.height = l.innerHeight();
|
||||
r()
|
||||
};
|
||||
l.on("scroll.espy", y(k.delay, function() {
|
||||
p.top = l.scrollTop();
|
||||
p.left = l.scrollLeft();
|
||||
r()
|
||||
}));
|
||||
l.on("resize.espy", y(k.delay, function() {
|
||||
n.resize()
|
||||
}))
|
||||
};
|
||||
b.fn.espy = function(k, f) {
|
||||
var e, c;
|
||||
e = f && f.context || u;
|
||||
var g = b.data(e,
|
||||
"espy") || b.data(e, "espy", new b.Espy(e));
|
||||
"string" !== typeof k ? g.add(this, k, f) : (e = k, c = Array.prototype.slice.call(arguments), c[0] = this, "function" === typeof g[e] && g[e].apply(g, c));
|
||||
return this
|
||||
};
|
||||
b.fn.espy.defaults = {
|
||||
delay: 100,
|
||||
context: window,
|
||||
horizontal: 0,
|
||||
offset: 0,
|
||||
size: "100%",
|
||||
contain: 0,
|
||||
reloadOnResize: !0
|
||||
}
|
||||
})(jQuery, window);
|
||||
|
||||
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,161 @@
|
||||
// Sticky Plugin v1.0.0 for jQuery
|
||||
// =============
|
||||
// Author: Anthony Garand
|
||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
|
||||
// Improvements by Leonardo C. Daronco (daronco)
|
||||
// Created: 2/14/2011
|
||||
// Date: 2/12/2012
|
||||
// Website: http://labs.anthonygarand.com/sticky
|
||||
// Description: Makes an element on the page stick on the screen as you scroll
|
||||
// It will only set the 'top' and 'position' of your element, you
|
||||
// might need to adjust the width in some cases.
|
||||
|
||||
(function($) {
|
||||
var defaults = {
|
||||
topSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
className: 'is-sticky',
|
||||
wrapperClassName: 'sticky-wrapper',
|
||||
center: false,
|
||||
getWidthFrom: ''
|
||||
},
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
sticked = [],
|
||||
windowHeight = $window.height(),
|
||||
scroller = function() {
|
||||
var scrollTop = $window.scrollTop(),
|
||||
documentHeight = $document.height(),
|
||||
dwh = documentHeight - windowHeight,
|
||||
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i],
|
||||
elementTop = s.stickyWrapper.offset().top,
|
||||
etse = elementTop - s.topSpacing - extra;
|
||||
|
||||
if (scrollTop <= etse) {
|
||||
if (s.currentTop !== null) {
|
||||
s.stickyElement
|
||||
.css('position', '')
|
||||
.css('top', '');
|
||||
s.stickyElement.parent().removeClass(s.className);
|
||||
s.currentTop = null;
|
||||
}
|
||||
}
|
||||
else {
|
||||
var newTop = documentHeight - s.stickyElement.outerHeight()
|
||||
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
|
||||
if (newTop < 0) {
|
||||
newTop = newTop + s.topSpacing;
|
||||
} else {
|
||||
newTop = s.topSpacing;
|
||||
}
|
||||
if (s.currentTop != newTop) {
|
||||
s.stickyElement
|
||||
.css('position', 'fixed')
|
||||
.css('top', newTop);
|
||||
|
||||
if (typeof s.getWidthFrom !== 'undefined') {
|
||||
s.stickyElement.css('width', $(s.getWidthFrom).width());
|
||||
}
|
||||
|
||||
s.stickyElement.parent().addClass(s.className);
|
||||
s.currentTop = newTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resizer = function() {
|
||||
windowHeight = $window.height();
|
||||
},
|
||||
methods = {
|
||||
init: function(options) {
|
||||
var o = $.extend({}, defaults, options);
|
||||
return this.each(function() {
|
||||
var stickyElement = $(this);
|
||||
|
||||
var stickyId = stickyElement.attr('id');
|
||||
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
|
||||
var wrapper = $('<div></div>')
|
||||
.attr('id', stickyId + '-sticky-wrapper')
|
||||
.addClass(o.wrapperClassName);
|
||||
stickyElement.wrapAll(wrapper);
|
||||
|
||||
if (o.center) {
|
||||
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
|
||||
}
|
||||
|
||||
if (stickyElement.css("float") == "right") {
|
||||
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
|
||||
}
|
||||
|
||||
var stickyWrapper = stickyElement.parent();
|
||||
stickyWrapper.css('height', stickyElement.outerHeight());
|
||||
sticked.push({
|
||||
topSpacing: o.topSpacing,
|
||||
bottomSpacing: o.bottomSpacing,
|
||||
stickyElement: stickyElement,
|
||||
currentTop: null,
|
||||
stickyWrapper: stickyWrapper,
|
||||
className: o.className,
|
||||
getWidthFrom: o.getWidthFrom
|
||||
});
|
||||
});
|
||||
},
|
||||
update: scroller,
|
||||
unstick: function(options) {
|
||||
return this.each(function() {
|
||||
var unstickyElement = $(this);
|
||||
|
||||
var removeIdx = -1;
|
||||
for (var i = 0; i < sticked.length; i++)
|
||||
{
|
||||
if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
|
||||
{
|
||||
removeIdx = i;
|
||||
}
|
||||
}
|
||||
if(removeIdx != -1)
|
||||
{
|
||||
sticked.splice(removeIdx,1);
|
||||
unstickyElement.unwrap();
|
||||
unstickyElement.removeAttr('style');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('scroll', scroller, false);
|
||||
window.addEventListener('resize', resizer, false);
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onscroll', scroller);
|
||||
window.attachEvent('onresize', resizer);
|
||||
}
|
||||
|
||||
$.fn.sticky = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sticky');
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.unstick = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method ) {
|
||||
return methods.unstick.apply( this, arguments );
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sticky');
|
||||
}
|
||||
|
||||
};
|
||||
$(function() {
|
||||
setTimeout(scroller, 0);
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,338 @@
|
||||
// Code controlling behavior of xref knowls and born hidden knowls
|
||||
|
||||
// Assumes this file is loaded as part of initial page
|
||||
window.addEventListener("load", (event) => {
|
||||
addKnowls(document);
|
||||
});
|
||||
|
||||
function addKnowls(target) {
|
||||
const xrefs = target.querySelectorAll("[data-knowl]");
|
||||
for (const xref of xrefs) {
|
||||
LinkKnowl.initializeXrefKnowl(xref);
|
||||
}
|
||||
|
||||
const bornHiddens = target.querySelectorAll(".born-hidden-knowl");
|
||||
for (const bhk of bornHiddens) {
|
||||
const summary = bhk.querySelector(":scope > summary");
|
||||
const contents = bhk.querySelector(":scope > summary + *");
|
||||
new SlideRevealer(summary, contents, bhk);
|
||||
}
|
||||
}
|
||||
|
||||
// Used to animate both types of knowls
|
||||
class SlideRevealer {
|
||||
static STATE = Object.freeze({
|
||||
INACTIVE: 0,
|
||||
CLOSING: 1,
|
||||
EXPANDING: 2
|
||||
});
|
||||
|
||||
// triggerElement is the element clicked to open/close
|
||||
// contentElement is the element that will hide/reveal
|
||||
// animatedElement is the element that will grow/shrink as contentElement is modified
|
||||
// may be the same as contentElement or a parent of it
|
||||
constructor(triggerElement, contentElement, animatedElement) {
|
||||
this.triggerElement = triggerElement;
|
||||
this.contentElement = contentElement;
|
||||
this.animatedElement = animatedElement;
|
||||
|
||||
// mid animation state tracking
|
||||
this.animation = null;
|
||||
this.animationState = SlideRevealer.STATE.INACTIVE;
|
||||
|
||||
this.triggerElement.addEventListener('click', (e) => this.onClick(e));
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
// Stop default behavior from the browser
|
||||
if (e) e.preventDefault();
|
||||
|
||||
// Add an overflow on the <details> to avoid content overflowing
|
||||
this.animatedElement.style.overflow = 'hidden';
|
||||
|
||||
// Check if the element is being closed or is already closed
|
||||
if (this.animationState === SlideRevealer.STATE.CLOSING || !this.animatedElement.hasAttribute("open")) {
|
||||
// Force the [open] attributes - allow for similar targetting of xref and born-hidden knowls
|
||||
this.animatedElement.setAttribute("open","");
|
||||
this.triggerElement.setAttribute("open","");
|
||||
this.contentElement.style.display = '';
|
||||
// Trigger the animation to expand or collapse the knowl.
|
||||
// Delay the MathJax typesetting until the knowl is visible to ensure proper measurements
|
||||
// are taken, but before the unrolling begins. This helps avoid layout shifts and ensures
|
||||
// smooth animation with correctly sized content.
|
||||
MathJax.typesetPromise().then(() => window.requestAnimationFrame(() => this.toggle(true)));
|
||||
} else if (this.animationState === SlideRevealer.STATE.EXPANDING || this.animatedElement.hasAttribute("open")) {
|
||||
this.toggle(false);
|
||||
}
|
||||
}
|
||||
|
||||
toggle(expanding) {
|
||||
let closedHeight = 0;
|
||||
if (this.animatedElement.contains(this.triggerElement))
|
||||
closedHeight = this.triggerElement.offsetHeight;
|
||||
const fullHeight = closedHeight + this.contentElement.offsetHeight;
|
||||
|
||||
const startHeight = `${expanding ? closedHeight : fullHeight}px`;
|
||||
const endHeight = `${expanding ? fullHeight : closedHeight}px`;
|
||||
|
||||
// Need to animate padding to avoid extra height for xref knowls
|
||||
const padding = this.animatedElement.offsetHeight - this.animatedElement.clientHeight;
|
||||
const startPad = `${expanding ? 0 : padding}px`;
|
||||
const endPad = `${expanding ? padding : 0}px`;
|
||||
|
||||
// Cancel any existing animation
|
||||
if (this.animation) {
|
||||
this.animation.cancel();
|
||||
}
|
||||
|
||||
// Animate ~400 pixels per second with max of 0.75 second and min of 0.25
|
||||
const animDuration = Math.max( Math.min( (Math.abs(closedHeight - fullHeight) / 400 * 1000), 750), 250);
|
||||
|
||||
// Start animation
|
||||
this.animationState = expanding ? SlideRevealer.STATE.EXPANDING : SlideRevealer.STATE.CLOSING;
|
||||
this.animation = this.animatedElement.animate({
|
||||
height: [startHeight, endHeight],
|
||||
paddingTop: [startPad, endPad],
|
||||
paddingBottom: [startPad, endPad]
|
||||
}, {
|
||||
duration: animDuration,
|
||||
easing: 'ease'
|
||||
});
|
||||
|
||||
this.animation.onfinish = () => { this.onAnimationFinish(expanding); };
|
||||
this.animation.oncancel = () => { this.animationState = SlideRevealer.STATE.INACTIVE; };
|
||||
}
|
||||
|
||||
onAnimationFinish(isOpen) {
|
||||
// Clear animation state
|
||||
this.animation = null;
|
||||
this.animationState = SlideRevealer.STATE.INACTIVE;
|
||||
|
||||
// Make sure animated element has open (needed for details)
|
||||
if(!isOpen) {
|
||||
this.animatedElement.removeAttribute("open");
|
||||
this.triggerElement.removeAttribute("open");
|
||||
}
|
||||
|
||||
// Clear styles used in animation
|
||||
this.animatedElement.style.overflow = '';
|
||||
if (!isOpen)
|
||||
this.contentElement.style.display = 'none';
|
||||
|
||||
if (isOpen) {
|
||||
let hasCallback = this.contentElement.querySelectorAll("[data-knowl-callback]");
|
||||
hasCallback.forEach((el) => {
|
||||
window[el.getAttribute("data-knowl-callback")](el, open);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// A LinkKnowl manages a single link based knowl
|
||||
class LinkKnowl {
|
||||
// Used to uniquely identify XrefKnowls
|
||||
static xrefCount = 0;
|
||||
|
||||
// Factory to create an XrefKnowl from a knowl link
|
||||
// Will avoid duplicate initialization
|
||||
// This should be used by outside code to create XrefKnowls
|
||||
static initializeXrefKnowl(knowlLinkElement) {
|
||||
if (knowlLinkElement.getAttribute("data-knowl-uid") === null) {
|
||||
return new LinkKnowl(knowlLinkElement);
|
||||
}
|
||||
}
|
||||
|
||||
// "Private" constructor - should only be called by initializeXrefKnowl
|
||||
constructor(knowlLinkElement) {
|
||||
this.linkElement = knowlLinkElement;
|
||||
this.outputElement = null;
|
||||
this.uid = LinkKnowl.xrefCount++;
|
||||
knowlLinkElement.setAttribute("data-knowl-uid", this.uid);
|
||||
|
||||
// Xref's behavior is that of a button
|
||||
knowlLinkElement.setAttribute("role", "button");
|
||||
|
||||
// Stash a copy of the original title for use in aria-label
|
||||
// If no title, use textContent
|
||||
knowlLinkElement.setAttribute("data-base-title", knowlLinkElement.getAttribute("title") || this.linkElement.textContent);
|
||||
|
||||
knowlLinkElement.classList.add("knowl__link");
|
||||
|
||||
this.updateLabels(false);
|
||||
|
||||
// Bind required to force "this" of event handler to be this object
|
||||
knowlLinkElement.addEventListener("click", this.handleLinkClick.bind(this));
|
||||
}
|
||||
|
||||
// Set aria-label and title based on visibility of knowl
|
||||
updateLabels(isVisible) {
|
||||
const verb = isVisible
|
||||
? this.linkElement.getAttribute("data-close-label") || "Close"
|
||||
: this.linkElement.getAttribute("data-reveal-label") || "Reveal";
|
||||
const targetDescript = this.linkElement.getAttribute("data-base-title");
|
||||
const helpText = verb + " " + targetDescript;
|
||||
|
||||
this.linkElement.setAttribute("aria-label", helpText);
|
||||
this.linkElement.setAttribute("title", helpText);
|
||||
}
|
||||
|
||||
// Toggle the state of the knowl link and output elements
|
||||
// Assumes output is already created
|
||||
toggle() {
|
||||
this.linkElement.classList.toggle("active");
|
||||
const isActive = this.linkElement.classList.contains("active");
|
||||
this.updateLabels(isActive);
|
||||
|
||||
// Scroll to reveal if needed
|
||||
if (isActive) {
|
||||
const h = this.outputElement.getBoundingClientRect().height;
|
||||
if (h > window.innerHeight) {
|
||||
// knowl is taller than window, scroll to top of knowl
|
||||
this.outputElement.scrollIntoView(true);
|
||||
} else {
|
||||
// reveal full knowl
|
||||
if (this.outputElement.getBoundingClientRect().bottom > window.innerHeight)
|
||||
this.outputElement.scrollIntoView(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Returns element the knowl output should be inserted after
|
||||
findOutputLocation() {
|
||||
const invalidParents = "table, mjx-container, div.tabular-box, .runestone > .parsons";
|
||||
// Start with the link's parent, move up as long as there are invalid parents
|
||||
let el = this.linkElement.parentElement;
|
||||
let problemAncestor = el.closest(invalidParents);
|
||||
while (problemAncestor && problemAncestor !== el) {
|
||||
el = problemAncestor;
|
||||
problemAncestor = el.closest(invalidParents);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
// Create the knowl output element
|
||||
createOutputElement() {
|
||||
const outputId = "knowl-uid-" + this.uid;
|
||||
const outputContentsId = "knowl-output-" + this.uid;
|
||||
const linkTarget = this.linkElement.getAttribute("data-knowl");
|
||||
|
||||
const placeholderText = `<div class='knowl__content' style='display:none;' id='${outputId}' aria-live='polite' id='${outputContentsId}'>`
|
||||
+ `Loading '${linkTarget}'`
|
||||
+ `</div>`;
|
||||
|
||||
const temp = document.createElement("template");
|
||||
temp.innerHTML = placeholderText;
|
||||
this.outputElement = temp.content.children[0];
|
||||
|
||||
const insertLoc = this.findOutputLocation(this.linkElement);
|
||||
insertLoc.after(this.outputElement);
|
||||
}
|
||||
|
||||
// Get content for knowl as dom element. Returns promise that resolves to knowl content
|
||||
async getContent() {
|
||||
const contentURL = this.linkElement.getAttribute("data-knowl");
|
||||
const knowlContent = await fetch(contentURL)
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
// knowls are full HTML pages, need to just extract body
|
||||
let knowlDoc = (new DOMParser()).parseFromString(data, "text/html");
|
||||
let tempContainer = knowlDoc.body;
|
||||
// grab any scripts from head of knowl doc and add them to the output
|
||||
let scripts = knowlDoc.querySelectorAll("head script");
|
||||
tempContainer.append(...scripts);
|
||||
return tempContainer;
|
||||
})
|
||||
.catch((error) => {
|
||||
const destination = this.linkElement.getAttribute("href");
|
||||
const text = this.linkElement.textContent;
|
||||
const err_message = `<div class='knowl-output__error'>`
|
||||
+ `<div class='para'>Error fetching content. (<em>${error}</em>)</div>`
|
||||
+ `<div class='para'><a href='${destination}'>Navigate to ${text}</a> instead.</div>`
|
||||
+ `<div class='para'>If you are viewing this book from your local filesystem, this is expected behavior. To view the book with all features, you must serve the book from a web server. See the <a href="https://pretextbook.org/doc/guide/html/author-faq.html#how-do-i-view-my-book-locally">PreTeXt FAQ</a> for more information.</div>`
|
||||
+ `</div>`;
|
||||
return err_message;
|
||||
});
|
||||
return knowlContent;
|
||||
}
|
||||
|
||||
// Handle a click on the knowl link
|
||||
handleLinkClick(event) {
|
||||
// prevent navigation
|
||||
event.preventDefault();
|
||||
|
||||
if (this.outputElement !== null) {
|
||||
// output already created, toggle visibility
|
||||
this.toggle();
|
||||
} else {
|
||||
this.createOutputElement();
|
||||
|
||||
const slideHandler = new SlideRevealer(this.linkElement, this.outputElement, this.outputElement);
|
||||
//slideHandler is now responsible for handling clicks to this element
|
||||
this.linkElement.addEventListener('click', slideHandler);
|
||||
|
||||
// Wait up to a half second in hopes of avoiding double content change
|
||||
// then render to show loading message
|
||||
let loadingTimeout = setTimeout(() => {
|
||||
loadingTimeout = null;
|
||||
slideHandler.onClick(); //fake initial click
|
||||
this.toggle();
|
||||
}, 500);
|
||||
|
||||
const content = this.getContent();
|
||||
|
||||
// Content is a promise at this point, insert when resolved
|
||||
content
|
||||
.then((tempContainer) => {
|
||||
// if timeout still active, cancel it and render
|
||||
if (loadingTimeout !== null) {
|
||||
clearTimeout(loadingTimeout);
|
||||
}
|
||||
// Now give code that follows .1 seconds to render before making visible
|
||||
setTimeout(() => {
|
||||
slideHandler.onClick(); //fake initial click
|
||||
this.toggle();
|
||||
}, 100);
|
||||
|
||||
// check embedded runestone interactives by loading content into a temp container
|
||||
// we want to not render any that already are on page. Dupe IDs probably bad
|
||||
const runestoneElements = tempContainer.querySelectorAll(".ptx-runestone-container");
|
||||
[...runestoneElements].forEach((e) => {
|
||||
const rsId = e.querySelector("[data-component]")?.id;
|
||||
const onPage = document.getElementById(rsId);
|
||||
if (onPage) {
|
||||
e.innerHTML = `<div class="para">The interactive that belongs here is already on the page and cannot appear multiple times. <a href="#${rsId}">Scroll to interactive.</a>`;
|
||||
} else {
|
||||
// let runestone start rendering it
|
||||
window.runestoneComponents.renderOneComponent(e);
|
||||
}
|
||||
});
|
||||
|
||||
// now move all contents to the real output element
|
||||
const children = [...tempContainer.children];
|
||||
this.outputElement.innerHTML = "";
|
||||
this.outputElement.append(...children);
|
||||
|
||||
// render any knowls and mathjax in the knowl
|
||||
addKnowls(this.outputElement);
|
||||
|
||||
// try prism highlighting
|
||||
Prism.highlightAllUnder(this.outputElement);
|
||||
|
||||
// force any scripts (e.g. sagecell) to execute by evaling them
|
||||
[...this.outputElement.getElementsByTagName("script")].forEach((s) => {
|
||||
if (
|
||||
s.getAttribute("type") === null ||
|
||||
s.getAttribute("type") === "text/javascript"
|
||||
) {
|
||||
eval(s.innerHTML);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((data) => {
|
||||
console.log("Error fetching knowl content: " + data);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/****************************************************
|
||||
*
|
||||
* mathjaxknowl.js
|
||||
*
|
||||
* Implements \knowl{url}{math} macro for MathJax. Knowls are
|
||||
* described at
|
||||
*
|
||||
* http://www.aimath.org/knowlepedia/
|
||||
*
|
||||
* Be sure to change the loadComplete() address to the URL
|
||||
* of the location of this file on your server.
|
||||
*
|
||||
* You can load it via the config=file parameter on the script
|
||||
* tag that loads MathJax.js, or by including it in the extensions
|
||||
* array in your configuration.
|
||||
*
|
||||
* Based on an approach developed by Tom Leathrum. See
|
||||
*
|
||||
* http://groups.google.com/group/mathjax-users/browse_thread/thread/d8a8d081b8e63242
|
||||
*
|
||||
* for details.
|
||||
*/
|
||||
|
||||
MathJax.Extension.Knowl = {
|
||||
version: "1.0",
|
||||
|
||||
//
|
||||
// Reveal or hide a MathJax knowl
|
||||
//
|
||||
Show: function (url,id) {
|
||||
var oid = "MathJax-knowl-output-"+id,
|
||||
uid = "MathJax-kuid-"+id;
|
||||
if ($("#"+oid).length) {
|
||||
$("#"+uid).slideToggle("fast");
|
||||
} else {
|
||||
var the_content = "<div class='knowl-output' id='"+uid+"'>" +
|
||||
"<div class='knowl'>" +
|
||||
"<div class='knowl-content' id='"+oid+"'>" +
|
||||
"loading '"+url+"'" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
||||
var the_parent = $("#MathJax-knowl-"+id).closest("p, article, .displaymath");
|
||||
|
||||
if(the_parent.length == 0) {
|
||||
the_parent = $("#MathJax-knowl-"+id).closest(".MJXc-display").next();
|
||||
if(the_parent.length == 0) {
|
||||
the_parent = $("#MathJax-knowl-"+id).parent().parent().parent().parent();
|
||||
}
|
||||
}
|
||||
|
||||
the_parent.after(the_content);
|
||||
|
||||
$("#"+oid).load(url,function () {
|
||||
MathJax.Hub.Queue(["Typeset",MathJax.Hub,uid]);
|
||||
});
|
||||
$("#"+uid).slideDown("slow");
|
||||
}
|
||||
},
|
||||
|
||||
//
|
||||
// Get a unique ID for the knowl
|
||||
//
|
||||
id: 0,
|
||||
GetID: function () {return this.id++}
|
||||
};
|
||||
|
||||
|
||||
MathJax.Callback.Queue(
|
||||
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
|
||||
var TEX = MathJax.InputJax.TeX,
|
||||
TEXDEF = TEX.Definitions,
|
||||
KNOWL = MathJax.Extension.Knowl;
|
||||
|
||||
TEXDEF.macros.knowl = "Knowl";
|
||||
|
||||
TEX.Parse.Augment({
|
||||
//
|
||||
// Implements \knowl{url}{math}
|
||||
//
|
||||
Knowl: function (name) {
|
||||
var url = this.GetArgument(name), math = this.ParseArg(name);
|
||||
if (math.inferred && math.data.length == 1)
|
||||
{math = math.data[0]} else {delete math.inferred}
|
||||
var id = KNOWL.GetID();
|
||||
this.Push(math.With({
|
||||
"class": "MathJax_knowl",
|
||||
href: "javascript:MathJax.Extension.Knowl.Show('"+url+"','"+id+"')",
|
||||
id: "MathJax-knowl-"+id,
|
||||
// border and padding will only work properly if given explicitly on the element
|
||||
style: "color:blue; border-bottom: 1px dotted #00A; padding-bottom: 1px"
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
}),
|
||||
MathJax.Hub.Register.StartupHook("onLoad",function () {
|
||||
MathJax.Ajax.Styles({
|
||||
".MathJax_knowl:hover": {"background-color": "#DDF"}
|
||||
});
|
||||
}),
|
||||
["Post",MathJax.Hub.Startup.signal,"TeX knowl ready"]
|
||||
);
|
||||
|
||||
MathJax.Ajax.loadComplete("http://pretextbook.org/js/lib/mathjaxknowl.js");
|
||||
MathJax.Ajax.loadComplete("https://pretextbook.org/js/lib/mathjaxknowl.js");
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
|
||||
const { Configuration } = MathJax._.input.tex.Configuration;
|
||||
const { CommandMap } = MathJax._.input.tex.SymbolMap;
|
||||
const NodeUtil = MathJax._.input.tex.NodeUtil.default;
|
||||
|
||||
var GetArgumentMML = function (parser, name) {
|
||||
var arg = parser.ParseArg(name);
|
||||
if (!NodeUtil.isInferred(arg)) {
|
||||
return arg;
|
||||
}
|
||||
var children = NodeUtil.getChildren(arg);
|
||||
if (children.length === 1) {
|
||||
return children[0];
|
||||
}
|
||||
var mrow = parser.create("node", "mrow");
|
||||
NodeUtil.copyChildren(arg, mrow);
|
||||
NodeUtil.copyAttributes(arg, mrow);
|
||||
return mrow;
|
||||
};
|
||||
|
||||
let mathjaxKnowl = {};
|
||||
/**
|
||||
* Implements \knowl{url}{math}
|
||||
* @param {TexParser} parser The calling parser.
|
||||
* @param {string} name The TeX string
|
||||
*/
|
||||
mathjaxKnowl.Knowl = function (parser, name) {
|
||||
var url = parser.GetArgument(name);
|
||||
var arg = GetArgumentMML(parser, name);
|
||||
var mrow = parser.create("node", "mrow", [arg], {
|
||||
tabindex: '0',
|
||||
"data-knowl": url
|
||||
});
|
||||
parser.Push(mrow);
|
||||
};
|
||||
|
||||
new CommandMap(
|
||||
"knowl",
|
||||
{
|
||||
knowl: ["Knowl"]
|
||||
},
|
||||
mathjaxKnowl
|
||||
);
|
||||
const configuration = Configuration.create("knowl", {
|
||||
handler: {
|
||||
macro: ["knowl"]
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,322 @@
|
||||
|
||||
console.log("enabling login");
|
||||
|
||||
function createCookie(name,value,days) {
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
||||
var expires = "; expires="+date.toGMTString();
|
||||
}
|
||||
else var expires = "";
|
||||
/* document.cookie = name+"="+value+expires+"; path=/; domain=aimath.org";
|
||||
*/
|
||||
document.cookie = name + "=" + value + expires + "; path=/; " + "SameSite=None; Secure";
|
||||
console.log("created cookie " + name);
|
||||
}
|
||||
|
||||
function readCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function eraseCookie(name) {
|
||||
createCookie(name,"",-1);
|
||||
}
|
||||
|
||||
/* next two also in edit.js. Need to clean up */
|
||||
Storage.prototype.setObject = function(key, value) {
|
||||
// this.setItem(key, JSON.stringify(value));
|
||||
this.setItem(key, JSON.stringify(value, function(key, val) {
|
||||
// console.log("key", key, "value", value, "val", val);
|
||||
return val.toFixed ? Number(val.toFixed(3)) : val;
|
||||
}));
|
||||
}
|
||||
|
||||
Storage.prototype.getObject = function(key) {
|
||||
var value = this.getItem(key);
|
||||
return value && JSON.parse(value);
|
||||
}
|
||||
|
||||
function hash_of_string(str) {
|
||||
str = str.toString();
|
||||
var the_len = str.length;
|
||||
the_len = Math.min(12,the_len);
|
||||
var the_hash = 123456;
|
||||
var hash_lis = [510149, 120151, 230157, 411063, 320167, 631973, 410179, 321081, 231091, 111093, 121097, 230199];
|
||||
for (var j=0; j < the_len; ++ j) {
|
||||
var this_char = str.charCodeAt(j);
|
||||
this_char = parseInt(this_char);
|
||||
var this_add = this_char * hash_lis[j];
|
||||
the_hash += this_add;
|
||||
the_hash = the_hash % 1000000;
|
||||
}
|
||||
return the_hash.toString()
|
||||
}
|
||||
|
||||
function login_form(mode="login") {
|
||||
var the_form = "";
|
||||
|
||||
/* the_form += '<div id="theloginform" class="modal login">';
|
||||
*/
|
||||
if (mode == 'logout') {
|
||||
the_form += '<form name="logoutform" class="modal-content animate" onSubmit="return removeLogin();" action="">';
|
||||
the_form += '<div class="container">\n';
|
||||
the_form += '<button type="submit">Yes, really logout</button>';
|
||||
the_form += '<div id="dontlogout" class=dontlogout">Stay logged in</div>'
|
||||
the_form += '</div>\n';
|
||||
the_form += '</form>\n';
|
||||
}
|
||||
else{
|
||||
the_form += '<form name="loginform" class="modal-content animate" onSubmit="return validateLogin();" action="">';
|
||||
if ((typeof guest_access !== 'undefined') && guest_access) {
|
||||
the_form += '<p class="instructions" >You can log in as "guest" with password "guest" for 3 hours of access.</p>'; }
|
||||
the_form += '<div class="container">\n';
|
||||
the_form += '<label><b>Id</b></label>\n<input type="text" placeholder="Enter Username" name="uname" required>';
|
||||
the_form += '<label><b>Password</b></label>\n<input type="password" placeholder="Enter Password" name="psw" required>';
|
||||
the_form += '<button type="submit">Login</button>';
|
||||
the_form += '</div>\n';
|
||||
the_form += '<div class="container" style="background-color:#f1f1f1">';
|
||||
the_form += '<span class="psw">Login trouble? Email <a href="mailto:help@aimath.org">help@aimath.org</a></span>';
|
||||
the_form += '</div>\n';
|
||||
the_form += '</form>\n';
|
||||
}
|
||||
|
||||
theform = document.createElement('div');
|
||||
theform.id = "the" + mode + "form";
|
||||
theform.className = "modal login";
|
||||
document.body.appendChild(theform);
|
||||
theform.innerHTML = the_form;
|
||||
}
|
||||
|
||||
function survey_form(surveylink) {
|
||||
var the_form = "";
|
||||
|
||||
/* the_form += '<div id="theloginform" class="modal login">';
|
||||
*/
|
||||
the_form += '<div class="modal-content">';
|
||||
the_form += '<p class="instructions">Can you take a brief survey<br>about your use of this book?</p>';
|
||||
the_form += '<button class="surveyresponse" id="takesurvey">Yes, I can take the survey<br>(opens new window)</button>';
|
||||
the_form += '<button class="surveyresponse" id="remindlater">Not now. Please remind me later.</button>';
|
||||
the_form += '</div>\n';
|
||||
|
||||
theform = document.createElement('div');
|
||||
theform.id = "the" + "survey" + "form";
|
||||
theform.className = "modal survey";
|
||||
document.body.appendChild(theform);
|
||||
theform.innerHTML = the_form;
|
||||
}
|
||||
|
||||
|
||||
function loadScript(script) {
|
||||
if (typeof js_version === 'undefined') { js_version = '0.12' }
|
||||
var newscript = document.createElement('script');
|
||||
newscript.type = 'text/javascript';
|
||||
newscript.async = true;
|
||||
newscript.src = 'https://pretextbook.org/js/' + js_version + '/' + script + '.js';
|
||||
var allscripts = document.getElementsByTagName('script');
|
||||
var s = allscripts[allscripts.length - 1];
|
||||
console.log('s',s);
|
||||
console.log("adding a script", newscript);
|
||||
s.parentNode.insertBefore(newscript, s.nextSibling);
|
||||
}
|
||||
|
||||
|
||||
function removeLogin() {
|
||||
eraseCookie("ut_cookie");
|
||||
}
|
||||
|
||||
var uname = "";
|
||||
var emanu = "";
|
||||
|
||||
function check_role() {
|
||||
console.log("check_role for", uname, "uname");
|
||||
if(uname=="instructor") { return "instructor" }
|
||||
var_role_data = {"action": "check", "user": uname, "pw": emanu, "type": "instructor", "instId": uname}
|
||||
var role_key = "";
|
||||
$.ajax({
|
||||
url: "https://aimath.org/cgi-bin/u/highlights.py",
|
||||
type: "post",
|
||||
data: JSON.stringify(var_role_data),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(data) {
|
||||
console.log("something", data, "back from highlight");
|
||||
role_key = data
|
||||
},
|
||||
error: function(errMsg) {
|
||||
console.log("seems to be an error?",errMsg);
|
||||
// alert("Error X2\n" + errMsg);
|
||||
}
|
||||
});
|
||||
|
||||
console.log("done checking role", role_key);
|
||||
return role_key
|
||||
}
|
||||
|
||||
function validateLogin() {
|
||||
var logged_in = false;
|
||||
var un = document.loginform.uname.value;
|
||||
// un = un.toLowerCase();
|
||||
uname = un;
|
||||
var pw = document.loginform.psw.value;
|
||||
emanu = pw;
|
||||
console.log("xuname", uname, "yemanu", emanu);
|
||||
var guest_name = "guest";
|
||||
var the_password_guest = "guest";
|
||||
var editor_name = "editor";
|
||||
var the_password_editor = "editor";
|
||||
var instructor_name = "instructor";
|
||||
var the_password_instructor = "instructor";
|
||||
var the_un_enc = hash_of_string(un);
|
||||
console.log("un", un, "the_un_enc", "y"+the_un_enc+"y", "pw", "x"+pw+"x", "pw == the_un_enc", pw == the_un_enc);
|
||||
var the_url_enc = hash_of_string(window.location.hostname);
|
||||
console.log('window.location.hostname ' + window.location.hostname);
|
||||
if ((typeof guest_access !== 'undefined') && guest_access && ( ((un == guest_name) && (pw == the_password_guest)) || ((un == editor_name) && (pw == the_password_editor))) ) {
|
||||
console.log("setting the guest ut_cookie");
|
||||
createCookie('ut_cookie',un,0.25);
|
||||
logged_in = true;
|
||||
console.log("logged in as guest", logged_in);
|
||||
}
|
||||
else if ((typeof guest_access !== 'undefined') && guest_access && (un == instructor_name) && (pw == the_password_instructor)) {
|
||||
console.log("setting the instructor ut_cookie");
|
||||
createCookie('ut_cookie',un,0.25);
|
||||
logged_in = true;
|
||||
console.log("logged in as instructor", logged_in);
|
||||
role = "instructor";
|
||||
}
|
||||
else if (pw == the_un_enc) {
|
||||
console.log("setting the ut_cookie");
|
||||
createCookie('ut_cookie',un,150);
|
||||
logged_in = true;
|
||||
}
|
||||
else if (pw == the_url_enc) {
|
||||
console.log("setting the url ut_cookie");
|
||||
createCookie('ut_cookie',un,0.25);
|
||||
logged_in = true;
|
||||
}
|
||||
else {
|
||||
// alert ('Login was unsuccessful, please check id: "' + uname + '" and password"' + emanu +'". Also checking "' + pw + '" and "' + the_un_enc + '".');
|
||||
alert ('Login was unsuccessful, please check id: "' + uname + '".');
|
||||
console.log("failed to set the ut_cookie");
|
||||
logged_in = false;
|
||||
}
|
||||
console.log("logged_in", logged_in);
|
||||
if (logged_in) {
|
||||
$("#theloginform").hide();
|
||||
document.getElementById('loginlogout').innerHTML = 'logout' + ' ' + un;
|
||||
if(uname != "editor") {
|
||||
loadScript('answer');
|
||||
loadScript('highlight')
|
||||
if ((typeof trails !== 'undefined') && trails) {
|
||||
loadScript('trails');
|
||||
}
|
||||
}
|
||||
}
|
||||
var role_key = check_role();
|
||||
console.log("role_key", role_key);
|
||||
if (role_key) {
|
||||
console.log("another instructor", role_key);
|
||||
role = 'instructor'
|
||||
}
|
||||
// if (logged_in && /^\d+$/.test(uname) && ( (uname.length == 5 || uname.length == 8 && /^\d+00$/.test(uname)) )) {
|
||||
// console.log("an instructor");
|
||||
// role = 'instructor'
|
||||
// }
|
||||
|
||||
console.log("role", role);
|
||||
return logged_in
|
||||
}
|
||||
|
||||
var aa_id = readCookie('aa_cookie');
|
||||
|
||||
if (aa_id) {
|
||||
console.log("found cookie");
|
||||
console.log(aa_id);
|
||||
var date = new Date();
|
||||
var date_now = date.getTime();
|
||||
var date_str = date_now.toString();
|
||||
var date_str_trimmed = date_str.slice(5,13);
|
||||
console.log(date_str)
|
||||
console.log(date_str_trimmed)
|
||||
}
|
||||
else {
|
||||
console.log("no cookie found")
|
||||
var date = new Date();
|
||||
var date_now = date.getTime();
|
||||
var date_str = date_now.toString();
|
||||
var date_str_trimmed = date_str.slice(5,13);
|
||||
aa_id = date_str_trimmed;
|
||||
createCookie('aa_cookie',aa_id,150);
|
||||
}
|
||||
|
||||
/* dataurlbase = dataurlbase.concat("per").concat("=").concat(aa_id).concat("&");
|
||||
*/
|
||||
|
||||
var ut_id = readCookie('ut_cookie');
|
||||
uname = ut_id || "";
|
||||
|
||||
if(uname == "instructor") { role="instructor"}
|
||||
|
||||
console.log("uname", uname);
|
||||
|
||||
|
||||
var pageIdentifier = "";
|
||||
|
||||
window.addEventListener('load', function(){
|
||||
console.log("checking login", ut_id);
|
||||
bodyID = document.getElementsByTagName('body')[0].id;
|
||||
console.log("bodyID", bodyID);
|
||||
if (bodyID) {
|
||||
var secID = document.getElementsByTagName('section')[0].id;
|
||||
if (secID) {
|
||||
pageIdentifier = bodyID + "___" + secID
|
||||
}
|
||||
}
|
||||
|
||||
if (pageIdentifier) {
|
||||
|
||||
if (ut_id) {
|
||||
console.log("found "+ut_id);
|
||||
$("#theloginform").hide();
|
||||
|
||||
// if (/^\d+$/.test(uname) && ( (uname.length == 5 || uname.length == 8 && /^\d+00$/.test(uname)) )) {
|
||||
var role_key = check_role();
|
||||
console.log("the role_key", role_key);
|
||||
if (role_key) {
|
||||
console.log("another instructor", role_key);
|
||||
role = 'instructor'
|
||||
}
|
||||
document.getElementById('loginlogout').className = 'logout';
|
||||
document.getElementById('loginlogout').innerHTML = 'logout' + ' ' + ut_id;
|
||||
console.log("done hiding "+ut_id);
|
||||
loadScript('answer');
|
||||
if(uname != "editor") {loadScript('highlight')}
|
||||
if ((typeof trails !== 'undefined') && trails) {
|
||||
loadScript('trails');
|
||||
}
|
||||
}
|
||||
else if (typeof login_required !== 'undefined' && login_required) {
|
||||
login_form();
|
||||
}
|
||||
|
||||
$("#loginlogout.logout").click(function(){
|
||||
login_form('logout');
|
||||
$("#dontlogout").click(function() {
|
||||
$("#thelogoutform").remove()
|
||||
});
|
||||
});
|
||||
$("#loginlogout.login").click(function(){
|
||||
login_form('login');
|
||||
});
|
||||
} else {
|
||||
console.log("login not enabled because document not identified")
|
||||
}
|
||||
// console.log("the role", role);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
// SPLICE resize handling - https://cssplice.org/
|
||||
// Expected message format:
|
||||
// {
|
||||
// subject: lti.frameResize',
|
||||
// message_id: (a unique string ID), // optional - not used
|
||||
// height: ...,
|
||||
// width: ...
|
||||
// }
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
let edata = event.data;
|
||||
|
||||
//MoM sends event.data as a string instead of JSON
|
||||
if (typeof event.data == 'string' && event.data.match(/lti\.frameResize/)) {
|
||||
edata = JSON.parse(event.data);
|
||||
}
|
||||
|
||||
if (edata.subject === "lti.frameResize") {
|
||||
if ("frame_id" in edata) {
|
||||
// MoM may send frame_id
|
||||
let el = document.getElementById(edata['frame_id']);
|
||||
document.getElementById(edata['frame_id']).style.height = edata.height + 'px';
|
||||
if (edata.wrapheight && document.getElementById(edata['frame_id'] + 'wrap')) {
|
||||
document.getElementById(edata['frame_id'] + 'wrap').style.height = edata.wrapheight + 'px';
|
||||
}
|
||||
} else if ("iframe_resize_id" in edata) {
|
||||
// MoM may send iframe_resize_id
|
||||
document.getElementById(edata['iframe_resize_id']).style.height = edata.height + 'px';
|
||||
} else {
|
||||
// No target element specified, so resize the iframe that sent the message
|
||||
// event.source.frameElement is only accessible if the iframe is on the same domain
|
||||
// so loop through iframes to find the one that sent the message
|
||||
const iFrames = document.getElementsByTagName('iframe');
|
||||
for(const iFrame of iFrames) {
|
||||
if(iFrame.contentWindow === event.source) {
|
||||
if (edata.height) iFrame.height = edata.height;
|
||||
if (edata.width) iFrame.width = edata.width;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Currently only used by My Open Math to request a resize after knowls open
|
||||
function sendResizeRequest(el) {
|
||||
el.contentWindow.postMessage("requestResize", "*");
|
||||
}
|
||||
@@ -0,0 +1,515 @@
|
||||
const timeOutHandler = new Object();
|
||||
const inputPrefix = 'stackapi_input_';
|
||||
const feedbackPrefix = 'stackapi_fb_';
|
||||
const validationPrefix = 'stackapi_val_';
|
||||
// const stack_api_url = // This is pulled from the publication file
|
||||
|
||||
const stackstring = {
|
||||
"teacheranswershow_mcq":"A correct answer is: {$a->display}",
|
||||
"api_which_typed":"which can be typed as follows",
|
||||
"api_valid_all_parts":"Please enter valid answers for all parts of the question.",
|
||||
"api_out_of":"out of",
|
||||
"api_marks_sub":"Marks for this submission",
|
||||
"api_submit":"Submit Answers",
|
||||
"generalfeedback":"General feedback",
|
||||
"score":"Score",
|
||||
"api_response":"Response summary",
|
||||
"api_correct":"Correct answers"
|
||||
};
|
||||
|
||||
// Create data for call to API.
|
||||
async function collectData(qfile, qname, qprefix) {
|
||||
let res = "";
|
||||
|
||||
await getQuestionFile(qfile, qname).then((response)=>{
|
||||
if (response.questionxml != "<quiz>\nnull\n</quiz>") {
|
||||
res = {
|
||||
questionDefinition: response.questionxml,
|
||||
answers: collectAnswer(qprefix),
|
||||
seed: response.seed,
|
||||
renderInputs: qprefix + inputPrefix,
|
||||
readOnly: false,
|
||||
};
|
||||
};
|
||||
});
|
||||
// }
|
||||
return res;
|
||||
}
|
||||
|
||||
// Get the different input elements by tag and return object with values.
|
||||
function collectAnswer(qprefix) {
|
||||
const inputs = document.getElementsByTagName('input');
|
||||
const textareas = document.getElementsByTagName('textarea');
|
||||
const selects = document.getElementsByTagName('select');
|
||||
let res = {};
|
||||
res = processNodes(res, inputs, qprefix);
|
||||
res = processNodes(res, textareas, qprefix);
|
||||
res = processNodes(res, selects, qprefix);
|
||||
return res;
|
||||
}
|
||||
|
||||
// Return object of values of valid entries in an HTMLCollection.
|
||||
function processNodes(res, nodes, qprefix) {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const element = nodes[i];
|
||||
if (element.name.indexOf(qprefix+inputPrefix) === 0 && element.name.indexOf('_val') === -1) {
|
||||
if (element.type === 'checkbox' || element.type === 'radio') {
|
||||
if (element.checked) {
|
||||
res[element.name.slice((qprefix+inputPrefix).length)] = element.value;
|
||||
}
|
||||
} else {
|
||||
res[element.name.slice((qprefix+inputPrefix).length)] = element.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// Display rendered question and solution.
|
||||
function send(qfile, qname, qprefix) {
|
||||
const http = new XMLHttpRequest();
|
||||
const url = stack_api_url + '/render';
|
||||
http.open("POST", url, true);
|
||||
http.setRequestHeader('Content-Type', 'application/json');
|
||||
http.onreadystatechange = function() {
|
||||
if(http.readyState == 4) {
|
||||
try {
|
||||
const json = JSON.parse(http.responseText);
|
||||
if (json.message) {
|
||||
console.log(json);
|
||||
document.getElementById(`${qprefix+"errors"}`).innerText = json.message;
|
||||
return;
|
||||
} else {
|
||||
document.getElementById(`${qprefix+"errors"}`).innerText = '';
|
||||
}
|
||||
renameIframeHolders();
|
||||
let question = json.questionrender;
|
||||
const inputs = json.questioninputs;
|
||||
const seed = json.questionseed;
|
||||
let correctAnswers = '';
|
||||
// Show correct answers.
|
||||
for (const [name, input] of Object.entries(inputs)) {
|
||||
question = question.replace(`[[input:${name}]]`, input.render);
|
||||
// question = question.replaceAll(`${inputPrefix}`,`${qprefix+inputPrefix}`);
|
||||
question = question.replace(`[[validation:${name}]]`, `<span name='${qprefix+validationPrefix + name}'></span>`);
|
||||
// This is a bit of a hack. The question render returns an <a href="..."> calling the download function with
|
||||
// two arguments. We add the additional arguments that we need for context (question definition) here.
|
||||
question = question.replace(/javascript:download\(([^,]+?),([^,]+?)\)/, `javascript:download($1,$2, '${qfile}', '${qname}', '${qprefix}', ${seed})`);
|
||||
if (input.samplesolutionrender && name !== 'remember') {
|
||||
// Display render of answer and matching user input to produce the answer.
|
||||
correctAnswers += `<p>
|
||||
${stackstring['teacheranswershow_mcq']} \\[{${input.samplesolutionrender}}\\],
|
||||
${stackstring['api_which_typed']}: `;
|
||||
for (const [name, solution] of Object.entries(input.samplesolution)) {
|
||||
if (name.indexOf('_val') === -1) {
|
||||
correctAnswers += `<span class='correct-answer'>${solution}</span>`;
|
||||
}
|
||||
}
|
||||
correctAnswers += '.</p>';
|
||||
} else if (name !== 'remember') {
|
||||
// For dropdowns, radio buttons, etc, only the correct option is displayed.
|
||||
for (const solution of Object.values(input.samplesolution)) {
|
||||
if (input.configuration.options) {
|
||||
correctAnswers += `<p class='correct-answer'>${input.configuration.options[solution]}</p>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Convert Moodle plot filenames to API filenames.
|
||||
for (const [name, file] of Object.entries(json.questionassets)) {
|
||||
const plotUrl = getPlotUrl(file);
|
||||
question = question.replace(name, plotUrl);
|
||||
json.questionsamplesolutiontext = json.questionsamplesolutiontext.replace(name, plotUrl);
|
||||
correctAnswers = correctAnswers.replace(name, plotUrl);
|
||||
}
|
||||
|
||||
question = replaceFeedbackTags(question,qprefix);
|
||||
qoutput = document.getElementById(`${qprefix+'output'}`);
|
||||
qoutput.innerHTML = question;
|
||||
// Only display results sections once question retrieved.
|
||||
document.getElementById(`${qprefix+'stackapi_qtext'}`).style.display = 'block';
|
||||
document.getElementById(`${qprefix+'stackapi_correct'}`).style.display = 'block';
|
||||
|
||||
// Setup a validation call on inputs. Timeout length is reset if the input is updated
|
||||
// before the validation call is made.
|
||||
for (const inputName of Object.keys(inputs)) {
|
||||
const inputElements = document.querySelectorAll(`[name^=${qprefix+inputPrefix + inputName}]`);
|
||||
for (const inputElement of Object.values(inputElements)) {
|
||||
inputElement.oninput = (event) => {
|
||||
const currentTimeout = timeOutHandler[event.target.id];
|
||||
if (currentTimeout) {
|
||||
window.clearTimeout(currentTimeout);
|
||||
}
|
||||
timeOutHandler[event.target.id] = window.setTimeout(validate.bind(null, event.target, qfile, qname, qprefix), 1000);
|
||||
};
|
||||
}
|
||||
}
|
||||
let sampleText = json.questionsamplesolutiontext;
|
||||
if (sampleText) {
|
||||
sampleText = replaceFeedbackTags(sampleText,qprefix);
|
||||
document.getElementById(`${qprefix+'generalfeedback'}`).innerHTML = sampleText;
|
||||
document.getElementById(`${qprefix+'stackapi_generalfeedback'}`).style.display = 'block';
|
||||
} else {
|
||||
// If the question is updated, there may no longer be general feedback.
|
||||
document.getElementById(`${qprefix+'stackapi_generalfeedback'}`).style.display = 'none';
|
||||
}
|
||||
document.getElementById(`${qprefix+'stackapi_score'}`).style.display = 'none';
|
||||
document.getElementById(`${qprefix+'stackapi_validity'}`).innerText = '';
|
||||
const innerFeedback = document.getElementById(`${qprefix+'specificfeedback'}`);
|
||||
innerFeedback.innerHTML = '';
|
||||
innerFeedback.classList.remove('feedback');
|
||||
document.getElementById(`${qprefix+'formatcorrectresponse'}`).innerHTML = correctAnswers;
|
||||
|
||||
// Hide General feedback and correct answers for now
|
||||
document.getElementById(`${qprefix+'stackapi_generalfeedback'}`).style.display = 'none';
|
||||
document.getElementById(`${qprefix+'stackapi_correct'}`).style.display = 'none';
|
||||
|
||||
createIframes(json.iframes);
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
}
|
||||
catch(e) {
|
||||
console.log(e);
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = http.responseText;
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
collectData(qfile, qname, qprefix).then((data)=>{
|
||||
let submitbutton = document.getElementById(`${qprefix + 'stackapi_qtext'}`).querySelector('input[type="button"]');
|
||||
submitbutton.addEventListener('click', function() {answer(qfile, qname, qprefix, data.seed)});
|
||||
http.send(JSON.stringify(data));
|
||||
let questioncontainer = document.getElementById(`${qprefix+'stack'}`).parentElement;
|
||||
if (questioncontainer.getBoundingClientRect().top<0){
|
||||
questioncontainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Validate an input. Called a set amount of time after an input is last updated.
|
||||
function validate(element, qfile, qname, qprefix) {
|
||||
const http = new XMLHttpRequest();
|
||||
const url = stack_api_url + '/validate';
|
||||
http.open("POST", url, true);
|
||||
// Remove API prefix and subanswer id.
|
||||
const answerNamePrefixTrim = (qprefix+inputPrefix).length;
|
||||
const answerName = element.name.slice(answerNamePrefixTrim).split('_', 1)[0];
|
||||
http.setRequestHeader('Content-Type', 'application/json');
|
||||
http.onreadystatechange = function() {
|
||||
if(http.readyState == 4) {
|
||||
try {
|
||||
const json = JSON.parse(http.responseText);
|
||||
if (json.message) {
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = json.message;
|
||||
return;
|
||||
} else {
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = '';
|
||||
}
|
||||
renameIframeHolders();
|
||||
const validationHTML = json.validation;
|
||||
const element = document.getElementsByName(`${qprefix+validationPrefix + answerName}`)[0];
|
||||
element.innerHTML = validationHTML;
|
||||
if (validationHTML) {
|
||||
element.classList.add('validation');
|
||||
} else {
|
||||
element.classList.remove('validation');
|
||||
}
|
||||
createIframes(json.iframes);
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
}
|
||||
catch(e) {
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = http.responseText;
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
collectData(qfile, qname, qprefix).then((data)=>{
|
||||
data.inputName = answerName;
|
||||
http.send(JSON.stringify(data));
|
||||
});
|
||||
}
|
||||
|
||||
// Submit answers.
|
||||
function answer(qfile, qname, qprefix, seed) {
|
||||
const http = new XMLHttpRequest();
|
||||
const url = stack_api_url + '/grade';
|
||||
http.open("POST", url, true);
|
||||
|
||||
if (!document.getElementById(`${qprefix+'output'}`).innerText) {
|
||||
return;
|
||||
}
|
||||
|
||||
http.setRequestHeader('Content-Type', 'application/json');
|
||||
http.onreadystatechange = function() {
|
||||
if(http.readyState == 4) {
|
||||
try {
|
||||
const json = JSON.parse(http.responseText);
|
||||
if (json.message) {
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = json.message;
|
||||
return;
|
||||
} else {
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = '';
|
||||
}
|
||||
if (!json.isgradable) {
|
||||
document.getElementById(`${qprefix+'stackapi_validity'}`).innerText
|
||||
= ' ' + stackstring["api_valid_all_parts"];
|
||||
return;
|
||||
}
|
||||
renameIframeHolders();
|
||||
document.getElementById(`${qprefix+'score'}`).innerText
|
||||
= (json.score * json.scoreweights.total).toFixed(2) +
|
||||
' ' + stackstring["api_out_of"] + ' ' + json.scoreweights.total;
|
||||
document.getElementById(`${qprefix+'stackapi_score'}`).style.display = 'block';
|
||||
document.getElementById(`${qprefix+'response_summary'}`).innerText = json.responsesummary;
|
||||
|
||||
// Show General feedback and correct answers, hide summary
|
||||
document.getElementById(`${qprefix+'stackapi_generalfeedback'}`).style.display = 'block';
|
||||
|
||||
document.getElementById(`${qprefix+'stackapi_summary'}`).style.display = 'none';
|
||||
|
||||
const feedback = json.prts;
|
||||
const specificFeedbackElement = document.getElementById(`${qprefix+'specificfeedback'}`);
|
||||
// Replace tags and plots in specific feedback and then display.
|
||||
if (json.specificfeedback) {
|
||||
for (const [name, file] of Object.entries(json.gradingassets)) {
|
||||
json.specificfeedback = json.specificfeedback.replace(name, getPlotUrl(file));
|
||||
}
|
||||
json.specificfeedback = replaceFeedbackTags(json.specificfeedback,qprefix);
|
||||
specificFeedbackElement.innerHTML = json.specificfeedback;
|
||||
specificFeedbackElement.classList.add('feedback');
|
||||
} else {
|
||||
specificFeedbackElement.classList.remove('feedback');
|
||||
}
|
||||
// Replace plots in tagged feedback and then display.
|
||||
for (let [name, fb] of Object.entries(feedback)) {
|
||||
for (const [name, file] of Object.entries(json.gradingassets)) {
|
||||
fb = fb.replace(name, getPlotUrl(file));
|
||||
}
|
||||
const elements = document.getElementsByName(`${qprefix+feedbackPrefix + name}`);
|
||||
if (elements.length > 0) {
|
||||
const element = elements[0];
|
||||
if (json.scores[name] !== undefined) {
|
||||
fb = fb + `<div>${stackstring['api_marks_sub']}:
|
||||
${(json.scores[name] * json.scoreweights[name] * json.scoreweights.total).toFixed(2)}
|
||||
/ ${(json.scoreweights[name] * json.scoreweights.total).toFixed(2)}.</div>`;
|
||||
}
|
||||
element.innerHTML = fb;
|
||||
// if (fb) {
|
||||
// element.classList.add('feedback');
|
||||
// } else {
|
||||
// element.classList.remove('feedback');
|
||||
// }
|
||||
}
|
||||
}
|
||||
createIframes(json.iframes);
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
}
|
||||
catch(e) {
|
||||
console.log(e);
|
||||
document.getElementById(`${qprefix+'errors'}`).innerText = http.responseText;
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
// Clear previous answers and score.
|
||||
const specificFeedbackElement = document.getElementById(`${qprefix+'specificfeedback'}`);
|
||||
specificFeedbackElement.innerHTML = "";
|
||||
specificFeedbackElement.classList.remove('feedback');
|
||||
document.getElementById(`${qprefix+'response_summary'}`).innerText = "";
|
||||
document.getElementById(`${qprefix+'stackapi_summary'}`).style.display = 'none';
|
||||
const inputElements = document.querySelectorAll(`[name^=${qprefix+feedbackPrefix}]`);
|
||||
for (const inputElement of Object.values(inputElements)) {
|
||||
inputElement.innerHTML = "";
|
||||
inputElement.classList.remove('feedback');
|
||||
}
|
||||
document.getElementById(`${qprefix+'stackapi_score'}`).style.display = 'none';
|
||||
document.getElementById(`${qprefix+'stackapi_validity'}`).innerText = '';
|
||||
collectData(qfile, qname, qprefix).then((data) => {
|
||||
data.seed = seed;
|
||||
http.send(JSON.stringify(data));
|
||||
});
|
||||
}
|
||||
|
||||
function download(filename, fileid, qfile, qname, qprefix, seed) {
|
||||
const http = new XMLHttpRequest();
|
||||
const url = stack_api_url + '/download';
|
||||
http.open("POST", url, true);
|
||||
http.setRequestHeader('Content-Type', 'application/json');
|
||||
// Something funky going on with closures and callbacks. This seems
|
||||
// to be the easiest way to pass through the file details.
|
||||
http.filename = filename;
|
||||
http.fileid = fileid;
|
||||
http.onreadystatechange = function() {
|
||||
if(http.readyState == 4) {
|
||||
try {
|
||||
// Only download the file once. Replace call to download controller with link
|
||||
// to downloaded file.
|
||||
const blob = new Blob([http.responseText], {type: 'application/octet-binary', endings: 'native'});
|
||||
// We're matching the three additional arguments that are added in the send function here.
|
||||
const selector = CSS.escape(`javascript\:download\(\'${http.filename}\'\, ${http.fileid}\, \'${qfile}\'\, \'${qname}\'\, \'${qprefix}\'\, ${seed}\)`);
|
||||
const linkElements = document.querySelectorAll(`a[href^=${selector}]`);
|
||||
const link = linkElements[0];
|
||||
link.setAttribute('href', URL.createObjectURL(blob));
|
||||
link.setAttribute('download', filename);
|
||||
link.click();
|
||||
}
|
||||
catch(e) {
|
||||
document.getElementById('errors').innerText = http.responseText;
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
collectData(qfile, qname, qprefix).then((data)=>{
|
||||
data.filename = filename;
|
||||
data.fileid = fileid;
|
||||
data.seed = seed;
|
||||
http.send(JSON.stringify(data));
|
||||
});
|
||||
}
|
||||
|
||||
// Save contents of question editor locally.
|
||||
function saveState(key, value) {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
// Load locally stored question on page refresh.
|
||||
function loadState(key) {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
return localStorage.getItem(key) || '';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function renameIframeHolders() {
|
||||
// Each call to STACK restarts numbering of iframe holders so we need to rename
|
||||
// any old ones to make sure new iframes end up in the correct place.
|
||||
for (const iframe of document.querySelectorAll(`[id^=stack-iframe-holder]:not([id$=old]`)) {
|
||||
iframe.id = iframe.id + '_old';
|
||||
}
|
||||
}
|
||||
|
||||
function createIframes (iframes) {
|
||||
const corsFragment = "/cors.php?name=";
|
||||
|
||||
for (const iframe of iframes) {
|
||||
create_iframe(
|
||||
iframe[0],
|
||||
iframe[1].replaceAll(corsFragment, stack_api_url + corsFragment),
|
||||
...iframe.slice(2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace feedback tags in some text with an approproately named HTML div.
|
||||
function replaceFeedbackTags(text, qprefix) {
|
||||
let result = text;
|
||||
const feedbackTags = text.match(/\[\[feedback:.*?\]\]/g);
|
||||
if (feedbackTags) {
|
||||
for (const tag of feedbackTags) {
|
||||
// Part name is between '[[feedback:' and ']]'.
|
||||
result = result.replace(tag, `<div name='${qprefix+feedbackPrefix + tag.slice(11, -2)}'></div>`);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function getQuestionFile(questionURL, questionName) {
|
||||
let res = "";
|
||||
if (questionURL) {
|
||||
await fetch(questionURL)
|
||||
.then(result => result.text())
|
||||
.then((result) => {
|
||||
res = loadQuestionFromFile(result, questionName);
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function loadQuestionFromFile(fileContents, questionName) {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(fileContents, "text/xml");
|
||||
|
||||
let thequestion = null;
|
||||
let randSeed = "";
|
||||
for (const question of xmlDoc.getElementsByTagName("question")) {
|
||||
if (question.getAttribute('type').toLowerCase() === 'stack' && (!questionName || question.querySelectorAll("name text")[0].textContent === questionName)) {
|
||||
thequestion = question.outerHTML;
|
||||
let seeds = question.querySelectorAll('deployedseed');
|
||||
if (seeds.length) {
|
||||
randSeed = parseInt(seeds[Math.floor(Math.random()*seeds.length)].textContent);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return {questionxml:setQuestion(thequestion),seed:randSeed};
|
||||
}
|
||||
|
||||
function setQuestion(question) {
|
||||
return '<quiz>\n' + question + '\n</quiz>';
|
||||
}
|
||||
|
||||
function createQuestionBlocks() {
|
||||
questionBlocks = document.getElementsByClassName("que stack");
|
||||
let i=0;
|
||||
|
||||
for (questionblock of questionBlocks){
|
||||
i++;
|
||||
let questionPrefix = "q" + i.toString() + "_";
|
||||
var qfile = questionblock.dataset.qfile;
|
||||
var qname = questionblock.dataset.qname || "";
|
||||
questionblock.innerHTML =
|
||||
`
|
||||
<div class="collapsiblecontent" id=${questionPrefix + "stack"}>
|
||||
<div class="vstack gap-3 ms-3 col-lg-8">
|
||||
<div id=${questionPrefix + "errors"}></div>
|
||||
<div id=${questionPrefix + "stackapi_qtext"} class="col-lg-8" style="display: none">
|
||||
<!--<h2>${stackstring['questiontext']}:</h2>-->
|
||||
<div id=${questionPrefix + "output"} class="formulation"></div>
|
||||
<div id=${questionPrefix + "specificfeedback"}></div>
|
||||
<br>
|
||||
<!-- <input type="button" onclick="answer('${qfile}', '${qname}', '${questionPrefix}')" class="btn btn-primary" value=${stackstring["api_submit"]}/>-->
|
||||
<input type="button" class="btn btn-primary" value=${stackstring["api_submit"]}/>
|
||||
<span id=${questionPrefix + "stackapi_validity"} style="color:darkred"></span>
|
||||
</div>
|
||||
<div id=${questionPrefix + "stackapi_generalfeedback"} class="col-lg-8" style="display: none">
|
||||
<h2>${stackstring['generalfeedback']}:</h2>
|
||||
<div id=${questionPrefix + "generalfeedback"} class="feedback"></div>
|
||||
</div>
|
||||
<h2 id=${questionPrefix + "stackapi_score"} style="display: none">${stackstring['score']}: <span id=${questionPrefix + "score"}></span></h2>
|
||||
<div id=${questionPrefix + "stackapi_summary"} class="col-lg-10" style="display: none">
|
||||
<h2>${stackstring['api_response']}:</h2>
|
||||
<div id=${questionPrefix + "response_summary"} class="feedback"></div>
|
||||
</div>
|
||||
<div id=${questionPrefix + "stackapi_correct"} class="col-lg-10" style="display: none">
|
||||
<h2>${stackstring['api_correct']}:</h2>
|
||||
<div id=${questionPrefix + "formatcorrectresponse"} class="feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=${questionPrefix + "newquestionbutton"}>
|
||||
<input type="button" onclick="send('${qfile}', '${qname}', '${questionPrefix}')" class="btn btn-primary" value="Show new example question"/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function addCollapsibles(){
|
||||
var collapsibles = document.querySelectorAll(".level2>h2, .stack>h2");
|
||||
for (let i=0; i<collapsibles.length; i++) {
|
||||
collapsibles[i].addEventListener("click", () => collapseFunc(this));
|
||||
}
|
||||
}
|
||||
|
||||
function collapseFunc(e){
|
||||
e.classList.toggle("collapsed");
|
||||
}
|
||||
|
||||
function stackSetup(){
|
||||
createQuestionBlocks();
|
||||
addCollapsibles();
|
||||
}
|
||||
|
||||
function getPlotUrl(file) {
|
||||
return `${stack_api_url}/plots/${file}`;
|
||||
}
|
||||
@@ -0,0 +1,652 @@
|
||||
/**
|
||||
* A javascript module to handle separation of author sourced scripts into
|
||||
* IFRAMES. All such scripts will have limited access to the actual document
|
||||
* on the VLE side and this script represents the VLE side endpoint for
|
||||
* message handling needed to give that access. When porting STACK onto VLEs
|
||||
* one needs to map this script to do the following:
|
||||
*
|
||||
* 1. Ensure that searches for target elements/inputs are limited to questions
|
||||
* and do not return any elements outside them.
|
||||
*
|
||||
* 2. Map any identifiers needed to identify inputs by name.
|
||||
*
|
||||
* 3. Any change handling related to input value modifications through this
|
||||
* logic gets connected to any such handling on the VLE side.
|
||||
*
|
||||
*
|
||||
* This script is intenttionally ordered so that the VLE specific bits should
|
||||
* be at the top.
|
||||
*
|
||||
*
|
||||
* This script assumes the following:
|
||||
*
|
||||
* 1. Each relevant IFRAME has an `id`-attribute that will be told to this
|
||||
* script.
|
||||
*
|
||||
* 2. Each such IFRAME exists within the question itself, so that one can
|
||||
* traverse up the DOM tree from that IFRAME to find the border of
|
||||
* the question.
|
||||
*
|
||||
* @module qtype_stack/stackjsvle
|
||||
* @copyright 2023 Aalto University
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
// Note the VLE specific include of logic.
|
||||
|
||||
/* All the IFRAMES have unique identifiers that they give in their
|
||||
* messages. But we only work with those that have been created by
|
||||
* our logic and are found from this map.
|
||||
*/
|
||||
let IFRAMES = {};
|
||||
|
||||
/* For event handling, lists of IFRAMES listening particular inputs.
|
||||
*/
|
||||
let INPUTS = {};
|
||||
|
||||
/* For event handling, lists of IFRAMES listening particular inputs
|
||||
* and their input events. By default we only listen to changes.
|
||||
* We report input events as changes to the other side.
|
||||
*/
|
||||
let INPUTS_INPUT_EVENT = {};
|
||||
|
||||
/* A flag to disable certain things. */
|
||||
let DISABLE_CHANGES = false;
|
||||
|
||||
|
||||
/**
|
||||
* Returns an element with a given id, if an only if that element exists
|
||||
* inside a portion of DOM that represents a question.
|
||||
*
|
||||
* If not found or exists outside the restricted area then returns `null`.
|
||||
*
|
||||
* @param {String} id the identifier of the element we want.
|
||||
*/
|
||||
function vle_get_element(id) {
|
||||
/* In the case of Moodle we are happy as long as the element is inside
|
||||
something with the `formulation`-class. */
|
||||
let candidate = document.getElementById(id);
|
||||
let iter = candidate;
|
||||
while (iter && !iter.classList.contains('formulation')) {
|
||||
iter = iter.parentElement;
|
||||
}
|
||||
if (iter && iter.classList.contains('formulation')) {
|
||||
return candidate;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an input element with a given name, if and only if that element
|
||||
* exists inside a portion of DOM that represents a question.
|
||||
*
|
||||
* Note that, the input element may have a name that multiple questions
|
||||
* use and to pick the preferred element one needs to pick the one
|
||||
* within the same question as the IFRAME.
|
||||
*
|
||||
* Note that the input can also be a select. In the case of radio buttons
|
||||
* returning one of the possible buttons is enough.
|
||||
*
|
||||
* If not found or exists outside the restricted area then returns `null`.
|
||||
*
|
||||
* @param {String} name the name of the input we want
|
||||
* @param {String} srciframe the identifier of the iframe wanting it
|
||||
*/
|
||||
function vle_get_input_element(name, srciframe) {
|
||||
/* In the case of Moodle we are happy as long as the element is inside
|
||||
something with the `formulation`-class. */
|
||||
let initialcandidate = document.getElementById(srciframe);
|
||||
let iter = initialcandidate;
|
||||
while (iter && !iter.classList.contains('formulation')) {
|
||||
iter = iter.parentElement;
|
||||
}
|
||||
if (iter && iter.classList.contains('formulation')) {
|
||||
// iter now represents the borders of the question containing
|
||||
// this IFRAME.
|
||||
let possible = iter.querySelector('input[id$="_' + name + '"]');
|
||||
if (possible !== null) {
|
||||
return possible;
|
||||
}
|
||||
// Radios have interesting ids, but the name makes sense
|
||||
possible = iter.querySelector('input[id$="_' + name + '_1"][type=radio]');
|
||||
if (possible !== null) {
|
||||
return possible;
|
||||
}
|
||||
possible = iter.querySelector('select[id$="_' + name + '"]');
|
||||
if (possible !== null) {
|
||||
return possible;
|
||||
}
|
||||
}
|
||||
// If none found within the question itself, search everywhere.
|
||||
let possible = document.querySelector('.formulation input[id$="_' + name + '"]');
|
||||
if (possible !== null) {
|
||||
return possible;
|
||||
}
|
||||
// Radios have interesting ids, but the name makes sense
|
||||
possible = document.querySelector('.formulation input[id$="_' + name + '_1"][type=radio]');
|
||||
if (possible !== null) {
|
||||
return possible;
|
||||
}
|
||||
possible = document.querySelector('.formulation select[id$="_' + name + '"]');
|
||||
return possible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers any VLE specific scripting related to updates of the given
|
||||
* input element.
|
||||
*
|
||||
* @param {HTMLElement} inputelement the input element that has changed
|
||||
*/
|
||||
function vle_update_input(inputelement) {
|
||||
// Triggering a change event may be necessary.
|
||||
const c = new Event('change');
|
||||
inputelement.dispatchEvent(c);
|
||||
// Also there are those that listen to input events.
|
||||
const i = new Event('input');
|
||||
inputelement.dispatchEvent(i);
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers any VLE specific scripting related to DOM updates.
|
||||
*
|
||||
* @param {HTMLElement} modifiedsubtreerootelement element under which changes may have happened.
|
||||
*/
|
||||
function vle_update_dom(modifiedsubtreerootelement) {
|
||||
CustomEvents.notifyFilterContentUpdated(modifiedsubtreerootelement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Does HTML-string cleaning, i.e., removes any script payload. Returns
|
||||
* a DOM version of the given input string.
|
||||
*
|
||||
* This is used when receiving replacement content for a div.
|
||||
*
|
||||
* @param {String} src a raw string to sanitise
|
||||
*/
|
||||
function vle_html_sanitize(src) {
|
||||
// This can be implemented with many libraries or by custom code
|
||||
// however as this is typically a thing that a VLE might already have
|
||||
// tools for we have it at this level so that the VLE can use its own
|
||||
// tools that do things that the VLE developpers consider safe.
|
||||
|
||||
// As Moodle does not currently seem to have such a sanitizer in
|
||||
// the core libraries, here is one implementation that shows what we
|
||||
// are looking for.
|
||||
|
||||
// TO-DO: look into replacing this with DOMPurify or some such.
|
||||
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(src, "text/html");
|
||||
|
||||
// First remove all <script> tags. Also <style> as we do not want
|
||||
// to include too much style.
|
||||
for (let el of doc.querySelectorAll('script, style')) {
|
||||
el.remove();
|
||||
}
|
||||
|
||||
// Check all elements for attributes.
|
||||
for (let el of doc.querySelectorAll('*')) {
|
||||
for (let {name, value} of el.attributes) {
|
||||
if (is_evil_attribute(name, value)) {
|
||||
el.removeAttribute(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return doc.body;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function trying to determine if a given attribute is evil
|
||||
* when sanitizing HTML-fragments.
|
||||
*
|
||||
* @param {String} name the name of an attribute.
|
||||
* @param {String} value the value of an attribute.
|
||||
*/
|
||||
function is_evil_attribute(name, value) {
|
||||
const lcname = name.toLowerCase();
|
||||
if (lcname.startsWith('on')) {
|
||||
// We do not allow event listeners to be defined.
|
||||
return true;
|
||||
}
|
||||
if (lcname === 'src' || lcname.endsWith('href')) {
|
||||
// Do not allow certain things in the urls.
|
||||
const lcvalue = value.replace(/\s+/g, '').toLowerCase();
|
||||
// Ignore es-lint false positive.
|
||||
/* eslint-disable no-script-url */
|
||||
if (lcvalue.includes('javascript:') || lcvalue.includes('data:text')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/*************************************************************************
|
||||
* Above this are the bits that one would probably tune when porting.
|
||||
*
|
||||
* Below is the actuall message handling and it should be left alone.
|
||||
*/
|
||||
window.addEventListener("message", (e) => {
|
||||
// NOTE! We do not check the source or origin of the message in
|
||||
// the normal way. All actions that can bypass our filters to trigger
|
||||
// something are largely irrelevant and all traffic will be kept
|
||||
// "safe" as anyone could be listening.
|
||||
|
||||
// All messages we receive are strings, anything else is for someone
|
||||
// else and will be ignored.
|
||||
if (!(typeof e.data === 'string' || e.data instanceof String)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// That string is a JSON encoded dictionary.
|
||||
let msg = null;
|
||||
try {
|
||||
msg = JSON.parse(e.data);
|
||||
} catch (e) {
|
||||
// Only JSON objects that are parseable will work.
|
||||
return;
|
||||
}
|
||||
|
||||
// All messages we handle contain a version field with a particular
|
||||
// value, for now we leave the possibility open for that value to have
|
||||
// an actual version number suffix...
|
||||
if (!(('version' in msg) && msg.version.startsWith('STACK-JS'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
// All messages we handle must have a source and a type,
|
||||
// and that source must be one of the registered ones.
|
||||
if (!(('src' in msg) && ('type' in msg) && (msg.src in IFRAMES))) {
|
||||
return;
|
||||
}
|
||||
let element = null;
|
||||
let input = null;
|
||||
|
||||
let response = {
|
||||
version: 'STACK-JS:1.1.0'
|
||||
};
|
||||
|
||||
switch (msg.type) {
|
||||
case 'register-input-listener':
|
||||
// 1. Find the input.
|
||||
input = vle_get_input_element(msg.name, msg.src);
|
||||
|
||||
if (input === null) {
|
||||
// Requested something that is not available.
|
||||
response.type = 'error';
|
||||
response.msg = 'Failed to connect to input: "' + msg.name + '"';
|
||||
response.tgt = msg.src;
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
return;
|
||||
}
|
||||
|
||||
response.type = 'initial-input';
|
||||
response.name = msg.name;
|
||||
response.tgt = msg.src;
|
||||
|
||||
// 2. What type of an input is this? Note that we do not
|
||||
// currently support all types in sensible ways. In particular,
|
||||
// anything with multiple values will be a problem.
|
||||
if (input.nodeName.toLowerCase() === 'select') {
|
||||
response.value = input.value;
|
||||
response['input-type'] = 'select';
|
||||
response['input-readonly'] = input.hasAttribute('disabled');
|
||||
} else if (input.type === 'checkbox') {
|
||||
response.value = input.checked;
|
||||
response['input-type'] = 'checkbox';
|
||||
response['input-readonly'] = input.hasAttribute('disabled');
|
||||
} else {
|
||||
response.value = input.value;
|
||||
response['input-type'] = input.type;
|
||||
response['input-readonly'] = input.hasAttribute('readonly');
|
||||
}
|
||||
if (input.type === 'radio') {
|
||||
response['input-readonly'] = input.hasAttribute('disabled');
|
||||
response.value = '';
|
||||
for (let inp of document.querySelectorAll('input[type=radio][name=' + CSS.escape(input.name) + ']')) {
|
||||
if (inp.checked) {
|
||||
response.value = inp.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Add listener for changes of this input.
|
||||
if (input.id in INPUTS) {
|
||||
if (msg.src in INPUTS[input.id]) {
|
||||
// DO NOT BIND TWICE!
|
||||
return;
|
||||
}
|
||||
if (input.type !== 'radio') {
|
||||
INPUTS[input.id].push(msg.src);
|
||||
} else {
|
||||
let radgroup = document.querySelectorAll('input[type=radio][name=' + CSS.escape(input.name) + ']');
|
||||
for (let inp of radgroup) {
|
||||
INPUTS[inp.id].push(msg.src);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (input.type !== 'radio') {
|
||||
INPUTS[input.id] = [msg.src];
|
||||
} else {
|
||||
let radgroup = document.querySelectorAll('input[type=radio][name=' + CSS.escape(input.name) + ']');
|
||||
for (let inp of radgroup) {
|
||||
INPUTS[inp.id] = [msg.src];
|
||||
}
|
||||
}
|
||||
if (input.type !== 'radio') {
|
||||
input.addEventListener('change', () => {
|
||||
if (DISABLE_CHANGES) {
|
||||
return;
|
||||
}
|
||||
let resp = {
|
||||
version: 'STACK-JS:1.0.0',
|
||||
type: 'changed-input',
|
||||
name: msg.name
|
||||
};
|
||||
if (input.type === 'checkbox') {
|
||||
resp['value'] = input.checked;
|
||||
} else {
|
||||
resp['value'] = input.value;
|
||||
}
|
||||
for (let tgt of INPUTS[input.id]) {
|
||||
resp['tgt'] = tgt;
|
||||
IFRAMES[tgt].contentWindow.postMessage(JSON.stringify(resp), '*');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Assume that if we received a radio button that is safe
|
||||
// then all its friends are also safe.
|
||||
let radgroup = document.querySelectorAll('input[type=radio][name=' + CSS.escape(input.name) + ']');
|
||||
radgroup.forEach((inp) => {
|
||||
inp.addEventListener('change', () => {
|
||||
if (DISABLE_CHANGES) {
|
||||
return;
|
||||
}
|
||||
let resp = {
|
||||
version: 'STACK-JS:1.0.0',
|
||||
type: 'changed-input',
|
||||
name: msg.name
|
||||
};
|
||||
if (inp.checked) {
|
||||
resp.value = inp.value;
|
||||
} else {
|
||||
// What about unsetting?
|
||||
return;
|
||||
}
|
||||
for (let tgt of INPUTS[inp.id]) {
|
||||
resp['tgt'] = tgt;
|
||||
IFRAMES[tgt].contentWindow.postMessage(JSON.stringify(resp), '*');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (('track-input' in msg) && msg['track-input'] && input.type !== 'radio') {
|
||||
if (input.id in INPUTS_INPUT_EVENT) {
|
||||
if (msg.src in INPUTS_INPUT_EVENT[input.id]) {
|
||||
// DO NOT BIND TWICE!
|
||||
return;
|
||||
}
|
||||
INPUTS_INPUT_EVENT[input.id].push(msg.src);
|
||||
} else {
|
||||
INPUTS_INPUT_EVENT[input.id] = [msg.src];
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
if (DISABLE_CHANGES) {
|
||||
return;
|
||||
}
|
||||
let resp = {
|
||||
version: 'STACK-JS:1.0.0',
|
||||
type: 'changed-input',
|
||||
name: msg.name
|
||||
};
|
||||
if (input.type === 'checkbox') {
|
||||
resp['value'] = input.checked;
|
||||
} else {
|
||||
resp['value'] = input.value;
|
||||
}
|
||||
for (let tgt of INPUTS_INPUT_EVENT[input.id]) {
|
||||
resp['tgt'] = tgt;
|
||||
IFRAMES[tgt].contentWindow.postMessage(JSON.stringify(resp), '*');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Let the requester know that we have bound things
|
||||
// and let it know the initial value.
|
||||
if (!(msg.src in INPUTS[input.id])) {
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
}
|
||||
|
||||
break;
|
||||
case 'changed-input':
|
||||
// 1. Find the input.
|
||||
input = vle_get_input_element(msg.name, msg.src);
|
||||
|
||||
if (input === null) {
|
||||
// Requested something that is not available.
|
||||
const ret = {
|
||||
version: 'STACK-JS:1.0.0',
|
||||
type: 'error',
|
||||
msg: 'Failed to modify input: "' + msg.name + '"',
|
||||
tgt: msg.src
|
||||
};
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(ret), '*');
|
||||
return;
|
||||
}
|
||||
|
||||
// Disable change events.
|
||||
DISABLE_CHANGES = true;
|
||||
|
||||
// TO-DO: Radio buttons should we check that value is possible?
|
||||
if (input.type === 'checkbox') {
|
||||
input.checked = msg.value;
|
||||
} else {
|
||||
input.value = msg.value;
|
||||
}
|
||||
|
||||
// Trigger VLE side actions.
|
||||
vle_update_input(input);
|
||||
|
||||
// Enable change tracking.
|
||||
DISABLE_CHANGES = false;
|
||||
|
||||
// Tell all other frames, that care, about this.
|
||||
response.type = 'changed-input';
|
||||
response.name = msg.name;
|
||||
response.value = msg.value;
|
||||
|
||||
for (let tgt of INPUTS[input.id]) {
|
||||
if (tgt !== msg.src) {
|
||||
response.tgt = tgt;
|
||||
IFRAMES[tgt].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case 'toggle-visibility':
|
||||
// 1. Find the element.
|
||||
element = vle_get_element(msg.target);
|
||||
|
||||
if (element === null) {
|
||||
// Requested something that is not available.
|
||||
const ret = {
|
||||
version: 'STACK-JS:1.0.0',
|
||||
type: 'error',
|
||||
msg: 'Failed to find element: "' + msg.target + '"',
|
||||
tgt: msg.src
|
||||
};
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(ret), '*');
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Toggle display setting.
|
||||
if (msg.set === 'show') {
|
||||
element.style.display = 'block';
|
||||
// If we make something visible we should let the VLE know about it.
|
||||
vle_update_dom(element);
|
||||
} else if (msg.set === 'hide') {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
|
||||
break;
|
||||
case 'change-content':
|
||||
// 1. Find the element.
|
||||
element = vle_get_element(msg.target);
|
||||
|
||||
if (element === null) {
|
||||
// Requested something that is not available.
|
||||
response.type = 'error';
|
||||
response.msg = 'Failed to find element: "' + msg.target + '"';
|
||||
response.tgt = msg.src;
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Secure content.
|
||||
// 3. Switch the content.
|
||||
element.replaceChildren(vle_html_sanitize(msg.content));
|
||||
// If we tune something we should let the VLE know about it.
|
||||
vle_update_dom(element);
|
||||
|
||||
break;
|
||||
case 'get-content':
|
||||
// 1. Find the element.
|
||||
element = vle_get_element(msg.target);
|
||||
// 2. Build the message.
|
||||
response.type = 'xfer-content';
|
||||
response.tgt = msg.src;
|
||||
response.target = msg.target;
|
||||
response.content = null;
|
||||
if (element !== null) {
|
||||
// TO-DO: Should we sanitise the content? Probably not as using
|
||||
// this to interrogate neighbouring questions only allows
|
||||
// messing with the other questions and not anything outside
|
||||
// them. If we do not sanitise it we allow some interesting
|
||||
// question-analytics tooling, and if we do we really don't
|
||||
// gain anything sensible.
|
||||
// Matti's opinnion is to not sanitise at this point as
|
||||
// interraction between questions is not inherently evil
|
||||
// and could be of use even at the level of reading code from
|
||||
// from other questions.
|
||||
response.content = element.innerHTML;
|
||||
}
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
break;
|
||||
case 'resize-frame':
|
||||
// 1. Find the frames wrapper div.
|
||||
element = IFRAMES[msg.src].parentElement;
|
||||
|
||||
// 2. Set the wrapper size.
|
||||
element.style.width = msg.width;
|
||||
element.style.height = msg.height;
|
||||
|
||||
// 3. Reset the frame size.
|
||||
IFRAMES[msg.src].style.width = '100%';
|
||||
IFRAMES[msg.src].style.height = '100%';
|
||||
|
||||
// Only touching the size but still let the VLE know.
|
||||
vle_update_dom(element);
|
||||
break;
|
||||
case 'ping':
|
||||
// This is for testing the connection. The other end will
|
||||
// send these untill it receives a reply.
|
||||
// Part of the logic for startup.
|
||||
response.type = 'ping';
|
||||
response.tgt = msg.src;
|
||||
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
return;
|
||||
case 'initial-input':
|
||||
case 'error':
|
||||
// These message types are for the other end.
|
||||
break;
|
||||
|
||||
default:
|
||||
// If we see something unexpected, lets let the other end know
|
||||
// and make sure that they know our version. Could be that this
|
||||
// end has not been upgraded.
|
||||
response.type = 'error';
|
||||
response.msg = 'Unknown message-type: "' + msg.type + '"';
|
||||
response.tgt = msg.src;
|
||||
|
||||
IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(response), '*');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* To avoid any logic that forbids IFRAMEs in the VLE output one can
|
||||
also create and register that IFRAME through this logic. This
|
||||
also ensures that all relevant security settigns for that IFRAME
|
||||
have been correctly tuned.
|
||||
|
||||
Here the IDs are for the secrect identifier that may be present
|
||||
inside the content of that IFRAME and for the question that contains
|
||||
it. One also identifies a DIV element that marks the position of
|
||||
the IFRAME and limits the size of the IFRAME (all IFRAMEs this
|
||||
creates will be 100% x 100%).
|
||||
|
||||
@param {String} iframeid the id that the IFRAME has stored inside
|
||||
it and uses for communication.
|
||||
@param {String} the full HTML content of that IFRAME.
|
||||
@param {String} targetdivid the id of the element (div) that will
|
||||
hold the IFRAME.
|
||||
@param {String} title a descriptive name for the iframe.
|
||||
@param {bool} scrolling whether we have overflow:scroll or
|
||||
overflow:hidden.
|
||||
@param {bool} evil allows certain special cases to act without
|
||||
sandboxing, this is a feature that will be removed so do
|
||||
not rely on it only use it to test STACK-JS before you get your
|
||||
thing to run in a sandbox.
|
||||
*/
|
||||
function create_iframe(iframeid, content, targetdivid, title, scrolling, evil) {
|
||||
const frm = document.createElement('iframe');
|
||||
frm.id = iframeid;
|
||||
frm.style.width = '100%';
|
||||
frm.style.height = '100%';
|
||||
frm.style.border = 0;
|
||||
if (scrolling === false) {
|
||||
frm.scrolling = 'no';
|
||||
frm.style.overflow = 'hidden';
|
||||
} else {
|
||||
frm.scrolling = 'yes';
|
||||
}
|
||||
frm.title = title;
|
||||
// Somewhat random limitation.
|
||||
frm.referrerpolicy = 'no-referrer';
|
||||
// We include that allow-downloads as an example of XLS-
|
||||
// document building in JS has been seen.
|
||||
// UNDER NO CIRCUMSTANCES DO WE ALLOW-SAME-ORIGIN!
|
||||
// That would defeat the whole point of this.
|
||||
if (!evil) {
|
||||
frm.sandbox = 'allow-scripts allow-downloads';
|
||||
}
|
||||
|
||||
// As the SOP is intentionally broken we need to allow
|
||||
// scripts from everywhere.
|
||||
|
||||
// NOTE: this bit commented out as long as the csp-attribute
|
||||
// is not supported by more browsers.
|
||||
// frm.csp = "script-src: 'unsafe-inline' 'self' '*';";
|
||||
// frm.csp = "script-src: 'unsafe-inline' 'self' '*';img-src: '*';";
|
||||
|
||||
// Plug the content into the frame.
|
||||
frm.srcdoc = content;
|
||||
|
||||
// The target DIV will have its children removed.
|
||||
// This allows that div to contain some sort of loading
|
||||
// indicator until we plug in the frame.
|
||||
// Naturally the frame will then start to load itself.
|
||||
document.getElementById(targetdivid).replaceChildren(frm);
|
||||
IFRAMES[iframeid] = frm;
|
||||
|
||||
|
||||
};
|
||||
@@ -0,0 +1,753 @@
|
||||
//Critical:
|
||||
// TODO: Think about what should be done for an essay question.
|
||||
|
||||
//Accessibility:
|
||||
|
||||
//Enhancement:
|
||||
// TODO: In a scaffold problem, adjust the green bar for when one part is correct.
|
||||
// TODO: Have randomize check that new seed is actually producing new HTML.
|
||||
// TODO: Don't offer randomize or button unless we know a new version can be produced after trying a few seeds.
|
||||
// TODO: In a staged problem, Make Interactive button is adjacent to solution knowls; move it.
|
||||
// TODO: MathQuill
|
||||
// TODO: Image pop up.
|
||||
// TODO: Deal with singleResult MultiAnswer problems.
|
||||
|
||||
//Styling:
|
||||
// TODO: Review all styling in all scenarios (staged/not, correct/partly-correct/incorrect/blank, single/multiple)
|
||||
// TODO: Sean: I think I'd like to see a slightly larger font size on the buttons
|
||||
|
||||
function handleWW(ww_id, action) {
|
||||
const ww_container = document.getElementById(ww_id);
|
||||
const ww_domain = ww_container.dataset.domain;
|
||||
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_course_password = ww_container.dataset.coursepassword;
|
||||
const localize_correct = (ww_container.dataset.localizeCorrect ? ww_container.dataset.localizeCorrect : "Correct");
|
||||
const localize_incorrect = (ww_container.dataset.localizeIncorrect ? ww_container.dataset.localizeIncorrect : "Incorrect");
|
||||
const localize_check_responses = (ww_container.dataset.localizeCheckResponses ? ww_container.dataset.localizeCheckResponses : "Check Responses");
|
||||
const localize_randomize = (ww_container.dataset.localizeRandomize ? ww_container.dataset.localizeRandomize : "Randomize");
|
||||
const localize_reset = (ww_container.dataset.localizeReset ? ww_container.dataset.localizeReset : "Reset");
|
||||
// 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;
|
||||
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')[0].textContent : 'Hint';
|
||||
ww_container.dataset.solutionLabelText = ww_container.dataset.hasSolution == 'true'
|
||||
? ww_container.querySelectorAll('.solution-knowl span.type')[0].textContent : 'Solution';
|
||||
|
||||
ww_container.tabIndex = -1;
|
||||
}
|
||||
|
||||
let url;
|
||||
|
||||
if (action == 'check') {
|
||||
const iframe = ww_container.querySelector('.problem-iframe');
|
||||
const formData = new FormData(iframe.contentDocument.getElementById(ww_id + "-form"));
|
||||
const params = new URLSearchParams(formData);
|
||||
url = new URL(ww_domain + '/webwork2/html2xml?' + params.toString())
|
||||
url.searchParams.append("answersSubmitted", '1');
|
||||
url.searchParams.append('WWsubmit', "1");
|
||||
} else {
|
||||
url = new URL(ww_domain + '/webwork2/html2xml');
|
||||
url.searchParams.append("problemSeed", ww_container.dataset.current_seed);
|
||||
if (ww_problemSource) url.searchParams.append("problemSource", ww_problemSource);
|
||||
else if (ww_sourceFilePath) url.searchParams.append("sourceFilePath", ww_sourceFilePath);
|
||||
url.searchParams.append("answersSubmitted", '0');
|
||||
url.searchParams.append("displayMode", "MathJax");
|
||||
url.searchParams.append("courseID", ww_course_id);
|
||||
url.searchParams.append("userID", ww_user_id);
|
||||
url.searchParams.append("course_password", ww_course_password);
|
||||
url.searchParams.append("outputformat", "raw");
|
||||
// note ww_container.dataset.hasSolution is a string, possibly 'false' which is true
|
||||
url.searchParams.append("showSolutions", ww_container.dataset.hasSolution == 'true' ? '1' : '0');
|
||||
url.searchParams.append("showHints", ww_container.dataset.hasHint == 'true' ? '1' : '0');
|
||||
url.searchParams.append("problemUUID",ww_id);
|
||||
}
|
||||
|
||||
// get the json and do stuff with what we get
|
||||
$.getJSON(url.toString(), (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";
|
||||
|
||||
// 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;
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
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 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,
|
||||
userID: ww_user_id,
|
||||
course_password: ww_course_password,
|
||||
displayMode: "MathJax",
|
||||
session_key: data.rh_result.session_key,
|
||||
outputformat: "raw",
|
||||
language: data.formLanguage,
|
||||
showSummary: data.showSummary,
|
||||
// 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) 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);
|
||||
}
|
||||
|
||||
// Prepare answers object
|
||||
const answers = {};
|
||||
// id the answers even if we won't populate them
|
||||
Object.keys(data.rh_result.answers).forEach(function(id) {
|
||||
answers[id] = {};
|
||||
}, data.rh_result.answers);
|
||||
if (ww_container.dataset.hasAnswer == 'true') {
|
||||
// Update answer data
|
||||
Object.keys(data.rh_result.answers).forEach(function(id) {
|
||||
answers[id] = {
|
||||
correct_ans: this[id].correct_ans,
|
||||
correct_ans_latex_string: this[id].correct_ans_latex_string,
|
||||
correct_choice: this[id].correct_choice
|
||||
};
|
||||
}, data.rh_result.answers);
|
||||
}
|
||||
|
||||
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 old make active button.
|
||||
ww_container.querySelector('.problem-buttons').classList.add('hidden-content');
|
||||
// And the newer activate button if it is there
|
||||
if (activate_button != null) {activate_button.classList.add('hidden-content');};
|
||||
|
||||
// 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');
|
||||
|
||||
// Adjust if more than one answer to check
|
||||
const answerCount = body_div.querySelectorAll("input:not([type=hidden])").length +
|
||||
body_div.querySelectorAll("select:not([type=hidden])").length;
|
||||
|
||||
check.textContent = 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 = answerCount > 1 ? "Show Correct Answers" : "Show Correct Answer";
|
||||
correct.addEventListener('click', () => WWshowCorrect(ww_id, answers));
|
||||
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)
|
||||
} else {
|
||||
// Update the click handler for the show correct button.
|
||||
if (ww_container.dataset.hasAnswer == 'true') {
|
||||
const correct = buttonContainer.querySelector('.show-correct');
|
||||
const correctNew = correct.cloneNode(true);
|
||||
correctNew.addEventListener('click', () => WWshowCorrect(ww_id, answers));
|
||||
correct.replaceWith(correctNew);
|
||||
}
|
||||
}
|
||||
|
||||
if (action == 'check') {
|
||||
// Runestone trigger
|
||||
// TODO: chondition on platform=Runestone
|
||||
$("body").trigger('runestone_ww_check', data)
|
||||
|
||||
const inputs = body_div.querySelectorAll("input:not([type=hidden])");
|
||||
for (const input of inputs) {
|
||||
const name = input.name;
|
||||
if (input.type == 'text' && answers[name]) {
|
||||
const score = data.rh_result.answers[name].score;
|
||||
let title = '';
|
||||
if (score == 1) {
|
||||
title = `<span class="correct">${localize_correct}!</span>`;
|
||||
} else if (score > 0 && score < 1) {
|
||||
title = `<span class="partly-correct">${Math.round(score * 100)}% ${localize_correct}.</span>`;
|
||||
} else if (data.rh_result.answers[name].student_ans == '') {
|
||||
// do nothing if the submitted answer is blank and the problem has not already been scored as correct
|
||||
continue;
|
||||
} else if (score == 0) {
|
||||
title = `<span class="incorrect">${localize_incorrect}.</span>`;
|
||||
}
|
||||
|
||||
input.after(createFeedbackButton(`${ww_id}-${name}`, title, data.rh_result.answers[name].ans_message));
|
||||
}
|
||||
|
||||
if (input.type == 'radio' && answers[name]) {
|
||||
if (input.value == data.rh_result.answers[name].student_value) {
|
||||
const feedbackButton = createFeedbackButton(`${ww_id}-${name}`,
|
||||
data.rh_result.answers[name].student_value == data.rh_result.answers[name].correct_choice
|
||||
? `<span class="correct">${localize_correct}!</span>` : `<span class="incorrect">${localize_incorrect}.</span>`)
|
||||
feedbackButton.style.marginRight = '0.25rem';
|
||||
input.after(feedbackButton);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const hiddenInputs = body_div.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')) {
|
||||
graphtoolContainer.style.position = 'relative';
|
||||
const score = data.rh_result.answers[name].score;
|
||||
let title = '';
|
||||
if (score == 1) {
|
||||
title = `<span class="correct">${localize_correct}!</span>`;
|
||||
} else if (score > 0 && score < 1) {
|
||||
title = `<span class="partly-correct">${Math.round(score * 100)}% ${localize_correct}.</span>`;
|
||||
} else if (data.rh_result.answers[name].student_ans == '') {
|
||||
// do nothing if the submitted answer is blank and the problem has not already been scored as correct
|
||||
continue;
|
||||
} else if (score == 0) {
|
||||
title = `<span class="incorrect">${localize_incorrect}.</span>`;
|
||||
}
|
||||
|
||||
const feedbackButton = createFeedbackButton(`${ww_id}-${name}`, title, data.rh_result.answers[name].ans_message);
|
||||
feedbackButton.style.position = 'absolute';
|
||||
feedbackButton.style.left = '100%';
|
||||
feedbackButton.style.top = 0;
|
||||
feedbackButton.style.marginLeft = '0.5rem';
|
||||
feedbackButton.dataset.container = 'body';
|
||||
graphtoolContainer.appendChild(feedbackButton);
|
||||
}
|
||||
}
|
||||
|
||||
const selects = body_div.querySelectorAll("select:not([type=hidden])");
|
||||
for (const select of selects) {
|
||||
const name = select.name;
|
||||
const feedbackButton = createFeedbackButton(`${ww_id}-${name}`,
|
||||
data.rh_result.answers[name].score == 1 ? `<span class="correct">${localize_correct}!</span>`
|
||||
: `<span class="incorrect">${localize_incorrect}.</span>`)
|
||||
feedbackButton.style.marginRight = '0.25rem';
|
||||
feedbackButton.style.marginLeft = '0.5rem';
|
||||
select.after(feedbackButton);
|
||||
}
|
||||
}
|
||||
|
||||
let iframeContents = '<!DOCTYPE html><head>' +
|
||||
'<script src="' + ww_domain + '/webwork2_files/node_modules/jquery/dist/jquery.min.js"></script>' +
|
||||
`<script>window.MathJax = {
|
||||
tex: {
|
||||
inlineMath: [['\\\\(','\\\\)']],
|
||||
tags: "none",
|
||||
useLabelIds: true,
|
||||
tagSide: "right",
|
||||
tagIndent: ".8em",
|
||||
packages: {'[+]': ['base', 'extpfeil', 'ams', 'amscd', 'newcommand', 'knowl']}
|
||||
},
|
||||
options: {
|
||||
ignoreHtmlClass: "tex2jax_ignore",
|
||||
processHtmlClass: "has_am",
|
||||
renderActions: {
|
||||
findScript: [10, function (doc) {
|
||||
document.querySelectorAll('script[type^="math/tex"]').forEach(function(node) {
|
||||
const display = !!node.type.match(/; *mode=display/);
|
||||
const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], 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);
|
||||
});
|
||||
}, '']
|
||||
},
|
||||
},
|
||||
chtml: {
|
||||
scale: 0.88,
|
||||
mtextInheritFont: true
|
||||
},
|
||||
loader: {
|
||||
load: ['input/asciimath', '[tex]/extpfeil', '[tex]/amscd', '[tex]/newcommand', '[pretext]/mathjaxknowl3.js'],
|
||||
paths: {pretext: "https://pretextbook.org/js/lib"},
|
||||
},
|
||||
};
|
||||
</script>` +
|
||||
'<script src="' + ww_domain + '/webwork2_files/mathjax/es5/tex-chtml.js" id="MathJax-script" defer></script>' +
|
||||
'<script src="https://pretextbook.org/js/lib/knowl.js" defer></script>' +
|
||||
'<link rel="stylesheet" href="' + ww_domain + '/webwork2_files/js/vendor/bootstrap/css/bootstrap.css"/>' +
|
||||
'<link rel="stylesheet" href="' + ww_domain + '/webwork2_files/themes/math4/math4.css"/>' +
|
||||
'<script src="' + ww_domain + '/webwork2_files/js/vendor/bootstrap/js/bootstrap.js" id="MathJax-script" defer></script>';
|
||||
|
||||
// Determine javascript and css dependencies
|
||||
const extra_css_files = [];
|
||||
const extra_js_files = [];
|
||||
//if (data.rh_result.flags.extra_js_files) {
|
||||
// for (const jsFile of data.rh_result.flags.extra_js_files) {
|
||||
// if (jsFile.file == "js/apps/GraphTool/graphtool.min.js" || jsFile.file == "js/apps/Scaffold/scaffold.js") {
|
||||
// extra_css_files.push({ file: 'js/vendor/bootstrap/css/bootstrap.css', external: '0' });
|
||||
// extra_css_files.push({ file: 'themes/math4/math4.css', external: '0' });
|
||||
// extra_js_files.push({ file: 'js/vendor/bootstrap/js/bootstrap.js', external: '0' });
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
if (data.rh_result.flags.extra_css_files) data.rh_result.flags.extra_css_files.unshift(...extra_css_files);
|
||||
else data.rh_result.flags.extra_css_files = extra_css_files;
|
||||
for (const cssFile of data.rh_result.flags.extra_css_files) {
|
||||
iframeContents += '<link rel="stylesheet" href="' + (cssFile.external !== '1' ? (ww_domain + '/webwork2_files/') : '') + cssFile.file + '"/>';
|
||||
}
|
||||
|
||||
if (data.rh_result.flags.extra_js_files) data.rh_result.flags.extra_js_files.unshift(...extra_js_files);
|
||||
else data.rh_result.flags.extra_js_files = extra_js_files;
|
||||
for (const jsFile of data.rh_result.flags.extra_js_files) {
|
||||
iframeContents += '<script src="' + (jsFile.external !== '1' ? (ww_domain + '/webwork2_files/') : '') + jsFile.file + '" ' +
|
||||
Object.keys(jsFile.attributes || {}).reduce((ret, key) => {
|
||||
ret += key + '="' + jsFile.attributes[key] + '" '; return ret;
|
||||
}, "") + '></script>';
|
||||
}
|
||||
|
||||
iframeContents +=
|
||||
'<link rel="stylesheet" href="https://pretextbook.org/css/0.31/pretext_add_on.css"/>' +
|
||||
'<link rel="stylesheet" href="https://pretextbook.org/css/0.31/knowls_default.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; }
|
||||
.hidden-content { display: none; }
|
||||
input[type="text"], input[type="radio"], label, select {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: unset;
|
||||
margin: 0;
|
||||
font-size: initial;
|
||||
font-family: sans-serif;
|
||||
line-height: initial;
|
||||
}
|
||||
input[type="text"] {
|
||||
padding: 1px;
|
||||
padding-inline: 2px;
|
||||
border-width: 1px;
|
||||
border-style: inset;
|
||||
border-color: rgb(133, 133, 133);
|
||||
border-radius: 0;
|
||||
box-shadow: unset;
|
||||
transition: none;
|
||||
}
|
||||
input[type="text"]:focus, input[type="text"]:active {
|
||||
box-shadow: unset;
|
||||
border-width: 1px;
|
||||
border-style: inset;
|
||||
border-radius: 4px;
|
||||
border-color: rgb(133, 133, 133);
|
||||
outline: auto;
|
||||
}
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
margin-block: 3px 0;
|
||||
margin-inline: 5px 3px;
|
||||
vertical-align: unset;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
select {
|
||||
margin: 0;
|
||||
border-width: 1px;
|
||||
border-style: inset;
|
||||
display: inline-block;
|
||||
padding-block: 1px;
|
||||
vertical-align: baseline;
|
||||
background-color: unset;
|
||||
padding-inline: 0;
|
||||
}
|
||||
.popover-title, .popover-content {
|
||||
text-align: center;
|
||||
}
|
||||
.popover-title.correct {
|
||||
background-color: #8F8;
|
||||
}
|
||||
.accordion-body.expanded {
|
||||
overflow-y: visible;
|
||||
overflow-x: clip;
|
||||
}
|
||||
.graphtool-answer-container .graphtool-graph {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
div.PGML img.image-view-elt {
|
||||
max-width:100%;
|
||||
}
|
||||
</style>` +
|
||||
'</head><body><main class="pretext-content">' + 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');
|
||||
|
||||
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: 'min' }, 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.contentDocument.querySelectorAll("button.ww-feedback[data-content]").forEach(button => {
|
||||
iframe.contentWindow.jQuery(button).popover("show");
|
||||
const content = iframe.contentDocument.getElementById(button.id.replace("-feedback-button", "-content"));
|
||||
const popover = content.parentNode.parentNode;
|
||||
popover.id = button.id.replace("-feedback-button", "-feedback")
|
||||
button.setAttribute('aria-describedby', popover.id);
|
||||
if (button.previousElementSibling)
|
||||
button.previousElementSibling.setAttribute('aria-describedby', popover.id);
|
||||
popover.querySelector('.arrow').remove();
|
||||
const title = popover.querySelector('.popover-title');
|
||||
if (button.dataset.emptyContent) {
|
||||
title.style.borderBottomWidth = 0;
|
||||
content.parentNode.remove();
|
||||
}
|
||||
if (title.textContent == localize_correct + '!') title.classList.add('correct');
|
||||
});
|
||||
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()
|
||||
});
|
||||
}
|
||||
|
||||
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 feedbackButton = iframe.contentDocument.getElementById(`${ww_id}-${name}-feedback-button`);
|
||||
if (feedbackButton) {
|
||||
feedbackButton.remove();
|
||||
iframe.contentWindow.jQuery(feedbackButton).popover("hide");
|
||||
}
|
||||
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 == 'radio' && answers[name]) {
|
||||
const feedbackButton = iframe.contentDocument.getElementById(`${ww_id}-${name}-feedback-button`);
|
||||
if (feedbackButton) {
|
||||
feedbackButton.remove();
|
||||
iframe.contentWindow.jQuery(feedbackButton).popover("hide");
|
||||
}
|
||||
correct_value = answers[name].correct_choice;
|
||||
if (input.value == correct_value) input.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
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 feedbackButton = iframe.contentDocument.getElementById(`${ww_id}-${name}-feedback-button`);
|
||||
if (feedbackButton) {
|
||||
feedbackButton.remove();
|
||||
iframe.contentWindow.jQuery(feedbackButton).popover("hide");
|
||||
}
|
||||
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)) {
|
||||
const feedbackButton = iframe.contentDocument.getElementById(`${ww_id}-${name}-feedback-button`);
|
||||
if (feedbackButton) {
|
||||
feedbackButton.remove();
|
||||
iframe.contentWindow.jQuery(feedbackButton).popover("hide");
|
||||
}
|
||||
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');
|
||||
|
||||
ww_container.querySelector('.problem-buttons.webwork').remove();
|
||||
ww_container.querySelector('.problem-buttons').classList.remove('hidden-content');
|
||||
// if the newer activate button is there (but hidden) bring it back too
|
||||
if (activate_button != null) {activate_button.classList.remove('hidden-content');};
|
||||
}
|
||||
|
||||
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('[src]').forEach((node) => {
|
||||
node.src = ww_domain + '/' + node.attributes.src.value;
|
||||
});
|
||||
}
|
||||
|
||||
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 an "a" with content "Hint" or "Solution", and an attribute with base64-encoded HTML content
|
||||
// the WeBWorK knowl js would normally handle this, but we want PreTeXt knowl js to handle it
|
||||
// so we replace the "a" with the content that should be there for PTX knowl js
|
||||
// also if hint/sol were missing from the static version, we want these removed here
|
||||
|
||||
const ww_container = document.getElementById(ww_id);
|
||||
|
||||
const hintsolnodes = document.evaluate("//p[a/b]", body_div, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
|
||||
if (hintsolnodes) {
|
||||
let solutionlikewrapper;
|
||||
for (let i = 0; i < hintsolnodes.snapshotLength; i++) {
|
||||
const hintsolp = hintsolnodes.snapshotItem(i);
|
||||
if (!hintsolp) continue;
|
||||
const hintSolType = hintsolp.textContent.trim().toLowerCase().replace(':', '');
|
||||
|
||||
if (hintsolp.previousElementSibling.textContent.trim() != 'Hint:' && hintsolp.previousElementSibling.textContent.trim() != 'Solution:') {
|
||||
solutionlikewrapper = document.createElement('div');
|
||||
solutionlikewrapper.classList.add('webwork', 'solutions');
|
||||
hintsolp.parentNode.insertBefore(solutionlikewrapper, hintsolp);
|
||||
}
|
||||
|
||||
if ((hintSolType == 'solution' && !b_ptx_has_solution) || (hintSolType == 'hint' && !b_ptx_has_hint)) continue;
|
||||
|
||||
const knowlDetails = document.createElement('details');
|
||||
knowlDetails.classList.add(hintSolType);
|
||||
knowlDetails.classList.add('solution-like');
|
||||
knowlDetails.classList.add('born-hidden-knowl');
|
||||
|
||||
const knowlSummary = document.createElement('summary');
|
||||
const summaryLabel = document.createElement('span');
|
||||
summaryLabel.classList.add('type');
|
||||
summaryLabel.innerHTML = hintSolType == 'hint' ? hint_label_text : solution_label_text;
|
||||
knowlSummary.appendChild(summaryLabel);
|
||||
knowlDetails.appendChild(knowlSummary);
|
||||
|
||||
const knowlContents = document.createElement('div');
|
||||
knowlContents.classList.add(hintSolType);
|
||||
knowlContents.classList.add('solution-like');
|
||||
knowlContents.innerHTML = hintsolp.firstElementChild.dataset.knowlContents;
|
||||
knowlDetails.appendChild(knowlContents);
|
||||
|
||||
adjustSrcHrefs(knowlContents, ww_domain)
|
||||
solutionlikewrapper.appendChild(knowlDetails);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < hintsolnodes.snapshotLength; i++) {
|
||||
hintsolnodes.snapshotItem(i).remove();
|
||||
}
|
||||
}
|
||||
|
||||
function cloneAttributes(target, source) {
|
||||
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) });
|
||||
}
|
||||
|
||||
function createFeedbackButton(id, title, content) {
|
||||
const feedbackButton = document.createElement('button');
|
||||
feedbackButton.dataset.title = title;
|
||||
feedbackButton.dataset.content = `<div id="${id}-content">${content || ''}</div>`;
|
||||
if (!content) feedbackButton.dataset.emptyContent = '1';
|
||||
const contentSpan = document.createElement('span');
|
||||
contentSpan.style.fontWeight = 1000;
|
||||
contentSpan.textContent = '\uD83D\uDDE9'
|
||||
feedbackButton.appendChild(contentSpan);
|
||||
feedbackButton.type = 'button';
|
||||
feedbackButton.classList.add('ww-feedback');
|
||||
feedbackButton.style.borderRadius = 0;
|
||||
|
||||
feedbackButton.id = `${id}-feedback-button`;
|
||||
feedbackButton.dataset.html = true;
|
||||
feedbackButton.dataset.placement = 'bottom';
|
||||
feedbackButton.dataset.trigger = 'click';
|
||||
|
||||
return feedbackButton;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,677 @@
|
||||
//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);
|
||||
};
|
||||
@@ -0,0 +1,686 @@
|
||||
//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;
|
||||
let ww_baseCourse = ww_container.dataset.documentid;
|
||||
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/';
|
||||
// For Runestone, we specify where to find the generated problems.
|
||||
if (runestone_logged_in) {
|
||||
if (ww_problemSource && !ww_baseCourse) {
|
||||
// WeBWorK authored in source, generated after 2025/10/15-ish, should have a baseCourse specified. We fall back to parsing the baseCourse from ww_id, which *should* always start with the base course prior to the first underscore (although this is not guaranteed). If no underscore is found, we fall back to eBookConfig.basecourse.
|
||||
// This is only needed for webwork problems authored in source, not OPL problems, so we only check when ww_problemSource is set.
|
||||
const parts = ww_id.split('_');
|
||||
ww_baseCourse = parts.length > 1 ? parts[0] : eBookConfig.basecourse;
|
||||
console.log("using the base course " + ww_baseCourse);
|
||||
}
|
||||
generatedPG = `/ns/books/published/${ww_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);
|
||||
};
|
||||
@@ -0,0 +1,257 @@
|
||||
/*******************************************************************************
|
||||
* pretext.js
|
||||
*******************************************************************************
|
||||
* The main front-end controller for PreTeXt documents.
|
||||
*
|
||||
* Homepage: pretextbook.org
|
||||
* Repository: https://github.com/PreTeXtBook/JS_core
|
||||
*
|
||||
* Authors: David Farmer, Rob Beezer
|
||||
*
|
||||
*******************************************************************************
|
||||
*/
|
||||
|
||||
// from https://stackoverflow.com/questions/34422189/get-item-offset-from-the-top-of-page
|
||||
function getOffsetTop(e) {
|
||||
// recursively walk up the DOM via offsetParent, accumulating offsetTop as we go
|
||||
if (!e) return 0;
|
||||
return getOffsetTop(e.offsetParent) + e.offsetTop;
|
||||
};
|
||||
|
||||
function scrollTocToActive() {
|
||||
//Try to figure out current TocItem from URL
|
||||
let fileNameWHash = window.location.href.split("/").pop();
|
||||
let fileName = fileNameWHash.split("#")[0];
|
||||
|
||||
//Find just the filename in ToC
|
||||
let tocEntry = document.querySelector('#ptx-toc a[href="' + fileName + '"]');
|
||||
if (!tocEntry) {
|
||||
return; //complete failure, get out
|
||||
}
|
||||
|
||||
let tocEntryTop = 0;
|
||||
//See if we can also match fileName#hash (assuming there is a fragment)
|
||||
if (fileNameWHash.includes('#')) {
|
||||
let tocEntryWHash = document.querySelector(
|
||||
'#ptx-toc a[href="' + fileNameWHash + '"]'
|
||||
);
|
||||
if (tocEntryWHash) {
|
||||
//Matched something below a subsection - activate the list item that contains it
|
||||
tocEntry.closest("li").querySelectorAll("li").forEach(li => {
|
||||
li.classList.remove("active");
|
||||
});
|
||||
tocEntryWHash.closest("li").classList.add("active");
|
||||
tocEntryTop = getOffsetTop(tocEntryWHash);
|
||||
}
|
||||
}
|
||||
if (!tocEntryTop) {
|
||||
tocEntryTop = getOffsetTop(tocEntry);
|
||||
}
|
||||
|
||||
//Now activate ToC item for fileName and scroll to it
|
||||
// Don't use scrollIntoView because it changes users tab position in Chrome
|
||||
// and messes up keyboard navigation
|
||||
tocEntry.closest("li").classList.add("active");
|
||||
// Scroll only if the tocEntry is below the bottom half of the window,
|
||||
// scrolling to that position.
|
||||
let toc = document.querySelector("#ptx-toc");
|
||||
let tocTop = getOffsetTop(toc);
|
||||
toc.scrollTop = tocEntryTop - tocTop - 0.4 * self.innerHeight;
|
||||
}
|
||||
|
||||
function toggletoc() {
|
||||
thesidebar = document.getElementById("ptx-sidebar");
|
||||
if (thesidebar.classList.contains("hidden") || thesidebar.classList.contains("visible")) {
|
||||
thesidebar.classList.toggle("hidden");
|
||||
thesidebar.classList.toggle("visible");
|
||||
} else if (thesidebar.offsetParent === null) { /* not currently visible */
|
||||
thesidebar.classList.toggle("visible");
|
||||
} else {
|
||||
thesidebar.classList.toggle("hidden");
|
||||
}
|
||||
scrollTocToActive();
|
||||
}
|
||||
|
||||
function samePageLink(a) {
|
||||
if (!(a instanceof HTMLAnchorElement)) return false;
|
||||
|
||||
try {
|
||||
const linkUrl = new URL(a.href, document.baseURI);
|
||||
const currentUrl = new URL(window.location.href);
|
||||
|
||||
const sameDocument =
|
||||
linkUrl.origin === currentUrl.origin &&
|
||||
linkUrl.pathname === currentUrl.pathname &&
|
||||
linkUrl.search === currentUrl.search;
|
||||
|
||||
return sameDocument && !!linkUrl.hash;
|
||||
} catch (e) {
|
||||
// Invalid URL
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("DOMContentLoaded",function(event) {
|
||||
thetocbutton = document.getElementsByClassName("toc-toggle")[0];
|
||||
thetocbutton.addEventListener("click", (e) => {
|
||||
toggletoc();
|
||||
e.stopPropagation(); // keep global click handler from immediately toggling it back
|
||||
});
|
||||
|
||||
// For themes that want it, install click handlers to auto close the toc
|
||||
// when the reader clicks anywhere outside it or selects a subsection.
|
||||
// (Selecting other sections or chapters navigates away from the page so
|
||||
// effectively closes the TOC.)
|
||||
if (getComputedStyle(document.documentElement).getPropertyValue('--auto-collapse-toc') == "yes") {
|
||||
|
||||
const sidebar = document.getElementById("ptx-sidebar");
|
||||
|
||||
// Handle all clicks outside the sidebar
|
||||
window.addEventListener("click", function(event) {
|
||||
if (sidebar.classList.contains("visible")) {
|
||||
if (!event.composedPath().includes(sidebar)) {
|
||||
toggletoc();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle clicks inside the sidebar but on link within a subsection.
|
||||
sidebar.addEventListener("click", function (event) {
|
||||
if (samePageLink(event.target.closest('a'))) {
|
||||
toggletoc();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle persistent sidebar if the page is restored from cache on back/forward buttons.
|
||||
window.addEventListener('pageshow', (e) => {
|
||||
if (e.persisted) {
|
||||
sidebar.classList.remove('visible');
|
||||
sidebar.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* jump to next page if reader tries to scroll past the bottom */
|
||||
// var hitbottom = false;
|
||||
// window.onscroll = function(ev) {
|
||||
// if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
|
||||
// // you're at the bottom of the page
|
||||
// console.log("Bottom of page");
|
||||
// if (hitbottom) {
|
||||
// console.log("hit bottom again");
|
||||
// thenextbutton = document.getElementsByClassName("next-button")[0];
|
||||
// thenextbutton.click();
|
||||
// } else {
|
||||
// hitbottom = true;
|
||||
// /* only jump to next page if hard scroll in quick succession */
|
||||
// window.scrollBy(0, -20);
|
||||
// setTimeout(function (){ hitbottom = false }, 1000);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Dynamic TOC logic
|
||||
//-----------------------------------------------------------------------------
|
||||
|
||||
//item is assumed to be expander in toc-item
|
||||
function toggleTOCItem(expander) {
|
||||
let listItem = expander.closest(".toc-item");
|
||||
listItem.classList.toggle("expanded");
|
||||
let expanded = listItem.classList.contains("expanded");
|
||||
|
||||
let itemType = getTOCItemType(listItem);
|
||||
if(expanded) {
|
||||
expander.title = "Close" + (itemType !== "" ? " " + itemType : "");
|
||||
} else {
|
||||
expander.title = "Expand" + (itemType !== "" ? " " + itemType : "");
|
||||
}
|
||||
|
||||
//should be one of each... for/of for safety and built in null avoidance
|
||||
for (const childUL of listItem.querySelectorAll(":scope > ul.toc-item-list")) {
|
||||
for (const childItem of childUL.querySelectorAll(":scope > li.toc-item")) {
|
||||
if(expanded) {
|
||||
childItem.classList.add("visible");
|
||||
childItem.classList.remove("hidden");
|
||||
} else {
|
||||
childItem.classList.remove("visible");
|
||||
childItem.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//finds item type from classes or empty string on failure
|
||||
function getTOCItemType(item) {
|
||||
//Type should be class that looks like toc-X where X is not item. Find it and return X
|
||||
for(let className of item.classList) {
|
||||
if(className !== "toc-item" && className.length > 3 && className.slice(0,4) === "toc-")
|
||||
return className.slice(4);
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
//finds depth of toc-item as defined by number .toc-item-lists it is in
|
||||
function getTOCItemDepth(item) {
|
||||
let depth = 0;
|
||||
let curParent = item.closest(".toc-item-list");
|
||||
while(curParent !== null) {
|
||||
depth++;
|
||||
curParent = curParent.parentElement.closest(".toc-item-list");
|
||||
}
|
||||
return depth;
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", function(event) {
|
||||
if(document.querySelector(".ptx-toc.focused") === null)
|
||||
return; //only in focused mode
|
||||
|
||||
let maxDepth = 1000; //how deep TOC goes
|
||||
//check toc for depth class and get value from there
|
||||
for(let className of document.querySelector(".ptx-toc").classList)
|
||||
if(className.length > 5 && className.slice(0,5) === "depth")
|
||||
maxDepth = Number(className.slice(5));
|
||||
|
||||
let preexpandedLevels = 1; //how many levels to preexpand
|
||||
let tocDataSet = document.querySelector(".ptx-toc").dataset;
|
||||
if(typeof tocDataSet.preexpandedLevels !== 'undefined')
|
||||
preexpandedLevels = Number(tocDataSet.preexpandedLevels);
|
||||
|
||||
let tocItems = document.querySelectorAll(".ptx-toc ul.structural > .toc-item");
|
||||
for (const tocItem of tocItems) {
|
||||
let hasChildren = tocItem.querySelector('ul.structural') !== null;
|
||||
let depth = getTOCItemDepth(tocItem);
|
||||
|
||||
if(hasChildren && depth < maxDepth) {
|
||||
let expander = document.createElement("button");
|
||||
expander.classList.add('toc-expander');
|
||||
expander.classList.add('toc-chevron-surround');
|
||||
expander.title = 'toc-expander';
|
||||
// content of span is set by CSS :before rule.
|
||||
expander.innerHTML = '<span class="icon material-symbols-outlined" aria-hidden="true"></span>';
|
||||
tocItem.querySelector(".toc-title-box").append(expander);
|
||||
expander.addEventListener('click', () => {
|
||||
toggleTOCItem(expander);
|
||||
});
|
||||
|
||||
let isActive = tocItem.classList.contains("contains-active") || tocItem.classList.contains("active");
|
||||
let preExpanded = isActive || depth < preexpandedLevels;
|
||||
let itemType = getTOCItemType(tocItem);
|
||||
if(preExpanded) {
|
||||
toggleTOCItem(expander);
|
||||
} else {
|
||||
expander.title = "Expand" + (itemType !== "" ? " " + itemType : "");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// This needs to be after the TOC's geometry is settled
|
||||
window.addEventListener("DOMContentLoaded",function(event) {
|
||||
scrollTocToActive();
|
||||
});
|
||||
|
||||
window.onhashchange = scrollTocToActive;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,315 @@
|
||||
|
||||
// next comment is out of date: there are more search options
|
||||
// from lunr-pretext-search-index.js we will have either
|
||||
// var ptx_lunr_search_style = "default";
|
||||
// or
|
||||
// var ptx_lunr_search_style = "reference";
|
||||
|
||||
// since there is only one search box now, this can be simplified
|
||||
function doSearch(searchlocation="A") {
|
||||
// Get the search terms from the input text box
|
||||
var terms;
|
||||
if(searchlocation == "A") {
|
||||
terms = document.getElementById("ptxsearch").value;
|
||||
} else {
|
||||
terms = document.getElementById("ptxsearchB").value;
|
||||
}
|
||||
|
||||
localStorage.setItem('last-search-terms', JSON.stringify({terms: terms, time: Date.now()}));
|
||||
|
||||
// Where do we want to put the results?
|
||||
let resultArea = document.getElementById("searchresults")
|
||||
resultArea.innerHTML = ""; // clear out any previous results
|
||||
// assume AND for multiple words
|
||||
var searchterms = terms;
|
||||
if(searchlocation == "B") {
|
||||
document.getElementById("ptxsearch").value = searchterms
|
||||
console.log("ptxsearch value", document.getElementById("ptxsearch").value);
|
||||
} else {
|
||||
searchterms = terms;
|
||||
}
|
||||
|
||||
searchterms = searchterms.toLowerCase().trim();
|
||||
let pageResult = [];
|
||||
if(searchterms != "") {
|
||||
pageResult = ptx_lunr_idx.query((q) => {
|
||||
for(let term of searchterms.split(' ')) {
|
||||
q.term(term, { fields: ["title"], boost: 20 }); //exact title match with 20x weight
|
||||
q.term(term, { wildcard: lunr.Query.wildcard.TRAILING, fields: ["title"], boost: 10 }); //inexact title 10x weight
|
||||
q.term(term, { fields: ["body"], boost: 5 }); //exact body 5x weight
|
||||
q.term(term, { wildcard: lunr.Query.wildcard.TRAILING, fields: ["body"] }); //inexact body
|
||||
}
|
||||
});
|
||||
}
|
||||
// Number the documents from first to last so we can order the results by their
|
||||
// position in the book.
|
||||
snum = 0;
|
||||
for (let doc of ptx_lunr_docs) {
|
||||
doc.snum = snum;
|
||||
snum += 1;
|
||||
}
|
||||
|
||||
//Limit to a sane number of results - otherwise search like 'e' matches every page
|
||||
const MAX_RESULTS = 100;
|
||||
let numUnshown = (pageResult.length > MAX_RESULTS) ? pageResult.length - MAX_RESULTS : 0;
|
||||
pageResult.slice(0, MAX_RESULTS);
|
||||
|
||||
// Transfer meta data from the document to the results to make it easy to add
|
||||
// our lists later.
|
||||
augmentResults(pageResult, ptx_lunr_docs);
|
||||
pageResult.sort(comparePosition);
|
||||
addResultToPage(terms, pageResult, ptx_lunr_docs, numUnshown, resultArea);
|
||||
MathJax.typeset();
|
||||
}
|
||||
|
||||
// Find the entry for a search result in the original document index
|
||||
function findEntry(resultId, db) {
|
||||
for (const page of db) {
|
||||
if (page.id === resultId) {
|
||||
return page;
|
||||
}
|
||||
}
|
||||
return resultId;
|
||||
}
|
||||
|
||||
function augmentResults(result, docs) {
|
||||
for (let res of result) {
|
||||
let info = findEntry(res.ref, docs);
|
||||
res.number = info.number;
|
||||
res.type = info.type;
|
||||
res.title = info.title;
|
||||
res.url = info.url;
|
||||
res.level = info.level;
|
||||
res.snum = info.snum;
|
||||
res.score = parseFloat(res.score);
|
||||
|
||||
//extra score multiplier based on level - prioritize sections over subsections/exercises/etc...
|
||||
const LEVEL_WEIGHTS = [3, 2, 1.5]
|
||||
if( res.level < 2 )
|
||||
res.score *= LEVEL_WEIGHTS[res.level];
|
||||
|
||||
res.body = '';
|
||||
//Add body snippets and highlights
|
||||
const REVEAL_WINDOW = 30;
|
||||
let titleMarked = false;
|
||||
for (const hit in res.matchData.metadata) {
|
||||
if(res.matchData.metadata[hit].title) {
|
||||
//only show one match in title as locations change after first markup
|
||||
if(!titleMarked) {
|
||||
if(!res.matchData.metadata[hit].title.position)
|
||||
continue;
|
||||
let positionData = res.matchData.metadata[hit].title.position[0];
|
||||
const startClipInd = positionData[0];
|
||||
const endClipInd = positionData[0] + positionData[1];
|
||||
res.title = res.title.substring(0, endClipInd) + '</span>' + res.title.substring(endClipInd);
|
||||
res.title = res.title.substring(0, startClipInd) + '<span class="search-result-clip-highlight">' + res.title.substring(startClipInd);
|
||||
titleMarked = true;
|
||||
}
|
||||
} else if (res.matchData.metadata[hit].body) {
|
||||
if(!res.matchData.metadata[hit].body.position)
|
||||
continue;
|
||||
const bodyContent = info.body;
|
||||
let positionData = res.matchData.metadata[hit].body.position[0];
|
||||
const startInd = positionData[0] - REVEAL_WINDOW;
|
||||
const endInd = positionData[0] + positionData[1] + REVEAL_WINDOW;
|
||||
const startClipInd = positionData[0];
|
||||
const endClipInd = positionData[0] + positionData[1];
|
||||
let resultSnippet = (startInd > 0 ? '...' : '' ) + bodyContent.substring(startInd, startClipInd);
|
||||
resultSnippet += '<span class="search-result-clip-highlight">' + bodyContent.substring(startClipInd, endClipInd) + '</span>';
|
||||
resultSnippet += bodyContent.substring(endClipInd, endInd) + (endInd < bodyContent.length ? '...' : '' ) + '<br/>';
|
||||
res.body += resultSnippet;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function rearrangedArray(arry) {
|
||||
// return a new array which is arry (with depth) sorted according to meas,
|
||||
// again as an array with depth.
|
||||
// "with depth'' means that large children drag along their parents.
|
||||
let newarry = [];
|
||||
let startind = 0;
|
||||
let numtograb = 0;
|
||||
let ct = 1;
|
||||
while (arry.length > 0 && ct < 500) {
|
||||
++ct; // just in case something goes wrong
|
||||
const locofmax = maxLocation(arry)
|
||||
let segmentstart = locofmax;
|
||||
let segmentlength = 1;
|
||||
while (arry[segmentstart].level == "2") {
|
||||
--segmentstart
|
||||
}
|
||||
while (segmentstart + segmentlength < arry.length && arry[segmentstart + segmentlength].level == "2") {
|
||||
++segmentlength
|
||||
}
|
||||
// console.log("locofmax", locofmax, "starting", segmentstart, "going", segmentlength, "from", arry.length);
|
||||
newarry.push(...arry.splice(segmentstart,segmentlength));
|
||||
}
|
||||
// console.log("newarry", newarry);
|
||||
return newarry
|
||||
}
|
||||
function maxLocation(arry) {
|
||||
let maxloc = 0;
|
||||
let maxvalsofar = -1;
|
||||
for (let index = 0; index < arry.length; ++index) {
|
||||
if (arry[index].score > maxvalsofar) {
|
||||
maxloc = index;
|
||||
maxvalsofar = arry[index].score
|
||||
}
|
||||
}
|
||||
return maxloc
|
||||
}
|
||||
|
||||
function comparePosition(a, b) {
|
||||
if (a.snum < b.snum) {
|
||||
return -1;
|
||||
}
|
||||
if (a.snum > b.snum) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function compareScoreDesc(a, b) {
|
||||
if (a.score < b.score) {
|
||||
return 1;
|
||||
}
|
||||
if (a.score > b.score) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function addResultToPage(searchterms, result, docs, numUnshown, resultArea) {
|
||||
/* backward compatibility for old html */
|
||||
if (document.getElementById("searchempty")) {
|
||||
document.getElementById("searchempty").style.display = "none";
|
||||
}
|
||||
let len = result.length;
|
||||
console.log("first result", result[0]);
|
||||
if (len == 0) {
|
||||
if (document.getElementById("searchempty")) {
|
||||
document.getElementById("searchempty").style.display = "block";
|
||||
} else {
|
||||
let noresults = document.createElement("div");
|
||||
noresults.classList.add("noresults");
|
||||
search_no_results_string = "No results were found"
|
||||
noresults.innerHTML = search_no_results_string + ".";
|
||||
// console.log("the new variable", search_results_heading_string);
|
||||
resultArea.appendChild(noresults);
|
||||
}
|
||||
document.getElementById("searchresultsplaceholder").style.display = null;
|
||||
return
|
||||
}
|
||||
// console.log("result",result);
|
||||
let allScores = result.map(function (r) { return r.score });
|
||||
// console.log(typeof allScores[0], "allScores",allScores);
|
||||
allScores.sort((a,b) => (a - b));
|
||||
allScores.reverse();
|
||||
// console.log("allScores, sorted",allScores);
|
||||
|
||||
// let high = result[Math.floor(len*0.25)].score;
|
||||
// let med = result[Math.floor(len*0.5)].score;
|
||||
// let low = result[Math.floor(len*0.75)].score;
|
||||
// sort the results by their position in the book, not their score
|
||||
let high = allScores[Math.floor(len*0.20)];
|
||||
let med = allScores[Math.floor(len*0.40)];
|
||||
let low = allScores[Math.floor(len*0.75)];
|
||||
if (ptx_lunr_search_style == "reference") {
|
||||
result = rearrangedArray(result);
|
||||
}
|
||||
let indent = "1";
|
||||
let currIndent = indent;
|
||||
let origResult = resultArea;
|
||||
// Create list entries indenting as needed.
|
||||
for (const res of result) {
|
||||
let link = document.createElement("a")
|
||||
// add a class so we can colorize the results based on their rank in terms
|
||||
// of search score.
|
||||
if (res.score >= high) {
|
||||
link.classList.add("high_result")
|
||||
} else if (res.score >= med) {
|
||||
link.classList.add("medium_result")
|
||||
} else if (res.score >= low) {
|
||||
link.classList.add("low_result")
|
||||
} else {
|
||||
link.classList.add("no_result")
|
||||
}
|
||||
currIndent = res.level;
|
||||
if (currIndent > indent) {
|
||||
indent = currIndent;
|
||||
let ilist = document.createElement("ul")
|
||||
ilist.classList.add("detailed_result");
|
||||
resultArea.appendChild(ilist);
|
||||
resultArea = ilist;
|
||||
} else if (currIndent < indent) {
|
||||
resultArea = origResult;
|
||||
indent = currIndent;
|
||||
}
|
||||
link.href = `${res.url}`;
|
||||
link.innerHTML = `${res.type} ${res.number} ${res.title}`;
|
||||
let clip = document.createElement("div");
|
||||
clip.classList.add("search-result-clip");
|
||||
clip.innerHTML = `${res.body}`;
|
||||
let bullet = document.createElement("li");
|
||||
bullet.classList.add('search-result-bullet');
|
||||
bullet.appendChild(link);
|
||||
bullet.appendChild(clip);
|
||||
let p = document.createElement("text");
|
||||
p.classList.add('search-result-score');
|
||||
p.innerHTML = ` (${res.score.toFixed(2)})`;
|
||||
bullet.appendChild(p);
|
||||
resultArea.appendChild(bullet);
|
||||
}
|
||||
|
||||
// Auto-close search results when a result is clicked in case result is on
|
||||
// the same page search started from
|
||||
const resultsDiv = document.getElementById('searchresultsplaceholder');
|
||||
const backDiv = document.querySelector('.searchresultsbackground');
|
||||
resultArea.querySelectorAll("a").forEach((link) => {
|
||||
link.addEventListener('click', (e) => {
|
||||
backDiv.style.display = 'none';
|
||||
resultsDiv.style.display = 'none';
|
||||
});
|
||||
});
|
||||
//Could print message about how many results are not shown. No way to localize it though...
|
||||
// if(numUnshown > 0) {
|
||||
// let bullet = document.createElement("li");
|
||||
// bullet.classList.add('search-results-bullet');
|
||||
// bullet.classList.add('search-results-unshown-count');
|
||||
// let p = document.createElement("text");
|
||||
// p.innerHTML = `${parseInt(numUnshown)} unshown results...`;
|
||||
// bullet.appendChild(p);
|
||||
// resultArea.appendChild(bullet);
|
||||
// }
|
||||
document.getElementById("searchresultsplaceholder").style.display = null;
|
||||
MathJax.typesetPromise();
|
||||
}
|
||||
|
||||
window.addEventListener("load", function (event) {
|
||||
const resultsDiv = document.getElementById('searchresultsplaceholder');
|
||||
|
||||
//insert a div to be backgroud behind searchresultsplaceholder
|
||||
const backDiv = document.createElement("div");
|
||||
backDiv.classList.add("searchresultsbackground");
|
||||
backDiv.style.display = 'none';
|
||||
resultsDiv.parentNode.appendChild(backDiv);
|
||||
|
||||
document.getElementById("searchbutton").addEventListener('click', (e) => {
|
||||
resultsDiv.style.display = null;
|
||||
backDiv.style.display = null;
|
||||
let searchInput = document.getElementById("ptxsearch");
|
||||
searchInput.value = JSON.parse(localStorage.getItem("last-search-terms")).terms;
|
||||
searchInput.select();
|
||||
doSearch();
|
||||
});
|
||||
|
||||
document.getElementById("ptxsearch").addEventListener('input', (e) => {
|
||||
doSearch();
|
||||
});
|
||||
|
||||
document.getElementById("closesearchresults").addEventListener('click', (e) => {
|
||||
resultsDiv.style.display = 'none';
|
||||
backDiv.style.display = 'none';
|
||||
document.getElementById('searchbutton').focus();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
function doSearch() {
|
||||
// Get the search terms from the input text box
|
||||
let terms = document.getElementById("ptxsearch").value;
|
||||
// Where do we want to put the results?
|
||||
let resultArea = document.getElementById("searchresults")
|
||||
resultArea.innerHTML = ""; // clear out any previous results
|
||||
// do the search using the provided index
|
||||
let pageResult = ptx_lunr_idx.search(terms);
|
||||
// Number the documents from first to last so we can order the results by their
|
||||
// position in the book.
|
||||
snum = 0;
|
||||
for (let doc of ptx_lunr_docs) {
|
||||
doc.snum = snum;
|
||||
snum += 1;
|
||||
}
|
||||
// Transfer meta data from the document to the results to make it easy to add
|
||||
// our lists later.
|
||||
augmentResults(pageResult, ptx_lunr_docs);
|
||||
addResultToPage(pageResult, ptx_lunr_docs, resultArea);
|
||||
MathJax.typeset();
|
||||
}
|
||||
|
||||
// Find the entry for a search result in the original document index
|
||||
function findEntry(resultId, db) {
|
||||
for (const page of db) {
|
||||
if (page.id === resultId) {
|
||||
return page;
|
||||
}
|
||||
}
|
||||
return resultId;
|
||||
}
|
||||
|
||||
function augmentResults(result, docs) {
|
||||
for (let res of result) {
|
||||
let info = findEntry(res.ref, docs);
|
||||
res.number = info.number;
|
||||
res.type = info.type;
|
||||
res.title = info.title;
|
||||
res.url = info.url;
|
||||
res.level = info.level;
|
||||
res.snum = info.snum;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function comparePosition(a, b) {
|
||||
if (a.snum < b.snum) {
|
||||
return -1;
|
||||
}
|
||||
if (a.snum > b.snum) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function addResultToPage(result, docs, resultArea) {
|
||||
let len = result.length
|
||||
let high = result[Math.floor(len*0.25)].score;
|
||||
let med = result[Math.floor(len*0.5)].score;
|
||||
let low = result[Math.floor(len*0.75)].score;
|
||||
// sort the results by their position in the book, not their score
|
||||
result = result.sort(comparePosition)
|
||||
let indent = "1";
|
||||
let currIndent = indent;
|
||||
let origResult = resultArea;
|
||||
// Create list entries indenting as needed.
|
||||
for (const res of result) {
|
||||
let link = document.createElement("a")
|
||||
// add a class so we can colorize the results based on their rank in terms
|
||||
// of search score.
|
||||
if (res.score >= high) {
|
||||
link.classList.add("high_result")
|
||||
} else if (res.score >= med) {
|
||||
link.classList.add("medium_result")
|
||||
} else if (res.score >= low) {
|
||||
link.classList.add("low_result")
|
||||
}
|
||||
currIndent = res.level;
|
||||
if (currIndent > indent) {
|
||||
indent = currIndent;
|
||||
let ilist = document.createElement("ul")
|
||||
ilist.classList.add("detailed_result");
|
||||
resultArea.appendChild(ilist);
|
||||
resultArea = ilist;
|
||||
} else if (currIndent < indent) {
|
||||
resultArea = origResult;
|
||||
indent = currIndent;
|
||||
}
|
||||
let bullet = document.createElement("li")
|
||||
bullet.style.marginTop = "5px";
|
||||
link.href = `${res.url}`;
|
||||
link.innerHTML = `${res.type} ${res.number} ${res.title}`;
|
||||
bullet.appendChild(link)
|
||||
let p = document.createElement("text");
|
||||
p.innerHTML = ` (${res.score.toFixed(2)})`;
|
||||
bullet.appendChild(p);
|
||||
resultArea.appendChild(bullet);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function showHelp() {
|
||||
let state = document.getElementById("helpme").style.display;
|
||||
if (state == "none") {
|
||||
document.getElementById("helpme").style.display = "block";
|
||||
document.getElementById("helpbutt").innerHTML = "Hide Help"
|
||||
} else {
|
||||
document.getElementById("helpme").style.display = "none";
|
||||
document.getElementById("helpbutt").innerHTML = "Show Help"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,510 @@
|
||||
|
||||
editorLog = console.log;
|
||||
// editorLog = function(){};
|
||||
debugLog = function(){};
|
||||
// debugLog = console.log;
|
||||
//parseLog = function(){};
|
||||
parseLog = console.log;
|
||||
errorLog = console.log;
|
||||
|
||||
/* the structure of each object, and its realization as PreTeXt source or in HTML,
|
||||
is recorded in the objectStructure dictionary.
|
||||
|
||||
{"xml:id": new_id, "sourcetag": new_tag, "parent": parent_description, "title": ""}
|
||||
|
||||
In pretext, pieces are of the form ["piecename", "tag"], while
|
||||
in source, pieces are of the form ["piecename", "required_component"], while
|
||||
|
||||
*/
|
||||
|
||||
editing_mode = 0;
|
||||
|
||||
current_page = location.host+location.pathname;
|
||||
debugLog("current_page", current_page);
|
||||
chosen_edit_option_key = "edit_option".concat(current_page);
|
||||
/*
|
||||
chosen_edit_option = readCookie(chosen_edit_option_key) || "";
|
||||
editing_mode = chosen_edit_option;
|
||||
*/
|
||||
chosen_edit_option = "PLACEHOLDER";
|
||||
debugLog("chosen_edit_option", chosen_edit_option, "chosen_edit_option", chosen_edit_option > 0);
|
||||
|
||||
var font_families = {
|
||||
'RS': "'Roboto Serif', serif;",
|
||||
'OS': "'Open Sans', sans-serif;"
|
||||
}
|
||||
|
||||
var font_vals = {
|
||||
// 'face': 'serif',
|
||||
'size': [12, 8, 20],
|
||||
'height': [135, 80, 200],
|
||||
'wspace': [0, -10,20],
|
||||
'lspace': [0, -20,20],
|
||||
'wdth': [100, 50, 150],
|
||||
'wght': [400, 100, 1000]
|
||||
}
|
||||
|
||||
function fontcss(fvals) {
|
||||
console.log("in fontcss",fvals);
|
||||
var csskeys = Object.keys(fvals);
|
||||
var this_style = "";
|
||||
for (var j=0; j < csskeys.length; ++j) {
|
||||
this_key = csskeys[j];
|
||||
document.getElementById("the" + this_key).innerHTML = fvals[this_key][0];
|
||||
|
||||
console.log("in fontcss", this_key, "with value", fvals[this_key][0], "/10", fvals[this_key][0]/10.0);
|
||||
if (this_key == 'size') {
|
||||
this_style += "font-size: " + fvals[this_key][0].toString() + "pt; "
|
||||
} else if (this_key == 'height') {
|
||||
this_style += "line-height: " + (fvals[this_key][0]/100.0).toString() + "; "
|
||||
} else if (this_key == 'lspace') {
|
||||
this_style += "letter-spacing: " + (fvals[this_key][0]/200.0).toString() + "rem; "
|
||||
} else if (this_key == 'wspace') {
|
||||
this_style += "word-spacing: " + (fvals[this_key][0]/50.0).toString() + "rem; "
|
||||
}
|
||||
}
|
||||
|
||||
this_style += "font-variation-settings: ";
|
||||
for (var j=0; j < csskeys.length; ++j) {
|
||||
this_key = csskeys[j];
|
||||
|
||||
if (this_key == 'wdth') {
|
||||
this_style += "'wdth' " + fvals[this_key][0].toString() + ","
|
||||
} else if (this_key == 'wght') {
|
||||
this_style += "'wght' " + fvals[this_key][0].toString() + ","
|
||||
}
|
||||
}
|
||||
this_style = this_style.slice(0, -1);
|
||||
this_style += ";";
|
||||
|
||||
console.log("returning this_style", this_style);
|
||||
return this_style
|
||||
}
|
||||
|
||||
function choice_options(this_choice) {
|
||||
console.log("choice_options of", this_choice);
|
||||
val_dict = prefs_menu_vals[this_choice];
|
||||
console.log("val_dict", val_dict);
|
||||
var these_keys = Object.keys(val_dict);
|
||||
these_keys.sort();
|
||||
var these_choices = "";
|
||||
for (var j=0; j < these_keys.length; ++j) {
|
||||
this_key = these_keys[j];
|
||||
these_choices += '<li id="' + this_key + '">';
|
||||
these_choices += val_dict[this_key];
|
||||
these_choices += '</li>';
|
||||
}
|
||||
return these_choices
|
||||
}
|
||||
|
||||
|
||||
// we have to keep track of multiple consecutive carriage returns
|
||||
this_char = "";
|
||||
prev_char = "";
|
||||
prev_prev_char = "";
|
||||
|
||||
// sometimes we have to prevent Tab from changing focus
|
||||
this_focused_element = "";
|
||||
prev_focused_element = "";
|
||||
prev_prev_focused_element = "";
|
||||
|
||||
var menu_neutral_background = "#ddb";
|
||||
var menu_active_background = "#fdd";
|
||||
|
||||
var recent_editing_actions = []; // we unshift to this, so most recent edit is first.
|
||||
// currently just a human-readable list
|
||||
var ongoing_editing_actions = [];
|
||||
var old_content = {}; // to hold old versions of changed materials
|
||||
|
||||
// what will happen with internationalization?
|
||||
var keyletters = ["KeyA", "KeyB", "KeyC", "KeyD", "KeyE", "KeyF", "KeyG", "KeyH", "KeyI", "KeyJ", "KeyK", "KeyL", "KeyM", "KeyN", "KeyO", "KeyP", "KeyQ", "KeyR", "KeyS", "KeyT", "KeyU", "KeyV", "KeyW", "KeyX", "KeyY", "KeyZ"];
|
||||
|
||||
var movement_location_options = [];
|
||||
var movement_location = 0;
|
||||
var first_move = true; // used when starting to move, because object no longer occupies its original location
|
||||
|
||||
Storage.prototype.setObject = function(key, value) {
|
||||
// this.setItem(key, JSON.stringify(value));
|
||||
this.setItem(key, JSON.stringify(value, function(key, val) {
|
||||
// console.log("key", key, "value", value, "val", val);
|
||||
return val.toFixed ? Number(val.toFixed(3)) : val;
|
||||
}));
|
||||
}
|
||||
|
||||
Storage.prototype.getObject = function(key) {
|
||||
var value = this.getItem(key);
|
||||
return value && JSON.parse(value);
|
||||
}
|
||||
|
||||
function randomstring(len) {
|
||||
if (!len) { len = 10 }
|
||||
return "tMP" + (Math.random() + 1).toString(36).substring(2,len)
|
||||
}
|
||||
|
||||
function removeItemFromList(lis, value) {
|
||||
var index = lis.indexOf(value);
|
||||
if (index > -1) {
|
||||
lis.splice(index, 1);
|
||||
}
|
||||
return lis;
|
||||
}
|
||||
|
||||
|
||||
function textNodesUnder(node){
|
||||
var all = [];
|
||||
for (node=node.firstChild;node;node=node.nextSibling){
|
||||
if (node.nodeType==3) { all.push([3, node]) }
|
||||
else if (node.nodeType==1) {
|
||||
all.push([1, node])
|
||||
var thistag = node.cloneNode().outerHTML;
|
||||
console.log("thistag", thistag);
|
||||
[thisopen, thisclose] = thistag.split("><");
|
||||
thisopen += ">"; thisclose += "<";
|
||||
thisinsides = textNodesUnder(node.cloneNode().innerHTML);
|
||||
// all.push([0, thisopen]);
|
||||
for (var j=0; j < thisinsides.length; ++j) {
|
||||
// all.push(thisinsides[j])
|
||||
}
|
||||
// all.push([0, thisclose]);
|
||||
}
|
||||
// probably we only want direct children
|
||||
// else all = all.concat(textNodesUnder(node));
|
||||
}
|
||||
return all;
|
||||
}
|
||||
|
||||
function wordsAllWrapped(node) {
|
||||
var these_text_nodes = textNodesUnder(node);
|
||||
console.log("node", node);
|
||||
console.log("these_text_nodes", these_text_nodes);
|
||||
for (var j=0; j < these_text_nodes.length; ++j) {
|
||||
var this_text_node = these_text_nodes[j];
|
||||
var thistype = this_text_node[0];
|
||||
var thisnode = this_text_node[1];
|
||||
if (thistype == 3) {
|
||||
// var these_node_words_and_spaces = these_text_nodes[j].nodeValue.split(/(\s+)/);
|
||||
var these_node_words_and_spaces = thisnode.nodeValue.split(/(\s+)/);
|
||||
console.log("these_node_words_and_spaces", these_node_words_and_spaces);
|
||||
var spanned_words = "";
|
||||
for (var k=0; k < these_node_words_and_spaces.length; ++k) {
|
||||
spanned_words += '<span class="oneword">' + these_node_words_and_spaces[k] + "</span>"
|
||||
}
|
||||
var wass_text = document.createElement('div');
|
||||
wass_text.setAttribute('class', 'wastext');
|
||||
wass_text.innerHTML = spanned_words;
|
||||
// these_text_nodes[j].nodeValue = spanned_words
|
||||
thisnode.replaceWith(wass_text);
|
||||
wass_text.outerHTML = wass_text.innerHTML
|
||||
} else if (thistype == 1) {
|
||||
// // leave it there, but make sure we know about it
|
||||
// thisnode.classList.add("oneelement")
|
||||
if (thisnode.classList.contains("process-math") ||
|
||||
thisnode.classList.contains("autopermalink") ||
|
||||
thisnode.classList.contains("latex-logo") ||
|
||||
thisnode.classList.contains("heading") ||
|
||||
// should we instead check for tags that *can* contain line breaks?
|
||||
["A", "CODE", "PRE"].includes(thisnode.tagName)) {
|
||||
//wrap it in a span.oneword
|
||||
var word_wrapper = document.createElement('span');
|
||||
word_wrapper.setAttribute('class', 'oneword');
|
||||
thisnode.parentNode.insertBefore(word_wrapper, thisnode);
|
||||
word_wrapper.appendChild(thisnode);
|
||||
} else {
|
||||
wordsAllWrapped(thisnode)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function linesAllWrapped() {
|
||||
|
||||
// var testID = "p-446";
|
||||
// var testNode = document.getElementById(testID);
|
||||
// var all_para = document.querySelectorAll(".para");
|
||||
// var all_para = document.querySelectorAll("SECTION P");
|
||||
var all_para = document.querySelectorAll("SECTION .para:not(.logical)");
|
||||
for (var pj = 0; pj < all_para.length; ++pj) {
|
||||
testNode = all_para[pj];
|
||||
wordsAllWrapped(testNode);
|
||||
console.log(" wordsAllWrapped", pj, "of", testNode);
|
||||
|
||||
var these_words = document.querySelectorAll(".oneword, .oneelement");
|
||||
var this_line = [];
|
||||
var all_lines = "";
|
||||
var current_height = these_words[0].getBoundingClientRect().bottom;
|
||||
var word_depth = 0;
|
||||
for (var j=0; j < these_words.length; ++j) {
|
||||
// next line is an error if the paragraphs starts with an element
|
||||
var this_word = these_words[j];
|
||||
var this_parent = this_word.parentElement;
|
||||
if (this_word.classList.contains("oneword")) {
|
||||
this_height = this_word.getBoundingClientRect().bottom;
|
||||
if ( (Math.abs(this_height - current_height) < 10) && j > 0) {
|
||||
if (this_parent == testNode && word_depth == 0) {
|
||||
this_line.push(this_word.innerHTML)
|
||||
} else {
|
||||
console.log(word_depth, ":",this_parent == testNode, "this_parent", this_parent.tagName, "ccc", this_parent.ClassList, "xxx", this_word.innerHTML);
|
||||
if (word_depth == 0) {
|
||||
console.log("opening the tag", this_parent.tagName,"parent", this_parent,"of",this_word.innerHTML);
|
||||
var parent_classlist = this_parent.classList;
|
||||
console.log("parent_classlist", parent_classlist, "first", parent_classlist[0], "length", parent_classlist.length);
|
||||
// did not work. why? var parent_classes = parent_classlist.join(" ");
|
||||
this_line.push('<' + this_parent.tagName + ' class="' + parent_classlist[0] + '">');
|
||||
this_line.push(this_word.innerHTML);
|
||||
word_depth += 1
|
||||
|
||||
} else {
|
||||
this_line.push(this_word.innerHTML);
|
||||
}
|
||||
if (this_word.nextElementSibling == null) {
|
||||
console.log("closing the tag", this_parent.tagName);
|
||||
// need to close the wrapping element
|
||||
this_line.push("</" + this_parent.tagName + ">");
|
||||
word_depth -= 1;
|
||||
if (word_depth > 0 && this_word.parentElement.nextElementSibling == null) {
|
||||
this_line.push("</" + this_parent.parentElement.tagName + ">");
|
||||
word_depth -= 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
html_line_contents = "";
|
||||
for (var k=0; k < this_line.length; ++k) {
|
||||
html_line_contents += this_line[k]
|
||||
}
|
||||
// hack which only handles up to depth 2
|
||||
if (word_depth > 0) {
|
||||
html_line_contents += "</" + this_parent.tagName + ">"
|
||||
}
|
||||
if (word_depth > 1) {
|
||||
html_line_contents += "</" + this_parent.parentElement.tagName + ">"
|
||||
}
|
||||
console.log("made", html_line_contents);
|
||||
all_lines += '<div class="onelineX">' + html_line_contents + '</div>';
|
||||
current_height = this_height;
|
||||
this_line = [this_word.innerHTML];
|
||||
if (word_depth > 0) {
|
||||
this_line.unshift('<' + this_parent.tagName + ' class="' + this_parent.classList[0] + '">')
|
||||
}
|
||||
if (word_depth > 1) {
|
||||
this_line.unshift('<' + this_parent.tagName + ' class="' + this_parent.parentElement.classList[0] + '">')
|
||||
}
|
||||
}
|
||||
} else { // we have an html node
|
||||
this_line.push(this_word.outerHTML)
|
||||
}
|
||||
}
|
||||
// partial last line may be dangling
|
||||
// bug: need to fix closing tags at the end? maybe rely on automatic closure
|
||||
if (this_line.length > 0) {
|
||||
html_line_contents = "";
|
||||
for (var k=0; k < this_line.length; ++k) {
|
||||
html_line_contents += this_line[k]
|
||||
}
|
||||
all_lines += '<div class="onelineX">' + html_line_contents + '</div>'
|
||||
}
|
||||
testNode.innerHTML = all_lines
|
||||
}
|
||||
}
|
||||
|
||||
editorLog("adding tab listener");
|
||||
|
||||
document.addEventListener('keydown', logKeyDown);
|
||||
|
||||
function nextsibligntabbable(startingplace, where) {
|
||||
var candidate = startingplace.nextElementSibling;
|
||||
if (where == "previous" ) { candidate = startingplace.previousElementSibling }
|
||||
|
||||
while (candidate) {
|
||||
console.log("candidate A", candidate);
|
||||
if (candidate.hasAttribute("tabindex")) { return candidate }
|
||||
console.log("candidate B", candidate);
|
||||
if (where == "next" ) { candidate = candidate.nextElementSibling }
|
||||
else { candidate = candidate.previousElementSibling }
|
||||
}
|
||||
}
|
||||
|
||||
function logKeyDown(e) {
|
||||
if (e.code == "ShiftLeft" || e.code == "ShiftRight" || e.code == "Shift") { return }
|
||||
prev_prev_char = prev_char;
|
||||
prev_char = this_char;
|
||||
this_char = e;
|
||||
debugLog("logKey",e,"XXX",e.code);
|
||||
|
||||
var input_region = document.activeElement;
|
||||
debugLog("input_region", input_region);
|
||||
|
||||
if (input_region.id == "user-preferences-button") {
|
||||
if (e.code == "Enter") {
|
||||
document.getElementById("preferences_menu_holder").classList.toggle("hidden")
|
||||
} else if (e.code == "Tab") {
|
||||
console.log("tabbing to main pref menu", document.getElementById("preferences_menu_holder").firstElementChild);
|
||||
console.log("tabbing to main pref menu", document.getElementById("preferences_menu_holder").firstElementChild.firstElementChild);
|
||||
e.preventDefault();
|
||||
document.getElementById("preferences_menu_holder").firstElementChild.firstElementChild.focus()
|
||||
}
|
||||
} else if (input_region.hasAttribute("data-env")) {
|
||||
var this_submenu = input_region.getElementsByTagName("ol")[0];
|
||||
console.log("this_submenu C", this_submenu);
|
||||
if ((e.code == "Enter") || (e.code == "ArrowRight")) {
|
||||
console.log("selecting",input_region, "which has", input_region.getElementsByTagName("ol"), "first",input_region.getElementsByTagName("ol")[0]);
|
||||
this_submenu.classList.toggle("hidden")
|
||||
input_region.classList.toggle("selected")
|
||||
input_region.parentElement.classList.toggle("active")
|
||||
} else if (e.code == "Tab" && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (input_region.classList.contains("selected")) {
|
||||
this_submenu.classList.loggle("hidden");
|
||||
input_region.classList.loggle("selected");
|
||||
} else { // cycle up through the elements
|
||||
// previous_sibling = input_region.previousElementSibling;
|
||||
previous_sibling = nextsibligntabbable(input_region, "previous");
|
||||
if (previous_sibling) { previous_sibling.focus() }
|
||||
else {
|
||||
document.getElementById("preferences_menu_holder").classList.toggle("hidden");
|
||||
document.getElementById("user-preferences-button").focus();
|
||||
}
|
||||
}
|
||||
} else if (e.code == "Tab") {
|
||||
e.preventDefault();
|
||||
if (input_region.classList.contains("selected")) {
|
||||
var firstchild = this_submenu.firstElementChild;
|
||||
if (firstchild.hasAttribute("tabindex")) {
|
||||
firstchild.focus()
|
||||
} else {
|
||||
nextsibligntabbable(firstchild, "next").focus()
|
||||
}
|
||||
} else { // cycle through the elements
|
||||
// next_sibling = input_region.nextElementSibling;
|
||||
next_sibling = nextsibligntabbable(input_region, "next");
|
||||
if (next_sibling) { next_sibling.focus() }
|
||||
else {
|
||||
document.getElementById("preferences_menu_holder").classList.toggle("hidden");
|
||||
document.getElementById("user-preferences-button").focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (input_region.hasAttribute("data-val")) {
|
||||
console.log("input_region", input_region);
|
||||
console.log("input_regionparentElement", input_region.parentElement);
|
||||
if ((e.code == "Enter") || (e.code == "ArrowRight")) {
|
||||
console.log("font_vals is", font_vals);
|
||||
var dataval = input_region.getAttribute("data-val");
|
||||
var datachange = input_region.getAttribute("data-change");
|
||||
console.log("dataval", dataval, "datachange",datachange);
|
||||
if (input_region.parentElement.classList.contains("fonts")) {
|
||||
font_vals[dataval][0] += parseFloat(datachange);
|
||||
if (font_vals[dataval][0] < font_vals[dataval][1]) { font_vals[dataval][0] = font_vals[dataval][1] }
|
||||
else if (font_vals[dataval][0] > font_vals[dataval][2]) { font_vals[dataval][0] = font_vals[dataval][2] }
|
||||
console.log("font_vals are", font_vals);
|
||||
console.log("css font_vals", fontcss(font_vals));
|
||||
var new_style = fontcss(font_vals);
|
||||
var paras = document.getElementsByClassName('para');
|
||||
for (i = 0; i < paras.length; i++) {
|
||||
paras[i].setAttribute('style', new_style);
|
||||
}
|
||||
} else if (input_region.parentElement.classList.contains("fontfamily")) {
|
||||
document.body.setAttribute("data-font", datachange);
|
||||
var checks = document.getElementsByClassName('ffcheck');
|
||||
for (i = 0; i < checks.length; i++) {
|
||||
checks[i].innerHTML = '';
|
||||
}
|
||||
document.getElementById("the" + datachange).innerHTML = "✔️";
|
||||
} else if (input_region.parentElement.classList.contains("avatar")) {
|
||||
var checks = document.getElementsByClassName('avatarcheck');
|
||||
for (i = 0; i < checks.length; i++) {
|
||||
checks[i].innerHTML = '';
|
||||
}
|
||||
document.getElementById("theavatarbutton").innerHTML = dataval;
|
||||
document.getElementById("the" + dataval).innerHTML = "✔️";
|
||||
|
||||
} else if (input_region.parentElement.classList.contains("atmosphere")) {
|
||||
document.body.setAttribute("data-atmosphere", dataval);
|
||||
var checks = document.getElementsByClassName('atmospherecheck');
|
||||
for (i = 0; i < checks.length; i++) {
|
||||
checks[i].innerHTML = '';
|
||||
}
|
||||
document.getElementById("the" + dataval).innerHTML = "✔️";
|
||||
|
||||
} else if (input_region.parentElement.classList.contains("ruler")) {
|
||||
// could be motion or actual ruler
|
||||
if (["mouse", "arrow", "eye"].includes(dataval)) {
|
||||
document.body.setAttribute("data-motion", dataval);
|
||||
var checks = document.getElementsByClassName('motioncheck');
|
||||
for (i = 0; i < checks.length; i++) {
|
||||
checks[i].innerHTML = '';
|
||||
}
|
||||
document.getElementById("the" + dataval).innerHTML = "✔️";
|
||||
} else {
|
||||
if (!document.body.hasAttribute("data-ruler")) {
|
||||
linesAllWrapped()
|
||||
}
|
||||
document.body.setAttribute("data-ruler", dataval);
|
||||
var checks = document.getElementsByClassName('rulercheck');
|
||||
for (i = 0; i < checks.length; i++) {
|
||||
checks[i].innerHTML = '';
|
||||
}
|
||||
document.getElementById("the" + dataval).innerHTML = "✔️";
|
||||
}
|
||||
|
||||
}
|
||||
} else if (e.code == "Tab" && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
// previous_sibling = input_region.previousElementSibling;
|
||||
previous_sibling = nextsibligntabbable(input_region, "previous");
|
||||
|
||||
console.log("previous_sibling",previous_sibling);
|
||||
if (previous_sibling) { previous_sibling.focus() }
|
||||
else {
|
||||
input_region.parentElement.parentElement.parentElement.classList.toggle("active");
|
||||
input_region.parentElement.parentElement.classList.toggle("selected");
|
||||
input_region.parentElement.parentElement.focus();
|
||||
input_region.parentElement.classList.toggle("hidden");
|
||||
}
|
||||
} else if (e.code == "Tab") {
|
||||
e.preventDefault();
|
||||
// next_sibling = input_region.nextElementSibling;
|
||||
next_sibling = nextsibligntabbable(input_region, "next");
|
||||
if (next_sibling) { next_sibling.focus() }
|
||||
else {
|
||||
input_region.parentElement.parentElement.parentElement.classList.toggle("active");
|
||||
input_region.parentElement.parentElement.classList.toggle("selected");
|
||||
input_region.parentElement.parentElement.focus();
|
||||
input_region.parentElement.classList.toggle("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return;
|
||||
|
||||
editorLog("input_region", input_region);
|
||||
// if we are writing something, keystrokes usually are just text input
|
||||
if (document.getElementById('actively_editing')) {
|
||||
editorLog(" we are actively editing");
|
||||
|
||||
if (e.code == "Tab" && !document.getElementById('local_menu_holder')) {
|
||||
// disabled for now
|
||||
e.preventDefault();
|
||||
return ""
|
||||
create_local_menu()
|
||||
} else if (document.getElementById('local_menu_holder')) {
|
||||
main_menu_navigator(e);
|
||||
} else {
|
||||
local_editing_action(e)
|
||||
}
|
||||
|
||||
} else if (document.getElementById('phantomobject')) {
|
||||
var the_phantomobject = document.getElementById('phantomobject');
|
||||
|
||||
if (the_phantomobject.classList.contains('move')) {
|
||||
move_object(e)
|
||||
} else {
|
||||
alert("do not know what to do with that")
|
||||
}
|
||||
} else {
|
||||
console.log("calling main_menu_navigator");
|
||||
main_menu_navigator(e);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user