Problem Card: Equation (Mobile > Dashboard)

[alexrcabral]

Problem Card: Equation (Mobile > Dashboard) 

This task defines the surfacing of the equation 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) 
• The problem equation should not be truncated (shown in the mockup with ellipses) 

Prompt 

Each problem card should contain the equation for the given problem, e.g. "7x-13=1". This should be in the font, size, spacing, and styling given in Invision. If the equation 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 equation and the bottom of the card. 

Each problem card should contain the title 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 equation at the bottom of each of the problem cards in my set. 

[abaranowska1]

Tested with success As a user, on the Mathshare dashboard, when I click into a set, I am able to view the equation at the bottom of each of the problem cards in my set. Verified on:

• iPhone X
• Mobile 360x640

[alexrcabral]

The interaction is good, but the formatting doesn't follow the initial scope.

As mentioned with the prompt in #1415, the prompt and equation should be next to the number for the problem rather than underneath, and should extend further into the problem card.

[rupeshparab]

Pushed a fix for this

[abaranowska1]

The prompt and equation are moved next to the number