A

Project Report
ON
“Quiz App Using Open Trivia API
Submitted in Partial Fulfillment of the Requirements for the Award of
Bachelor of Science with Information Technology (BSc IT) as Major
Submittted By:

Yasir Akbar 220611

Ubaid Jahangir 220634
MUSAIB KHURSHEED 220639
Tauqeer Mehraj 220648

Under the MENTORSHIP of:

Ms. Rafiqa

Department of Information Technology

Sri Pratap College (NAAC Accredited A+)
MA Road, Srinagar - 190001

1
 Department of Information Technology
Sri Pratap College (NAAC Accredited A+)
MA Road, Srinagar - 190001

Certificate

This is to certify that the project entitled ‘Quiz App Using Open Trivia API ‘Text
has been carried by:

Yasir Akbar 220611

Ubaid Jahangir 220634
MUSAIB KHURSHEED 220639
Tauqeer Mehraj 220648
Conducted under our Supervision as part of the Partial Fulfilment of the Requirements for the
mini project in Bachelor of Science with Information Technology (BSc IT) as Major during the
academic year 2025.

MENTOR SUPERVISOR
Ms. Rafiqa MR. ZEESHAN ALI

2
 Topics Page No.

1.0 Abstract 1
2.0 Introduction 1
2.1 Problem Statement 1
2.2 Objectives 2
2.3 Scope of the project 2
2.4 Benefits to Society 2
2.5 System Analysis 3
2.5.1 Technical Feasibility 3
2.5.2 Operational Feasibility 3
2.5.3 Economic Feasibility 3
2.6 System Requirements 3
3.0 Methodology 4
3.1 HTML (Structure) 4
3.2 CSS (Styling and Responsiveness) 4
3.3 JavaScript (Functionality) 5
3.4 Open Trivia API 6
3.5 Local Storage 6
4.0 Implementation 6
4.1 Application Flow Diagram 6
4.2 Screenshots 7
4.3 User Interface Overview 8
5.0 Testing & Results 8
5.1 Device Compatibility 8
5.2 Performance Testing 9
5.3 Bug Fixes and Improvements 9
6.0 Conclusion 10
6.1 Key Takeaways 10
7.0 Applications 10

1
8.0 Future Scope 11
9.0 Bibliography / References 13

IMAGE NAMES PAGE NO.

Fig 3.1 HTML Page Structure 04

Fig 3.2 CSS Responsive Layout Example 05
Fig 3.3 JavaScript Fetch API Example 05
Fig 4.1 Application Flow Diagram (Home → Quiz → Result) 07
Fig 4.2 Screenshot of Homepage UI 07
FIG 4.3 Screenshot of Quiz in Progress 08
FIG 4.4 Screenshot of Result Page 08
FIG 5.2 Performance Test Result (Load time, Score tracking) 09

2
 1. Abstract In the era of digital transformation, education is
