Flash Cards - Add in Math Equation support

[zachberry]

In an effort to add Math symbol support in Materia let's start by adding Math equations into Flash Cards.

Faculty should be able to add in math equations fairly easily, but since this will most likely not be the dominate use case I'd want to make sure the UI/UX to add in a math equation minimally disrupts the interface.

Depending on the difficulty of entering in math equations we may need additional help or explanation on how this is done.

Ideally the library used to add in math equation support should be loaded conditionally when needed, so we don't need to bake it in to every Flash Cards instance. I'm not sure how difficult this is with our current setup.

[superlaza]

Needs QA before pull request. See issue/562-math-equation-support on materia, clu

Known issues:

• Each mathbox needs to have contenteditable=false so that clicking a mathbox doesn't allow editing, since that should only be done in the edit dialog. However, angular sanitize strips that attribute when the qset's loaded from the db, so I reinsert it after the sanitize in the widget creator. This is a bit messy.
• When clicking to edit a mathbox loaded from db, the html result of the edit is inserted as a child of the pre-existing mathbox. e.g. <old mathbox><new mathbox/></old mb>
• Still missing a command help section

[zachberry]

QAing

[zachberry]

Incoming issue dump:

• - Adding a math equation, then adding in an image causes the HTML of the math equation to be displayed
• - After adding in an equation the browser scrolls the page down so that the Materia header is no longer visible. Scrolling also no longer works. [Tested in Chrome]
• - Math stylesheet not included
• - Tall equations can cause the done button to be pushed off the dialog https://www.dropbox.com/s/sqaxbfag5fa4iwj/Screenshot%202015-08-18%2013.53.50.png?dl=0
• - Insert a math item - clicking on it brings it back up again. Now refresh the page and click on that math item again - the content is missing
• - Similarly clicking on a math item from an imported question doesn't fill in the equation
  ** with newly
• - After inserting a math item it would be nice to have the cursor return to the end of the card (currently you're required to click in the card to regain focus)
• - Sometimes the equations don't seem to be saved correctly. I created a card with the quadradic equation. Looking at the returned qset text for that card I see this returned: What is the name of the equation below?<div><br/></div><div><br/></div>
• - Import question dialog doesn't style math correctly
• - Math doesn't work at all in MateriaDev (perhaps have a similar feature to media where it throws in a random math equation?)

[superlaza]

The above issues are fixed.

Consider the following quirks:

• Multiple consecutive mathboxes with no gap get deleted together on backspace, e.g. f(x)g(x)h(x) all disappears on backspace.
• Card view when image asset is added doesn't have an "add math" button. I've added a listener for the ctrl-i key combo to insert math, but the user should be made explicitly aware that math is still available. Please advise.
• Math looks somewhat decent when inputting (subscripts aren't as sub as I'd like, but I'll investigate whether that's just a mathquill standard), and not so decent in flash cards.

Input

Flash-cards

[zachberry]

If we can clean up the output in your example that would be cool, but it's not a deal-breaker IMO.

Disabling math input when an image is included seems like a reasonable solution.

Here's what I found:

• - Mathquill spans sit too close to the existing content. Thinking add a left and right margin of 5px to .mathquill-rendered-math.
• - Importing a question that had math in it, then clicking on the equation results in Uncaught TypeError: Cannot read property '0' of null at the line return b = a.latex[$(this).attr("class").match(/mathbox-[0-9]*/)[0]],
• - Importing a question with math into another widget that doesn't support math results in the HTML being imported in (more on this at the end of this comment)

These issues from last time are still occuring to me:

• - After adding in an equation the browser scrolls the page down so that the Materia header is no longer visible. Scrolling also no longer works. [Tested in Chrome]
• - Tall equations can cause the done button to be pushed off the dialog https://www.dropbox.com/s/sqaxbfag5fa4iwj/Screenshot%202015-08-18%2013.53.50.png?dl=0

Importing:
I'm not sure the best way to handle this, but I have a few ideas - Have a new MATH type question, so only other widgets that support MATH can include it. AND/OR, change how we are storing math in equations from HTML to LaTeX like we've talked about, example Solve [LATEX](y=\sqrt(mx/b)) (syntax is just an example). Then widgets can actively scrub out anything in the format of [NAME](content) - Again this syntax is just an example and I'm not tied to it.

Perhaps what I'm describing could be a good direction but we could spawn it into another issue if needed. The current behavior isn't a deal breaker - if someone imports a question and they get a bunch of junk HTML instead of an expected equation they'll be annoyed but they can just delete the question or HTML and replace it manually.

[zachberry]

I checked off issues 2, 4 and 5. 2 only happened to questions created on a previous version of this branch. 4 and 5 were because I hadn't pulled T_T

[superlaza]

• Added type 'Latex' to flash-cards supported_data in its install.yaml
• Cards with mathboxes have type 'Latex', and they're stored and fetched from db with type 'LX'