Clean up of the htdocs/themes directories.

Move gateway.scss and achievements.scss into htdocs/js subfolders.
Rename the math4.js file to htdocs/js/System/system.js.  Rename the
math4.scss file to htdocs/js/System/system.scss.  These files do not
belong in the theme directories and should not be considered theme-able.

Where possible, the page specific code in the math4.js (now system.js)
file has been moved into the page specific JavaScript file for that
page.

The aria label hack that was in math4.js has been removed.  It is clear
that is not doing the correct thing, and it is probably less of a
problem to have an aria label that reads "answer 1" even when there are
no other answers than the numerous cases that it is changing aria labels
to just "answer" when it shouldn't.  One case is if there is only one
text answer and there are other answers (radio buttons, checkboxes, etc)
on the page.  In this case the "answer 1" is changed to "answer" even
when there is more than one answer on the page.  Also in gateway quizzes
the "problem n" prefix is removed if there is only one problem on the
page, and it shouldn't be.  Aria labels in general need to be rethought,
but this JavaScript hack is just incorrect.

Update the README files in the themes directories a bit.  More could be
done here to give better directions on how to customize themes.

The name of the htdocs/js directory really needs to be changed.  It is
really the public "assets" location, and not just JavaScript.  The
htdocs/css directory should be removed as well.

Also change "npm install" to "npm ci" in the warnings that are issued if
the `static-assets.json` files are not found.

htdocs/js/PGProblemEditor/pgproblemeditor.js

@@ -5,6 +5,9 @@
 	toastContainer.style.zIndex = 20;
 	document.body.append(toastContainer);
 
+	// Setup reference link tooltips.
+	document.querySelectorAll('.reference-link').forEach((el) => new bootstrap.Tooltip(el));
+
 	// Convenience method for showing messages in a Bootstrap toast.
 	const showMessage = (message, success = false) => {
 		if (!message) return;

htdocs/js/SendMail/sendmail.js

@@ -29,4 +29,9 @@
 			submit.click();
 		});
 	}
+
+	// Insertable macro toast
+	document.getElementById('insertable-macros-btn')?.addEventListener('click', () => {
+		new bootstrap.Toast(document.getElementById('insertable-macros'), { autohide: false }).show();
+	});
 })();

htdocs/themes/math4/math4.js → htdocs/js/System/system.js

@@ -80,15 +80,6 @@
 		(el) => new bootstrap.Tooltip(el, {trigger: 'hover', fallbackPlacements: []})
 	);
 
-	// Sets up problems to rescale the image accoring to attr height width and not native height width.
-	const rescaleImage = (_index, element) => {
-		if (element.height != element.naturalHeight || element.width != element.naturalWidth) {
-			element.height = element.getBoundingClientRect().width * element.height / element.width;
-		}
-	}
-	document.querySelectorAll('.problem-content img').forEach(rescaleImage);
-	window.addEventListener('resize', () => document.querySelectorAll('.problem-content img').forEach(rescaleImage));
-
 	// Homework sets editor config
 	// FIXME: These are really general purpose tooltips and not just in the homework sets editor.  So the class name
 	// should be chosen to better reflect this.
@@ -101,20 +92,6 @@
 		(el) => new bootstrap.Tooltip(el, { trigger: 'hover', fallbackPlacements: [], html: true })
 	);
 
-	// PG Problem Editor
-	document.querySelectorAll('.reference-link').forEach((el) => new bootstrap.Tooltip(el));
-
-	// SendMail insertable macro toast
-	document.getElementById('insertable-macros-btn')?.addEventListener('click', () => {
-		new bootstrap.Toast(document.getElementById('insertable-macros'), { autohide: false }).show();
-	});
-
-	// For accessibility we need to change single answer aria labels to "answer" and not "answer 1"
-	// FIXME: The correct aria-label should be inserted by PG to begin with.  This hack will not work if there is more
-	// than one problem on the page.
-	const codeshards = document.querySelectorAll('.codeshard');
-	if (codeshards.length == 1) codeshards[0].setAttribute('aria-label', 'answer');
-
 	const messages = document.querySelectorAll('#message .alert-dismissible, #message_bottom .alert-dismissible');
 	if (messages.length) {
 		const dismissBtn = document.getElementById('dismiss-messages-btn');

htdocs/themes/math4-green/README

@@ -1,6 +1,8 @@
-This is an "alternative" colorization to math4.  If you want to provide 
-multiple themes to your users you should follow this as an example.  
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
 
-Everything (except the override files) should be a link pointing back to 
-math4.  This will make it so that all your themes will automatically get 
-updates.  All of your changes should be in the override files.  
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4-red/README

@@ -0,0 +1,8 @@
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
+
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4-yellow/README

@@ -1,6 +1,8 @@
-This is an "alternative" colorization to math4.  If you want to provide 
-multiple themes to your users you should follow this as an example.  
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
 
-Everything (except the override files) should be a link pointing back to 
-math4.  This will make it so that all your themes will automatically get 
-updates.  All of your changes should be in the override files.  
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4/README

@@ -1,18 +1,18 @@
 This folder contains the files necessary for the math4 theme.  These files are
-tracked by git and any changes made to them will be overwritten when you 
-upgrade.  The two exceptions are math4-overrides.css and math4-overrides.js.  
+tracked by git and any changes made to them will be overwritten when you
+upgrade.  The two exceptions are math4-overrides.css and math4-overrides.js.
 
-These files do not need to be present, but if they are they will be included 
-in system.conf and will override the math4.css and math4.js theme.  They can 
-created by copying math4-overrides.css.dist and math4-overrides.js.dist.  This 
-is similar to how localOverrides.conf interacts with defaults.conf and 
-localOverrides.conf.dist.  In particular if you upgrade your server
-math4-overrides.js and math4-overrides.css  will not change, but their .dist 
-versions and the other math4 theme files may change. This might cause problems 
-until you merge the changes. 
+These files do not need to be present, but if they are they will be included in
+system.conf and can be used for general overrides.  They can created by copying
+math4-overrides.css.dist and math4-overrides.js.dist.  This is similar to how
+localOverrides.conf interacts with defaults.conf and localOverrides.conf.dist.
+In particular if you upgrade your server math4-overrides.js and
+math4-overrides.css  will not change, but their .dist versions and the other
+math4 theme files may change. This might cause problems until you merge the
+changes.
 
 If you want to customize math4 you should only change math4-overrides.css and
-math4-overrides.js.  Note: Because you can include arbitrary jQuery in 
-math4-overrides.js you can actually change pretty much anything, including 
-adding new html or changing existing html. 
+math4-overrides.js.  Note: Because you can include arbitrary JavaScript in
+math4-overrides.js you can actually change pretty much anything, including
+adding new html or changing existing html.
 

htdocs/themes/math4/system.html.ep

@@ -28,7 +28,7 @@
 	type => 'webwork', name => 'htdocs',
 	file => 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 }) =%>
