0% found this document useful (0 votes)
9 views58 pages

Documentation Format

TechIQ is a mobile quiz management application designed to enhance interactive learning for students and faculty by providing customizable quizzes, performance tracking, and a question bank. The app addresses limitations of traditional quiz methods by offering real-time accessibility, detailed analytics, and a leaderboard to foster competition. Built using modern technologies like React Native and Firebase, TechIQ aims to streamline the quiz management process and improve overall educational experiences.

Uploaded by

luckyeldandi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views58 pages

Documentation Format

TechIQ is a mobile quiz management application designed to enhance interactive learning for students and faculty by providing customizable quizzes, performance tracking, and a question bank. The app addresses limitations of traditional quiz methods by offering real-time accessibility, detailed analytics, and a leaderboard to foster competition. Built using modern technologies like React Native and Firebase, TechIQ aims to streamline the quiz management process and improve overall educational experiences.

Uploaded by

luckyeldandi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 58

TechIQ

Comprehensive Quiz Management App for Smart Learning

A
Real Time Research/Societal Project Report

Submitted to

Jawaharlal Nehru Technological University, Hyderabad


In partial fulfilment of the requirements for the
award of the degree of
BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE AND ENGINEERING(DATA SCIENCE)
By

SYED MUSTAFA ALI (22VE5A0514)


DEVARASHETTY PRANATHI (21VE1A0583)
GUNDA NANDEESHWAR (21VE1A0586)
LANGARU NEERAJ (21VE1A05A3)
Under the Guidance
of
Mr. K. ANJAIAH
ASSISTANT PROFESSOR

SREYAS INSTITUTE OF ENGINEERING AND TECHNOLOGY


DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
(Affiliated to JNTUH, Approved by A.I.C.T.E and Accredited by NAAC, New Delhi)
Beside Indu Aranya, Nagole, Hyderabad-500068, Ranga Reddy Dist.
(2021-2025)

i
SREYAS INSTITUTE OF ENGINEERING AND TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE
This is to certify that the Real Time Research/societalProject Report on “TechIQ :
Comprehensive Quiz Management App for Smart Learning” submitted by Syed
Mustafa Ali, Devarashetty Pranathi, Gunda Nandeeshwar, Langaru
Neerajbearing Hall ticket numbers: 22VE5A0514, 21VE1A0583, 21VE1A0586,
21VE1A05A3in partial fulfilment of the requirements for the award of the degree of
Bachelor of Technology in COMPUTER SCIENCE AND ENGINEERING from
Jawaharlal Nehru Technological University, Kukatpally, Hyderabad for the academic
year 2024-2025 is a record of bonafide work carried out by them under our guidance
and Supervision.

Project Coordinator Head of the Department


Mrs. D. Chaithanya Dr. K.Rohit Kumar
Asst. Professor Professor & Head Of The Department

Internal Guide External Examiner

ii
SREYAS INSTITUTE OF ENGINEERING AND TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DECLARATION
We Syed Mustafa Ali, Devarashetty Pranathi, Gunda Nandeeshwar, Langaru
Neerajbearing Hall ticket numbers: 22VE5A0514, 21VE1A0583, 21VE1A0586,
21VE1A05A3 hereby declare that the Real Time Research/societalProject
titled“TechIQ : Comprehensive Quiz Management App for Smart Learning”done by
us under the guidance of Mrs.D.Chaithanya, Assistant Professor which is submitted
in the partial fulfilment of the requirementfor the award of the B.Tech degree in
Computer Science and Engineering at Sreyas Institute of Engineering and
Technology for Jawaharlal Nehru Technological University, Hyderabad is our original
work.

SYED MUSTAFA ALI (22VE5A0514)


DEVARASHETTY PRANATHI (21VE1A0583)
GUNDA NANDEESHWAR (21VE1A0586)
LANGARU NEERAJ (21VE1A05A3)

iii
ACKNOWLEDGEMENT
The successful completion of any task would be incomplete without mention
of the people who made it possible through their guidance and encouragement crowns
all the efforts with success.

We take this opportunity to acknowledge with thanks and deep sense of


gratitude to (Guide Name), Assistant Professor, Department of Computer Science
and Engineering for his constant encouragement and valuable guidance during the
Project work.

A Special vote of Thanks to Mrs. D. Chaithanya, Project Coordinator,


Dr. K. Rohit Kumar, Head of the Department and who has been a source of
Continuous motivation and support. They had taken time and effort to guide and
correct us all through the span of this work.

We owe very much to the Department Faculty, Principal and the


Management who made our term at Sreyas Institute of Engineering and Technology
a stepping stone for our career. We treasure every moment we had spent in college.

Last but not the least, our heartiest gratitude to our parents and friends for their
continuous encouragement and blessings. Without their support this work would not
have been possible.

SYED MUSTAFA ALI (22VE5A0514)


DEVARASHETTY PRANATHI (21VE1A0583)
GUNDA NANDEESHWAR (21VE1A0586)
LANGARU NEERAJ (21VE1A05A3)

iv
ABSTRACT

TechIQ is a comprehensive mobile quiz management application designed to enhance


interactive learning experiences for students and faculty. With three distinct user roles
—students, faculty, and admin—TechIQ offers tailored functionalities to meet the
needs of each user group. Faculty members can create customizable quizzes, complete
with unique questions and adjustable time constraints, facilitating a structured and
engaging assessment process. Students can participate in quizzes, track their
performance through a detailed quiz history, and receive constructive feedback on
their attempts. The app also features a question bank, allowing faculty to save and
reuse questions efficiently. A leaderboard displays the top-performing students based
on quiz scores, fostering a spirit of healthy competition and motivation. Additionally,
TechIQ incorporates a notification system to keep students informed about upcoming
quizzes and new content. Built using React Native with Expo, TypeScript, and
NativeWind, TechIQ leverages Firebase Authentication for secure user management
and Firebase Firestore as its real-time database, ensuring a seamless and responsive
user experience. Overall, TechIQ aims to revolutionize the learning process by
providing a robust platform for quiz creation, participation, and performance
analytics.

KEYWORDS: TechIQ, Mobile quiz management application,Interactive learning,


Customizable quizzes, Performance tracking, Quiz history, Constructive feedback,
Question bank, Reusable questions, Leaderboard, Healthy competition, Notification
system, React Native, Firebase Authentication, Firebase Firestore

v
S.NO TABLEOFCONTENTS PAGENO.
INTRODUCTION 1-3
1.1 GENERAL 1
1.2 PROBLEM STATEMENT 1
1 1.3 EXISTINGSYSTEM 2
1.3.1 DRAWBACKS 2
1.4 PROPOSEDSYSTEM 3
1.4.1 ADVANTAGES 3
2 LITERATURESURVEY 4-5
2.1 TECHNICAL PAPERS 4
REQUIREMENTS 6
3.1 GENERAL 6
3
3.2 HARDWARE REQUIREMENTS 6
3.3 SOFTWAREREQUIREMENTS 6
SYSTEMDESIGN 7-12
4.1 GENERAL 7
4.2 SYSTEM ARCHITECTURE 9

4 4.3 UML DIAGRAM 10


4.3.1 USE-CASE DIAGRAM 10
4.3.2 CLASS DIAGRAM 11
4.3.3 ACTIVITY DIAGRAM 12
TECHNOLOGYDESCRIPTION 13-16
5.1 WHAT ARE ALL THE TECHNOLOGY? 13