rapidly evolving from conventional textbook
QuizzyMind is a lightweight, browser-based quiz learning to interactive and engaging digital
application developed to provide an engaging, platforms. Traditional learning methods often lack
dynamic, and user-friendly platform for interactive interactivity, personalization, and real-time
learning. The application utilizes the Open Trivia adaptability, which are essential to keeping learners
API to fetch real-time, category-based multiple- engaged and motivated. Learners frequently face
choice questions from various domains such as challenges such as repetitive content, limited topic
General Knowledge, Science, and History. It is variety, and unappealing formats, which can hinder
designed using core web technologies including knowledge retention and enthusiasm.
HTML, CSS, and JavaScript, and leverages
To address these limitations, QuizzyMind is
Local Storage for storing user scores without the
developed as a web-based quiz application that
need for server-side infrastructure.
enhances the learning experience by combining
The primary goal of this project is to bridge the gap education with entertainment. This application
between traditional learning methods and modern allows users to select from various quiz categories
interactive tools. QuizzyMind eliminates the need and engage in multiple-choice questions fetched
for downloads, logins, or installations, making it dynamically from the Open Trivia API. By
highly accessible across desktops, laptops, and offering new questions every session, QuizzyMind
mobile devices. It features an intuitive interface, ensures freshness and eliminates content
immediate feedback, progress tracking, and score monotony.
persistence to promote continuous learning in a fun
Built using HTML, CSS, and JavaScript, the
and competitive environment.
application runs entirely on the client side and
This project not only demonstrates the practical requires no external software installations or user
implementation of asynchronous programming and accounts. The inclusion of Local Storage enables
API integration but also addresses key educational the app to save high scores and user progress
challenges by encouraging self-assessment and without needing a database or server backend.
knowledge enhancement through gamified content
QuizzyMind exemplifies key modern web
delivery.
development practices such as API integration,
responsive design, and asynchronous data
2. Introduction handling. Its mobile-friendly interface, instant
feedback mechanism, and category-wise selection
1
empower users to learn at their own pace, making 2. To build a user-friendly interface using
it an effective self-learning tool for students, HTML, CSS, and JavaScript that operates
professionals, and trivia enthusiasts alike. smoothly across various devices without
any downloads.
2.1 Problem Statement 3. To incorporate interactive features such
as instant answer feedback, category
Traditional quiz platforms often come with selection, and a local score-saving
limitations such as static question banks, the need mechanism for progress tracking.
for account registration, or compatibility issues 4. To enable learning through gamification
with mobile devices. These restrictions not only by creating a platform that motivates users
reduce accessibility but also make learning to improve their scores while gaining
monotonous and less engaging. Additionally, quiz knowledge.
applications that rely on server-side technologies
can be expensive to develop and maintain.

The lack of free, real-time, and interactive quiz 2.3 Scope of the Project
solutions that are both educational and entertaining
motivated the development of QuizzyMind. It This project focuses on the development of a front-
aims to eliminate the common hurdles found in end-only, browser-based quiz application for
conventional platforms by offering dynamic individual users. Its core functionality includes:
quizzes without requiring user authentication,
• Dynamic quiz generation based on user-
installations, or backend infrastructure.
selected categories.
• Support for various devices including
desktops, tablets, and smartphones.
2.2 Objectives • A smooth and responsive interface
compatible with major web browsers.
The primary objectives of the project are as • Score tracking using browser local storage.
follows:
• No requirement for backend databases or

1. To provide real-time quizzes using the user logins.

Open Trivia API, ensuring a fresh and

Although the current version is single-player and
dynamic content experience every time the
limited to multiple-choice questions, future
quiz is played.
versions may include multiplayer support, user
2
registration, difficulty levels, and leaderboard application. QuizzyMind was assessed on three
integration. fronts:

2.5.1 Technical Feasibility

2.4 Benefits to Society The app uses basic yet powerful technologies—
HTML for structure, CSS for design, and
QuizzyMind serves as a free, accessible JavaScript for functionality. It relies on the Open
educational tool for learners across different age Trivia API for content and the Web Storage API for
groups and backgrounds. Some societal benefits saving scores. These tools are universally
include: supported and require no backend or server setup,
making the project highly technically feasible and
• Accessibility: No installation or login is
maintainable.
required, making it easy to use in rural or
low-infrastructure areas. 2.5.2 Operational Feasibility
• Self-learning: Encourages independent
knowledge testing and improvement QuizzyMind is user-centric and does not demand
without teacher supervision. prior technical knowledge. Its simple interface,
• Cost-effectiveness: Being fully client-side one-click start, and intuitive navigation make it
and open-source, it is economical for both operationally sound. Users can instantly start
users and developers. quizzes without registrations or downloads,

• Engagement: Its gamified nature helps ensuring a frictionless experience.

improve retention rates and keeps users

2.5.3 Economic Feasibility
motivated to learn more.

The project has potential applications in schools, The application uses entirely free and open-source

coaching institutes, and online learning platforms. resources. Hosting can be done via platforms like
GitHub Pages at no cost. Since it does not require
any server infrastructure or database management,
the ongoing cost of operation is virtually zero. This
2.5 System Analysis makes it ideal for educational institutions with
limited budgets.
System analysis involves evaluating the feasibility,
practicality, and effectiveness of the proposed

3
2.6 System Requirements for score tracking. This modular development
approach ensures clarity, maintainability, and ease

