Speculative fix for parsons height problems

* Give a little extra space
* Render mathjax before getting box height
* use jQuery outerHeight for all languages
* TODO: remove the else clause if this works in the wild

Author: bnmnetp

runestone/parsons/js/parsons.js

@@ -395,7 +395,7 @@ export default class Parsons extends RunestoneBase {
         this.solution = solution;
     }
     // Based on the blocks, create the source and answer areas
-    initializeAreas(sourceBlocks, answerBlocks, options) {
+    async initializeAreas(sourceBlocks, answerBlocks, options) {
         // Create blocks property as the sum of the two
         var blocks = [];
         var i, block;
@@ -448,23 +448,29 @@ export default class Parsons extends RunestoneBase {
         var areaWidth, areaHeight;
         // Establish the width and height of the droppable areas
         var item, maxFunction;
-        areaHeight = 6;
+        areaHeight = 20;
         var height_add = 0;
         if (this.options.numbered != undefined) {
             height_add = 1;
         }
+        // Warning -- all of this is just a bit of pixie dust discovered by trial
+        // and error to try to get the height of the drag and drop boxes.
+        // item is a jQuery object
+        // outerHeight can be unreliable if elements are not yet visible
+        // outerHeight will return bad results if MathJax has not rendered the math
         if (
             this.options.language == "natural" ||
-            this.options.language == "math"
+            this.options.language == "math" || true
         ) {
             areaWidth = 300;
-            maxFunction = function (item) {
+            maxFunction = async function (item) {
+                await this.queueMathJax(item[0])
                 item.width(areaWidth - 22);
                 var addition = 3.8;
                 if (item.outerHeight(true) != 38)
-                    addition = (2.1 * (item.outerHeight(true) - 38)) / 21;
+                    addition = (3.1 * (item.outerHeight(true) - 38)) / 21;
                 areaHeight += item.outerHeight(true) + height_add * addition;
-            };
+            }.bind(this);
         } else {
             areaWidth = 300;
             // This maxFunction is how Parsons areas width and height were being calculated previously,
@@ -549,7 +555,7 @@ export default class Parsons extends RunestoneBase {
             };
         }
         for (i = 0; i < blocks.length; i++) {
-            maxFunction($(blocks[i].view));
+            await maxFunction($(blocks[i].view));
         }
         this.areaWidth = areaWidth;
         if (this.options.numbered != undefined) {
@@ -684,7 +690,7 @@ export default class Parsons extends RunestoneBase {
         }
     }
     // Based on the data, load
-    loadData(data) {
+    async loadData(data) {
         var sourceHash = data.source;
         if (sourceHash == undefined) {
             // maintain backwards compatibility
@@ -712,7 +718,7 @@ export default class Parsons extends RunestoneBase {
             answerHash == undefined ||
             answerHash.length == 1
         ) {
-            this.initializeAreas(this.blocksFromSource(), [], options);
+            await this.initializeAreas(this.blocksFromSource(), [], options);
         } else {
             this.initializeAreas(
                 this.blocksFromHash(sourceHash),