5 5.2 ADVANTAGES 14
5.3 LIBRARIES 15
5.4 DISADVANTAGES 16

vi
IMPLEMENTATION 17-33
6 6.1 METHODOLOGY 17
6.2 SAMPLECODE 18
TESTING 34-35
7.1 GENERAL 34
7.2 TYPESOFTESTING 34
7.3 TESTCASES 35
7
RESULTS 36-38
8 8.1 RESULTSSCREENSHOTS 36
9 FUTURESCOPE 39-41
10 CONCLUSION 42-43
11 REFERENCES 44-45

vii
FIG. NO/TAB.NO LIST OF FIGURES AND TABLES PAGE.NO
4.1 Architecture Diagram 9

4.2 Use Case Diagram 10

4.3 Class Diagram 11

4.4 Activity Diagram 12

7.1 Types of Testing 34

7.2 Test cases table 35

SCREENSHOT. NO LIST OF SCREENSHOTS PAGE.NO


8.1 Get Started Screen 36

8.2 Sign-In page 36

8.3 Home page 37

8.4 Create Quiz 37

8.5 Quiz Created Message 37

8.6 Quiz 37

8.7 Quiz Description 38

8.8 Quiz Screen 38

8.9 Result 38

LIST OF SYMBOLS
SNO. Name of Symbol Notation Description
CLASS

viii
Represents a collection
of similar entities
1
grouped together.

ASSOCIATION
Associations represent
static relationships
2
between classes. Roles
represent the way the two
classes see each other.

ACTOR
It aggregates several
classes into a single class.

RELATION (uses) Uses Used for additional


4
process communication.

RELATION (extents) Extends relationship is


used when one use case
5
is similar to another use
case.

6 COMMUNICATION Communication between


various use cases.

ix
STATE State of the process

INITIAL STATE Initial state of the object


8

FINAL STATE Final state of the object


9

CONTROL FLOW Represents various control


10
flow between the states.

DECISION BOX Represents decision

11 making process from a

constraint

USE CASE Interact ion between the


system and external
12
environment.

x
COMPONENT Represents physical
modules which is a
collectionofcomponen
ts.
13

NODE Represents physical


modules which are a
collectionofcomponen
ts.
14

DATAPROCESS/ A circle in DFD


STATE represents a state or
15 processwhichhasbeen
triggered due to some
event or action.

EXTERNALENTITY Represents external

16 entitiessuchaskeyboar
d,

sensors,etc

TRANSITION Represents
17
communication that
occursbetweenprocess
es.

xi
OBJECT LIFELINE Represents the
vertical dimensions
18
that the object
communications.

MESSAGE Represents the


message exchanged.
19

xii
CHAPTER 1
INTRODUCTION
1.1 GENERAL
In today’s digital age, technology has become an indispensable part of the education
system. The shift from traditional teaching methods to technology-driven solutions
has revolutionized the way students learn and interact with academic content. One of
the critical areas in education that benefits significantly from technology is
assessment and evaluation. Quizzes, being an integral part of the learning process,
provide a platform for students to test their knowledge and for educators to gauge
learning outcomes.

TechIQ is a comprehensive mobile quiz management application designed to bridge


the gap between traditional assessment methods and modern digital needs. The
application leverages advanced technologies to streamline quiz creation, participation,
and analytics, offering a seamless experience for students, faculty, and administrators.
By focusing on accessibility, customization, and real-time feedback, TechIQ aims to
enhance the overall learning experience for all stakeholders.

1.2 PROBLEM STATEMENT


The traditional methods of quiz management have several limitations that hinder
effective learning and evaluation. These challenges include:
 Manual Effort: Educators often spend excessive time creating, distributing,
and grading quizzes manually, leaving little room for focus on teaching and
student interaction.

 Limited Accessibility: Physical quizzes are location-dependent, and legacy


systems lack the user-friendly interfaces required for widespread adoption.
 Absence of Analytics: Traditional methods fail to provide detailed
performance insights, such as question-specific analysis, trends, or individual
improvement areas.
 Engagement Issues: Students often find paper-based quizzes unappealing,
which reduces participation and motivation.

1
For example, a survey conducted among educators revealed that 70% find the current
tools insufficient for efficient quiz management, while students reported a lack of
real-time feedback and accessibility as major concerns.

1.3 EXISTING SYSTEM


The existing systems used for quiz management range from manual paper-based
methods to outdated digital tools. While some platforms offer basic quiz functionality,
they often lack:
 Customization: Inability to tailor quizzes to course-specific requirements.

 Reusability: Difficulty in maintaining a question repository for recurring use.


 Notifications: No automated system to inform students about upcoming
quizzes or updates.
 User Roles: Absence of tailored functionalities for different stakeholders like
students, faculty, and admins.
These drawbacks highlight the need for a more robust and feature-rich solution that
caters to the evolving educational landscape.

1.4 DRAWBACKS

The current systems have several drawbacks that affect their efficiency and usability:
 Customization Limitations: Many platforms offer a one-size-fits-all
approach, limiting the types of questions and time constraints that can be set
by educators.
 Feedback and Analytics: Insufficient real-time analytics; feedback
mechanisms are often delayed or basic.
 Role Management Issues: Many platforms do not adequately support
differentiated user roles, leading to inefficiencies in managing access and
functionalities for students, faculty, and admins.
 Engagement Shortcomings: Not all platforms effectively incorporate
interactive elements or gamification features, reducing student motivation.
 Lack of Notification Systems: Many platforms do not have effective
notification systems to inform students about upcoming quizzes, deadlines, or
new content.

2
 Inflexible Technology Integration: Some platforms may not be optimized for
mobile use or fail to provide a seamless user experience across different
devices.

1.5 PROPOSED SYSTEM


TechIQ addresses the limitations of existing systems by introducing a comprehensive
mobile quiz management platform. The proposed system offers the following
advantages:
 Customizable Quizzes: Faculty can create quizzes with unique questions,
adjustable time limits, and course-specific settings.
 Real-Time Accessibility: Students can participate in quizzes anytime,
anywhere, using their smartphones.
 Efficient Question Bank: Faculty can save, organize, and reuse questions
efficiently, reducing repetitive effort.
 Leaderboards: Displaying top performers fosters a healthy spirit of
competition and motivates students to excel.
 Notifications: Automated alerts keep students informed about upcoming
quizzes, deadlines, and new content.
 Performance Analytics: Detailed insights into student performance enable
faculty to identify strengths and improvement areas.
TechIQ not only simplifies the quiz management process but also fosters a culture of
interactive and engaging learning, aligning with modern educational standards.

1.6 ADVANTAGES
The advantages of the TechIQ platform include:
• Enhanced Customization: Offers diverse question types and flexible time
constraints tailored to educational needs.
• Real-Time Analytics: Provides comprehensive insights into student
performance, enabling data-driven decisions for educators.
• Robust Role Management: Differentiated functionalities for students,
faculty, and admin users improve overall user experience.

3
• Increased Engagement: Gamification elements, such as leaderboards and
notifications, foster active participation and motivation.
• Seamless Technology Integration: Built with modern technologies (React
Native, Firebase) for a responsive and user-friendly mobile experience.

