Update MathJax to version 4.0.

For the most part, there isn't much that is needed.  The javascript
files are no longer in the `es5` subdirectory, and the workaround for
changing the math renderer was removed (as noted in the comment above
it).

The `mathInteraction.pg` problem in the student orientation has been
updated, although further updates may be needed. The screen shots the
problem uses were updated, but someone else might need to create better
screen shots.  Mine seem to have come out quite a bit smaller than the
previous ones.

I removed the rather old examples of the `$pg{specialPGEnvironmentVars}{problemPreamble}`
 and `$pg{specialPGEnvironmentVars}{problemPostamble}` variables in
`defaults.config` and `localOverrides.conf.dist` that include examples
of doing things with MathJax that weren't even valid for MathJax 3. I
also made the deprecation statement for that variables stronger.

There is a minor css tweak in `system.scss` to ensure that the MathJax
expression eplorer help dialog is above the masthead and stick problem
navigation bar.

Further modification to the MathJax configuration (in
`htdocs/js/MathJaxConfig/mathjax-config.js`) may be needed as per the
discussion in issue #2828.  But that can wait until we have more
information.

Author: drgrice1

assets/pg/Student_Orientation/explorerfull.png

@@ -26,7 +26,7 @@ Once focus is on a math expression, using the space bar will activate the "MathJ
 by right-clicking (Windows/Linux) or [|control|]*-clicking (MacOS) a piece of math. Try activating the MathJax menu now.
 It should look like the following.
 
->> [!MathJax contextual menu!]{'mathjaxmenu.png'} <<
+>> [!MathJax contextual menu!]{'mathjaxmenu.png'}{140} <<
 
 There are many features that help you to engage with math content. Explore the menu options to survey what is available.
 
@@ -36,9 +36,9 @@ vision disabilities see the content better. And it may help all users to see som
 a moment to explore these settings and select options that you would be comfortable with. (Of course you can change
 these settings at any time.)
 
-Also in the main menu, there is an "Accessibility" submenu. In that menu, if accessibility is not already activated,
-select "Activate". After activating this, you may need to refresh the web page to see the math expression again. Now you
-have the option to see math content verbalized. To do this, place focus onto a math expression and hit [|enter|]*.
+Also in the main menu, there is an "Accessibility" submenu. Accessibility is enabled by default, but you can also select
+"Show Subtitles" in the "Speech" submenu.  This allows you to see math content verbalized. To do this, place focus onto
+a math expression and hit [|enter|]*.
 * At first, the entire expression is highlighted and there will be a verbal rendering of the expression.  
 [!Speech string for the quadratic formula!]{'explorerfull.png'}{600}
 * Use the down arrow to navigate "down" into a smaller piece of the math expression.
@@ -47,16 +47,16 @@ have the option to see math content verbalized. To do this, place focus onto a m
 you can see a verbalization for just this part of the expression above:  
 [!Speech string for the radicand of the quadratic formula!]{'explorerpiece.png'}{600} 
 * Return to the MathJax menu, Accessibility submenu, to explore options for how this explorer tool works.
-* Under "Speech" you will find options to use MathSpeak, ClearSpeak, or ChromeVox rules. The default is to use
-"MathSpeak verbose" rules, which try try to read math "literally" without context. For example, it reads [`(1,3)`] as
-"left parenthesis 1 comma 3 right parenthesis". Other speech rules can produce more meaningful verbal renderings. For
-example with the right ClearSpeak settings, the same math expression produces "the point with coordinates 1 comma 3"
-or "the interval from 1 to 3 not including 1 or 3". 
+* Under "Speech" you will find options for MathSpeak and ClearSpeak rules. The default is to use "MathSpeak verbose"
+rules, which try try to read math "literally" without context. For example, it reads [`(1,3)`] as "left parenthesis 1
+comma 3 right parenthesis". Other speech rules can produce more meaningful verbal renderings. For example with the right
+ClearSpeak settings, the same math expression produces "the point with coordinates 1 comma 3" or "the interval from 1 to
+3 not including 1 or 3". 
 
 Some keyboard-navigating users might find it undesirable for each piece of math content to be tab-indexed. If this is
-the case, then in the "Accessibility" sub menu you can uncheck "Include in Tab Order". Just note that in order to undo
-this and make math content tabbable again, you will need to access the menu, and so you will need some way other than
-tabbing to bring focus back to a piece of math content.
+the case, then in the "Options" sub menu of the "Accessibility" submenu you can uncheck "Include in Tab Order" and
+"Semantic Enrichment". Just note that in order to undo this and make math content tabbable again, you will need to
+access the menu, and so you will need some way other than tabbing to bring focus back to a piece of math content.
 END_BODY
 
 $images = <<END_BODY;

assets/pg/Student_Orientation/explorerpiece.png

