replace equation image with a better solution

[pixelzoom]

There's a help dialog that looks like this:

The top equation is an image file, "equation-help.png". Sort of defeats the fact that 'x' and 'y' symbols are translatable. Come up with a better solution.

[SaurabhTotey]

Assigning this issue to @ariel-phet. I don't know where exactly to go with this issue. One thing I could try and do is convert each part of the equation to a Text node so that the strings are translatable, but I don't know if that is desired or would even help.

[ariel-phet]

@SaurabhTotey talk to @veillette about how he is using formulaNode might be a possible solution. If not, we can consider punting on the first version of this sim and figure this out later. Math sims have a general issue of not having a great formula solution, so it is a more general problem.

[SaurabhTotey]

Ok, I have now replaced the formula image in the dialog with FormulaNode. The dialog now looks like this.

Personally, I think this looks pretty good, but it has a few issues. For one, the Chi symbol is different than the capital X we have been using throughout the sim. If I replace the Chi with a capital X, the appearance of the dialog becomes

which is much better for fitting in with the rest of the simulation, but isn't actually a Chi. I will push the version with an X.

Another issue that I have found is that the f in the equation and the f in the below text are different. I don't know how to address this. Either I need to find a way to get a different f within the FormulaNode, or I need to replace the fs in the help text with images/more formula nodes. However, I think that the issue of the difference in fs is relatively minor.

The version I am about to push does not yet have support for translatable strings, but that is what I will work on next.

[pixelzoom]

Looking really nice! Well done @SaurabhTotey.

[SaurabhTotey]

Thanks @pixelzoom!

Regarding my issues with the chi, it turns out that chi is a translatable symbol we have in the strings file, so I don't have any more reservations about having the X be a chi, because it can be changed and also translated.

The equation is now almost fully translatable. The X, N, f, x, and y strings can be translated. I initially had a bit of trouble inserting the strings into the equation, because the FormulaNode would keep erroring. I found out that hardcoding the strings into the variables rather than using the require( 'string!...') would allow the formula to work again. After doing a bit more digging, I found that the strings from the strings file get padded with invisible characters that I had to remove with split and join calls. As such, I have this line (.split('‪').join('').split('‬').join('')) which removes the invisible start and end padding, which looks crazy, but I have explained why it is necessary and what it does with a comment.

Regardless, I believe I have now solved this original issue of the formula not being translatable. Most symbols within the formula are now translatable. As such, I am marking this issue ready for review.

[SaurabhTotey]

Just for reference, the current documentation is

// Each translatable string is padded by an invisible starting and ending character.
// These characters are usually for determining if the string is LTR or RTL.
// These padding characters break KaTeX parsing and need to be removed.
// The invisible characters are removed by the split calls, and the string is regenerated with the join calls.
// The embedded strings should only be symbols/single characters anyways, so stripping direction characters shouldn't be too harmful.

[amanda-phet]

Looks amazing! Thanks for your work on this @SaurabhTotey .