benetech/MathShare

Set Creation: Problem Entry (w/ MathLive Keyboard)

Opened this issue · 0 comments

alexrcabral commented

This task defines the first section (equation portion) of the input area for problem creation

Full Mockup

Mockup of problem set creation on a mobile view. Below on the left is a back arrow to go back to the dashboard, and on the right is a button with a share icon which says Assign Set. Beneath this is a banner with the title New Problem Set 12-20-2020 with a pencil icon. Below this are boxed numbers, 02 through 06. 04 is currently highlighted. There is a plus button on the right hand side of this line. There are left and right arrows on this same line, on either side of the numbered boxes. In the main portion of the screen and taking up the majority of the page is a box with two sections, titled, 'Type the problem here' and 'Add the prompt and any details here'. At the top of the screen is the universal nav bar with the Mathshare logo and the profile dropdown

Equation

An empty problem should contain the pencil icon (alt: "pencil emoji") and the placeholder text: "Type the problem here" 

When clicked, this should clear to a blank line with a standard flashing cursor icon, and bring up the MathLive keyboard to allow for math input. 

Overflow behavior 

When the problem is long enough to necessitate overflow (e.g. would otherwise be going over the opposite edge of the box), it should overflow to the next line. 

  • Line breaks should occur primarily on spaces. 
  • If there are no spaces within a mathematical phrase, this should occur on operations (e.g. plus, minus, equals), where the operation is also brought down to the beginning of the new line. 
  • If there are no operations (e.g. just a really long number), the break can happen between characters. 

Exception: If vertical formatting is an issue (for example, a very long mathematical phrase contained within fractions, square roots, or powers which cannot itself be contained within a single line), this can overflow horizontally using a horizontal scroll rather than dropping to the next line. 

Reference

Style Guides: https://invis.io/CQYLLW8J49U
Mobile Mockups: https://invis.io/5HYLLW1G4BD
Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a user on the problem creation page, when I enter the text field to add my equation in the top box, the default text should disappear, the blinking cursor should come up, and the MathLive keyboard should appear. When I use the functions within the MathLive keyboard, they should be entered within the equation box. If I enter a particularly long problem, this should overflow to the next line on an intuitive break, such as an operator.