The Material Design way to implement a quiz app

by Miguel   Last Updated August 08, 2018 14:16 PM

I'm making a quiz app, following the Material Design principles. It's a web app, but it needs to work on mobile as well.

The app currently has 3 pages:

  • Creating the quiz; in which the user chooses between a preset quiz and a custom one
  • Doing the quiz; in which the user inputs answers and clicks next
  • Viewing the results; which shows a list of questions, user answers and whether they were correct or not

I'm not sure how do structure these 3 pages, because they follow a specific order - you can't view results until you've finished a quiz, and you can't do a quiz until you have created one. For this reason, the normal Material components like Bottom navigation and Tabs don't make sense, because only one (or maybe two, if you decide to create a new quiz halfway through another one) pages are available to you at any one time.

Currently I have no tabs, and I present all the information on one page that changes depending on the user's progress through the quiz. But this lacks signposting to the user.

I have this same problem during the quiz questions as well. If there are 10 questions, what components should I use to show the user's progress through them?



Related Questions




Material Design + Breadcrumbs + Mobile

Updated September 21, 2016 08:06 AM


Data tables in mobile/Tablet - material design

Updated June 30, 2015 14:07 PM