Update MathJax to version 4.0.

assets/pg/Student_Orientation/mathInteraction.pg

@@ -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;

conf/defaults.config

@@ -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
 

conf/localOverrides.conf.dist

@@ -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
 ################################################################################

htdocs/js/MathJaxConfig/mathjax-config.js

@@ -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();
 			}
 		},

htdocs/js/System/system.scss

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

htdocs/package.json

@@ -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"

lib/FormatRenderedProblem.pm

@@ -90,12 +90,12 @@ sub formatRenderedProblem {
 		[ 'node_modules/jquery/dist/jquery.min.js',                            0, {} ],
 		[ 'node_modules/jquery-ui-dist/jquery-ui.min.js',                      0, {} ],
 		[ 'node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js', 0, {} ],
-		[ 'js/MathJaxConfig/mathjax-config.js',                     0, { defer => undef } ],
-		[ 'node_modules/mathjax/es5/tex-svg.js',                    0, { defer => undef, id => 'MathJax-script' } ],
-		[ 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 0, { defer => undef } ],
-		[ 'js/Problem/problem.js',                                  0, { defer => undef } ],
-		[ 'js/System/system.js',                                    0, { defer => undef } ],
-		[ 'math4-overrides.js',                                     1, { defer => undef } ]
+		[ 'js/MathJaxConfig/mathjax-config.js',                                0, { defer => undef } ],
+		[ 'node_modules/mathjax/tex-svg.js',                                   0, { defer => undef } ],
+		[ 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',            0, { defer => undef } ],
+		[ 'js/Problem/problem.js',                                             0, { defer => undef } ],
+		[ 'js/System/system.js',                                               0, { defer => undef } ],
+		[ 'math4-overrides.js',                                                1, { defer => undef } ]
 	);
 
 	# Get the requested format.

templates/layouts/system.html.ep

@@ -25,8 +25,8 @@
 % # JS Loads
 <%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'js/MathJaxConfig/mathjax-config.js' }),
 	defer => undef =%>
-<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'node_modules/mathjax/es5/tex-svg.js' }),
-	id => 'MathJax-script', defer => undef =%>
+<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'node_modules/mathjax/tex-svg.js' }),
+	defer => undef =%>
 <%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'node_modules/jquery/dist/jquery.min.js' }) %>
 <%= javascript $c->url({
 	type => 'webwork', name => 'htdocs',