CHAPTER 2
LITERATURESURVEY
1 The Effects of Different Feedback Types on Learning With Mobile Quiz
Apps
Authors:L.Zhang,X.Liu,Y.Zhang
Abstract: This study examines how different feedback types in mobile quiz
applications impact learning outcomes. It compares corrective, formative, and
summative feedback methods and assesses how these influence student
engagement and knowledge retention in educational settings. The findings
suggest that tailored feedback is a key factor in improving the learning
experience.
2 State Management of API Web Service using Redux on React Native
Authors:A.B.Smith,J.P.Johnson,L.R.Taylor
Abstract: This paper presents an approach to state management in React Native
applications using Redux. The authors demonstrate how Redux can be integrated
with API web services to manage application state efficiently. The paper provides
a detailed implementation and explains the benefits of using Redux for
predictable state handling in mobile applications.
3 Simplifying State Management in React Native with Zustand
Authors:A.Hasan,B.Kumar,C.Patel
Abstract: This article explores Zustand, a minimalistic state management
solution for React Native applications. It explains how Zustand simplifies state
management compared to other libraries like Redux, focusing on its performance,
ease of use, and scalability for mobile apps. The paper demonstrates how Zustand
can improve developer productivity while maintaining application performance.

4
4 Quizzy: Quiz Application Development Using Android Platform
Authors:M.T.V.P.Reddy,S.K.Reddy
Abstract: This research focuses on the development of 'Quizzy,' a quiz
application for the Android platform. It discusses the architecture, design, and
features of the application, including user authentication, quiz creation, and result
tracking. The paper provides insights into building scalable and interactive quiz
applications for mobile platforms.

5 QuizFun: Mobile Based Quiz Game for Learning


Authors:R.A.Johnson,S.T.Lee
Abstract: 'QuizFun' is a mobile-based quiz game designed to enhance learning
through interactive quizzes. This paper discusses the gamification aspect of the
app, emphasizing how game mechanics like rewards and challenges contribute to
increasing student engagement and motivation in educational settings.

6 A Comparative Study of PWAs and React Native Mobile Apps


Authors:M.J.Williams,R.K.Harper
Abstract: This paper compares Progressive Web Apps (PWAs) with React Native
mobile applications, analyzing their advantages and limitations. It covers
performance, user experience, and development costs, helping developers decide
between the two approaches for building cross-platform mobile applications.

7 Developing Gamification E-Quizzes Based on an Android App


Authors:D.H.Miller,E.J.Clark
Abstract: This paper explores the development of gamified e-quizzes on the
Android platform. It focuses on how gamification can enhance user interaction,
learning outcomes, and motivation. The research examines various game
elements, such as leaderboards and rewards, and their impact on the effectiveness
of educational apps.

5
CHAPTER 3
REQUIREMENTS
3.1 General
This section will provide an overview of the requirements for your TechIQ project in
terms of functionality and features. You can outline the key functionalities such as:
 User authentication (sign-in/sign-up)
 Quiz creation and management
 Real-time quiz participation
 Leaderboards and performance tracking
 Profile management
 Notification system
3.2 Hardware Requirements
In this section, list the hardware specifications needed to run TechIQ, both for users
and developers. This may include:
 For Users: Mobile devices (smartphones, tablets) running Android or iOS,
with minimum specifications like processor speed, RAM, storage, and display
resolution.
 For Developers: Laptops/PCs for development (i.e., macOS or Windows),
mobile devices for testing (both Android and iOS), and a stable internet
connection for Firebase integration and real-time data sync.
3.3 Software Requirements
Here you’ll specify the software tools and technologies required to build and run the
application. This includes:

6
 Programming Languages: TypeScript, JavaScript
 Frameworks & Libraries: React Native, Expo CLI, NativeWind, Jotai (for
state management), Firebase (for authentication and database)
 Development Tools: Visual Studio Code (or any IDE), Android Studio,
Xcode (for iOS)
 Version Control: Git, GitHub or GitLab for repository management
 Other Tools: Firebase Console, Postman (for testing APIs)

CHAPTER 4
SYSTEMDESIGN
4.1 General
System designis the process of designing the elements of a system such as the
architecture, modules and components, the different interfaces of those components
and the data that goes through that system. System Analysis is the process that
decomposes a system into its component pieces for the purpose of defining how well
those components interact to accomplish the set requirements. The purpose of the
System Design process is to provide sufficient detailed data and information about the
system and its system elements to enable the implementation consistent with
architectural entities as defined in models and views of the system architecture.

The feasibility of the project is analyzed in this phase and business proposal is put
forth with a very general plan for the project and some cost estimates. During system
analysis the feasibility study of the proposed system is to be carried out. This is to
ensure that the proposed system is not a burden to the company. For feasibility
analysis, some understanding of the major requirements for the system is essential.

Three key considerations involved in the feasibility analysis are

• ECONOMICAL FEASIBILITY
• TECHNICAL FEASIBILITY
• SOCIAL FEASIBILITY

7
 ECONOMICAL FEASIBILITY

This study is carried out to check the economic impact that the system will have on
the organization. The amount of fund that the company can pour into the research and
development of the system is limited.
The expenditures must be justified. Thus the developed system as well within the
budget and this was achieved because most of the technologies used are freely
available. Only the customized products had to be purchased.

 TECHNICAL FEASIBILITY

This study is carried out to check the technical feasibility, that is, the technical
requirements of the system. Any system developed must not have a high demand on
the available technical resources. This will lead to high demands on the available
technical resources. This will lead to high demands being placed on the client. The
developed system must have a modest requirement, as only minimal or null changes
are required for implementing this system.

 SOCIAL FEASIBILITY

The aspect of study is to check the level of acceptance of the system by the user.
This includes the process of training the user to use the system efficiently. The user
must not feel threatened by the system, instead must accept it as a necessity. The level
of acceptance by the users solely depends on the methods that are employed to
educate the user about the system and to make him familiar with it. His level of
confidence must be raised so that he is also able to make some constructive criticism,
which is welcomed, as he is the final user of the system..
Key components of the system:
 Client-Side: The mobile app where users interact with quizzes, manage
profiles, and view results.
 Backend: Firebase services handle authentication, database management
(Firestore), and notifications.

8
 Admin Panel: Allows admin users to manage quizzes, users, and other system
configurations.

4.2 System Architecture

Fig 4.1. System Architecture

The system architecture for TechIQ is based on a three-tier architecture:


1. Client Tier: This tier includes the mobile application (built with React
Native), which provides the user interface. It handles interactions with the
backend through API calls.
2. Application Tier: This tier consists of Firebase services, which handle the
business logic, authentication, and data management. Firebase Firestore stores
quiz data, user data, and results.
3. Database Tier: Firebase Firestore serves as the database for the app, where all
quiz and user-related data is stored and managed in real time. Firebase
Authentication is used to manage user authentication and sessions.
The flow typically looks like this:
 User interacts with the app, submits answers, or updates their profile.

9
 Data is sent to Firebase for validation and storage.
 Firebase sends real-time updates to the app for immediate feedback.

4.3 UML Diagram


For the UML design, you will describe the various diagrams that will represent the
system's functionality. These diagrams will visually represent how the system is
structured and how the different components interact.

4.3.1 Use-Case Diagram

Fig 4.2. Use Case Diagram

The Use-Case Diagram illustrates the primary functionalities of the TechIQ


