Mathjax dynamic content (Removing old math) - Mathjax v2

[Sohail Iqbal]

Hi there,

I am new to this group and asking a question which might have been answered previously.

I am developing an online test platform for school students and mathematics and Mathjax are an integral part of this. I have managed to show dynamic content on my webpage. 

As you can see that dynamic math is loading correctly after http get call. However, there are many question in a test and every new question is loaded after clicking on "Next".

The problem is that the old math from the DOM is not clearing and is shown on the next question also. The statement of the second question is still present in the DOM despite the JSON data is already updated. (see below)

I am using Mathjax v2 in Angular 16.

I have tried to Typeset the math with element id (MathExample) but it is not working.

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathExample"]);

I have already searched a lot on the internet to see if others have encountered similar problems but didn't find anything. 

Any help is deeply appreciated. Many thanks in advance.

Kind regards,

Sohail

[Murray]

Sohail

This appears to be a HTML-javascript issue, rather than a MathJax one. Without some example code it's difficult to pinpoint why this is happening.

I suspect it's because the new question is being added in a new container with a new ID (or class), so the old container with the first question just goes along for the ride.

But try this. Let's assume that dark blue background DIV has ID = "darkBlueBG". On your event listener for the "Next" button, clear the contents of that DIV first, something like this:

document.querySelector("#nextButton"),addEventListener("click", function() {

    document.querySelector("#darkBlueBG").innerHTML = '';

   // Code for loading next question goes here

});

But it would be better to track down how each new question is added and fix that.

BTW, MathJax v2 is quite old now, and version 4 will be released soon. probably a good time to upgrade.

Regards

Murray

[Sohail Iqbal]

Hi Murray,

Yes you are right. I implemented a solution similar to what you suggested. I first cleared the ''innerHTML" and then set the new text to the html element.

This removed the old math and showed the new math just fine.

Many thanks for your help. I struggled with this issue for a few weeks and I appreciate your support.

Regards,

Sohail Iqbal