|
Antonella Schillaci |
Carlotta Patané |
| 
Davin Garozzo |
Francesca Leonardi |
Martina La Porta |
Click Here to Play
or Scan the following QR Code:
As a team, we decided to develop something that might be technically interesting and a bit challenging,
so we clearly chose to work on something we've never done before: a quiz game.
This project was created coding mainly in React + Vite and SASS,
we also used Firebase to store user scores and Vercel to deploy it.
Some of the graphic elements were designed using Canva.
We took advantage of some packages available on npm to insert audio and visual effects,
such as the sounds for each correct or wrong answer and the final fireworks.
We managed the workflow using Visual Studio Code, Git and GitHub.
We planned it starting from mobile first and then making it responsive for tablet and desktop.
Moreover, we tried to take into account what a user can expect from a single-player game
to offer a better user experience.
On the main page the user can select a leaderboard,
to take a look at the players who have already taken part in the quiz and have obtained the best scores.
Below the leaderboard, it's possible to pick an avatar and type a nickname,
to create a personal profile and then proceed to Login.
Once logged in, the user will see the game page, where the player has multiple choice questions available.
The quiz consists of three difficulty levels, which correspond to three rounds of a match:
easy, medium and hard.
Each correct question will earn the player 1 point, while each incorrect question will earn no points.
Each round has a maximum duration of 60 seconds,
which is indicated by a bar that marks the passage of time and changes color when time is running out,
so the user has to be careful and very quick to read both the question and the answers
and try to select the exact answer.
Each time a correct answer is given, it will be possible to see the count of points earned right on the screen.
Within this page there are, at the top, also two options to return to the Homepage or refresh the current game page.
At the end of the three rounds, the total score of the match will be shown on the screen
and the user also has the option to return to the Homepage or take a look at the Leaderboard
to see if the score was enough to compete with the best players and become the next champion!