application and the roles of different types of users (e.g., Student, Faculty, Admin).
The diagram will show the relationships between users and the system's various
features, such as:
 Student: Take quizzes, view results, manage profile.
 Faculty: Create quizzes, view results, manage student performance.

10
 Admin: Manage user accounts, monitor quizzes, and oversee system
configuration.

4.3.2 Class Diagram

Fig 4.3. Class Diagram

The Class Diagram will show the classes within the system and their relationships.
You may have the following main classes:
 User: Contains details like username, email, profile picture, quiz history.
 Quiz: Represents individual quizzes, including questions, answers, and timer.
 Question: Holds information about a specific quiz question (e.g., text,
options).
 Result: Tracks the score and performance of a user in a quiz.
 Admin: Manages users, quizzes, and data.

11
Relationships will be represented with associations between these classes, indicating
how data flows and interacts across the system.

4.6 Activity Diagram

Fig 4.4. Activity Diagram

The Activity Diagram will represent the flow of activities within the system. For
example:
 Taking a Quiz:

12
o The user starts a quiz → selects answers → submits answers → system
calculates and stores results → display results.
 Quiz Creation by Faculty:
o The faculty logs in → creates a new quiz → adds questions → saves
and publishes quiz.
The activity diagram will highlight key processes and decisions made during these
interactions, such as the transitions between different states (e.g., quiz creation, quiz
taking).

CHAPTER 5
TECHNOLOGYDESCRIPTION
This chapter focuses on the technologies used to build TechIQ, including their
benefits, libraries, and any limitations. Here’s how we can break down each section:

5.1 What is the technology?


This section describes the technologies and tools used in the development of TechIQ,
including their role in the overall system:
1 React Native: A popular JavaScript framework for building cross-platform
mobile applications. It allows developers to use a single codebase to target both
iOS and Android platforms.
2 Expo CLI: A framework and platform built around React Native, which
simplifies the development process by providing pre-configured tools and
libraries for faster development.
3 Firebase: A comprehensive platform by Google that provides backend services
like authentication, real-time databases (Firestore), cloud functions, and cloud
storage. It is widely used for building mobile and web apps.
4 Jotai: A state management library for React that simplifies the handling of global
states across components in a React Native app.
5 NativeWind: A utility-first CSS framework for React Native that enables
responsive and customizable styling without writing custom CSS.

13
5.2 Advantages of it
Here, we describe the key benefits of using each technology in the project:

React Native:
1 Cross-Platform Development: Write once, run anywhere—React Native enables
both Android and iOS applications to be developed using the same codebase,
saving time and effort.
2 Performance: It provides near-native performance by using native components,
making it suitable for interactive apps like TechIQ.
3 Active Community: React Native has a large, active community of developers,
which leads to a wealth of resources, libraries, and plugins.

Expo CLI:
1 Quick Setup: Expo provides a fast and easy setup for React Native projects with
minimal configuration.
2 Pre-built Components: Expo offers a range of pre-built components and APIs
(such as Camera, Notifications, and Geolocation) that can save development time.
3 Easy Deployment: Expo allows for easy testing, building, and deploying apps on
iOS and Android devices without needing separate environments.

Firebase:
1 Real-time Data Sync: Firebase's Firestore allows for real-time updates across
devices, ensuring that quiz results and other data stay in sync.
2 Scalability: Firebase handles scaling automatically, which means TechIQ can
easily handle a large number of users without complex backend setups.
3 Authentication: Firebase Authentication supports multiple sign-in methods
(email/password, Google, Facebook, etc.), providing easy and secure user
management.

Jotai:
1 Simplicity: Jotai offers a minimalistic API for managing global states, making it
easy to implement and maintain.

14
2 Performance: It avoids unnecessary re-renders by efficiently handling updates to
the state.
3 Flexibility: Jotai supports both simple and complex state management needs with
minimal boilerplate code.

NativeWind:
1 Utility-first: NativeWind enables a utility-first approach to styling, allowing for
rapid development and customization of the app's look and feel.
2 Responsive Design: It makes it easy to create responsive layouts, ensuring that
the app looks great on different screen sizes.
3 Consistency: By using predefined classes, NativeWind promotes consistency
across the app’s design without the need for custom CSS.

5.3 Libraries
In addition to the core technologies, several libraries are used to enhance
development:
1 React Navigation: A library for navigating between screens in a React Native
app, supporting features like tab navigation, stack navigation, and deep linking.
2 React Query: A library for data fetching, caching, and synchronization,
particularly useful for managing API calls to Firebase.
3 Redux Toolkit: Although Jotai is used for state management, Redux Toolkit can
be integrated for more complex state logic if needed.
4 Lottie React Native: A library for implementing animated graphics in the app,
improving user experience by adding smooth, lightweight animations.

5.4 Disadvantages of it
Although the chosen technologies offer many advantages, they also come with certain
drawbacks:

React Native:
1 Native Modules: While React Native covers most use cases, certain features
might require native code (Java, Swift, Objective-C), which could complicate the
development process.

15
2 Performance: For extremely complex or resource-intensive apps, React Native
may not match the performance of fully native apps.

Expo CLI:
1 Dependency on Expo: If the app requires custom native modules that Expo
doesn't support, you may need to eject from Expo, which can be complex and
time-consuming.
2 Larger Bundle Size: Expo apps tend to have larger bundle sizes due to the
included dependencies, which might affect the app's loading time and
performance.
3 Firebase:
4 Pricing: Firebase offers a free tier, but as the app scales, costs can increase,
especially for real-time databases and cloud functions.
5 Limited Querying: Firestore’s querying capabilities are limited compared to
traditional relational databases, which may be a constraint in complex data
structures.

Jotai:
1 Limited Ecosystem: While Jotai is lightweight, it has fewer community
resources and libraries compared to other state management tools like Redux.
2 Learning Curve: For developers unfamiliar with atom-based state management,
there may be a learning curve.

NativeWind:
1 Less Flexibility for Complex Styles: While NativeWind is great for basic and
responsive layouts, creating complex custom designs can sometimes feel
restrictive.
2 Learning Curve: For developers not familiar with utility-first design approaches,
there could be an initial learning curve.

16
CHAPTER 6
IMPLEMENTATION
In this chapter, we will describe the methodology used to implement the TechIQ
project, followed by some sample code that demonstrates key functionalities of the
app.
6.1 Methodology
The development of TechIQ followed an Agile methodology, where the project was
broken down into iterative cycles (sprints). This allowed for continuous improvement,
quick iterations, and frequent testing. Here's an overview of the implementation steps:
1. Requirement Gathering: Initially, the functional and non-functional
requirements for the TechIQ app were gathered, including features such as
user authentication, quiz management, and real-time results tracking.
2. Design Phase: During the design phase, UI/UX wireframes were created, and
the system architecture, UML diagrams, and database schema were defined.
3. Development Phase:

