Entering equation as answer

[kit_carpenter]

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 = '<div id="mq-equation-question">';

var q3 = '<table>';

var q4 = '<tbody>';

var q5 = '<tr id="mqBtn">';

var q6 = '<td><p id="sqrtbtn">&radic;x</p></td>';

var q7 = '<td><p id="fracbtn">&frac12;</p></td>';

var q8 = '<td><p id="sqbtn"><em>x</em>^y</p></td>';

var q9 = '</tr>';

var q10 = '</tbody>';

var q11 = '</table>';

var q12 = '<p>Type equation in box below</p>';

var q13 = '<p><span id="mq-math-field"></span></p>';

var q15 = '<p><code id="mq-latex"></code></p>';

var q16 = '<script>';

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 = '</script>';

var q22 = '</div>';

var q23 = '<script>';

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 = '</script>';

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.

[kit_carpenter]

I really appreciate the feedback.  I totally agree with you about the limitations of using this for a vast majority of math assessments.

[James]

By the way, I like the concept of enhancing Canvas, and like the idea of sharing code that can do it. It's just that trying to grade math within Canvas as a short answer question is pretty futile, but there are a lot of people who want to try and do it. Math is one area that requires major attention to be done right, not just an enhancement to existing functionality.

I also forgot to mention that short answer is case insensitive (T for temperature is not the same as t for time, but they're equivalent in short answer questions) and spaces matter ("3 + 1" is different than "3+ 1" or "3 +1" and all of those are different short answers than "4").

For more efficient ways to grade math, you may want to check out some of  @avi_naiman ​'s posts: How do you use Canvas for math homework assignments?  and How can you hand-grade a Quiz REALLY quickly in Canvas?

Avi is helping me with a project to add a bunch of enhancements to SpeedGrader, but it's been stalled for a month or so (so has my presence in the Community) while I tried to get caught up on all my grading and prepare for the end of the semester (he has been most gracious during my lapse). I actually used his suggestions to put content into an essay question and it worked well for me. He uses the essay questions and has students enter their answers with the built-in Equation Editor so it looks correct. I'm not sure where we left off, but I think he's using a beta version of the code that automatically marks essay questions as correct and then he can skim through them and only mark down the ones that are wrong rather than having to mark every single one as correct.