Real time quiz buzzer

A real time web based quiz buzzer using JavaScript WebSockets.

JavaScript WebSockets,nodejs,PHP
August '14


This project provides for a inexpensive solution to the need of a quiz buzzer in quiz events.The use of a buzzer in quizzes can make the oragnization of a quiz professional and also do away with the need of a human judge to decide as to which team banged that desk first!

This web based buzzer application is real time and can support as many as 12 clients(I've tested it to that number and there is no formal limit to the number of clients that can connect).

The buzzer was built with two aspects in mind

1)Ease of use
2)Real time

Why nodejs?

The implementation of this buzzer was based on nodejs the sole purpose of using nodejs is that it allows implementation of web sockets on the client side with ease and does not rely on server side libraries such as PHP sockets.

nodejs was used to run a HTTP server which listened on the default HTTP port and looked for new incoming connections from clients

A client attempts to connect to the server by executing the script which consists of directives specified by the node module which you will need to download using npm.

Every time a client loads up the webpage a new socket is created and a TCP connection is established between the client an dthe server which is persistent and such web sockets are supported officially only in recent web browers.For earlier web browsers implements a polling based approach

Hints on the send and receive functions

The client side JavaScript include connecting to the server and then defined functions which receive data filtered specific to the client using a unique identifier(team id in this case) all other messages were rejected.

The sender function directs the nodejs server to broadcast the the message and the client side script in the page where the results of the buzzer round are shown receives all broadcasted messages and displays them in the order of their arrival.

Managing invalidity after one buzz

In any buzzer round a particular team is allowed to buzz only once in one round and to manage this the buzzer button of the team that buzzer should be disabled once the buzzer is pressed to when the buzzer is reset by the organizers from the results page.

To achieve that once a team buzzes and the results page receives the message and outputs that message on to the results page, a feedback message is sent back to the sender thereby calling a function on the particular team's page that disables the buzzer button hence preventing teams from making any invalid attempts.

Once the reset button is pressed by the organizers all buzzers are re-activated and the list of results is cleared starting a new round

Some Screenshots

The screenshots below are from the application I developed for quiz events named 'Hidden Cipher' and 'Ultimate Coder' as the Senior Technical Officer for CSI-VESIT, a technical society in my institution.

The login screen

Buzzer results page before any attempts

After two teams buzz results are listed.

Screenshot taken from a smartphone acting as a buzzer button.

Buzzer button disabled after one buzz.