Entering equation as answer

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