- Introduction
- How to get started
- Motivation
- Technologies
- Key Features
- Future Developments
- Screenshots
This project is a multiplayer quiz app inspired by Kahoot!. Kahoot! is a game-based learning platform that is interactive and makes learning fun. It was used during the Software Engineering Immersive course I had undertaken.
The gameplay is simple:
- A quiz, created by a user, is hosted by a teacher or another person, which generates a game PIN. The game is shown on a common screen.
- Players connect to the game using the PIN.
- The common screen is used to display the questions that the players answer.
- Points are awarded for correct answers. Also, the more timely a player answers correctly, the more points the player receives.
- Scoreboards are updated and shown after every question.
- When the game ends (i.e. there are no questions left), a Top 3 podium finish is shown and each player receives their own rank.
- Visit https://jeffreyquan.github.io/quizy-client/ and follow the links to host one of the existing quizzes or create your own.
- Click on "Host Game", which will generate a game that'll show a game PIN for other players to use their own devices to join the game. Hosting a game works best on a projector but will also work with any desktop or laptop screen.
- Test it out with this simple math quiz. Host using this link and join using this link.
Feel free to clone this repository. The link to the server repository is: https://github.com/jeffreyquan/quizy-server.
After cloning:
In the client root directory in the terminal:
- Run
npm install
and - Run
PORT=3333 npm run start
This will run using our server which was deployed to Heroku. To run the back-end server locally, change to Heroku links to http://localhost:3000/ and run the following:
In the server root directory in the terminal:
- Run
npm install
and - Run
npm run start:dev
I wanted to build something interactive and fun, that many users can be involved with at the same time in the same location. Furthermore, I loved the idea of a learning-based game that made it easier for students to learn.
This project is created with:
- React v16.12.0
- Express v4.17.1 - Node.js web application framework
- Mongoose v5.7.14
- MongoDB
- socket.io
- SCSS v4.13.0
- Material UI - a React framework for styling
- axios - used for requests to the Express API
- gh-pages - used to deploy the React front-end
- Google fonts
- query-string
- Simple creation of quiz - simple quiz creation form that takes 4 multiple choice answers for each question. You can create a simple quiz to host within minutes.
- Publicly available quizzes to host - quizzes that other people have created can be hosted
- Multiplayer quiz games - friendly competition between players
These are following features I would like to add:
- Validation - at the moment, quizzes can be created without a name and category. This can lead to bugs. I will be adding validation across the whole app on the front-end and back-end.
- Edit questions - edit questions that have already been added during the creation of quizzes.
- End quiz - end quiz button that allows the host to end a quiz early (for example, when a class is about to end and the quiz needs to finish).
- Custom time for each question - default time set for each question is 20 seconds. I would like to allow the creation of a custom time, most likely increments of 10 seconds.
- True or false questions - default answer options are 4 multiple choice answers. I would like to allow true or false questions.
- Images to supplement questions - allowing users to add images to supplement questions when creating a quiz. This will be shown to players during a game.
There's so much more to add! Check out Kahoot! to test out their amazing platform.
Host - Empty Lobby | Player - Join Game with PIN |
---|---|
Host - Filled Lobby | Player joined successfully |
---|---|
Host previewing quiz | Player getting ready for first question |
---|---|
Host previewing question | Player preview showing question number |
---|---|
Host showing the question and answer options | Player with answer buttons |
---|---|
Host shows how many have selected each answer and the correct answer | Player is given correct or incorrect result, as well as rank and streak (if correct) |
---|---|
Podium finish | Player's final rank |
---|---|