Mathjax not rendering in interactive list page

[ronm123]

Hi all I was alerted to a Mathjax issue that was showing the Mathjax correctly in the editor but not on preview/play and in this case the Mathjax had been added to the interactive list page. I've done some further testing and there does seem to be a difference between the interactive list page and others but I haven't tested every single page type. Replicate as follows:

1. Use the following source in an interactive list page which contains 2 slightly different versions of some simple Mathjax: `

   Conductance:  G = 1/R
   Where R is the resistance in ohms

   \( \sf Conductance\:in\: this\ situation:\:G=\frac{1}{R}\)

   \[Conductance\ in\ this\ situation: G=\frac{1}{R}\]

   `

In a plain text page or any of the navigator pages this renders correctly.

However in an interactive list page it shows the code instead of the Mathjax e.g.

Although it does render ok in the editor window.

I know there have been Mathjax issues posted previously and since closed but I couldn't find an issue the same as this so have added it as a new issue. Not sure if there is something in the model file causing this difference or something in xenith.

[JohnSmith-LT]

This appears to be the same for any page model that doesn't build the page completely before calling pageLoaded. It can be reproduced in Hotspot page by creating a hotspot with the same MathJax code above and when you click the hotspot you get the raw code. Adding:

try { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } catch (e){};

to line 196 of hotspot modelpage to reparse MathJax after clicking a hotspot fixes the issue but ideally it would be better to leave this in xenith and trigger a page content change event which updates this and perhaps other stuff now or in the future...

I haven't tested but I assume the same problem would occur in a quiz feedback element and in numerous other places where text is shown after the user does something since the MathJax code won't be being re-run.

[JohnSmith-LT]

Hi @ronm123 ,

Can you check that this commit fixes the issue for Interactive List page and doesn't break MathJax in:

Decicion Tree, Drag Drop LabelGlossary, Hotspot Image, Interactive List, MCQ, Model Answer, Opinion and Quiz

just when you get a chance...

John

[ronm123]

@JohnSmith-LT I just quickly tested before and after your fix and mixed results...

Before fix: Decision tree, Multiple choice, opinion and quiz all seemed to display the mathjax ok interactive list, hotspot image and drag and drop labelling all showed mathjax code rather than rendered mathjax

after fix Decision tree, Multiple choice, opinion and quiz still ok hotspot image now ok interactive list flashes rendered mathjax but then shows code again drag and drop labelling still shows code

Cheers Ron

[JohnSmith-LT]

Sorry about that @ronm123 , there was some funky thing going on in the Interactive List page that I assume @FayCross had added as it's attributed to making aria work and it was reloading the text a second time and wiping out the MathJax processing. I've just reprocessed it again and it seemed to work in my testing - maybe that section needs looking at.

Fixe Drag Drop Label too I think.

John

[ronm123]

@JohnSmith-LT all those page types seem to be rendering the mathjax now which is great. I did notice there's a bit of a rendering delay (or rendering duration) which seems most noticeable on the interactive list page but is quicker on others. I haven't used mathjax enough to know whether this has always been the case or perhaps whether it's just my local xampp install. Do you see the same thing? I recorded a quick demo: https://drive.google.com/file/d/1A1ptkq0DmqfSnDloWy4aqhK9P3Eithh9/view?usp=sharing

Cheers Ron

[JohnSmith-LT]

Yeah @ronm123 I do see that too although i'm using xampp locally so it's maybe not as much of a delay. In this instance I think it is to do with the aria code that I mentioned before which we might be able to improve upon as it seems to perhaps be a hack adding it twice. I'll wait to hear from @FayCross as I don't want to upset whatever it is there for and I wouldn't know how to test that I hadn't broken it...

Perhaps we need to look at all these areas that need MathJax processing and there needs to be a flow of "hide -> update -> process MathJax -> fade in" which would hide the issue somewhat.

[JohnSmith-LT]

I know you like technology @ronm123 and not sure what you used to record the demo above but I use https://github.com/NickeManarin/ScreenToGif to do screen capture on windows and you can save as an animated gif very easily and copy and paste into here or to emails. You can see an example in the other issue I mentioned you in about the timed/bullets page. Just in case you are interested...

[torinfo]

@ronm123 @JohnSmith-LT

