Entering equation as answer

unknown

One drawback that I hear from our math department is the inability of Canvas to self-grade equations.  I have played around with different options, but I think I may have a possible solution.  I am not a coder by any stretch, but I have worked on this issue and I would like some help making the code more efficient.  What I have now is derived from mathquil.  It allows a student to enter an equation as the answer.

It will grade it based on the latex code of the answer ...

It seems to work well, but I wanted someone to look at the code to see if there is a better way to construct it.

Here is the code that I use:

css

#mqBtn :hover {background:lightpink;}

#mq-math-field {max-width:100%;min-width:200px;padding:10px;}

#mqBtn > td {border: 1px solid black;}

#mqBtn > td > p {margin:5px;}

#mq-latex {display:none;}

javascript

if (/https:\/\/<<canvas web address>>\/courses\/<<course number>>\/quizzes\/*/.test(document.location)) {

if (document.getElementById('mq-equation-question')) {

var quesName = document.getElementsByClassName("display_question question short_answer_question")[0].id;

document.getElementsByName(quesName)[1].style.display = "none";

var q2 = '';

var q3 = '';

var q4 = '';

var q5 = '';

var q6 = '√x

';

var q7 = '½

';

var q8 = 'x^y

';

var q9 = '';

var q10 = '';

var q11 = '';

var q12 = 'Type equation in box below

';

var q13 = '

';

var q15 = '

';

var q16 = '';

var q17 = 'var mathFieldSpan = document.getElementById("mq-math-field");';

var q18 = 'var latexSpan = document.getElementById("mq-latex");';

var q19 = 'var MQ = MathQuill.getInterface(2);';

var q20 = 'var mathField = MQ.MathField(mathFieldSpan, {spaceBehavesLikeTab: true, handlers: {edit: function() {latexSpan.textContent = mathField.latex();$("input.question_input").val(latexSpan.textContent);$("#list_'+quesName+'").attr("class","list_question answered seen current_question");}}});';

var q21 = '';

var q22 = '';

var q23 = '';

var q24 = '$("#sqrtbtn").click(function () {mathField.cmd("\\\\sqrt");mathField.focus();});';

var q25 = '$("#fracbtn").click(function () {mathField.cmd("\\\\frac");mathField.focus();});';

var q26 = '$("#sqbtn").click(function () {mathField.cmd("^");mathField.focus();});';

var q28 = '';

var question = q2.concat(q3,q4,q5,q6,q7,q8,q9,q10,q11,q12,q13,q15,q16,q17,q18,q19,q20,q21,q22,q23,q24,q25,q26,q28);

var appendQuest ="#"+quesName+"_question_text";

$(appendQuest).append(question);

}}

Thanks for the help

James

My personal opinion, as a mathematics professor, is that Canvas should not be used for grading most mathematical content without human intervention.

It is a bad idea to use LaTeX, which is a formatting language, to grade mathematical content, or that there are multiple correct answers: 3\frac 7{100}, \frac{307}{100}, \frac{3.07}{1}, 3+7/100, 307/100,  3.07/1, etc because those might be eliminated by better instructions, but there is still no way to account for all possible answers (a fraction is simple, but what about -x+7 vs 7-x or cos(0) vs 1 or ...)

Math faculty should find something better to use or advocating for major changes (hopefully the Modern Quizzing Engine will make it more palatable) in the way Canvas does questions. I don't hold out hope, though. Mathematical content is a small portion of Canvas while programs like MyMathLab or WebAssign are primarily devoted to mathematical delivery and quizzing. Automatically assessing anything more than the simplest mathematical content is like asking the computer to automatically grade an essay response written in a foreign language.

Personal thoughts aside, here's my thoughts on what you actually asked about. Someone else may have better suggestions.

• I would not use IDs unless you prefix them and add a suffix to make them unique. Those must be unique on a page and that limits you to only one question of that type unless each question is in its own iframe so the IDs don't conflict. Use class instead and then you can write code once that works on all of the items.
• Similarly, your selection code isn't going to support more than one of these questions. It also assumes that the question is the first short answer question on the page
• I would take all of the code and put it in a single string rather than concatenating 27 variables together. If you do want them all on separate lines for clarity purposes, you can put newlines in the code or you could put the whole thing into an array and then use the .join() method of the array to concatenate.
• Why is the second script not just combined with the first?
• Your selector to determine whether or not to run the code will execute on all pages that match 'quizzes/*'. I'm not sure if that's intentional or not, but I thought I'd mention it. It will run on the moderate, statistics, history, main page, etc., not just on the one where people are taking it. It may not do anything unless the mq-equation-question id is found, but it still checks.
• I would write a script that executed one time and processed all of the applicable questions on the page rather than trying to add the script to the first one. Rather than repeating the JavaScript for each one, I would add it once and then just add events to each question that needed it rather than including the scripts as part of each question. You would need to make those functions aware of what was calling it so it would know where to apply the function.
• Finally, realize that custom JavaScript doesn't (at least the last I heard) work with mobile apps, someone would have to be using a browser (possibly on a mobile device) to benefit from this.