Improvements to quiz functionality in mobile app

[zacharykeeping]

#504

Fixes up various issues with the quiz functionality in the app as it currently stands (is still disabled):

1. Fixes various layout issues with items misaligned, overlapping or rendering outside the viewport.
2. Adjusts layout to better use available space.
3. Fixes display of radio buttons on dark background.
4. Fixes Next button being displayed as Submit when first launching a quiz on iOS.
5. Fixes previous quiz being shown when entering another quiz.
6. Fixes crashes when moving between quizzes.

Figure: Quiz page (note: Quizzes button at bottom only temporary and not included in this PR)

Figure: Quiz details page (note: Quizzes button at bottom only temporary and not included in this PR)

[matt-goldman]

Have you tested these changes across different platforms and device sizes?

[zacharykeeping]

Have you tested these changes across different platforms and device sizes?

Yeah on iOS and Android at different sizes, smallest being iPhone SE. Seems to all look and work okay.

There's probably more that can be done here but this should hopefully fix up the obvious issues I encountered.

Figure: Quiz page on iPhone SE

Figure: Quiz details page on iPhone SE

[tkapa]

Hey Zach!

I've pulled and tested these changes, and they seem cool so far!

As per our conversation, I've found a few bugs that should be addressed before we merge:

• Swiping backwards through the Quiz doesn't move the "Progress" bar backwards. (only once you get the "Incomplete Quiz" popup)
• Should we have a back button? The swiping doesn't seem as Intuitive (optional)
• The GitHub Quiz is having problems submitting
• The API does not take the Pass/Fail state of the quiz correctly, when you fail a quiz, it is marked as complete in the app.
• When I failed the Angular Quiz, and moved back to the Quiz Page to try another Quiz, I saw the "Quiz Failed" page.
• Some answers reference "B and C" but aren't lettered in the App :P

[matt-goldman]

LGTM