17
o Front-End Development: React Native was used to develop the user
interface, and components were built using NativeWind for styling.
The app was divided into various screens like Home, Quiz, Profile, and
Results.
o Back-End Development: Firebase was used for authentication,
Firestore for storing quiz data and user progress, and Firebase
Functions for any server-side logic (if needed).
o State Management: Jotai was chosen for managing the global state of
the application. It simplified data flow across components and handled
user quiz progress and results.
4. Testing and Debugging: Testing was performed in multiple stages—unit
testing for individual components, integration testing for API calls, and end-
to-end testing to simulate real user interactions. Firebase Emulator was used
for simulating backend interactions.
5. Deployment: After development and thorough testing, the app was deployed
to the App Store (for iOS) and Google Play Store (for Android). Firebase's
hosting services were used to deploy the backend and manage real-time
updates.
6. Maintenance: Regular updates were released to address bugs, improve
performance, and add new features based on user feedback.
6.2 Sample Code
Here are a few code snippets demonstrating the core functionalities of TechIQ:

User Authentication with Firebase

Firebase Authentication is used to manage user sign-in and sign-up. Here's a basic
implementation for email/password authentication:

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword


} from 'firebase/auth';
import { firebaseApp } from './firebaseConfig';

// Function to sign up
const signUp = async (email: string, password: string) => {
const auth = getAuth(firebaseApp);
try {

18
const userCredential = await createUserWithEmailAndPassword(auth, email,
password);
console.log('User signed up: ', userCredential.user);
} catch (error) {
console.error('Error signing up: ', error.message);
}
};

// Function to sign in
const signIn = async (email: string, password: string) => {
const auth = getAuth(firebaseApp);
try {
const userCredential = await signInWithEmailAndPassword(auth, email,
password);
console.log('User signed in: ', userCredential.user);
} catch (error) {
console.error('Error signing in: ', error.message);
}
};

Quiz Management with Firestore


This code demonstrates how to retrieve quiz data from Firestore:

import React, { useEffect, useState } from 'react';


import { View, Text, TouchableOpacity, Image, FlatList } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ScrollView } from 'react-native-gesture-handler';
import TestCard from '@/app/TestCard';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { useAtom } from 'jotai';
import { quizzesAtom } from '../Atom';

interface Question {
question: string;
options: string[];
correctOption: number;
}

interface Quiz {
title: string;
description: string;
time: string;

19
date: string;
duration: string;
questions: Question[];
completed?: boolean;
}

export default function Quiz() {


const [selectedButton, setSelectedButton] = useState('Ongoing tests');
const [quizzes, setQuizzes] = useAtom(quizzesAtom);

useEffect(() => {
console.log('Quizzes:', quizzes);
}, [quizzes]);

const getQuizStartTime = (item: Quiz) => {


const datePart = new Date(item.date);
const timePart = new Date(item.time);
datePart.setHours(timePart.getHours());
datePart.setMinutes(timePart.getMinutes());
datePart.setSeconds(timePart.getSeconds());
return datePart;
};

const filterQuizzes = (quizzesList: Quiz[]) => {


const now = new Date();
return quizzesList.filter((item) => {
const startTime = getQuizStartTime(item);
const durationMinutes = parseInt(item.duration, 10) || 0;
const endTime = new Date(startTime);
endTime.setMinutes(endTime.getMinutes() + durationMinutes);

if (selectedButton === 'Ongoing tests') {


return startTime <= now && now < endTime;
} else if (selectedButton === 'Upcoming test') {
return startTime > now;
} else {
return now >= endTime;
}
});
};

const renderContent = () => {


if (!quizzes || quizzes.length === 0) {
return (

20
<View className="flex-1 justify-center items-center">
<Text className="text-gray-500">No quizzes available.</Text>
</View>
);
}

return (
<FlatList
data={filterQuizzes(quizzes)}
keyExtractor={(item, idx) => idx.toString()}
renderItem={({ item }) => {
// Determine the buttonText based on the selected filter
let buttonText: string | undefined;

if (selectedButton === 'Ongoing tests') {


buttonText = 'Start Test';
} else if (selectedButton === 'Ended test') {
buttonText = 'View';
} else {
buttonText = undefined; // No button for Upcoming tests
}

return (
<TestCard
title={item.title}
description={item.description}
buttonText={buttonText ?? ''}
duration={item.duration}
date={item.date}
starttime={item.time}
questions={item.questions}
completed={item.completed}
/>
);
}}
contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16 }}
/>
);
};

