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: 4

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.
In reply to Nathan Wallach

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

by Larry Riddle -
I have used Nathan's coding for answer boxes with limits of integration in problems I wrote several years ago. As far as I recall, these problems had no issues until WeBWork version 2.17. We recently updated to 2.18 and the problems are are now generating a long list of non-fatal warnings. I haven't checked yet, but I assume I am seeing these warnings only in my role as admin, but that students will not see them. The problems are displaying fine and the correct answers are identified as such. But I would like to know if something has changed in 2.18 that is the cause of these warning messages. So I ran Nathan's simple01.pg code in the problem editor (hence the references to line xx of "undefined") and these are the warnings I got:

Warning messages
Non fatal warnings. These are only displayed for users with permission to view problem debugging info.
Use of uninitialized value $html_attribs in concatenation (.) or string at line 1794 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDivSpan called at line 1835 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDiv called at line 2 of (eval 2493)
from within main::EV3P called at line 163 of undefined
Use of uninitialized value $html_attribs in concatenation (.) or string at line 1794 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDivSpan called at line 1835 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDiv called at line 2 of (eval 2493)
from within main::EV3P called at line 163 of undefined
Use of uninitialized value $html_attribs in concatenation (.) or string at line 1794 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDivSpan called at line 1835 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDiv called at line 2 of (eval 2495)
from within main::EV3P called at line 163 of undefined
Use of uninitialized value $html_attribs in concatenation (.) or string at line 1794 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDivSpan called at line 1835 of [PG]/macros/core/PGbasicmacros.pl
from within main::openDiv called at line 2 of (eval 2495)
from within main::EV3P called at line 163 of undefined

I also ran Glenn's code from IntegrationLimitsWMQ-PGML.pg mentioned above, and got a much longer list of warning messages.

Here is an example of a problem I wrote that is now giving warning messages.
In reply to Larry Riddle

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

by Glenn Rice -

Those warnings are only shown for users with permission to view problem debugging info as stated in the message.  So your students will not see those.

We changed the way that those warnings are handled to make these warnings more visible so that problem authors will see issues with their code and start fixing them.  Previously these warnings only went to the apache2 error log.

In this case, you have discovered a minor issue with the openDivSpan method defined in PGbasicmacros.pl.  The $html_attribs is defined without a default value.  So if no html attributes are passed in the options, then it remains undefined, and when it is used later it gives the warnings.  I will open a pull request to fix the issue.