To develop and run QuizzyMind smoothly, of enhancement.

minimal resources are required.

2.6.1 Software Requirements 3.1 HTML (Structure)

• Visual Studio Code (or any text editor) HTML (HyperText Markup Language) provides
• Google Chrome / Mozilla Firefox (or any the structural framework of the QuizzyMind
modern web browser) application. It defines the layout and content
• Internet access to fetch questions via the arrangement of each web page within the
Open Trivia API application.
• GitHub (optional, for deployment)
In this project, HTML was used to create three main

2.6.2 Hardware Requirements views:

• Home page: Allows users to choose quiz

• Desktop/Laptop with minimum 2GB RAM
categories.
• Internet connectivity for accessing the API
• Quiz interface: Displays questions, answer
• No need for additional server or hosting
options, and a progress bar.
hardware
• Result page: Shows the user's score and an
option to restart the quiz.

We used semantic HTML elements such as

<section>, <button>, <form>, and <main> to
3.0 Methodology enhance readability, accessibility, and SEO. The
structure also supports easy styling using CSS and
The methodology outlines the technologies, tools, interactive control through JavaScript. Proper
and techniques used to develop the QuizzyMind nesting and indentation were followed to ensure
application. Since it is a purely client-side web maintainability.
application, the methodology focuses on the front-
The separation of content using containers like
end technologies—HTML for structure, CSS for
<div> and the implementation of unique id and
design, and JavaScript for logic—as well as the
class attributes enabled smooth integration with
integration of the Open Trivia API and local storage
4
JavaScript for dynamic updates during quiz • Color schemes: A simple and modern color
execution. palette was used for better focus and
contrast.
• Font styles and sizes: Fonts were chosen
for readability and consistency across
devices.
• Layouts: Flexbox and CSS Grid were used
to align content elements effectively.
• Media queries: CSS media queries made
the design responsive, allowing it to adapt
to various screen resolutions, including
smartphones, tablets, and desktops.
• Animations: CSS transitions and hover
effects were used to provide visual feedback
for button clicks and progress animations.

This separation of design from content ensured ease

of updates and consistent styling across the
application.

FIG: HTML PAGE STRUCTURE

3.2 CSS (Styling and Responsiveness)

Cascading Style Sheets (CSS) were used to style

the web pages, ensuring a visually appealing and
responsive design. The styling enhances the user
experience by making the interface clean,
interactive, and compatible with multiple screen
sizes.

Key features of CSS implementation include:

5
3.3 JavaScript (Functionality)

JavaScript is the programming language that

powers all the interactive and logical elements of
the QuizzyMind application. It acts as the bridge
between user interaction and system responses.

The JavaScript code in the project performs the

following critical functions:

• Fetching data: It uses the fetch() method to

retrieve real-time quiz questions from the 3.4 Open Trivia API
Open Trivia API in JSON format.
The Open Trivia API is a free, publicly available
• Parsing and rendering: The JSON data is
RESTful API that provides trivia questions
parsed and dynamically injected into the
categorized by topic and difficulty. It is the primary
HTML DOM to display questions, answer
source of dynamic quiz content in the QuizzyMind
options, and progress.
app.
• Answer handling: When users select an
option, JavaScript evaluates the response Features of Open Trivia API used:
and provides immediate visual feedback
(correct/wrong). • Real-time question delivery: Questions
• Score calculation: It tracks the number of are fetched live every time the quiz starts.
correct answers and displays the final score • Category-based questions: The API
at the end of the quiz. supports multiple topics such as General
• Quiz flow management: Functions are Knowledge, Science, History, and more.
implemented for starting the quiz, • Difficulty levels: Although not used in the
navigating through questions, and restarting first version, the API supports “easy,”
the quiz after results. “medium,” and “hard” questions.
• Error handling: In case of API failure or • JSON format: All responses are returned in
empty results, fallback logic is provided to JSON, making it easy to parse and use in
notify the user. JavaScript.

