Skip to content
This repository has been archived by the owner on Dec 16, 2022. It is now read-only.

Set Creation: Prompt Entry (w/ Native Keyboard)  #1605

Open
alexrcabral opened this issue Dec 23, 2020 · 1 comment
Open

Set Creation: Prompt Entry (w/ Native Keyboard)  #1605

alexrcabral opened this issue Dec 23, 2020 · 1 comment

Comments

@alexrcabral
Copy link

alexrcabral commented Dec 23, 2020

This task defines the second section (prompt 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

Prompt

An empty problem should contain the speech bubble icon (alt: "speech bubble emoji") and the option to "Add the prompt and any details here" 

When the prompt input box is clicked / enters focus, this should clear to a blank line with a standard flashing cursor icon, and bring up a standard phone keyboard to allow for textual 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 (for example, a teacher attempting to include long mathematical phrases in the prompt box), 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 or string of characters), the break can happen between characters. 

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 prompt in the bottom box, the default text should disappear, the blinking cursor should come up, and my native keyboard should appear, allowing me to type my prompt into the text box.. If I enter a particularly long prompt, this should overflow to the next line on an intuitive break, such as an operator.

rupeshparab added a commit that referenced this issue Jan 19, 2021
rupeshparab added a commit that referenced this issue Jan 19, 2021
@abaranowska1
Copy link

Tested with success

  • Given that I'm a user on the problem creation page when I enter the text field to add my prompt in the bottom box, the default text disappears, the blinking cursor comes up, and my native keyboard appears, allowing me to type my prompt into the text box.
  • If I enter a particularly long prompt, this overflows to the next line on an intuitive break, such as an operator.

image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants