Delay showing problem content until after MathJax content has rendered.

This was suggested by @dpvc in
openwebwork/pg#1431.  The point is to prevent
the visual motion that occurs while the MathJax content is rendered.
This doesn't use the `#problem_body` id selector since that is not on
all problems (it isn't in Gateway tests), but uses the
`.problem-content` class selector instead, since that is on all
problems.  Also, a `for of` loop and `document.querySelectorAll` is
needed for tests, since there can be more than one problem.

I am not entirely sold on the empty area shown in the mean time, but it
does prevent the jitter for the text within the problem. Perhaps if
someone wants to toy with css, a loading block could be shown with a
transition that fades in the problem when the MathJax rendering is
completed.

Note that webwork2 renders MathJax in places outside of the problem
content, and those will not be affected by this.

Author: drgrice1

htdocs/js/MathJaxConfig/mathjax-config.js

@@ -103,6 +103,13 @@ if (!window.MathJax) {
 
 				MathJax.startup.defaultReady();
 				MathJax.startup.document.constructor.ProcessBits.allocate('findScripts');
+			},
+			pageReady() {
+				return MathJax.startup.defaultPageReady().then(() => {
+					for (const problemBody of document.querySelectorAll('.problem-content')) {
+						problemBody.style.visibility = '';
+					}
+				});
 			}
 		},
 		options: {
@@ -134,4 +141,8 @@ if (!window.MathJax) {
 			ignoreHtmlClass: 'tex2jax_ignore'
 		}
 	};
+
+	for (const problemBody of document.querySelectorAll('.problem-content')) {
+		problemBody.style.visibility = 'hidden';
+	}
 }