-<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'math4.css' }) =%>
+<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs', file => 'js/System/system.css' }) =%>
 <%= content 'css' =%>
 % if ($c->exists_theme_file('math4-overrides.css')) {
 	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'math4-overrides.css' }) =%>
@@ -47,7 +47,7 @@
 	type => 'webwork', name => 'htdocs',
 	file => 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
 	}), defer => undef =%>
-<%= javascript $c->url({ type => 'webwork', name => 'theme', file => 'math4.js' }), defer => undef =%>
+<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'js/System/system.js' }), defer => undef =%>
 <%= content 'js' =%>
 % if ($c->exists_theme_file('math4-overrides.js')) {
 	<%= javascript $c->url({ type => 'webwork', name => 'theme', file => 'math4-overrides.js' }), defer => undef =%>

lib/FormatRenderedProblem.pm

@@ -71,7 +71,7 @@ sub formatRenderedProblem {
 		[ 'bootstrap.css',                                              1 ],
 		[ 'node_modules/jquery-ui-dist/jquery-ui.min.css',              0 ],
 		[ 'node_modules/@fortawesome/fontawesome-free/css/all.min.css', 0 ],
-		[ 'math4.css',                                                  1 ],
+		[ 'js/System/system.css',                                       0 ],
 		[ 'math4-overrides.css',                                        1 ],
 	);
 
@@ -108,7 +108,7 @@ sub formatRenderedProblem {
 		[ '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 } ],
-		[ 'math4.js',                                               1, { defer => undef } ],
+		[ 'js/System/system.js',                                    0, { defer => undef } ],
 		[ 'math4-overrides.js',                                     1, { defer => undef } ]
 	);
 

lib/WeBWorK/Utils.pm

@@ -2021,13 +2021,13 @@ sub getThirdPartyAssetURL {
 sub getAssetURL {
 	my ($ce, $file, $isThemeFile) = @_;
 
-	# Load the static files list generated by `npm install` the first time this method is called.
+	# Load the static files list generated by `npm ci` the first time this method is called.
 	unless ($staticWWAssets) {
 		my $staticAssetsList = "$ce->{webworkDirs}{htdocs}/static-assets.json";
 		$staticWWAssets = readJSON($staticAssetsList);
 		unless ($staticWWAssets) {
 			warn "ERROR: '$staticAssetsList' not found or not readable!\n"
-				. "You may need to run 'npm install' from '$ce->{webworkDirs}{htdocs}'.";
+				. "You may need to run 'npm ci' from '$ce->{webworkDirs}{htdocs}'.";
 			$staticWWAssets = {};
 		}
 	}
@@ -2037,7 +2037,7 @@ sub getAssetURL {
 		$staticPGAssets = readJSON($staticAssetsList);
 		unless ($staticPGAssets) {
 			warn "ERROR: '$staticAssetsList' not found or not readable!\n"
-				. "You may need to run 'npm install' from '$ce->{pg_dir}/htdocs'.";
+				. "You may need to run 'npm ci' from '$ce->{pg_dir}/htdocs'.";
 			$staticPGAssets = {};
 		}
 	}

templates/ContentGenerator/Achievements.html.ep

@@ -1,7 +1,7 @@
 % use WeBWorK::Utils qw(getAssetURL);
 %
 % content_for css => begin
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
 % end
 %
 % content_for js => begin

templates/ContentGenerator/GatewayQuiz.html.ep

@@ -4,8 +4,8 @@
 % use WeBWorK::AchievementEvaluator qw(checkForAchievements);
 %
 % content_for css => begin
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'gateway.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
+	<%= stylesheet getAssetURL($ce, 'js/GatewayQuiz/gateway.css') =%>
 	% # Output css for jquery-ui for problems to use.
 	<%= stylesheet getAssetURL($ce, 'node_modules/jquery-ui-dist/jquery-ui.min.css') =%>
 	%

templates/ContentGenerator/Problem.html.ep

@@ -4,7 +4,7 @@
 	% # Output css for jquery-ui for problems to use.
 	<%= stylesheet getAssetURL($ce, 'node_modules/jquery-ui-dist/jquery-ui.min.css') =%>
 	%
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
 	%
 	% # Add CSS files requested by problems via ADD_CSS_FILE() in the PG file
 	% # or via a setting of $ce->{pg}{specialPGEnvironmentVars}{extra_css_files}