The Material Design way to implement a quiz app
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?