Problem Info: Starting Equation (Mobile > Problem Solve)

[alexrcabral]

This task defines the surfacing of the starting equation on the mobile problem solve page. 

Full Mockup

The above mockup shows the problem solve view in context (Mobile version). 

Equation 

The initial equation (e.g. the second text on the problem set card) should be displayed here in large text as shown in the mockups. In this case, 7x-13=1. 

When at the top of the page, this should be displayed in full underneath the "Problem" heading, overflowing to multiple lines where necessary. When the page is scrolled, this should move to the right of the problem heading, truncated with ellipses if longer than the line. 

Notable changes from mockups: 

• The bottom piece for this version will not contain the icons to the left of the submit button 

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 an individual problem solve page, when I view the top of my problem, I should encounter the full equation that I'm working on. When I scroll down the page, this (potentially shortened) should be displayed next to the problem heading so I have more space and better visibility to work on my problems. 

[abaranowska1]

Tested with success Verified cases:

• The equation is displayed above the prompt

• When I scroll down the page, the equation is displayed next to the problem heading

Verified on:

• Ubuntu 20.04
• Mobile 360x640
• iPhone X