A Scalable, Realtime Quiz Framework to Build EdTech Apps

Srushtika Neelakantam
Oct 23 · 7 min read
Image for post
Image for post

Hello developers!

TL;DR

I built a realtime quiz framework so developers building EdTech apps can quickly get started with scalable realtime messaging and focus on their app logic. It is a fully customizable framework built with NodeJS, VueJS, and powered by Ably’s realtime infrastructure which primarily operates on WebSockets.

It also implements Node JS worker threads to simulate multiple ‘quiz rooms’ (aka dedicated servers spooled up on-demand) so different groups of people can simultaneously participate in different live quizzes organized by their dedicated hosts. You can check out framework on GitHub at https://github.com/Srushtika/realtime-quiz-framework or try out the live demo at https://quiz.ably.dev/

What is EdTech?

This incredible growth didn’t come without new demands and requirements of innovation, and, a stepping stone to innovation is realtime communication: between students and teachers for synchronous learning, and between devices and the cloud for safety, security, and cheating prevention.

How a realtime quiz framework can help EdTech apps

For a live quiz, which can double up as a test-taking app for a class of high schoolers, or simply a movie trivia for a fun virtual Pub Quiz Friday with your workmates, there are a lot of common patterns without even needing much customization.

For example, they need to be able to create their own private quiz room and invite other people to that room. In most cases, one of the participants needs to have special admin controls (mostly the host). They need to be able to easily control the progression of the quiz. And so on…

Image for post
Image for post

Keeping in mind these commonalities and to avoid the need for developers working on EdTech platforms to build everything from scratch, I built an open-sourced realtime quiz framework to quickly get a working quiz/ test-taking platform up and running in no time. Developers can easily customize this extensible framework as per their specific use-cases and scenarios.

If you want to skip the details and take a look at the live demo, check it out at https://quiz.ably.dev/

Some background before I jump into the details

Image for post
Image for post
Building a multiplayer Flappy bird game over scalable WebSockets using Ably
Image for post
Image for post
A realtime communication framework to build multiplayer games

The architecture was similar but the type of input from the players, and the game logic on the server changed according to the game in question. So I put all these observations together and built an arbitrarily scaling networking framework to build realtime multiplayer games. This proved to be useful to a bunch of people to set up realtime networking in no time and focus on customizing it per the game logic.

Image for post
Image for post
https://github.com/Srushtika/multiplayer-games-scalable-networking-framework

As I moved on from games, I did some research to see ‘what’s hot’ currently and, as depressing are a lot of events around the world this year, a super positive and refreshing trend has been an increase in virtual live collaboration. This led me to think about e-learning in terms of various institutions conducting their classes and tests online. So I played around with a bunch of such EdTech platforms, and again, observed a lot of common patterns everywhere. I put these observations together to build this extensible realtime quiz framework. I hope this is a useful starting point if you are wanting to build an EdTech tool of any kind.

So, what’s this framework all about?

To be honest, calling it a quiz app is a bit generic as the architecture would be the same for a test-taking app for an institution, a HQ style live trivia app, or a more one to one quiz like Quiz Up. As the framework is using Ably’s Realtime infrastructure for realtime messaging between various components, it is readily scalable to an enterprise level.

The framework shows two ways of conducting a quiz.

Image for post
Image for post
Live trivia quiz

You can have the questions stored in your server or have the end-users easily upload their own questions by sharing a link to their Google Sheet. You can easily extend this to attach a database for a more persisted data storage and allow a greater range of already available quizzes to select from.

Image for post
Image for post
Host your own quiz

The idea is that the host of the quiz and other players are already on a video call (on another platform). The host shares their screen invites other players to their quiz using a shareable link, and manages the progression of the quiz throughout. They’ll be able to see the players with dummy avatars but real nicknames show up in a list as they join.

Image for post
Image for post
Your quiz room is ready

When the host feels that the expected players have joined, they can start the quiz. After a short timeout, the questions start showing up. The players can see the question, an image if available, and four options. The four options are buttons and the players can choose one of them to register their answer for that question. The interface is a bit different for the host in that they’ll also see the question, optional image and four options but these are not clickable as the host is essentially not participating in the quiz themselves.

Image for post
Image for post
The quiz in action

In addition to this, the host also sees a live stats panel which shows the number of players online and out of those the number of players who’ve already answered that question. You can easily extend this to show the names and avatars of those players or any other live stats like the high score etc.

Each question shows up for 30 seconds but if all the players have answered the question, the rest of the timer is skipped. One interesting thing to note about the timer is that every second update in the timer is a result of the data coming in from the server-side. This not only ensures that end-users have no way to tweak the timers and such in the client-side app, but also that all the participants in the quiz along with the host are fully in-sync. After a question’s time has elapsed, the leaderboard info so far can be seen on the host app. The host then has an option to show the next question or end the quiz midway through. If you think of a pub quiz scenario where after each question, you have a random banter about how people thought their answers were correct, this gives the proper control to the host to allow time for that banter and show the next question only when everyone is ready.

In terms of the answer after each question, the host can see on their screen the correct answer to the previously displayed question. The players, in addition to being able to see the correct answer, will be prompted if the answer they chose was correct or wrong.

Image for post
Image for post
The live quiz in action

After all the questions in the chosen quiz have finished playing, a final leaderboard containing the scores of all the participants will be displayed on the host app.

As this is a base framework, each component can be easily customized! The framework is available on GitHub along with a detailed README.md on getting it working and customizing it. It also has a TUTORIAL.md if you’d like to understand in much more detail what’s happening in every method of the app.

The live demo is also available at https://quiz.ably.dev/

I hope this framework is useful for your realtime EdTech adventures or anything else and I can’t wait to see what you build with it! Please feel free to share it with me and Ably on Twitter and we’ll be happy to give it a shoutout.

If you have any questions, feel free to DM me on Twitter or reach out to the support team at Ably.

Stay home, stay safe, and have fun virtually!

Header image illustration credits: School vector created by pch.vector — www.freepik.com

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Srushtika Neelakantam

Written by

Developer Advocate for Ably Realtime | Mozilla Tech Speaker and Rep

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Srushtika Neelakantam

Written by

Developer Advocate for Ably Realtime | Mozilla Tech Speaker and Rep

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store