Problem Cards: Progressive Loading (Mobile > Dashboard)

[alexrcabral]

This task defines the overview of the problem cards on the individual set view of the dashboard. 

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 cards should not have a three dot dropdown on the cards themselves in this mobile version (associated with problem set creation)

Progressive Loading 

Users should be able to scroll through problem cards until they reach the last problem. When a user has more than five sets, this should be done by progressively loading five problem cards at a time.

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 scroll or tab through all my problems in that set, progressively loading five more problem cards at a time when I reach the bottom.

[johnhbenetech]

Just a note: this will also apply to v1 loading of sets

[johnhbenetech]

@alexrcabral one question cam up on UX

for both v1 and v2 dashboards, the example sets show below your sets. If we load more sets on load you can imagine a case where the user can take forever to get to example sets as they try to scroll and more sets load and keep pushing it down.

Is this fine? Should we move examples above your sets in both views? should 'load more' be a button instead of a scroll?

[alexrcabral]

@johnhbenetech Thanks for bringing this up John. Originally I was thinking it was a non-issue (aside from testing) since the primary use case for example sets is teachers / AT specialists who don't have existing sets, so access to example sets wouldn't be necessary.

However, I really do like your suggestion of a load more button, primarily because it also allows access to the footer.

Ideally it would be a combination of the two -- progressive loading combined with a load more button (e.g. progressively loading 15 sets / 1 page length at a time, with an interim load more button every 45 sets / 3 page lengths)

[johnhbenetech]

Is like to start with the load more button in all cases since it's simpler

[johnhbenetech]

So for first version important changes:

• We will temporarily remove any /edit problem sets from the v2 dashboard since problem set creation isnt built yet
• The v2 dashboard will only load a paginated set of /solve links (15 at a time with load more button)

[abaranowska1]

Tested with success Verified cases:

• Load more button was added to the dashboard and after clicking this button we can see more problem
• After login user can see 15 set and Load more button
• When we don't have more records to show, correct pop up is displayed

Verified on:

• Ubuntu 20.04
• Google Chrome Version 85.0.4183.83
• Mobile 360x640