@rm349 As I tested survey with page break, block preview, question preview etc.., there’s nothing wrong with your code and everything works fine.

You might wanna test with the real survey, not just preview, add &Q_DONT_SAVE=1 to the end of your anonymous link to test the real survey without costing any responses.E.g https://yourdomain.qualtrics.com/jfe/form/SV_123456abc&Q_DONT_SAVE=1

If it’s still not work, copy your survey to another one, or make a similar one from scratch to see if the problem persist.

Hope this helps

@rm349 - Some additional advice: DO NOT use Rich Content Editor - it can mess up your html without you realizing it. When working with Katex questions only use HTML View to edit.

@Nam Nguyen Thank you for your response! I tested the actual survey and still encountered the same issues. Next, I made a test survey with 3 of the questions from my original survey (2 that did not work and 1 that did), each separated by a page break. In this survey, all 3 questions rendered correctly. I tried copying and pasting the code from the questions that worked in the test survey, but they still did not work in the actual survey.

Then, I tried manually retyping the HTML code in the actual survey (using only the HTML View as @TomG advised). The two questions I manually retyped were:

12.) What is the name of this statistical procedure: <span class = "katex">\binom{n}{\text{x}}</span>

and

13.) <span class="katex">\binom{n}{\text{x}}</span> is said as "__  _____ __".

These two questions appear on the same page in the survey (i.e., are not separated by a page break). When I only had #12 added, it rendered correctly. However, when I viewed the survey again after adding #13, neither of the questions rendered correctly. Here is what #12 looked like:

Additionally, when I looked at Inspect>Console, it showed these two errors: 

I used Notepad + + to search for zero width spaces and found none, so I’m not sure why these errors are occurring. Plus, the same HTML worked in the test survey.

All of this said -- I think the issue is occurring when more than one question on a page is using KaTex. Do you have any advice? Sorry for the long reply! Thank you!

@rm349 - The code is written to find all elements with the class katex on the page, so that’s not it.

It may be a timing issue - try changing addOnload to addOnReady.

Also, no spaces between class and = and the class name.

@TomG -- Just to make sure I did this correctly -- I changed the JavaScript on those questions to:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

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

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

Unfortunately, it’s still not working. The same issue is persisting.

The reason I thought it might be an issue caused by multiple questions on the same page using Katex is that:

1. The two questions that are working are the only instance of Katex on their respective pages. For one of them, all of the multiple-choice options also include Katex, but again, it’s all contained in the same question.
2. The questions that are not working have another question on the same page containing Katex. Additionally, #12 (in my previous reply) rendered correctly until I also added #13, which appears on the same page.

This is my first time using Katex, and I’m not a coder -- so I could be totally off base here. I appreciate your help!

@rm349 I think i found your problem. I’ve been able to replicate it.

Did every question on the page have that JavaScript? When the page load, multiple JavaSrcipts run and render/conflict with each other. That’s why it’s oke on question preview, but messed up in block preview.

You have page brake, so make sure only 1 question in the page have the JS, preferably the 1st question of the page.

Hope this helps

@Nam Nguyen -- Yes, that was the issue! Thank you!

To avoid having to break up the questions with page breaks, here’s what I did: For any pages with multiple Katex questions, I added a span id to each question’s HTML. Then, I edited each question’s JavaScript to target that id. 

So, for question 12, I used this HTML:

12.) What is the name of this statistical procedure: <span id="katex-question-12" class="katex"> \binom{n}{\text{x}} </span>

And this JavaScript:

Qualtrics.SurveyEngine.addOnload(function() {
  var katex13 = document.getElementById('katex-question-13');
  if (katex13) {
    katex.render(katex13.innerHTML, katex13, { throwOnError: false });
  }
});

For question 13, I followed the same procedure, using this HTML:

13.) <span id="katex-question-13" class="katex"> \binom{n}{\text{x}} </span> is said as "__  _____  __".

And this JavaScript:

Qualtrics.SurveyEngine.addOnload(function() {
  var katex13 = document.getElementById('katex-question-13');
  if (katex13) {
    katex.render(katex13.innerHTML, katex13, { throwOnError: false });
  }
});

Now, both questions render correctly, even though they are on the same page.

Thanks so much for identifying the problem!

@rm349 Glad I could help 

12.) What is the name of this statistical procedure: <span id="katex-question-12" class="katex"> \binom{n}{\text{x}} </span>

Qualtrics.SurveyEngine.addOnload(function() {
  var katex13 = document.getElementById('katex-question-13');
  if (katex13) {
    katex.render(katex13.innerHTML, katex13, { throwOnError: false });
  }
});

13.) <span id="katex-question-13" class="katex"> \binom{n}{\text{x}} </span> is said as "__  _____  __".

Qualtrics.SurveyEngine.addOnload(function() {
  var katex13 = document.getElementById('katex-question-13');
  if (katex13) {
    katex.render(katex13.innerHTML, katex13, { throwOnError: false });
  }
});

@Nam Nguyen , thanks for your help on this thread! 

@rm349 , thanks for confirming the solution worked, it’ll greatly help out the community!