JavaScript ensures a smooth, real-time experience By relying on this API, the need to manually create
without requiring any server interaction. and store quiz questions is eliminated. This also
6
allows the quiz content to remain fresh and building the HTML structure, applying CSS for
unpredictable, increasing user engagement. styling, integrating JavaScript for interactivity, and
connecting to the Open Trivia API for dynamic
content. Additionally, features like score
calculation, answer validation, and result
3.5 Local Storage
generation were implemented entirely on the client
Local Storage, a part of the Web Storage API, is side using Local Storage.
used to store user-specific data in the browser. It
The application is divided into multiple
allows saving data even after the browser is closed,
components—each playing a specific role in
without the need for a database or server.
creating a seamless and interactive quiz-taking
Uses of Local Storage in this project: experience.

• Storing high scores: After quiz

completion, the highest score achieved is
4.1 Application Flow Diagram
saved locally.
• Progress tracking: Users can see if they've
Below is a high-level overview of the application's
beaten their previous records.
workflow:
• No login needed: Data is saved
automatically without user registration or pgsql
account creation. Start → Home Page → Select Category →
• Quick access: Since data is stored on the Fetch Questions from API →
client-side, it is retrieved instantly without Display Questions → User Answers →
any loading delay. Show Feedback → Next Question →
Final Question → Calculate Score →
Using local storage simplifies development and
Show Result → Option to Restart
offers a lightweight, server-free way to maintain
user data in a persistent format.

This flow ensures a linear and user-friendly

4.0 Implementation interaction, guiding users through the quiz process
without confusion. The flow is entirely managed
The implementation phase involves converting the
through JavaScript, using conditional logic and
design and methodology into an actual working
application. For QuizzyMind, this included
7
event listeners to switch between states (e.g., quiz 4.2 Screenshots
in progress, quiz complete).
Here are the key interfaces that form part of the
implementation:

• Home Page: Allows users to choose quiz

categories.
• Quiz Screen: Displays each question along
with multiple-choice answers, and includes
a progress bar.
• Result Screen: Shows the user’s score
along with an option to retry the quiz.

[Fig 4.2: Screenshot of Home Page]

[Fig 4.1: Application Flow Diagram]

[ Fig 4.3: Screenshot of Quiz Screen]

8
 ensure the application is usable for all users,
including those using assistive technologies.

5.0 Testing & Results

Once the application was implemented, it

underwent a thorough testing phase to ensure that it
functioned correctly across different environments
[ Fig 4.3: Screenshot of Result] and devices. Testing was conducted manually,
focusing on key functionalities such as API
These screenshots represent the actual output of the
integration, UI responsiveness, logic accuracy,
application during runtime and serve as visual
error handling, and browser compatibility. The
proof of the implemented functionality.
results validated that QuizzyMind meets its
intended purpose of being a simple, responsive, and
effective quiz-taking application.
4.3 User Interface Overview

The user interface of QuizzyMind has been

designed with simplicity and accessibility in mind.
5.1 Device Compatibility
Key UI features include:
The application was tested on a range of devices to

• Minimalist design: A clean and ensure responsive behavior and consistent

distraction-free layout for better functionality. The table below outlines the

concentration on quiz content. compatibility results:

• Responsive elements: Buttons, text, and Operating

Device Type Browser Result
progress bars adapt to different screen sizes. System
Laptop/Desk Windows Fully
• Immediate visual feedback: Correct top 10
Chrome, Firefox
Functional
answers are highlighted in green; incorrect Chrome,
Android Android Fully
Samsung
answers in red. Smartphone 11+ Functional
Internet
• Animated transitions: Smooth page iPhone iOS 14+ Safari, Chrome
Fully
Functional
switching enhances user engagement.
Android/iP Fully
Tablet Chrome, Safari
adOS Functional
All interactive elements like buttons are given
appropriate ARIA labels and accessible text to
9
The UI adapted smoothly using CSS media queries.
Buttons, layout, and text scaled appropriately
across screen sizes, maintaining usability and
readability.

5.2 Performance Testing

Performance testing focused on load speed, data