@@ -1240,36 +1240,7 @@ $pg{specialPGEnvironmentVars}{convertFullWidthCharacters} = 0;
 $pg{specialPGEnvironmentVars}{problemPreamble} = { TeX => '', HTML=> '' };
 $pg{specialPGEnvironmentVars}{problemPostamble} = { TeX => '', HTML=>'' };
 
-# this snippet checks to see if Moodle has already called MathJax
-# $pg{specialPGEnvironmentVars}{problemPreamble} = { TeX => '', HTML=> <<END_PREAMBLE };
-#
-#	<script type="text/x-mathjax-config">
-#	if (MathJax.Hub.Startup.params.config && MathJax.Hub.config.config.length) {
-#	    MathJax.Hub.Config({
-#	      config: [],
-#	      skipStartupTypeset: false
-#	    });
-#	  }
-#	</script>
-# END_PREAMBLE
-
-#
-# $pg{specialPGEnvironmentVars}{problemPostamble} = { TeX => '', HTML=> <<END_POSTAMBLE };
-#
-#
-# END_POSTAMBLE
-
-# Note!  problemPreamble and problemPostamble are becoming depreciated,
-#        so you probably wouldn't use them
-# To have the problem body indented and boxed, uncomment:
-#$pg{specialPGEnvironmentVars}{problemPreamble}{HTML} = qq!<div class="problem-content">\n!;
-#$pg{specialPGEnvironmentVars}{problemPostamble}{HTML}= qq!</div>\n!;
-
-# To have the problem body indented and boxed, uncomment:
-# $pg{specialPGEnvironmentVars}{problemPreamble}{HTML} = '<BLOCKQUOTE>
-#    <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=15 BGCOLOR=#E8E8E8><TR><TD>';
-# $pg{specialPGEnvironmentVars}{problemPostamble}{HTML} = '</TD></TR></TABLE>
-#     </BLOCKQUOTE>';
+# Note: problemPreamble and problemPostamble are depreciated, so don't use them.
 
 ##### PG modules to load
 

assets/pg/Student_Orientation/mathInteraction.pg

@@ -435,25 +435,6 @@ $mail{feedbackRecipients}    = [
 # use this setting when running Rserve in a docker container.
 #$pg{specialPGEnvironmentVars}{Rserve} = {host => "r"};
 
-
-################################################################################
-# Serving Opaque client questions to moodle
-################################################################################
-
-
-# this snippet checks to see if Moodle has already called MathJax
-# $pg{specialPGEnvironmentVars}{problemPreamble} = { TeX => '', HTML=> <<END_PREAMBLE };
-#
-# 	<script type="text/x-mathjax-config">
-# 	if (MathJax.Hub.Startup.params.config && MathJax.Hub.config.config.length) {
-# 	    MathJax.Hub.Config({
-# 	      config: [],
-# 	      skipStartupTypeset: false
-# 	    });
-# 	  }
-# 	</script>
-# END_PREAMBLE
-
 ################################################################################
 # Authentication
 ################################################################################

assets/pg/Student_Orientation/mathjaxmenu.png

@@ -98,24 +98,6 @@ if (!window.MathJax) {
 					AM.symbols.splice(i, 0, { input: trigger, ...newTriggers[trigger].symbols });
 				}
 
-				// The following is a workaround for a bug in MathJax when the math renderer is changed.
-				// Note that this should be removed when we have upgraded to MathJax 4.
-				const { STATE } = MathJax._.core.MathItem;
-				const { Menu } = MathJax._.ui.menu.Menu;
-				const { mathjax } = MathJax._.mathjax;
-				Menu.prototype.rerender = function (start = STATE.TYPESET) {
-					this.rerenderStart = Math.min(start, this.rerenderStart);
-					if (!Menu.loading) {
-						if (this.rerenderStart <= STATE.COMPILED) this.document.reset({ inputJax: [] });
-						MathJax.startup.promise.then(() => {
-							mathjax.handleRetriesFor(() => {
-								this.document.rerender(this.rerenderStart);
-								this.rerenderStart = STATE.LAST;
-							});
-						});
-					}
-				};
-
 				return MathJax.startup.defaultReady();
 			}
 		},

conf/defaults.config

@@ -1054,3 +1054,7 @@ td.alt-source {
 		width: 100%;
 	}
 }
+
+mjx-help-background {
+	z-index: 1055;
+}

conf/localOverrides.conf.dist

@@ -21,7 +21,7 @@
 		"jquery": "^3.7.1",
 		"jquery-ui-dist": "^1.13.3",
 		"luxon": "^3.7.1",
-		"mathjax": "^3.2.2",
+		"mathjax": "^4.0.0",
 		"minisearch": "^7.1.2",
 		"shortcut-buttons-flatpickr": "^0.4.0",
 		"sortablejs": "^1.15.6"