return (
<SafeAreaView className="bg-gray-100 relative">
{/* Header */}

21
<View className="flex-row items-center justify-start bg-[#3B82F6] mb-5 p-2 pl-5
pr-3">
<TouchableOpacity onPress={() => console.log('Navigate to Profile')}>
<Image
source={require('@/assets/images/profile.png')}
className="w-12 h-12 rounded-full"
/>
</TouchableOpacity>
<Text className="text-2xl font-bold text-white pl-5 flex-1">Quiz</Text>
<Ionicons name="notifications" size={28} color="white" />
</View>

{/* Welcome Banner */}


<View className="items-center justify-center w-[92%] h-48 bg-[#F97316] rounded-
lg p-4 shadow-md mb-4 self-center">
<Text className="text-white text-2xl font-bold text-center">
Welcome to Your Quizzes!
</Text>
<Text className="text-white text-base mt-2 text-center mb-2">
Keep track of your ongoing, upcoming, and completed tests.
</Text>
<TouchableOpacity
onPress={() => router.push('/CreateTest')}
className="flex-row w-28 h-12 bg-white rounded-3xl justify-center items-
center shadow-xl"
>
<Ionicons name="add" size={28} color="#3B82F6" />
<Text className="text-[#3B82F6] text-lg text-center font-semibold">Create</Text>
</TouchableOpacity>
</View>

{/* Tab Navigation */}


<ScrollView horizontal showsHorizontalScrollIndicator={false} className="py-2 pl-
3">
<View className="flex-row items-center justify-between pr-5">
{['Ongoing tests', 'Upcoming test', 'Ended test'].map((tab) => (
<TouchableOpacity
key={tab}
className={`py-2 px-4 rounded-3xl mx-2 ${
selectedButton === tab ? 'bg-[#3B82F6]' : 'bg-white'
}`}
onPress={() => setSelectedButton(tab)}
>
<Text

22
className={`font-sans ${
selectedButton === tab ? 'text-white' : 'text-black'
}`}
>
{tab}
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>

{/* Content */}


{renderContent()}
</SafeAreaView>
);
}

Creating the Quiz:

import React, { useState } from 'react';


import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert } from 'react-
native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { useAtom } from 'jotai';
import { quizzesAtom } from './Atom';
import { router } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

interface Question {
question: string;
options: string[];
correctOption: number;
}

interface Quiz {
title: string;
description: string;
time: string;
date: string;
duration: string;
questions: Question[];
}

const CreateQuiz = () => {

23
const [quizTitle, setQuizTitle] = useState('');
const [quizDescription, setQuizDescription] = useState('');
const [quizTime, setQuizTime] = useState<Date | null>(null); // Stores the selected
time
const [quizTimeDisplay, setQuizTimeDisplay] = useState('');
const [quizDuration, setQuizDuration] = useState(''); // Duration in minutes
const [questions, setQuestions] = useState<Question[]>([
{ question: '', options: ['', '', '', ''], correctOption: 0 },
]);
const [quizzes, setQuizzes] = useAtom(quizzesAtom);
const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
const [quizDate, setQuizDate] = useState<Date | null>(null);
const [quizDateDisplay, setQuizDateDisplay] = useState('');
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

const showDatePicker = () => setDatePickerVisibility(true);


const hideDatePicker = () => setDatePickerVisibility(false);

const handleDateConfirm = (selectedDate: Date) => {


const year = selectedDate.getFullYear();
const month = selectedDate.getMonth() + 1;
const day = selectedDate.getDate();
const dateStr = `${month}/${day}/${year}`;
setQuizDate(selectedDate);
setQuizDateDisplay(dateStr);
hideDatePicker();
};

const showTimePicker = () => setTimePickerVisibility(true);


const hideTimePicker = () => setTimePickerVisibility(false);

const handleTimeConfirm = (time: Date) => {


// Format the selected time to a user-friendly string
const hours = time.getHours();
const minutes = time.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM';
const twelveHour = hours >12 ? hours - 12 : hours === 0 ? 12 : hours;
const formattedTime = `${twelveHour}:${minutes < 10 ? '0' + minutes : minutes}
${ampm}`;
setQuizTime(time);
setQuizTimeDisplay(formattedTime);
hideTimePicker();
};

24
const addQuestion = () => {
setQuestions([
...questions,
{ question: '', options: ['', '', '', ''], correctOption: 0 },
]);
};

const handleCreateQuiz = () => {


// Validate required fields
if (
!quizTitle ||
!quizDescription ||
!quizTime ||
!quizDate ||
!quizDuration
){
Alert.alert('Error', 'Please fill in all the fields.');
return;
}

// Ensure quizzes is an array


const updatedQuizzes = Array.isArray(quizzes) ? [...quizzes] : [];

const newQuiz: Quiz = {


title: quizTitle,
description: quizDescription,
time: quizTime.toISOString(), // Convert to ISO string
date: quizDate.toISOString(),
duration: quizDuration,
questions,
};

setQuizzes([...updatedQuizzes, newQuiz]); // Add the new quiz to the global state


console.log('Quiz added to global state:', newQuiz);
Alert.alert('Success', 'Quiz created successfully!');
router.back(); // Navigate back to the dashboard or another screen
};

return (
<ScrollView className="flex-1 bg-gray-100 p-4">
{/* Title Input */}
<Text className="text-xl font-semibold text-gray-800 mb-2">Quiz Title</Text>
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"

25
placeholder="Enter quiz title"
value={quizTitle}
onChangeText={setQuizTitle}
/>

{/* Description Input */}


<Text className="text-xl font-semibold text-gray-800 mb-2">Quiz
Description</Text>
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"
placeholder="Enter quiz description"
value={quizDescription}
onChangeText={setQuizDescription}
/>

{/* Quiz Date */}


<Text className="text-xl font-semibold text-gray-800 mb-2">Quiz Date</Text>
<View className="flex-1 pr-1">
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"
placeholder="Select Quiz Date"
value={quizDateDisplay || ''}
editable={false}
/>
<TouchableOpacity
onPress={showDatePicker}
className="mb-2 pl-2"
style={{ position: 'absolute', right: 13, top: 20 }}
>
<Ionicons name="chevron-down-sharp" size={24} color="#3464fc" />
</TouchableOpacity>
</View>

{/* Time Picker */}


<Text className="text-xl font-semibold text-gray-800 mb-2">Quiz Time</Text>
<View className="flex-1 pr-1">
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"
placeholder="Select Start Time"
value={quizTimeDisplay || ''}
editable={false}
/>
<TouchableOpacity
onPress={showTimePicker}

26
className="mb-2 pl-2"
style={{ position: 'absolute', right: 13, top: 20 }}
>
<Ionicons name="chevron-down-sharp" size={24} color="#3464fc" />
</TouchableOpacity>
</View>

{/* Duration Input */}


<Text className="text-xl font-semibold text-gray-800 mb-2">Quiz Duration (in
minutes)</Text>
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"
placeholder="Enter duration in minutes"
value={quizDuration}
onChangeText={setQuizDuration}
keyboardType="numeric"
/>

{/* Questions Section */}


<Text className="text-xl font-semibold text-gray-800 mb-4">Questions</Text>
{questions.map((q, index) => (
<View key={index} className="bg-white rounded-lg p-4 mb-4 shadow-md">
<Text className="text-gray-800 mb-2">Question {index + 1}</Text>
<TextInput
className="w-full h-12 p-3 mb-4 border border-gray-300 rounded-lg"
placeholder="Enter question"
value={q.question}
onChangeText={(text) =>
setQuestions(
questions.map((item, i) =>
i === index ?{ ...item, question: text } : item
)
)
}
/>
{q.options.map((option, optIndex) => (
<TextInput
key={optIndex}
className="w-full h-12 p-3 mb-2 border border-gray-300 rounded-lg"
placeholder={`Option ${optIndex + 1}`}
value={option}
onChangeText={(text) =>
setQuestions(
questions.map((item, i) =>

27
i === index
?{
...item,
options: item.options.map((opt, oIndex) =>
oIndex === optIndex ? text : opt
),
}
: item
)
)
}
/>
))}
<TextInput
className="w-full h-12 p-3 mb-2 border border-gray-300 rounded-lg"
placeholder="Correct Option (1-4)"
value={q.correctOption > 0 ? (q.correctOption + 1).toString() : ''}
onChangeText={(text) =>
setQuestions(
questions.map((item, i) =>
i === index
?{
...item,
correctOption: text ? parseInt(text) - 1 : 0,
}
: item
)
)
}
keyboardType="numeric"
/>
</View>
))}

{/* Add Question Button */}


<TouchableOpacity
className="w-full h-12 bg-[#3B82F6] rounded-lg justify-center items-center
mb-4"
onPress={addQuestion}
>
<Text className="text-white text-lg font-semibold">Add Question</Text>
</TouchableOpacity>

{/* Create Quiz Button */}

28
<TouchableOpacity
className="w-full h-12 bg-[#14B8A6] rounded-lg justify-center items-center"
onPress={handleCreateQuiz}
>
<Text className="text-white text-lg font-semibold">Create Quiz</Text>
</TouchableOpacity>
<View className="h-12"></View>

{/* Date Picker Modal */}


<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleDateConfirm}
onCancel={hideDatePicker}
/>

{/* Time Picker Modal */}


<DateTimePickerModal
isVisible={isTimePickerVisible}
mode="time"
onConfirm={handleTimeConfirm}
onCancel={hideTimePicker}
is24Hour={false}
/>
</ScrollView>
);
};

export default CreateQuiz;

Taking the Quiz:


import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { useRouter, useLocalSearchParams } from 'expo-router';