Do we want to add this to 3.8 as 3.8.4?

[JohnSmith-LT]

I'd say yes but not sure it's 100% what it could be yet - perhaps if @FayCross has capacity to glance at this for 5 minutes she'll know whether fixing the aria thing is possible...

That being said, if it wasn't working before then it's probably already an improvement.

[ronm123]

@JohnSmith-LT @torinfo I'd say yes too.

[ronm123]

BTW @JohnSmith-LT I use snagit and could have saved as a gif but will give screentogif a try at some point.

[JohnSmith-LT]

Meant to reply to this @ronm123, I have used Snagit in the past and if you have the licence for that then it's probably as good or possibly better. ScreenToGif is a good free alternative, even for recommending to others. Animated gifs are great for this type of thing where they can be embedded easily and good for PDFs also for guides.

[FayCross]

I can't remember adding the reload in there but from my comment it was probably added after some screen reader testing a while ago. Not able to test today to see if it's still needed but leave it in for now & I'll try to look when back at desk next week

[ronm123]

@JohnSmith-LT @FayCross @torinfo this is a slightly off-topic question but it relates to the interactive list page and possibly the difference between this and other pages so seemed worth posing here rather than a new issue...

I have some jquery added to optional script panes of various pages and it works in pages like the accordion, button and tabbed navigators but not the interactive list page. The script finds all the images in each of the panes e.g. $( $("#pageContents").find('img') ).each(function( index ) { var imgpath=$( this ).prop('src'); console.log(imgpath); }); Obviously I've shortened the code for testing purposes so that it just logs the image path rather than actually doing anything. What I can't work out is why this is different for the interactive list page compared with the navigators but I'm guessing it's something like the navigators are loading all the xml/content when the page loads but the interactive list page isn't and only doing so on click of each of the list items. My question is whether there is a way to get this to also work with the interactive list page with script added to the optional script property? I can get it to work if I add the script to the source of each nested pane but that seems the wrong thing to do.

Ultimately this is something I want to add as an optional property for all pages but for the moment I just need to get it to work whenever it is added to an optional script property and need to get it working on the interactive list page.

[JohnSmith-LT]

Hi @ronm123

It really depends what you wish to do - there's always more than one way to skin a wild Haggis...

We really have 2 common ways that these types of multi-screen things are done:

• The interactive list page is not dissimilar to how the Hotspot Image works - when the option is selected then the new data is loaded into position.
• The Navigators have individual pages, created at initialisation of the page and made visible when required...

If you just require access to some of the data then it will always be available in the XML and is relatively easy to parse. But if you need access to the images "in place" then that isn't much good. Of course the page can be changed to be like the other type but then there is something that needs consideration. We have just added audio input capabilities and there is an autoplay option which I have working now but perhaps not fully committed yet.If we use the autoplay option then the audio will play when loded via interactive list or hotspot image however I suspect that if we put the audio into the navigators then the audio will either all start playing at page enter or won't play at all (not tested this yet). Obviously this would not work in existing pages using navigators anyway but if we change Interactive List or Hotspot Image then they would stop working and perhaps break existing pages...

We could though patch these pages to search for audio within the subpages and play it when the page changes, via code rather than the autoplay option...

Maybe I rambled a wee bit but not sure where this leaves us...

[ronm123]

@JohnSmith-LT thanks I think we do struggle from not having regular enough verbal discussion to discuss this kind of longer term development stuff. In this particular case I have an immediate need and a longer term need:

1. Immediate need is to get this working from the optional script property of the interactive list page without any change to model files etc.
2. Longer term I would look to add an optional property for every page and change the wizard and any relevant models accordingly.

With regard to 1 is there anything that triggers on selection of each of the interactive text links that I could pick up in the script optional property to trigger this script. Actually as I say that I guess each of the text links are loaded so perhaps I can dynamically add an extra function to those which then triggers the rest of the script. I'm just trying to avoid adding to the source of each of the panes.

[JohnSmith-LT]

@ronm123 yeah I get that. I think the problem is that the Tabbed, Accordian etc naviigators are built using jQuery UI and the inteface is handled by jQuery UI plugin therefore the content needs to be in place. The Interactive List is not managed by jQuery UI and has been written from the ground up and this was just the easiest way to do this at that time...

