Project:
QuizMaster –Trivia game app (Responsive)
Builded using :
- ReactJS
- Open Trivia DB
- Local storage
My Role in this project:
- UI/UX Designer
- Front-End developer
Brief:
To create a quiz application using the Open Trivia DB, a database of trivia question with an accompanying API that can be used to generate random quiz questions.
The following elements/pages should be implemented:
- Home page
- Quiz page
- About page
- Stats page
- Dialog box/Modal to show result
- Sidebar menu for navigation
The app should also accessible when used with only keyboard and when using screen reader.
Result/Solution:
With the help of focusing on certain elements and using the appropriate semantic html, regardless which help device they use (mouse, keyboard or screen reader), the users can now easily navigate through the app easily.
While navigating the app the user can notice subtle focus changes on few elements, such as colour change, size change or outline outside the focus element. Not distracting when user use mouse but still easily noticeable when using keyboard.
The game uses local storage to save the user’s stats of how many time the game played, correct answers, incorrect answers and correct answers percentage. The user can also reset it when they want to.