const TestScreen = () => {


const router = useRouter();
const params = useLocalSearchParams();
const { title, questions } = params as { [key: string]: any };

const [currentQuestions, setCurrentQuestions] = useState<{ question: string; options:


string[] }[]>([]);
const [currentIndex, setCurrentIndex] = useState(0);

29
const [answers, setAnswers] = useState<{ [key: number]: number }>({});
const [skippedQuestions, setSkippedQuestions] = useState<number[]>([]);

useEffect(() => {
if (questions) {
try {
const parsedQuestions = typeof questions === 'string' ?
JSON.parse(JSON.parse(questions)) : questions;

if (Array.isArray(parsedQuestions)) {
setCurrentQuestions(parsedQuestions);
} else {
console.error('Parsed questions is not an array:', parsedQuestions);
}
} catch (error) {
console.error('Error parsing questions:', error);
}
}
}, [questions]);

const handleAnswer = (index: number, answer: number) => {


setAnswers(prev => ({ ...prev, [index]: answer }));
};

const skipQuestion = () => {


setSkippedQuestions(prev => [...prev, currentIndex]);
setCurrentIndex(prev => prev + 1);
};

const handleNavigation = (index: number) => {


setCurrentIndex(index);
};

const handleSubmit = () => {


router.replace(
`/test/ResultScreen?test=${encodeURIComponent(JSON.stringify({ questions:
currentQuestions }))}&answers=${encodeURIComponent(JSON.stringify(answers))}`
);
};

if (currentQuestions.length === 0) {
return (
<View className="flex-1 justify-center items-center bg-gray-100">

30
<Text className="text-lg font-medium text-gray-700">Loading...</Text>
</View>
);
}

const isLastQuestion = currentIndex === currentQuestions.length - 1;


const currentQuestion: { question: string; options: string[] } =
currentQuestions[currentIndex];

return (
<View className="p-4 bg-gray-100">
<Text className="text-2xl font-bold text-blue-700 text-center mb-4">{title}</Text>
<ScrollView
horizontal
className="flex-row mb-4 px-2"
showsHorizontalScrollIndicator={false}
>
{currentQuestions.map((_, index) => (
<TouchableOpacity
key={index}
className={`items-center justify-center p-3 w-14 h-14 mx-2 rounded-full ${
index === currentIndex ? 'bg-blue-500' : 'bg-gray-300'
}`}
onPress={() => handleNavigation(index)}
>
<Text
className={`text-xl ${
index === currentIndex ? 'text-white' : 'text-gray-700'
}`}
>
{index + 1}
</Text>
</TouchableOpacity>
))}
</ScrollView>
<View className='h-1 w-full bg-gray-300 mb-3'></View>
<Text className="text-2xl text-black mb-4 text-
center">{currentQuestion.question}</Text>
{currentQuestion.options.map((option, i) => (
<TouchableOpacity
key={i}
className={`p-4 rounded-lg my-2 ${
answers[currentIndex] === i ? 'bg-blue-500' : 'bg-gray-300'
}`}

31
onPress={() => handleAnswer(currentIndex, i)}
>
<Text
className={`text-lg ${
answers[currentIndex] === i ? 'text-white' : 'text-gray-700'
}`}
>
{option}
</Text>
</TouchableOpacity>
))}
<View className="flex-row justify-between mt-6">
<TouchableOpacity
className={`px-6 py-3 rounded-lg ${
currentIndex === 0 ? 'bg-gray-400' : 'bg-blue-500'
}`}
onPress={() => setCurrentIndex(prev => Math.max(0, prev - 1))}
disabled={currentIndex === 0}
>
<Text className="text-white text-base font-semibold">Prev</Text>
</TouchableOpacity>
<TouchableOpacity
className="px-6 py-3 rounded-lg"
onPress={skipQuestion}
>
<Text className="text-blue-500 text-base font-semibold">Skip</Text>
</TouchableOpacity>
<TouchableOpacity
className="px-6 py-3 bg-blue-500 rounded-lg"
onPress={() => (isLastQuestion ? handleSubmit() : setCurrentIndex(prev => prev
+ 1))}
>
<Text className="text-white text-base font-semibold">
{isLastQuestion ? 'Submit' : 'Next'}
</Text>
</TouchableOpacity>
</View>
</View>
);
};

export default TestScreen;

Result Screen:
32
import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useAtom } from 'jotai';
import { quizzesAtom } from '../Atom';

const ResultScreen = () => {


const router = useRouter();
const params = useLocalSearchParams();
const [quizzes, setQuizzes] = useAtom(quizzesAtom);

const test = params.test ? JSON.parse(params.test as string) : { questions: [] };


const answers = params.answers ? JSON.parse(params.answers as string) : [];

const correctAnswers = test.questions.reduce(


(count: number, q: any, index: number) => (q.correctOption === answers[index] ?
count + 1 : count),
0
);

const markTestAsCompleted = () => {


const updatedQuizzes = quizzes.map(quiz => {
if (quiz.title === test.title) {
return { ...quiz, completed: true };
}
return quiz;
});
setQuizzes(updatedQuizzes);
};

useEffect(() => {
markTestAsCompleted();
}, []);

return (
<View className="flex-1 items-center justify-center bg-white p-4 rounded-xl shadow-
white">
<Text className="text-4xl font-bold text-center mb-6">Test Results</Text>
<Text className="text-2xl text-center mb-6">
Score: {correctAnswers} / {test.questions.length}
</Text>
<View className="flex-row justify-center">
<Button title="Go Back Home" onPress={() => router.replace('/(tabs)/Quiz')} />
</View>

33
</View>
);
};

export default ResultScreen;

CHAPTER 7
TESTING
7.1 GENERAL
The purpose of testing is to discover errors. Testing is the process of trying to discover
every conceivable fault or weakness in a work product. It provides a way to check the
functionality of components, sub assemblies, assemblies and/or a finished product. It
is the process of exercising software with the intent of ensuring that the Software
system meets its requirements and user expectations and does not fail in an
unacceptable manner. There are various types of tests. Each test type addresses a
specific testing requirement.
Testing for a Multilevel Data Concealing Technique that integrates Steganography and
Visual Cryptography is crucial to ensure its functionality, security, and reliability. The

34
testing process involves several stages, including unit testing, integration testing, and
security testing

7.2 TYPES OF TESTING

Fig 7.1. Types of Testing

7.3 TEST CASES

Table 7.2. Test Cases

35
CHAPTER 8
RESULTS
8.1 RESULT SCREENSHOTS

36
Fig 8.1. Get Started Screen Fig 8.2. Sign-In Page

37
Fig 8.3. Home Page Fig 8.4. Create Quiz

Fig 8.5. Quiz Created Message Fig 8.6. Quiz


38
Fig 8.7. Quiz Description Fig 8.8. Quiz Screen

Fig 8.9. Result

39
CHAPTER 9
FUTURE SCOPE
The TechIQ application is a dynamic and scalable platform designed to cater to the
needs of students, faculty, and administrators. While the current version includes a
range of core features, there are several potential enhancements and expansions that
could further improve its functionality and user experience. The following points
outline the future scope of the TechIQ project:
9.1 Feature Enhancements
1. AI-Driven Question Recommendations:
o Integrate AI algorithms to recommend questions to students based on
their past performance, strengths, and areas of improvement.
o Use machine learning models to analyze quiz results and suggest
personalized learning paths.
2. Offline Mode:
o Enable users to access quizzes and view results without an active
internet connection.
o Use local storage to save data temporarily and sync it with the server
when the device is back online.
3. Gamification:
o Introduce features like badges, rewards, and levels to make the app
more engaging and motivate users to participate actively.
o Implement streak systems for continuous quiz participation.
4. Advanced Reporting and Analytics:
o Provide in-depth analytics for faculty and administrators, such as
heatmaps of student performance, difficulty levels of questions, and
success rates.
o Allow students to view detailed progress reports with visual charts and
insights.
5. Interactive Video Quizzes:
o Add support for video-based questions where students can watch a
video and answer related questions.
o Useful for visual learning and interactive testing.

