ably.com
Open in
urlscan Pro
2606:4700:10::6814:59c3
Public Scan
URL:
https://ably.com/blog/a-scalable-realtime-quiz-framework-to-build-edtech-apps
Submission: On March 13 via api from BY — Scanned from DE
Submission: On March 13 via api from BY — Scanned from DE
Form analysis 3 forms found in the DOM
GET /search
<form class="flex items-start" action="/search" method="get">
<div class="relative w-full"><svg class="text-cool-black absolute top-12 left-16" style="width: 1.5rem; height: 1.5rem;">
<use xlink:href="#sprite-icon-gui-search"></use>
</svg><input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" autocomplete="off" data-id="meganav-search-input">
<div class="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey" data-id="meganav-search-autocomplete-container">
<ol class="m-16" data-id="meganav-search-autocomplete-list"></ol>
</div>
</div><button type="submit" class="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">Search</button>
</form>GET /search
<form class="mb-16" action="/search" method="get">
<div class="relative w-full"><svg class="text-cool-black absolute top-12 left-16 hover:text-gui-hover" style="width:1.5rem;height:1.5rem">
<use xlink:href="#sprite-icon-gui-search"></use>
</svg><button type="button" class="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible" data-id="meganav-search-input-clear"><svg class="text-dark-grey " style="width:1.5rem;height:1.5rem">
<use xlink:href="#sprite-icon-gui-cross-circled-fill"></use>
</svg></button><input type="search" name="q" class="ui-input px-48 h-48" style="max-width:none" placeholder="Search" autocomplete="off" data-id="meganav-mobile-search-input">
<div class="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey" data-id="meganav-search-autocomplete-container">
<ol class="m-16" data-id="meganav-search-autocomplete-list"></ol>
</div>
</div>
</form><form class="col-span-full sm:col-span-4 relative z-10">
<div class="font-sans font-medium uppercase tracking-widen-0.1 text-overline2 text-white mb-8">Enter your email</div><input class="ui-input" type="email" name="EMAIL" value=""><button type="submit" class="ui-btn-invert mt-24"
disabled="">Submit</button>
</form>Text Content
* ProductsProducts
THE ABLY PLATFORM
Easily power any realtime experience in your application. No complex
infrastructure to manage or provision. Just a simple API that handles
everything realtime, and lets you focus on your code.
Explore how it works
PRODUCTS
* Pub/Sub Channels
Build infinitely scalable realtime applications.
* Spaces (Beta)
Create multi-user collaborative environments.
* LiveSync (Early access)
Keep clients in sync with any relational database.
TECHNOLOGY
* Predictable performance
A low-latency and high-throughput global network.
* Guaranteed ordering & delivery
Data is delivered - in order - even after disconnections.
* Fault tolerant infrastructure
Redundancy is built in at global and regional levels.
* High scalability & availability
Built for scale with legitimate 99.999% uptime SLAs.
* Global edge network
An edge network of 15 core routing datacenters and 205+ PoPs.
Explore Four Pillars of Dependability
* SolutionsSolutions
SOLUTIONS
* Live Chat
Deliver highly reliable chat experiences at scale.
* Multiplayer Collaboration
Bring collaborative multiplayer experiences to your users.
* Data Broadcast
Broadcast realtime event data to millions of devices around the globe.
* Data Synchronization
Keep your frontend and backend in realtime sync, at global scale.
* Notifications
Deliver cross-platform push notifications with a simple unified API.
* Asset Tracking (Beta)
Track assets in realtime with a solution optimised for last mile
logistics.
INDUSTRY
* EdTech
Deliver interactive learning experiences.
* FinTech
Deliver personalised financial data in realtime.
* Automotive, Logistics, & Mobility
Power diagnostics, order tracking and more.
* B2B Platforms
Empower your customers with realtime solutions.
* Healthcare (HIPAA)
Provide trustworthy, HIPAA-compliant realtime apps.
* eCommerce & Retail
Enrich customer experiences with realtime updates.
* Sports, Media & Audience Engagement
Deliver engaging global realtime experiences.
* Gaming
Power ultra fast and reliable gaming experiences.
* IoT & Connected Devices
Monitor and control global IoT deployments in realtime.
* CompanyCompany
WHY COMPANIES CHOOSE ABLY
* Customers
Ably supports customers across multiple industries.
* Case studies
Discover how customers are benefiting from Ably.
* Compare our tech
Choose the right realtime service.
* Partners
Ably collaborates and integrates with AWS.
* Resources
Learn more about realtime with our handy resources.
* About Ably
Find out more about Ably’s mission.
* Careers
Discover our open roles and core Ably values.
* Events
Join Ably at upcoming events.
BLOG
* How to enable reaction emojis for in-game chat with React
Jan 30, 2024
* Using Presence in in-game chat: Is the other person still there?
Jan 22, 2024
* How to build a live chat widget in React
Jan 16, 2024
More from our Blog
* DevelopersDevelopers
EXPLORE
* Documentation
Technical guides to help you build with Ably.
* Quickstart guides
Documentation to help you get started quickly.
* Integrations
Find out more about Ably integrations.
* Live examples
Discover our features and their use cases.
* SDKs
Download an SDK to help you build realtime apps faster.
* Tutorials & Demos
Get stuck in with our hands-on resources.
* Chat apps reference guide
Learn how to build chat apps with Ably.
* Multiplayer reference guide
Learn how to build collaborative features with Ably.
QUICK LINKS
* Discord
* GitHub
* Changelog
* Status
* Support & FAQs
* Pricing
* Contact us
* Login
*
Search
Popular pages
* How does Ably work?
* Quickstart guide
* Publish/Subscribe Messaging
* Platform
Support
* Sign up free
* Login
* Popular pages
* How does Ably work?
* Quickstart guide
* Publish/Subscribe Messaging
* Platform
* Products
Back
THE ABLY PLATFORM
Easily power any realtime experience in your application. No complex
infrastructure to manage or provision. Just a simple API that handles
everything realtime, and lets you focus on your code.
Explore how it works
PRODUCTS
* Pub/Sub Channels
Build infinitely scalable realtime applications.
* Spaces (Beta)
Create multi-user collaborative environments.
* LiveSync (Early access)
Keep clients in sync with any relational database.
TECHNOLOGY
* Predictable performance
A low-latency and high-throughput global network.
* Guaranteed ordering & delivery
Data is delivered - in order - even after disconnections.
* Fault tolerant infrastructure
Redundancy is built in at global and regional levels.
* High scalability & availability
Built for scale with legitimate 99.999% uptime SLAs.
* Global edge network
An edge network of 15 core routing datacenters and 205+ PoPs.
Explore Four Pillars of Dependability
* Solutions
Back
SOLUTIONS
* Live Chat
Deliver highly reliable chat experiences at scale.
* Multiplayer Collaboration
Bring collaborative multiplayer experiences to your users.
* Data Broadcast
Broadcast realtime event data to millions of devices around the globe.
* Data Synchronization
Keep your frontend and backend in realtime sync, at global scale.
* Notifications
Deliver cross-platform push notifications with a simple unified API.
* Asset Tracking (Beta)
Track assets in realtime with a solution optimised for last mile
logistics.
INDUSTRY
* EdTech
Deliver interactive learning experiences.
* FinTech
Deliver personalised financial data in realtime.
* Automotive, Logistics, & Mobility
Power diagnostics, order tracking and more.
* B2B Platforms
Empower your customers with realtime solutions.
* Healthcare (HIPAA)
Provide trustworthy, HIPAA-compliant realtime apps.
* eCommerce & Retail
Enrich customer experiences with realtime updates.
* Sports, Media & Audience Engagement
Deliver engaging global realtime experiences.
* Gaming
Power ultra fast and reliable gaming experiences.
* IoT & Connected Devices
Monitor and control global IoT deployments in realtime.
* Company
Back
--------------------------------------------------------------------------------
WHY COMPANIES CHOOSE ABLY
* Customers
Ably supports customers across multiple industries.
* Case studies
Discover how customers are benefiting from Ably.
* Compare our tech
Choose the right realtime service.
* Partners
Ably collaborates and integrates with AWS.
* Resources
Learn more about realtime with our handy resources.
* About Ably
Find out more about Ably’s mission.
* Careers
Discover our open roles and core Ably values.
* Events
Join Ably at upcoming events.
BLOG
* How to enable reaction emojis for in-game chat with React
Jan 30, 2024
* Using Presence in in-game chat: Is the other person still there?
Jan 22, 2024
* How to build a live chat widget in React
Jan 16, 2024
More from our Blog
* Developers
Back
--------------------------------------------------------------------------------
EXPLORE
* Documentation
Technical guides to help you build with Ably.
* Quickstart guides
Documentation to help you get started quickly.
* Integrations
Find out more about Ably integrations.
* Live examples
Discover our features and their use cases.
* SDKs
Download an SDK to help you build realtime apps faster.
* Tutorials & Demos
Get stuck in with our hands-on resources.
* Chat apps reference guide
Learn how to build chat apps with Ably.
* Multiplayer reference guide
Learn how to build collaborative features with Ably.
QUICK LINKS
* Discord
* GitHub
* Changelog
* Status
* Support & FAQs
* Pricing
--------------------------------------------------------------------------------
Contact usSign up free
On this page
Back to all blog posts Back
9 min read•Last updatedUpdated Oct 17, 2022
A SCALABLE, REALTIME QUIZ FRAMEWORK TO BUILD EDTECH APPS
Written by
Srushtika Neelakantam
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?
One of the positive outcomes of this new world we are living in, is the rise of
EdTech. Educational technology (EdTech) is the combined use of computer
hardware, software, and educational theory and practice to facilitate learning.
The origins of EdTech can be traced back to the late 90's and it has grown
slowly but steady year after year, but it all changed in 2020 as 1.57 billion
learners in 190 countries moved from classrooms to interactive, digital
environments during Covid-19. This has accelerated EdTech existing growth,
driving transformation that’s here to stay.
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.
> Learn more about realtime in EdTech in this series of posts:
>
> * 4 most impactful realtime use cases in EdTech
> * 6 realtime engineering challenges for EdTech applications
> * 4 essential infrastructure considerations for realtime EdTech applications
HOW A REALTIME QUIZ FRAMEWORK CAN HELP EDTECH APPS
Most of the EdTech tools and platforms have live collaboration features. If you
think about, most of the collaborative realtime apps follow a common pattern and
feature set, with customizations for their specific scenario.
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...
A screenshot of the admin and player apps in the framework
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
In the last few months, I worked on a few browser games and realized there were
common patterns in all these realtime games that needed continuous high-speed
streaming of data between the players and the game server.
Building a multiplayer Flappy bird game over scalable WebSockets using AblyA
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.
Github repo of the 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?
The realtime quiz framework is a fully open-sourced full-stack project built
with Node JS and Vue JS and the architecture consists of the Websockets
protocol and the Publish/Subscribe messaging pattern. It's a working app with
the basic functionality required to build a realtime quiz app.
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.
Take a look at 3 high-level architectures for multiplayer quiz apps and explore
their realtime message flows and implementations.
The framework shows two ways of conducting a quiz.
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.
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.
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.
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.
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
On this page
1. What is EdTech?
2. How a realtime quiz framework can help EdTech apps
3. Some background before I jump into the details
4. So, what's this framework all about?
BUILD DEPENDABLE REALTIME APPS
Ably offers versatile, easy-to-use APIs to develop powerful realtime apps.
Guaranteed to deliver at scale.
Start building
RECOMMENDED ARTICLES
ChatReact
8 min read
HOW TO ENABLE REACTION EMOJIS FOR IN-GAME CHAT WITH REACT
Jan 30, 2024
ChatReactCollaborative experiences
6 min read
USING PRESENCE IN IN-GAME CHAT: IS THE OTHER PERSON STILL THERE?
Jan 22, 2024
React
16 min read
HOW TO BUILD A LIVE CHAT WIDGET IN REACT
Jan 16, 2024
JOIN THE ABLY NEWSLETTER TODAY
1000s of industry pioneers trust Ably for monthly insights on the realtime data
economy.
Enter your email
Submit
THE ABLY PLATFORM
Easily power any realtime experience in your application via a simple API that
handles everything realtime.
* Pub/sub messaging
* Push notifications
* Third-party integrations
* Multiple protocol messaging
ABLY IS FOR
* Ably Asset Tracking
* Extend Kafka to the edge
* EdTech
* Automotive, Logistics, & Mobility
* B2B Platforms
* Healthcare
* eCommerce & Retail
* Sports & Media
* Gaming
* IoT & Connected Devices
DEVELOPERS
* Start in 5 minutes
* Documentation
* Tutorials
* Changelog
* Support & FAQs
* SDKs
* System status
WHY ABLY
* Customers
* Case Studies
* Four Pillars of Dependability
* Compare our tech
* Multi protocol support
* Third-party integrations
ABOUT
* About Ably
* Pricing
* Blog
* Careers
* Open protocol policy
* Press & Media
* Contact us
--------------------------------------------------------------------------------
We're hiring!Learn more at Glassdoor
We're hiring!Learn more at Glassdoor
--------------------------------------------------------------------------------
CookiesLegalsData ProtectionPrivacy
SOC 2 Type 2
Certified
HIPAA
Compliant
EU GDPR
Certified
256-bit AES
Encryption
By clicking “Accept All Cookies”, you agree to the storing of cookies on your
device to enhance site navigation, analyze site usage, and assist in our
marketing efforts.
Accept All Cookies
Reject All
Cookies Settings
PRIVACY PREFERENCE CENTER
When you visit any website, it may store or retrieve information on your
browser, mostly in the form of cookies. This information might be about you,
your preferences or your device and is mostly used to make the site work as you
expect it to. The information does not usually directly identify you, but it can
give you a more personalized web experience. Because we respect your right to
privacy, you can choose not to allow some types of cookies. Click on the
different category headings to find out more and change our default settings.
However, blocking some types of cookies may impact your experience of the site
and the services we are able to offer.
More information
Allow All
MANAGE CONSENT PREFERENCES
STRICTLY NECESSARY COOKIES
Always Active
These cookies are necessary for the website to function and cannot be switched
off in our systems. They are usually only set in response to actions made by you
which amount to a request for services, such as setting your privacy
preferences, logging in or filling in forms. You can set your browser to block
or alert you about these cookies, but some parts of the site will not then work.
These cookies do not store any personally identifiable information.
FUNCTIONAL COOKIES
Functional Cookies
These cookies enable the website to provide enhanced functionality and
personalisation. They may be set by us or by third party providers whose
services we have added to our pages. If you do not allow these cookies then some
or all of these services may not function properly.
TARGETING COOKIES
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may
be used by those companies to build a profile of your interests and show you
relevant adverts on other sites. They do not store directly personal
information, but are based on uniquely identifying your browser and internet
device. If you do not allow these cookies, you will experience less targeted
advertising.
PERFORMANCE COOKIES
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and
improve the performance of our site. They help us to know which pages are the
most and least popular and see how visitors move around the site. All
information these cookies collect is aggregated and therefore anonymous. If you
do not allow these cookies we will not know when you have visited our site, and
will not be able to monitor its performance.
Back Button
COOKIE LIST
Search Icon
Filter Icon
Clear
checkbox label label
Apply Cancel
Consent Leg.Interest
checkbox label label
checkbox label label
checkbox label label
Reject All Confirm My Choices
sprite-discord sprite-facebook sprite-github sprite-glassdoor sprite-google
sprite-icon-display-48hrs sprite-icon-display-about-ably-col
sprite-icon-display-api-keys sprite-icon-display-api
sprite-icon-display-asset-tracking-col sprite-icon-display-browser
sprite-icon-display-calendar sprite-icon-display-call-mobile
sprite-icon-display-careers-col sprite-icon-display-case-studies-col
sprite-icon-display-chat-col sprite-icon-display-chat-stack-col
sprite-icon-display-chat-stack sprite-icon-display-cloud-servers
sprite-icon-display-compare-tech-col sprite-icon-display-customers-col
sprite-icon-display-data-broadcast-col
sprite-icon-display-data-synchronization-col sprite-icon-display-docs-col
sprite-icon-display-documentation sprite-icon-display-events-col
sprite-icon-display-examples-col sprite-icon-display-gdpr
sprite-icon-display-general-comms sprite-icon-display-hipaa
sprite-icon-display-integrations-col sprite-icon-display-it-support-access
sprite-icon-display-it-support-helpdesk
sprite-icon-display-kafka-at-the-edge-col sprite-icon-display-laptop
sprite-icon-display-lightbulb-col sprite-icon-display-live-chat
sprite-icon-display-map-pin sprite-icon-display-message
sprite-icon-display-padlock-closed sprite-icon-display-platform
sprite-icon-display-play sprite-icon-display-privacy-shield-framework
sprite-icon-display-push-notifications-col
sprite-icon-display-quickstart-guides-col sprite-icon-display-resources-col
sprite-icon-display-sdks-col sprite-icon-display-servers
sprite-icon-display-shopping-cart sprite-icon-display-sla
sprite-icon-display-soc2-type2 sprite-icon-display-tech-account-comms
sprite-icon-display-tutorials-demos-col sprite-icon-display-virtual-events-col
sprite-icon-display-virtual-events sprite-icon-gui-ably-badge
sprite-icon-gui-arrow-bidirectional-horizontal
sprite-icon-gui-arrow-bidirectional-vertical sprite-icon-gui-arrow-down
sprite-icon-gui-arrow-left sprite-icon-gui-arrow-right sprite-icon-gui-arrow-up
sprite-icon-gui-burger-menu sprite-icon-gui-check-circled-fill-black
sprite-icon-gui-check-circled-fill sprite-icon-gui-check-circled
sprite-icon-gui-checklist-checked sprite-icon-gui-clock sprite-icon-gui-close
sprite-icon-gui-copy sprite-icon-gui-cross-circled-fill
sprite-icon-gui-cross-circled sprite-icon-gui-dash-circled
sprite-icon-gui-disclosure-arrow sprite-icon-gui-document-generic
sprite-icon-gui-enlarge sprite-icon-gui-external-link
sprite-icon-gui-filter-flow-step-1 sprite-icon-gui-filter-flow-step-2
sprite-icon-gui-filter-flow-step-3 sprite-icon-gui-history sprite-icon-gui-info
sprite-icon-gui-link-arrow sprite-icon-gui-link sprite-icon-gui-live-chat
sprite-icon-gui-minus sprite-icon-gui-plus sprite-icon-gui-quote-marks-solid
sprite-icon-gui-refresh sprite-icon-gui-resources sprite-icon-gui-search
sprite-icon-gui-tick sprite-icon-gui-warning
sprite-icon-live-updates-results-metrics-col sprite-icon-multi-user-spaces-col
sprite-icon-social-x sprite-icon-tech-apachekafka sprite-linkedin sprite-quote
sprite-stackoverflow sprite-twitter sprite-youtube