Problem Card: Prompt (Mobile > Dashboard)

[alexrcabral]

This task defines the surfacing of the prompt for individual problem cards. 

Full Mockup

The above mockup shows the issue in context of the individual set view.

Notable changes from mockups: 

• We are not using classes or other metadata descriptors as shown in the mockup ("Algebra 101"), so this piece should be left out. 
• The numbers should increase sequentially, so the second problem card in this mockup would be "02" instead of "01". 
• The problem prompt should be in bold, whereas the problem equation should be in the bottom text (the first problem set card in the mockups is a clearer example than the second) 

Prompt 

Each problem card should contain the prompt for the given problem, e.g. "Solve for x". This should be in the font, size, spacing, and styling given in Invision. If the prompt is longer than a single line, the words should overflow to multiple lines, increasing the size of the problem card further, maintaining the same spacing between the prompt and the equation (as well as the spacing between the equation and the bottom of the card). 

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 Mathshare dashboard, when I click into a set, I should be able to view the prompts at the tops of each of the problem cards in my set. 

[abaranowska1]

Tested When I'm a log in as user on the Mathshare dashboard, and I click into a set, I am able to view the prompts at the tops of each of the problem cards in my set. @alexrcabral @johnhbenetech I think that when the prompts are long they should be shortened as titles on homepage , we can use " ..." what do you think?

Verified on:

• iPhone X
• Mobile 360x640

[johnhbenetech]

@abaranowska1 it's currently matching the scoped functionality . "If the prompt is longer than a single line, the words should overflow to multiple lines, increasing the size of the problem card further, maintaining the same spacing between the prompt and the equation (as well as the spacing between the equation and the bottom of the card). "

So I would say this issue can move along. If @alexrcabral wants to change this he can create a separate issue later on

[alexrcabral]

@johnhbenetech is correct: truncation of the problem prompt could cause accessibility issues, so in the meantime the overflow is the scoped functionality, which matches what was developed.

On a separate note, there is an issue with the margins / alignment which doesn't match the scope and design above.

1. Both the prompt and equation should be next to the number as shown in the design, not underneath.
2. The prompt should also stretch further than is currently shown (as far as the far side of the checkmark, and the near side of where the three dot menu would be.

[rupeshparab]

Pushed a fix for this

[abaranowska1]

@alexrcabral @rupeshparab For me it looks fine.