MathJax and Qualtrics

When I tried MathJax with Qualtrics I ran into issues. I used KaTeX instead and didn't have any problems. It also has the advantage of being quite a bit faster.

Tom
Could you tell me how you used KaTeX in Qualtrics? I am not experienced with javascript and CSS. I tried pasting the starters template provided by KaTeX into the "Custom CSS" field in Look & Feel, however this was rejected by Qualtrics because 'the custom CSS was invalid.'
Kind regards,
Aleks

1. https://www.qualtrics.com/community/discussion/comment/32541#Comment_32541Add the Katex style sheet (css) and JavaScript to your header. You can load them from jsdelivr.com.


2. Put your equations inside span tags with the class "katex". For example:

   f(x) = 2e^x



3. Add JS to render the Katex:

Dear TomG
Thank you for your response! After some searching how to add code to the header, I got it to work! I didn't realise at first that in the Header editor you can click the symbol for sourcecode, and then write HTML.
Thank you!

TomG MarieH
Have you had a similar issue with using ampersands for making matrices for example?
I get an output like underneath
with using HTML/KaTeX like this
It seems that HTML gets "confused" by the ampersand as I read here. The output stays like this if i use

&

"&"

\\&

&

I think Qualtrics converts the ampersands before you get a chance to evaluate them with Katex. You could just avoid ampersands and do this:
A = \\begin{bmatrix} 4 \\quad 2\\\\ 1 \\quad 3\\end{bmatrix}
Which results in:

That's a nice workaround!

Hello I have been trying to follow this post to insert equations into Qualtrics. I am very familiar with LaTeX, so that is not an issue.
I feel like I am missing something easy, as I am new to Qualtrics. When I enter any of the scripts mentioned above into the Header, the preview shows all the scripts and the equation doesn't appear as I would expect it to. It's like I didn't put it in math mode. It's just a series of characters that do not look like it has been "TeX"-ed.
I saw information about MathJax, as well as KaTeX. Should I be including both sets of scripts? For KaTeX, Tom mentioned the link to the CSS (which I found on the KaTeX page) and the Javascript (is that also on the KaTEX page?)
Also, the Javascript mentioned: does that go into the Header or into the "Add JavaScript" portion of the question. I appreciate any information you can provide.

Click on this icon and then paste it into the header:
Click it again and you'll see it disappear. If it does. Then you've pasted the scripts properly.

https://www.qualtrics.com/community/discussion/comment/32547#Comment_32547TomG I tried this but the math equations in the text of my questions are not loading properly. The first question that uses Katex loads correctly, but all subsequent questions using Katex first shows a page full of raw CSS/html code for a second before loading the equations. Do you have any idea what might be causing this?

https://www.qualtrics.com/community/discussion/comment/37999#Comment_37999My guess is Qualtrics Page Transition. Try setting Page Transition to None in Look & Feel/Motion.

TomG The page transition setting is actually already "none"! Do you have any idea what other things might have caused the problem? I copied the starter template from Katex into the header and put the javascript code in every question with Katex. What is slightly strange is when I copy the template from Katex into the header, it always changes and the html> disappears. I don't know if that has anything to do with this?

I have been trying to work through these posts but I am sadly lost.

I unfortunately have no experience with JavaScript, or basically any coding. I am able to use LaTex and want to include math equations in some of my questions, but cannot make this work. If anyone could help me I would be incredibly grateful. I’m confident that if I could just get one working example I could figure the rest out. I’m more than happy to share what I’ve tried.

@stephenmg, 

There are three steps:

Add the katex stylesheet and javascript library to you survey header like this:

<link href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/combine/npm/katex@0.15.3,npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script>

Add your equations in html span tags with the class katex, something like this:

<span class="katex">f(x) = 2e^x</span>

Add javascript to a question like this:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery(".katex").each(function() {
		katex.render(this.innerHTML, this, { throwOnError: false });
	});
});

@TomG 

Thank you so much for your reply and for breaking it down like this, it is much more accessible for me.

I have followed what you said, and unfortunately still do not have anything compiling.

I added :

<link href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/combine/npm/katex@0.15.3,npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script>

to my header, i.e. Look & Feel -> General -> Header (edit) and the put it in the source (<>)

Then my question, which again I put in source, currently reads as follows:

Suppose

<span class="katex">f(x) = 2e^x</span>

Qualtrics.SurveyEngine.addOnload(function() { jQuery(".katex").each(function() { katex.render(this.innerHTML, this, { throwOnError: false }); }); });

Is there a particular order I should be following? This may all seem very stupid on my part so I apologise for my lack of knowledge with these things.

@stephenmg,

The question JS doesn’t go in the question text.  Use ‘Add JavaScript’ to add JS to the question.

@TomG This worked perfect, thank you so much for clarifying and breaking all this down for me.

@TomG , I used this thread to create a math test and everything worked perfectly. But I have one more question. Since I am creating a math test I want to show the scores once the survey is submitted. To do that I used the Scoring option from Survey Options.  However, the Katex rendering is not being carried out to the score page where each question is displayed with the correct answer and the answer chosen. Is there a way to fix this? Here is an example of how one math question looks like once the answer is submitted: 

2) Which expression is equivalent to (m^4q^4z^{-1})(mq^5z^3), where m, q, and z are positive?

• A) m^4q^{20}z^{-3}

• B) m^5q^9z^2

• C) m^6q^8z^{-1}

• D) m^{20}q^{12}z^{-2}

@Lrudman,

I just commented your other thread about Katex. I believe my suggestion of putting the JS in the survey header instead of with each question may address this issue too.

I already did that following this:. From Look and Feel → General → Header I pasted this <link href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/combine/npm/katex@0.15.3,npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script>

While taking the survey questions look alright but it doesn’t render when the scoring is displayed with the correct answers and chosen option. Really appreciate all the help. Thank you!!

@Lrudman,

Remove the katex render scripts from all the questions. Your survey header should look like this:

<link href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/combine/npm/katex@0.15.3,npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script><script>
Qualtrics.SurveyEngine.addOnload(function() {
	jQuery(".katex").each(function() {
		katex.render(this.innerHTML, this, { throwOnError: false });
	});
});
</script>

It works in the scoring summary:

Thank you so much, @TomG ! I will try and report back.

I don’t find the solutions here to be practical as a frequent user of Latex/Katex.  The span tags are cumbersome.  It is much simpler to use $$ signs and $$ $$ to enclose Latex code.  This is the solution that was better for my workflow, and I believe will be better for many others.    If you come back to this post as a later date, you may need to go to the Katex page and update some of the .css and .js this points to.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

 <!-- The loading of KaTeX is deferred to speed up page rendering -->
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>

 <!-- To automatically render math in text elements, include the auto-render extension: -->
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
        onload="renderMathInElement(document.body);">
</script>


</script><script>
    Qualtrics.SurveyEngine.addOnReady(function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>