handling from the API, and memory/resource
usage. Results showed that: [Fig 5.1: Performance Metrics Chart or
Lighthouse Report Screenshot]
• Initial Load Time: Less than 2 seconds on
average.
• API Response Time: Under 1 second for
5.3 Bug Fixes and Improvements
quiz question retrieval.
• Client-Side Memory Usage: Minimal (as During testing, the following issues were identified
no large-scale computations or storage are and resolved:
involved).
Issue Identified Resolution Implemented
• Offline Behavior: Application loads and Incorrect score Added confirmation before quiz
displays the home screen offline (due to calculation on early exit exit
Unresponsive buttons on Enhanced touch area with
caching), but requires internet for fresh mobile padding in CSS
Questions not loading due Added error message and retry
questions. to API limit button
Layout breaking on small Used media queries and flex-
There were no noticeable delays during transitions screens wrap to fix overflow

between quiz states, and animations rendered Additional enhancements included:

smoothly.
• Adding feedback animations for
correct/incorrect answers.
• Resetting local storage on user request.
• Improving progress bar accuracy and
styling.

10
 6.0 Conclusion 6.1 Key Takeaways

• Real-time Dynamic Content: The

The QuizzyMind project successfully demonstrates
integration of Open Trivia API ensures that
the potential of modern web technologies in
quiz content is regularly updated,
delivering a lightweight, user-friendly, and
eliminating content redundancy.
educational web application. Designed as a client-
side quiz platform, it achieves its primary goal of • Client-Side Architecture: The app is fully

providing users with real-time, category-based quiz operational without backend servers or

experiences using the Open Trivia API—all databases, improving reliability and

without the need for installations, logins, or server- deployment simplicity.

side dependencies. • Cross-Platform Accessibility: The

responsive interface guarantees smooth
From the initial planning through to the operation across devices such as laptops,
implementation and testing phases, the project smartphones, and tablets.
adhered to the core principles of responsive design, • User Engagement: Features like instant
modular programming, and interactive learning. feedback, progress tracking, and high-score
The integration of HTML, CSS, JavaScript, and memory encourage continued learning and
Local Storage ensured a smooth user experience, user retention.
while the use of API-driven content allowed for
• Ease of Use: The application can be used
dynamic quiz generation that remains fresh and
without any sign-up process or installation,
engaging on each use.
lowering the barrier to entry for learners of

By focusing on simplicity, accessibility, and all ages.

gamified learning, QuizzyMind serves as a

QuizzyMind successfully bridges the gap between
valuable tool for self-assessment and education. It
learning and play, offering a modern solution to
is particularly beneficial in environments with
digital education challenges.
limited technical resources or internet speeds, as it
functions entirely on the client side with minimal
bandwidth usage.
7.0 Applications
The QuizzyMind application is a versatile tool
with a wide range of practical applications in both
academic and non-academic environments. Its
simplicity, accessibility, and dynamic content make
11
it suitable for a diverse user base—from students to 4. Public Platforms and Competitions
general knowledge enthusiasts. Below are the
major areas where QuizzyMind can be effectively • Trivia Platforms: Serves as a base for
utilized: public trivia games or quiz competitions,
especially in schools or community events.
• Social Media Engagement: The concept
can be integrated into websites or social
1. Educational Institutions platforms for increasing user interaction.

• Classroom Activities: Teachers can use the

app to conduct quick, interactive quizzes in
classrooms to assess student understanding. 5. Personal Use
• Revision Tool: Students can independently
revise subjects like Science, History, and • Casual Learning: Individuals can use it to
General Knowledge using live questions. challenge themselves, refresh their
• Homework Support: Acts as a gamified memory, or prepare for general competitive
alternative to traditional homework exams.
assignments for self-learning. • Brain Training: Daily quizzes help
improve cognitive skills such as memory,
recall speed, and critical thinking.

2. E-learning and Online Courses

• Self-Assessment Module: Can be 6. Remote & Underserved Areas

integrated into online courses or MOOCs to
help learners check their understanding in • Offline Readiness: Since the app is
real time. lightweight and client-side, it can be cached
• Supplemental Learning Resource: for partial offline use, making it ideal for
Complements e-books or video courses by areas with poor connectivity.
adding an interactive quiz element. • No Cost Barrier: Completely free to use—
no login, subscription, or payment
required—ensuring educational equity.

3. Corporate Training and Skill Development

