SEM V 2025-26
INDUSTRIAL PRACTICES
REPORT ON
TOPIC:-SIMPLE QUIZ APP
Presented By:
Roll No Name of Student
02 RACHIT PANDEY
10 PRATHAM SADAVARTI
29 SHIVRAG SHARMA
Simple Quiz App – Project Report
1. Abstract
The Simple Quiz App is an interactive web-based application designed to test the user’s
knowledge through multiple-choice questions. It provides a fun and engaging environment
for self-assessment, learning, and revision. The app’s main objective is to make education
more interactive and enjoyable while also helping users evaluate their performance in real-
time.
Developed using front-end technologies such as HTML, CSS, and JavaScript, the app runs
smoothly on any modern web browser without requiring installation. The quiz system
displays one question at a time, allows users to select their answers, and presents a final score
upon completion. The project emphasizes simple logic building, event handling, and user
interaction design.
This project demonstrates how basic programming skills can be applied to create a useful
learning tool that promotes active participation and critical thinking. It also serves as an
excellent beginner project to understand web development fundamentals.
2. Introduction
In today’s era of technology-driven education, digital tools play a crucial role in enhancing
learning experiences. Traditional methods of testing and evaluation are being replaced by
interactive applications that engage students and make learning more interesting. The Simple
Quiz App is one such initiative that allows users to test their knowledge on various subjects
through a digital quiz format.
The app offers a user-friendly interface where questions are presented sequentially, and the
user can select an answer from multiple options. The system evaluates responses, calculates
the total score, and provides feedback instantly.
The project aims to:
Develop a simple and efficient quiz platform.
Encourage self-learning and evaluation through interactive quizzes.
Demonstrate the use of web technologies in educational software development.
This project also helps developers gain a deeper understanding of how data flow, logic, and
user interfaces come together in a real-world application.
3. Background
The concept of quizzes has been an integral part of education and entertainment for decades.
With the advent of digital technology, quizzes have evolved from pen-and-paper formats to
web and mobile applications. Modern quiz apps such as Kahoot, Quizizz, and Google Forms
have revolutionized how students learn and participate in assessments.
The inspiration for this project came from these existing platforms, but the goal was to design
a simpler version that beginners could easily develop and understand. The Simple Quiz App
focuses on the fundamental mechanisms behind such systems — question display, user input,
answer checking, and score calculation.
By building this app, students can learn:
How to manipulate data structures like arrays and objects.
How to use functions and conditions to evaluate answers.
How to update web pages dynamically using JavaScript.
How styling and structure affect user experience.
This background research helped form the foundation for the design and implementation of
the app.
4. System Description
The Simple Quiz App is developed as a web application using front-end technologies only.
It does not require a server or database in its basic form but can easily be extended in the
future.
Technologies Used:
HTML: Defines the structure of the web page and quiz layout.
CSS: Provides visual styling, including fonts, colors, and layout design.
JavaScript: Implements quiz logic, score tracking, and dynamic interaction.
System Features:
1. Displays a list of predefined questions and multiple-choice options.
2. Allows the user to select one answer per question.
3. Provides immediate feedback and calculates the total score.
4. Displays the result and score percentage at the end of the quiz.
5. Offers a responsive design for desktop and mobile use.
System Workflow:
1. When the quiz starts, the app loads a set of questions stored in an array.
2. The user reads the first question and selects one answer.
3. The app compares the selected answer with the correct one.
4. After all questions are answered, the final score is shown along with a message like
“Well done!” or “Try again!”.
This simple architecture ensures quick performance and easy understanding for developers.
5. Results and Discussions
After successful development and testing, the Simple Quiz App was found to perform well on
different browsers such as Google Chrome, Edge, and Firefox. It provided accurate results,
smooth navigation between questions, and a clean interface that users found easy to
understand.
Observations:
The quiz loads quickly and requires minimal system resources.
The JavaScript functions correctly handle question flow and scoring.
The design is responsive, working well on both laptops and mobile devices.
The logic used is scalable — more questions can be added easily.
Limitations:
Currently, questions are static and stored in code, not in a database.
There is no timer or login system.
User progress is not saved once the page reloads.
Despite these limitations, the app fulfills its core purpose effectively and can serve as a
foundation for more advanced educational software.
6. Conclusion
The Simple Quiz App successfully demonstrates how web technologies can be used to build
an educational and engaging application. It meets the objectives of providing a lightweight
quiz system for self-assessment and learning.
This project enhanced understanding of programming logic, conditional statements, DOM
manipulation, and responsive design. It also encouraged creativity and problem-solving in
designing user-friendly interfaces.
Overall, the project provides a strong foundation for future developments in e-learning and
web-based interactive systems.
7. Future Scope
The Simple Quiz App can be expanded and improved in several ways:
Add a database to store questions, answers, and user results.
Implement user login to track scores and progress over time.
Add categories and difficulty levels to create topic-wise quizzes.
Include a timer for competitive quiz sessions.
Enable leaderboards for group learning and gamification.
Convert to a mobile app using React Native or Flutter.
With these upgrades, the Simple Quiz App can evolve into a complete online learning
platform suitable for schools, colleges, and organizations.
8. References
1. Mozilla Developer Network (MDN). “HTML, CSS, and JavaScript Documentation.”
[Link]
2. W3Schools. “Web Development Tutorials.” [Link]
3. GeeksforGeeks. “JavaScript Programming Articles.”
[Link]
4. Tutorialspoint. “Front-End Web Development.”
[Link]
5. FreeCodeCamp. “Learn JavaScript by Building Projects.”
[Link]
9. Code:
// [Link]
import './[Link]';
import NavBar from './components/NavBar/NavBar';
import QuizState from './context/QuizState';
import Home from './pages/Home/Home';
import {
Routes,
Route
} from "react-router-dom";
import About from './pages/About/About';
import ReviewAnswer from './pages/Review/ReviewAnswer';
function App() {
return (
<>
<QuizState>
<div className="App">
<NavBar />
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/review" element={<ReviewAnswer />} />
</Routes>
</div>
</QuizState>
</>
);
}
export default App;
//[Link]
/* Reset default margin and font family for the entire document */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #212832 !important;
color: white;
}
/* Define styles for code blocks */
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* Highlight for incorrect elements or responses */
.wrong {
background-color: #ee545338 !important;
border-color: #EE5453 !important;
}
/* Highlight for correct elements or responses */
.right {
background-color: #28ae6138 !important;
border-color: #28AE61 !important;
}
/* Additional styles for icons associated with correct responses */
.rightIcon {
background-color: #28AE61 !important;
}
/* Additional styles for icons associated with incorrect responses */
.wrongIcon {
background-color: #EE5453 !important;
}
/* Highlight for selected options */
.optionSelected {
background-color: #3d1f463d !important;
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
/* Add styles for small screens */
body {
font-size: 16px;
}
}
/* Typography styles for headings and paragraphs */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
p{
font-size: 16px;
line-height: 1.5;
}
/* Button styles with hover and active effects */
.button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #0056b3;
}
.button:active {
background-color: #003c80;
}
/* Link styles with smooth hover transitions */
a{
text-decoration: none;
color: #007bff;
transition: color 0.3s;
}
a:hover {
color: #0056b3;
}
/* Box shadows for elements */
.box {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Form styles for input fields and buttons */
input[type="text"],
input[type="email"] {
border: 1px solid #ccc;
padding: 5px;
}
input[type="submit"] {
background-color: #28ae61;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: #1f8d4d;
}
/* Smooth fading transition */
.transition-fade {
transition: opacity 0.3s ease-in-out;
}
.transition-fade:hover {
opacity: 0.8;
}
/* Custom styles for specific elements */
.custom-header {
font-size: 32px;
color: #333;
}
.custom-footer {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
color: #777;
}
10. Output