Quizopia
A website application for quizzing, developed with Node.js.
What's Quizopia?
This web app is a quiz app I developed in the spring of 2021. It allows users to test and expand their knowledge, in an interactive manner. I wish to use native CSS stylingto produce an assessible web program with some of the best practices in coding with javascript.
The app used only one html index page, but is able to diplay different "quiz containers" depending on the state on the client side. This is achieved by functional programming, and ascychronous control using the callbacks and event loop.
It will fetch question from an open database API, and is able to respond to client's request and display a leaderboard which not only encourages competition spirit, but also stores user data for future development.
I implementated a leaderboard to allow different players to compete with each other.
Coding
I first created HTML page to get the basic elements I would like to present there. Then I styled the page with CSS. JavaScript powered the core of the game logic, and controls the flow of the game, and the state of the page, with show() and unshow() functions.
All the script is written with pure JavaScript, without additonal library. Functional programming is the main approach to enable different functions of this web app. The working directory is structured, such that easily testing could be carried out. For example, all the test files for database and handler function is store in 'static', while the main app is place inside the 'app' folder. Callback is used for the timer application (used interval ).
At the final stage, I am able to set up a server and make sure it connects to a database, I just fetch() and created a promise to get questions from an open source API.
To store and access the High Score Board (leader board) very soon, initially pure js is used, but I find storing so many things in json will cause the loading time to increase significantly.
UX/UI
The server allows multiple users to access the game easily, with differnt questions sets. During the game ,when option buttons would change the hue based on users selection, with correct answer displayed in green, and wrong answers in red.
Web-accessbility is well-thought through as I followed the W3C accessibilty guideline, utilising html 5 built-in elements on button, label, heading, etc. Keyboard access is granted for a wide variety of users, including those with visual impairment or finger dexterity constraints.
The overall app provides good control for most users because it passed all Accessbility checkups using extensions on Firebox, Google Chrome and AXG. (which). With large text and well-contrasted colour, the typeface and colour balance are carefully curated for the best experience. The interface is very responsive, as animation is implemented to allow the button to transform sizes and colour, to afford a good sense of control. Meanwhile, the countdown timer will change colour when there is less time remained.
Different buttons will bring users to the intended interface, e.g. "See Your Result" will go to the final result page. All user will be prompted to create a username to enter the leaderboard, but it is very optional! "Start Again" generates a new set of quiz questions. The interface is simple. So far, users can not only trigger an event with mouse 'click', but also with easy keyboard access. When the user picks an answer, or the time is up, the app would inform the user whether he/she gets it correct, and display the right one if the wrong option is selected.
I did test the voiceOver feature but as a developer I am not very used to the context of visually impaired users, so more work needs to be done in the future.