Hide question until Mathjax rendered

[jpslav]

Right now, when a question loads, the math shows up as grayed-out latex until Mathjax is able to render it. It might be nicer to just hide the whole question (under a spinning 'loading' icon) until Mathjax has finished its work. If Mathjax does something like fire an event when its work is done, we may want to change the display of questions to only show the question after that even. This will take some exploration and discussion to figure out a good approach.

[rlgreen91]

So how and where would we solve this? Would you just create a partial that slows display until Mathjax is done, and then use that partial in question and project views? Or is there a way that you could alter the javascript such that this "delay" occurs anytime Mathjax is detected?

[jpslav]

Check and see if Mathjax fires any events after the math has been displayed. If it does, we can key off of that to move from our "Loading..." screen to the display of the question.

JP

On Jun 26, 2012, at 11:56 AM, rlgreen91 wrote:

So how and where would we solve this? Would you just create a partial that slows display until Mathjax is done, and then use that partial in question and project views? Or is there a way that you could alter the javascript such that this "delay" occurs anytime Mathjax is detected?

---

Reply to this email directly or view it on GitHub: https://github.com/lml/quadbase/issues/85#issuecomment-6581347

[rlgreen91]

At the end of MathJax rendering, there is a startup End signal that is posted; we could hold rendering until that value becomes true, but I'm not sure how to check or if you can check the value of that variable. Another thing the documentation suggested was changing the math delimiters: MathJax uses preprocessors to change LaTex tags to the appropriate script tags, and then runs the processing. By using the transformer to change the LaTex tags to the script tags, we can at least eliminate the preprocessor stage.

[Dantemss]

Pretty sure you would just use javascript for this. Don't think partials will do you much good (except maybe for reusing the load icon). When the page loads, some piece of javascript can use the jQuery hide() function to hide the content and show() to display the loading icon. Then you register another function as a callback to Mathjax (not sure how to do this, you have to find out) that hides the loading icon and shows the question content when done loading.

[Dantemss]

OK apparently you wanna find where we tell Mathjax to render things in the question show page and change it to something like this:

f = function(){blah}; MathJax.Hub.Queue(["Typeset",MathJax.Hub]); MathJax.Hub.Queue(f);

Or if you can't find it, you can possibly just do

f = function(){blah}; MathJax.Hub.Queue(f);

Assuming this runs after we tell mathjax to render.

[rlgreen91]

I actually have found a way to do a callback for the End signal I mentioned, and we can do a hide() function until the callback shows that signal is true. I'll look up how to display a loading icon. And we'd eventually want to extend this to questions, answer choices, and the quick look function, right?

[Dantemss]

Yes, we might want this in other places as well.

As for the icon, you would have to make one yourself or find an open source one. You would pretty much place it right above or below the content in the view and show/hide it using javascript, just like the content itself, unless you can figure out a cleverer way.