WeBWorK interactives work graphics

[Sean Fitzpatrick]

Here is a WeBWorK exercise in APEX:

https://opentext.uleth.ca/apex-video/sec_polarcalc.html#exercise-2053

It looks fine, both on mobile or on a desktop (in which a two column layout is used).

But if you make it interactive, it becomes very much not fine. This particular problem hasn't seen recent attention, and I think Alex now has better ways to do WeBWorK, but I don't think this is an issue with the source. (If needed, I can post it.)

When we click the "make interactive" button, the container for that problem needs to fit into the space available, or the space has to expand to fit the container.

Yes, you can scroll horizontally, but trying to view an image by scrolling because you can only see 30% of the width at a time is not ideal.

There doesn't seem to be any way to adjust the screen to get the image to fit once you make them problem interactive.

[Alex Jordan]

Sidestepping the main question, I feel like colsN for an exercise
group in HTML should just be displayed with one column. Unless within
a worksheet. Does anyone disagree?

Using exercisegroup/@cols="2" or whatever is, to my mind, about making
sensible use of space on paper when printed. Looking back, I feel like
once upon a time we were overzealously making certain things behave
exactly the same way for print and HTML.

I've certainly had cases where the right thing to do for print was use
@cols="4", but then that was certainly wrong for HTML. I've addressed
this by using custom CSS to rewire .colsN in certain situations.

> --
> You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/d8a120aa-d18c-4c20-8258-f60c61b78280n%40googlegroups.com.

[David Farmer]

When you make it interactive, you get an iframe. There are
settings on the iframe and its contents which are not appropriate
for the available width.

I also see something called
math4.css
and also
bootstrap.css

Can some explain where those come from, and how to get rid of
them (the bootstrap, in particular).

[David Farmer]

I am okay with having exercisegroup always be one column in the
(non-worksheet) HTML, if that is where this discussion settles.

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CA%2BR-jrf8AT1zBi2-m9NHBSm5kh7mcSoM43uGW9tbd-B%2B6TAxYg%40mail.gmail.com.
>

[Sean Fitzpatrick]

Just noticing my subject heading. "work"="with"
(Shouldn't try to post to Google groups from a phone.)

I would agree that a lot of two column layouts should be one in HTML.

For another example, this two-column list:

https://opentext.uleth.ca/apex-accelerated/reference-integration.html#reference-int-trig

I'm sure I've fiddled with this several times to get only "short"
integrals in the left column, to avoid overlap. But overlap is back. Or
maybe it never left.
There is no way I can see to change my zoom level or browser window size
to pull those columns apart.

In print we should keep 2 columns, but in HTML, probably not, especially
since MathJax doesn't seem to report a width that the CSS can use to
realize when there isn't room for two columns.
(For other text, the CSS does a great job of detecting when to change
from two columns to one.)

[Sean Fitzpatrick]

Are those showing up when you click the 'make interactive' button?
If so, I'm guessing the WeBWorK server is responsible.

I also just noticed that this page is throwing a whole boatload of CORS
policy errors because of the YouTube videos. The youtube-nocookie.com
site is trying to access play.google.com (some sort of change made by
Google/YouTube?)

[Alex Jordan]

The iframe here does not have a src. Instead it has a srcdoc, an HTML
page that is built by the pretext-webwork javascript, gluing together
pieces fetched from the WW server.

> There are
settings on the iframe and its contents which are not appropriate
for the available width.

I could probably identify some of these things, but could you list the
things that you see to make sure we are on the same page?

I could be mistaken, but:
* math4.css is there because without it, there are some significantly
bad styling issues with the WW content. What is needed could be
migrated to regular PTX css files, but it takes some sitting down
together to make it happen. Ann Arbor, if you, me, and Glenn do not
have more pressing matters?
* bootstrap.css is in there because of Glenn's solutions to some
issues with providing feedback. For just one example, try entering "y"
as the answer to that exercise to trigger a feedback message. IIRC,
Glenn is using bootstrap to deal with positioning issues on these
feedback messages.

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2205042201110.19623%40li375-150.members.linode.com.

[David Farmer]

If those work properly when one column, maybe that is good enough for now?

Those CSS issue can be addressed when we can sit together.
(I also am trying not to do any complicated CSS until the overhaul
is ready to be public, because it may have to be done twice.)

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CA%2BR-jrf0oxZYaxEwnyjg-yBWnFH-Nkjq7VXGgkkmDjzEW7HpRw%40mail.gmail.com.
>

[Sean Fitzpatrick]

I suspect that things will not work properly, even with one column.

I resized my browser until it was narrow enough that it moved to a
one-column layout, which is what one would see on mobile.

If you make the question interactive, the iframe only fills half the
available textwidth: see the attached screenshot. I tried to include a
bit of the problem above to show the width of a non-interactive question.

[Alex Jordan]

If I remove the cols2, it's much better, but still has a trace of the
issue. You still need to scroll to get about the last 10% of the
image.

In APEX PTX source, this image has no @width, so it is defaulting to
100%. Changing that is one thing I would advise. (Not to mention
moving to tikz for the image creation.)

But it is still a problem if 100% doesn't fit. I think it is a
combination of the iframe width and the indentation for the
exercisegroup (even when using only one column).

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2205042224510.19623%40li375-150.members.linode.com.

[Sean Fitzpatrick]

I vaguely recall that there were problems with width specification for these. Maybe that it made the images too small in PDF.

But yeah, all the problems with graphics need an overhaul. I might be able to put a dent in that this summer.

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CA%2BR-jreS-sKO2QzGM9CXJt-EKJQhAFeEaRWVM7wBi9Zz%2BHnqKw%40mail.gmail.com.

[Alex Jordan]

> But if you make it interactive, it becomes very much not fine.

I fixed this by making pretext-webwork.js apply a max-width:100% to
images within the activated WW exercise. I thought this would be a
hard thing to fix, involving changing code to pg. But this CSS
band-aid seems fine. Unless there is a browser where CSS width
settings do not override direct use of @width.

In addition to that change, I still think we should still making an
exercsiegroup with columns appear as only having one column in HTML.
Maybe I will open a PR, or maybe this is just a matter of changing
some CSS.

But for the time being if things stay the way they are, there is an
issue in that if you click an image (before activating it) to make it
larger, it doesn't really make it larger. If you click the image after
activating it, nothing happens at all (but that is webwork's
responsibility, not pretext's).

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPYrwJxau9gasgEB0UeMR14ZsH8j9DyWYXDdwW6wJ%3DuVEQ%40mail.gmail.com.

[Sean Fitzpatrick]

I think the new issue (not being able to enlarge the static image) is better than the old issue.

Right now I'm checking on phone only, but everything looks good in both static and interactive.

I agree that it makes sense to default to one column in HTML

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CA%2BR-jrdTwqFPvQ2QSvKbcv-yWPyU6cYpiwpJJqEaQ-3v2cg1pw%40mail.gmail.com.