WeBWorK Problems

Answer boxes for limits of integration - with support for MathQuill

Answer boxes for limits of integration - with support for MathQuill

by Nathan Wallach -
Number of replies: 2

I really liked Ryan Maccombs' idea (see https://webwork.maa.org/moodle/mod/forum/discuss.php?d=4462#p12973 ) of formatting input boxes for limits of integration nicely using CSS.

However, once we started using MathQuill for live rendering of the answer, that approach stopped working, as the CSS which applied to the original "regular" input boxes did not carry over to the replacement MathQuill input boxes.

I tried various approaches to find a technique which works with both MathQuill on and off, and the solution which seems to work the best is to set the entire "line" using a series of "display: inline-block" DIV elements, and to handle the layout of the limits of integration using "inline-grid". A small amount of CSS code is still applied to the specific "regular" input boxes by their ids (setting font-size, height, padding, etc.) but the majority of the layout is handled by the CSS grid.

Attached is a sample PG file using this approach, and images of the rendered problem appear below.

MathQuill enabled - on load and with live-rendered answers:

Sample WeBWorK problem using integration limit input box layed out using CSS Grid, with MathQuill on. This is just after load, with empty MathQuill input boxes

Sample WeBWorK problem using integration limit input box layed out using CSS Grid, with MathQuill on. This is with live-rendered answers.


MathQuill disabled (with answers):

Sample WeBWorK problem using integration limit input box layed out using CSS Grid, with MathQuill off.Answers are included in the input boxes.


Tags:
In reply to Nathan Wallach

Re: Answer boxes for limits of integration - with support for MathQuill

by Glenn Rice -
I think that the original approach that relies on answer names is not a good idea. I would suggest using the css classes in that case as well.  Note that if the problem is used in a gateway quiz the answer names will be prefixed with the quiz prefix, and so the style will not take effect.

I attached a PGML version that also utilizes the css classes.
In reply to Glenn Rice

Re: Answer boxes for limits of integration - with support for MathQuill

by Nathan Wallach -
Glenn - The use of the CSS descendant selector to handle the regular (non-MathQuill) formatting is a huge improvement over the original approach of manually determining and using the ids of the input boxes whose formatting needed to be modified. Thanks for helping improve this formatting approach.

I've adopted your selector in the attached sample (plain) PG file which should be considered a replacement for the file in the prior post of this thread.

Thanks also for providing the PGML sample - which makes this approach relevant for both styles of coding problems.

About use in Gateway quizzes - it could be that such uses would run into some "scope conflicts" if the same class names were used in different problems but with slight differences in the CSS setting used in different problems included in a single gateway quiz.  One setting I have found it useful to sometimes tweak a bit is the value of "left" in .divOnLineWithIntegrationLimits (also sometimes in .gridForPairOfIntegrationBounds) which helps reduce excess white-space in the lines being displayed by the browsers. Since there "scoped" property of the HTML style tag was deprecated and is not supported by most browsers, I'm not sure there is an easy approach to avoiding such potential issues. Maybe there is a better approach to keep the spacing reasonable without the use of negative values of "left" with "position: relative;".

Since openDiv() and openSpan() provide the ability to "wrap" any reasonable section of PG generated HTML code in a unit which can be assigned a class name, the use of such a wrapper and the type of descendant selector you used can make it easy to add formatting to input boxes without any need to add a new feature to PG to attach styling or an additional class name to input boxes directly.