Quizy

Introduction
How to get started
Motivation
Technologies
Key Features
Future Developments
Screenshots

Introduction

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.

How to get started

Using my site

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.

To test locally

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

Motivation

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.

Technologies

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

Packages (React)

axios - used for requests to the Express API
gh-pages - used to deploy the React front-end
Google fonts
query-string

Packages (Node)

Key Feaures

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

Future Developments

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.