It could certainly be rewritten to work the same way as the others but I'm not sure if this is one of the original pages or whether this was born out of a specific requirement at Nottingham which perhaps @FayCross know what the impact of changing the underlying functionality would bein terms of the potential numbers of LOs affected.

You could certainly hook into the click handler of the list buttons but you would only get access to any images that belong to that element - i'm still not clear what it is you want to do with the images as to whether that would be enough or whether you'd need them all at the same time.

[ronm123]

@JohnSmith-LT thanks for your comments. For my immediate needs I've got this working by adding a click handler and calling the custom function but added a timeout to be sure the images are loaded. e.g. var myFunction = function() { $( $("#pageContents").find('img') ).each(function( index ) { var imgpath=$( this ).prop('src'); console.log(imgpath); //do other stuff }); }; $('.listItem').click(function() { setTimeout(function(){ myFunction(); }, 500); });

This works for how I need it to for now even if it's not the best way to achieve this.

[FayCross]

Late to this but @JohnSmith-LT asked about whether there would be a problem from UoN point of view re. changing this page to load all sub-pages at once. No I don't think so. As you say it simply loads the content of each sub-page when a link is clicked rather than loading them all initially like navigators do. I can't think of any reason not to change this if needed.

[JohnSmith-LT]

Thanks @FayCross @ronm123 got it to work but I suppose it's one of those things that it maybe makes it easier and faster initially to only load what you need but it perhaps limits other possibilities. One to keep in the front of my mind for next time a page gets developed...

[ronm123]

@FayCross @JohnSmith-LT I was alerted to an issue with mathjax and the sortable grid page so was going to add that as a new issue but I'm guessing it might be relevant to this previous discussion so adding it here. I've tested and replicated this on latest develop code and 3.8.5 but I don't know if the recent change to the mathjax verson we are using has had any impact or if it's the same for earlier versions too... I've shared this example with your accounts on xot.xerte.org.uk In this case the table data is added as follows: and when the page first loads it looks fine: However drag any item and it changes to the code rather than the rendered mathjax: Live demo via https://xot.xerte.org.uk/play.php?template_id=211 Can't remember if this has been discussed before and is a known issue or if it's something new?

[JohnSmith-LT]

What about the latest patch i've committed Ron. It gives a not very nice flash of the original content but without reworking the page and/or using a different drag/drop tool we may not be able to get much better as jQuery seems to be doing something funky when you start and stop dragging...

[ronm123]

@JohnSmith-LT I think that would be OK John e.g. I see what you mean about the not very nice flash but this is better than it not working at all. However after clicking to check answers the mathjax display breaks again: Do you get the same?

[JohnSmith-LT]

Ah ok Ron, I never checked that and I never checked the keyboard tab control either. Have fixed both in same way…

John

From: Ron Mitchell notifications@github.com Sent: 09 July 2020 17:22 To: thexerteproject/xerteonlinetoolkits xerteonlinetoolkits@noreply.github.com Cc: Smith, John J.J.Smith@gcu.ac.uk; Mention mention@noreply.github.com Subject: Re: [thexerteproject/xerteonlinetoolkits] Mathjax not rendering in interactive list page (#866)

@JohnSmith-LThttps://github.com/JohnSmith-LT I think that would be OK John e.g. I see what you mean about the not very nice flash but this is better than it not working at all. However after clicking to check answers the mathjax display breaks again: [image]https://user-images.githubusercontent.com/5167146/87065010-62b86500-c208-11ea-85b9-d4a224384baf.png Do you get the same?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/thexerteproject/xerteonlinetoolkits/issues/866#issuecomment-656223401, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA5Z6IRENLZ4EI5TAVD3RDLR2XVBBANCNFSM4JMZSFGA.

Glasgow Caledonian University is a registered Scottish charity, number SC021474

[ronm123]

@JohnSmith-LT thanks that seems to work now. Shame about the flashing between code and rendered mathjax but at least it works and I'm sure that's more noticeable when we're testing that it will be for a learner completing the interaction.

[ronm123]

@JohnSmith-LT @FayCross I just quickly scanned through all the previous discussion here and obviously we discussed more than the original subject line suggests so I'm not sure if we should now close this issue or not or perhaps leave it in place for the next developer day? If either of you think it should be closed now then please do. Cheers Ron