Show equation being plotted with Latex

[jeanimal]

Between the plots and the degree input, there is now another jxgbox-class styled box with a LateX (MathJax-rendered) version of the equation.

For example:
degree...equation
1.............a0 + x = 0
2.............a0 + a1 x + x^2 = 0
3.............a0 + a1 x + a2 x^2 + x^3 = 0

There is sometimes a noticeable delay in rendering (at least when serving locally).

I had the idea to add the equation because I was confused. The coefficient labels on the plot did not obviously match the equation at the top of the "Explanation" section-- e.g. for degree n there is no a_n-- so I thought there was a mistake.

[duetosymmetry]

This is looking nice, thanks.

• Do you know if there's a way to get the equation centered, like the other Eqs?
• No need to style the equationBox with jxgbox, it can get its own class if you want to apply some styling
• Please squash commits down into one

[jeanimal]

Ready for review.

• I created a new css style that centers the equation. It also sets a min height to avoid temporary height changes during re-rendering. Screenshot attached.
• I left the jxgbox css styling because I feel it makes clear that the equation is output.
• Commits have been squashed.

[jeanimal]

Hang on. Just noticed a bug. I will let you know when it's ready.

[jeanimal]

All good now. Ready for review.

[duetosymmetry]

Thanks for your superhuman patience! I just edited the PR a little bit, but was not able to push to your branch, so I pushed to the branch named jeanimal/show-equation-being-plotted on my own repo. The main differences are:

1. Got rid of the Old string building function and changes the CSS a bit.
2. Changed the order of terms in the string building func so that they are decreasing, which I think is more familiar to HS calculus students
3. Moved the equation above the two panels. This is because I don't want anything between the interactive panes and the controls at the bottom. Now the equation acts as a title for the panes.

The only thing that's bugging me now is that on mobile, if the degree of the polynomial is ~6 or above, the equation will be wider than most people's devices and will thus be cut off. Can you think of any solution to this problem?

[jeanimal]

How about the overflow-wrap property? https://css-tricks.com/almanac/properties/o/overflow-wrap/ Since there are spaces in the equation, hopefully it would break at a space. I would want to avoid constructions like x ^2 You could also try the word-wrap they mention on that website. I don't have a locally running server now but can try this weekend if that doesn't work.

…

On Fri, Aug 2, 2019 at 11:23 AM Leo C. Stein ***@***.***> wrote: Thanks for your superhuman patience! I just edited the PR a little bit, but was not able to push to your branch, so I pushed to the branch named jeanimal/show-equation-being-plotted <https://github.com/duetosymmetry/web-site/tree/jeanimal/show-equation-being-plotted> on my own repo. The main differences are: 1. Got rid of the Old string building function and changes the CSS a bit. 2. Changed the order of terms in the string building func so that they are decreasing, which I think is more familiar to HS calculus students 3. Moved the equation *above* the two panels. This is because I don't want anything between the interactive panes and the controls at the bottom. Now the equation acts as a title for the panes. The only thing that's bugging me now is that on mobile, if the degree of the polynomial is ~6 or above, the equation will be wider than most people's devices and will thus be cut off. Can you think of any solution to this problem? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3?email_source=notifications&email_token=ABFWYHW7OHUYUSQ6ZMB5SNTQCRNP5A5CNFSM4IB4UHO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3OG4TY#issuecomment-517762639>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFWYHQVDFSTK77QAQB7YXLQCRNP5ANCNFSM4IB4UHOQ> .

[jeanimal]

Hi Leo, I found we need to turn on wrap in the MathJax configuration, as described in the link below. Note that it is off by default because it makes the page slower, although in my tests with chrome, I did not notice any particular slowness. http://docs.mathjax.org/en/latest/output.html?highlight=automatic%20line%20breaking#automatic-line-breaking Since line-breaking takes extra processing and so can slow down the mathematical output, it is off by default To accommodate the extra line, I changed the myEquationBox css to have a min-height rather than height. Since I didn't have a way to test the wrap on mobile, I tested it with really big equations > 10. Your spinner has a max of 7 but you can type in anything... and it seems to work fine with higher numbers. BUT that made me notice a bug in how I handled more-than-one digit subscripts and superscripts, so I fixed that, too. (The numbers need to be wrapped in curly braces.) Screenshot attached. I wasn't sure how to handle the fact that you started a new branch, so I just added a commit to my branch that you should be able to cherrypick into your branch: fd9ec61 Hope this helps! Jean

…

On Fri, Aug 2, 2019 at 2:44 PM Jean Whitmore ***@***.***> wrote: How about the overflow-wrap property? https://css-tricks.com/almanac/properties/o/overflow-wrap/ Since there are spaces in the equation, hopefully it would break at a space. I would want to avoid constructions like x ^2 You could also try the word-wrap they mention on that website. I don't have a locally running server now but can try this weekend if that doesn't work. On Fri, Aug 2, 2019 at 11:23 AM Leo C. Stein ***@***.***> wrote: > Thanks for your superhuman patience! I just edited the PR a little bit, > but was not able to push to your branch, so I pushed to the branch named > jeanimal/show-equation-being-plotted > <https://github.com/duetosymmetry/web-site/tree/jeanimal/show-equation-being-plotted> > on my own repo. The main differences are: > > 1. Got rid of the Old string building function and changes the CSS a > bit. > 2. Changed the order of terms in the string building func so that > they are decreasing, which I think is more familiar to HS calculus students > 3. Moved the equation *above* the two panels. This is because I don't > want anything between the interactive panes and the controls at the bottom. > Now the equation acts as a title for the panes. > > The only thing that's bugging me now is that on mobile, if the degree of > the polynomial is ~6 or above, the equation will be wider than most > people's devices and will thus be cut off. Can you think of any solution to > this problem? > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#3?email_source=notifications&email_token=ABFWYHW7OHUYUSQ6ZMB5SNTQCRNP5A5CNFSM4IB4UHO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3OG4TY#issuecomment-517762639>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ABFWYHQVDFSTK77QAQB7YXLQCRNP5ANCNFSM4IB4UHOQ> > . >