• Employee Training: Can be customized to In summary, QuizzyMind is not only a fun quiz tool
assess employee knowledge during training but also a valuable learning asset that can be
programs. deployed across diverse fields for both academic
• Onboarding: Used during orientation to enrichment and personal development.
introduce company policies, workplace
safety, or general rules in a fun and
engaging way.
8.0 Future Scope

12
While QuizzyMind successfully achieves its core users could track their long-term progress,
goal of providing a lightweight, responsive, and quiz history, and badges/achievements.
API-based quiz experience, there remains 5. Question Review & Explanation
significant potential for enhancement. The Allowing users to review their answers
project’s modular structure and client-side after quiz completion and see detailed
architecture make it well-suited for future upgrades explanations would improve the learning
that can expand both functionality and reach. This aspect of the app.
section outlines several areas of future
development:

8.2 Technical Improvements

8.1 Feature Enhancements 1. Progressive Web App (PWA)

Transforming QuizzyMind into a PWA
1. Difficulty Level Selection would allow users to install the app on their
Currently, questions are fetched randomly devices and use it offline with improved
from the Open Trivia API. Future versions caching and performance.
can allow users to choose the difficulty 2. Multi-language Support
level (easy, medium, hard) for a more Supporting regional and international
customized learning experience. languages will make the app accessible to a
2. Leaderboard Integration larger audience, particularly in educational
Introducing a global or local leaderboard institutions in rural or multilingual regions.
will add a competitive aspect to the 3. Accessibility Enhancements (A11y)
application. This could be powered using Implementing screen reader support,
Firebase or another lightweight cloud keyboard navigation, and ARIA roles will
backend. make the app more inclusive for users with
3. Timer for Each Question disabilities.
Implementing a countdown timer per
question will add time pressure, simulating
real test environments and improving user
8.3 Content Expansion
engagement.
4. User Login and Profiles 1. Custom Question Upload
By adding authentication and profiles, Teachers and trainers could upload their

13
 own questions to tailor quizzes for specific 9.0 Bibliography / References
groups.
2. Thematic Quizzes and Events Below is the list of official documentation, learning
platforms, and tools used during the development
Creating special themed quizzes (e.g.,
of QuizzyMind – A Quiz App Using Open Trivia
Science Week, General Knowledge API:
Championships) could drive user retention
and community engagement.
Web Technologies

1. Mozilla Developer Network (MDN) –

HTML Documentation
8.4 Integration Possibilities
2. https://developer.mozilla.org/en-
US/docs/Web/HTML
1. Integration with Learning Management 3. Mozilla Developer Network (MDN) – CSS
Systems (LMS) Documentation
https://developer.mozilla.org/en-
QuizzyMind could be embedded within e-
US/docs/Web/CSS
learning platforms like Moodle or Google 4. Mozilla Developer Network (MDN) –
Classroom as an interactive learning JavaScript Documentation
https://developer.mozilla.org/en-
component.
US/docs/Web/JavaScript
2. Gamification Elements
Introducing achievements, badges, levels,
and rewards could make the experience API and Data Integration
more engaging and addictive in a positive
4. Open Trivia Database – API
educational way. Documentation
https://opentdb.com/api_config.php

In conclusion, the future scope for QuizzyMind is

Design and UI Concepts
vast. With thoughtful enhancements and wider
adoption, it can evolve from a simple quiz app into 5. W3Schools – CSS Responsive Design
a robust, scalable educational platform catering to https://www.w3schools.com/css/css_rwd_i
ntro.asp
learners of all levels. 6. FreeCodeCamp – Fetch API in JavaScript
https://www.freecodecamp.org/news/how-
to-use-the-javascript-fetch-api-to-get-data/

14
Tools and Platforms

7. GitHub Pages – Static Web Hosting

Platform
https://pages.github.com/
8. Netlify – Continuous Deployment &
Hosting for Frontend Projects
https://www.netlify.com/
9. Diagrams.net – Flowchart and UI
Wireframe Tool
https://app.diagrams.net/

Client-Side Storage

10. Web Storage API – Local Storage (MDN)

https://developer.mozilla.org/en-
US/docs/Web/API/Window/localStorage

15