40
9.2 System Integration
1. Integration with Learning Management Systems (LMS):
o Seamlessly integrate TechIQ with popular LMS platforms like Moodle,
Blackboard, or Google Classroom to import/export quizzes and share
results.
o Sync with LMS calendars for scheduling quizzes and assignments.
2. Third-Party App Integrations:
o Enable integration with productivity tools like Google Calendar,
Microsoft Teams, and Slack for notifications and reminders.
o Support for social media sharing of achievements.
9.3 Scalability
1. Support for Large-Scale Events:
o Expand the platform to support national or international level quizzes
and competitions.
o Implement robust server architecture to handle high traffic during peak
times.
2. Multi-Language Support:
o Add support for multiple languages to make the app accessible to a
global audience.
o Include options for localized quizzes tailored to specific regions or
education systems.
3. Adaptive Load Balancing:
o Ensure the app remains stable under high user loads by implementing
adaptive load balancing and server clustering.
9.4 Emerging Technologies
1. Blockchain for Secure Results:
o Use blockchain technology to securely store quiz results and maintain
a tamper-proof record of student achievements.
2. Augmented Reality (AR) and Virtual Reality (VR):
o Introduce AR/VR-based interactive quizzes for an immersive learning
and testing experience.
o Create virtual classrooms for collaborative quizzes.

41
3. Voice Recognition and AI Chatbots:
o Enable voice-based quizzes where users can answer questions by
speaking.
o Integrate AI chatbots to assist users with quiz-related queries or
provide hints during practice sessions.
9.5 Expanding User Base
1. Corporate Training:
o Extend the app’s features to include corporate training and employee
assessments.
o Add features like skill development tracking and certification issuance.
2. Customizable Packages for Institutions:
o Provide subscription-based models for schools, colleges, and coaching
centers with customized features.
o Allow institutions to brand the app with their own logo and themes.

42
CHAPTER 10
CONCLUSION
The TechIQ application was developed to address the growing need for an efficient
and user-friendly platform for quiz management, tailored to the distinct needs of
students, faculty, and administrators. Through the integration of cutting-edge
technologies like React Native, Firebase, and Jotai, the project successfully delivers
a comprehensive solution that bridges traditional methods with modern digital tools.
Achievements
1. Simplified Quiz Management: TechIQ offers an intuitive interface that
simplifies the creation, management, and evaluation of quizzes. Educators can
effortlessly design customized quizzes, students can participate in an engaging
environment, and administrators can oversee the process seamlessly.
2. Real-Time Functionality: Using Firebase for authentication and Firestore for
real-time data storage, the app ensures that users can access the latest updates
instantly. This functionality is especially beneficial for scenarios like live quiz
competitions or tracking results in real time.
3. Cross-Platform Compatibility: Developed using React Native, TechIQ
provides a consistent and responsive experience across both Android and iOS
devices, ensuring accessibility to a broad user base.
4. User-Centric Design: With features such as user progress tracking, profile
customization, and leaderboards, the app enhances engagement and motivates
users to actively participate in quizzes.
5. Scalability and Extensibility: The application is built on a modular and
scalable architecture, making it adaptable for future enhancements, including
new features like AI-driven insights and integration with third-party systems.
Limitations
While TechIQ meets its initial objectives effectively, certain limitations exist:
1. Internet Dependency: Most features rely on a stable internet connection,
making offline accessibility a critical area for future development.
2. Analytics Depth: Though the app provides basic performance analytics,
advanced data visualization and deeper insights are yet to be implemented.
3. Feature Expansion: Features such as gamification and adaptive learning are
in the planning phase but not yet realized in the current version.
43
Future Potential
The application has the potential to expand into domains beyond academia, such as
corporate training, certification programs, and professional assessments. Emerging
technologies like AI, blockchain, and AR/VR could further elevate the functionality
and user experience.
Final Thoughts
TechIQ represents a step forward in modernizing quiz management. Its
comprehensive feature set, ease of use, and real-time capabilities make it a valuable
tool for educational institutions and professional environments alike. By incorporating
user feedback and leveraging future technological advancements, TechIQ is well-
positioned to become a leading platform in digital education and assessment.
The journey of developing TechIQ highlights the transformative power of technology
in simplifying complex workflows and enhancing the learning experience. With
continuous development and innovation, TechIQ can adapt to the evolving needs of
its users, ensuring long-term impact and success.

44
CHAPTER – 11
REFERENCES

1. Pham, Xuan Lam; Nguyen, Thi Huyen; Chen, Gwo Dong


Factors that Impact Quiz Score: A Study with Participants in a Mobile
Learning App, 2017. Paper No: IEEE ICALT 2017.
2. Schön, Markus; Kopf, Stephan; Effelsberg, Wolfgang
A Lightweight Mobile Quiz Application with Support for Multimedia Content,
2012. Paper No: IEEE ICALT 2012.
3. Wang, Alf Inge; Øfsdahl, Terje; Mørch-Storstein, Ole Kristian
An Evaluation of a Mobile Game Concept for Lectures, 2007. Paper No: IEEE
CSEE&T 2007.
4. Kim, Heejin; Choi, Byoungju; Wong, W. Eric
Performance Testing of Mobile Applications at the Unit Test Level, 2009.
Paper No: IEEE SSIRI 2009.
5. Wu, Bian; Wang, Alf Inge; Børresen, Erling Andreas; Tidemann, Knut
Andre
Improvement of a Lecture Game Concept - Implementing Lecture Quiz 2.0,
2012. Paper No: CSEDU 2012.
6. Wang, Alf Inge; Tahir, Rabail
The Effect of Using Kahoot! for Learning – A Literature Review, 2020. Paper
No: Computers & Education 149.
7. Underdal, Anlaug Gårdsrud; Sunde, Marthe Thorine
Investigating QoE in a Cloud-Based Classroom Response System, 2014.
Master's Thesis, NTNU.
8. Wang, Alf Inge; Zhu, Meng; Sætre, Rune
The Effect of Digitizing and Gamifying Quizzing in Classrooms, 2016. Paper
No: ECGBL 2016.
9. Al-Said, Khaleel M.
Mobile Quiz Application in Egypt, 2013. Paper No: Not specified.
10. Schön, Markus; Kopf, Stephan; Effelsberg, Wolfgang
A Lightweight Mobile Quiz Application with Support for Multimedia Content,
2012. Paper No: IEEE ICALT 2012.

45
11. Suryaningtyas, T.; Widyawan; Santosa, P. I.
Offline Web Application and Quiz Synchronization for E-Learning, 2014.
Paper No: Not specified.
12. Singh, Sartajvir
Advanced Quiz Application, 2021. Paper No: Not specified.
13. Kurniawan, F.; Nugroho, L. E.; Santosa, P. I.
A User-Friendly Voting and Quiz System for Classroom Use with Connected
Devices, 2013. Paper No: Not specified.
14. Siregar, N. H.; Santosa, P. I.; Widyawan
Systematic Literature Review on Augmented Reality with Persuasive
Technology for Education, 2020. Paper No: Not specified.
15. Al-Emran, Mostafa; Malik, Saqib I.; Al-Kabi, Mohammed N.
A Survey of Internet of Things (IoT) in Education: Opportunities and
Challenges, 2020. Paper No: Not specified.
16. Bacca, Jorge; Baldiris, Silvia; Fabregat, Ramon; Graf, Sabine; Kinshuk
Augmented Reality Trends in Education: A Systematic Review of Research and
Applications, 2014. Paper No: Not specified.

46

You might also like