Mahavir Polytechnic, Nashik

(Year: 2024-2025)
Micro Project

Program: INFORMATION TECHNOLOGY (IT).

Semester: IF-5I (Fifth Semester).
Course: Client Side Scripting (CSS)
Course code: 22519
Title of the Project: ONLINE QUIZ GAME.

Members of the Group

1. AMIT ANIL MORADE Enrollment No.2205300165

1
 Mahavir Polytechnic

Vision
We strive to educate students to become industry ready engineers having professional attitude and
groomed personality.

Mission
M1. To provide well defined system toensure quality education by strengthening teaching
learningprocesses through innovative practices

M2. To provide a platform where students are exposed to the industry, up bridged with the
industrystandards and requirements.

M3. To train students by teaching them leadership and teamwork skills.

M4. To groom students enriching their personality and social values

IT Department

Vision
IT Department strives toeducate students to become Industry ready Engineers having Professional
attitude and groomed personality.

Mission
M1. To provides welldefined system to ensure quality education by strengthening teaching learning
processes through innovative practices.
M2. Toprovides a platform where students are exposed to the Industry, up bridged with the industry
standards and requirements.
M3. To train students by teaching them leadership and teamwork skills.
M4. To groom students enriching their personality and social values.

2
 Part A

ONLINE QUIZ GAME.

1.0 Brief Introduction

This microproject centers around the development of an online quiz game designed to test users' knowledge of
CSS concepts. The game is created using a combination of HTML for structure, CSS for styling, and JavaScript for
functionality. It includes multiple-choice questions where users can select their answers and submit them to see
their scores.
The interface is responsive and user-friendly, making it accessible across different devices. The project
emphasizes key web development practices, such as organizing content with HTML, enhancing visual appeal with
CSS, and adding interactivity with JavaScript. By completing this microproject, you'll gain practical experience in
creating dynamic web applications and reinforcing your understanding of CSS.

2.0 Aim/Benefit of the Micro-Project

• Aim of the Project:

• Strengthen CSS skills by applying them in a practical project.
• Practice web development using HTML, CSS, and JavaScript.
• Create a simple quiz game to help users learn and test their CSS knowledge.
• Enhance problem-solving abilities by making the quiz functional and user-friendly.
• Learn about responsive design, ensuring the website looks good and works well on all devices.
• Gain experience in planning, coding, and refining a small web development project.

• Benefits of the Project:

• Improved CSS knowledge by applying it in a real project.
• Hands-on web development experience with HTML, CSS, and JavaScript.
• Practical problem-solving through the creation of a functional quiz.
• Experience with responsive design for better accessibility across devices.
• Portfolio enhancement by adding a tangible example of your skills.
• Enhanced JavaScript skills by implementing interactivity and functionality.
• Increased attention to detail in layout, design, and user experience.

3.0 Course Outcomes Addressed.

• Applying CSS concepts in a real project.

• Gaining practical skills in HTML, CSS, and JavaScript.
• Creating interactive features with JavaScript.
• Designing a website that works on different devices.
• Solving problems encountered during development.
3
 • Managing and completing a web development project.
• Enhancing JavaScript skills by adding interactivity.
• Paying attention to detail in layout and user experience.

4.0 Proposed Methodology

• Requirements Analysis: Identify and define the key features and functionality needed for the quiz game,
such as questions, answer options, and score calculation.
• Design: Develop the layout and user interface for the quiz using HTML and CSS, ensuring it’s intuitive and
visually appealing.
• Implementation: Write JavaScript code to handle quiz interactions, including answer selection, score
calculation, and result display.
• Testing: Thoroughly test the quiz game to ensure all features work correctly and fix any issues that arise.
• Deployment: Publish the final quiz game online, making sure it functions well on various devices and
browsers.
• Documentation: Create documentation to explain how to use the quiz and details about the code
structure for future reference.

4
 Progress Report / Weekly Report

Week Duration Sign of the

Date Work / Activity Performed
No in Hrs. Faculty

1 Selection topic

2 Finalizing topic

3 Information search

4 Making report

5 Project submission

5.0 Resources Required

S. No. Name of Resource/material Specifications Qty. Remarks

1 Ram 8GB 1

2 Hard disk 512GB 1

3 Processor I7 1

4 Operating system Windows 10pro 1

Sign of Course Teacher

5
 MICROPROJECT REPORT

ONLINE QUIZ GAME

1.0 Rationale

The rationale for the online quiz game microproject is to apply web development skills with HTML, CSS, and
JavaScript. Building an interactive quiz helps you learn these technologies better and creates a fun tool for users
to test their knowledge.
The project improves problem-solving skills by dealing with user input and score calculation challenges. It also
focuses on creating an easy-to-use interface, making the quiz accessible and intuitive.
Completing the project adds a practical example to your portfolio and gives you experience in managing a project
from start to finish, which is useful for future development work.

2.0 Aim/Benefits of the Micro – Project

• Develop an engaging quiz game with interactive features.

• Apply HTML for structure, CSS for design, and JavaScript for functionality.
• Improve problem-solving skills by handling user inputs and score calculations.
• Focus on creating a user-friendly and responsive interface.
• Gain experience in managing a project from start to finish.
• Enhance your portfolio with a practical example of your web development skills.
• Build a solid foundation for tackling more complex web development tasks.

COs addressed by the Micro Project:

Applying HTML, CSS, and JavaScript to build a web application.

CO 1 :
CO 2 : Handling challenges like user interactions and score calculation.

CO 3 : Gaining experience in planning and completing a web development project.

CO 4 : Laying the groundwork for more complex web development projects.

6
3.0 Literature Review

• Interactive Web Applications: Interactive features, like quizzes, enhance user engagement and learning
by providing immediate feedback.
• HTML, CSS, and JavaScript: HTML structures, CSS styles, and JavaScript adds interactivity to create
functional web applications.
• User Interface (UI) Design: Clear and simple UI design ensures easy navigation and usability for quiz users.
• Educational Games and Quizzes: Effective quizzes reinforce knowledge and assess learning through well-
designed questions and feedback.
• Web Development Best Practices: Following coding standards and debugging guidelines ensures the quiz
game runs smoothly and is maintainable.

4.0 Actual Methodology

• Decide what features the quiz game needs.

• Plan how the quiz will look and work.
• Build the quiz with HTML, CSS, and JavaScript.
• Test the quiz to make sure it works on all devices.
• Publish the quiz online.
• Write instructions on how to use it and explain the code.

7
5.0 Actual Resources Used

S. No. Name of Resource/material Specifications Qty. Remarks

1 Ram 8GB 1

2 Hard disk 512GB 1

3 Processor I7 1

Operating system Windows 10pro

4 1

8
 6.0 Outputs of the Micro-Projects
INTRODUCTION

Today ,Online quiz System is considered a fast Developing quiz method because of its accuracy and Speed. It is
also needed less manpower to handle the examination. Almost all organizations today, are managing their exams
by online Quiz system, since it reduces student’s time in examinations. Organizations can also easily monitor the
progress of the student That they give through an quiz.
As a result of this, the result Is calculated in less time. It also helps diminishing the need for Paper. Online quiz
project in PHP is very useful to learn It, According to today’s requirement Online quiz system Is significantly
important to the educational institution to prepare The exams, saving the time and effort that is required to
check the Exam papers and to prepare the results reports.
Online Examination system helps the educational institutions to monitor Their students and keep eyes on their
progress. The best use of this System in Scholastic Institute and training center because it helps In managing the
exams and get the results in easy and an efficient Help Manner. Until today the preparing for exams and
preparing the Results was performed manually, this required more time to Complete.

➢ Function of Online Quiz Game (OQG).

• Submit Button: This button calculates your quiz score by checking if your answers are correct.
• View Result Button: After submitting, this button allows you to view your final score.

➢ Advantages

• Interactive Learning: Engages users in a fun, hands-on way to test and improve their CSS knowledge.
• Simple Implementation: Uses basic HTML, CSS, and JavaScript, making it easy to build and maintain.
• Real-Time Feedback: Provides immediate scoring, allowing users to know their performance instantly.
• Responsive Design: The layout adjusts to different screen sizes, offering a smooth user experience.
• Customizable: Questions and styles can be easily updated or expanded for different topics or audiences.
• Minimal Resources: Requires no external libraries or frameworks, keeping the project lightweight and fast-
loading.

➢ Disadvantages

• Limited Functionality: The quiz is basic and doesn't offer advanced features like time limits or question
randomization.
• No Answer Review: Users cannot see which questions they got wrong or review correct answers after
submission.
• Static Content: The quiz content is hardcoded, making it difficult to add dynamic or randomized questions
without modifying the code.
• Single Attempt: Users can only submit the quiz once, with no option to retake or reset it without refreshing
the page.
• No Data Persistence: The scores aren't stored, so users can't track progress over multiple attempts.
9
Input Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.quiz-container {
background-color: #fff;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #007BFF;
}

.question {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 10px;
}

input[type="radio"] {
margin-right: 10px;
}

#submit-button, #result-button {
display: block;
10
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
cursor: pointer;
}

#result {
display: none;
text-align: center;
margin-top: 20px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>CSS Quiz</h1>
<div class="question">
<h2>Question 1:</h2>
<p>What does CSS stand for?</p>
<label>
<input type="radio" name="q1" value="a"> Cascading Style Sheet
</label>
<label>
<input type="radio" name="q1" value="b"> Computer Style Sheet
</label>
<label>
<input type="radio" name="q1" value="c"> Creative Style Sheet
</label>
</div>

<div class="question">
<h2>Question 2:</h2>
<p>Which CSS property is used to change the background color of an element?</p>
<label>
<input type="radio" name="q2" value="a"> color
</label>
<label>
<input type="radio" name="q2" value="b"> background-color
</label>
11
<label>
<input type="radio" name="q2" value="c"> font-family
</label>
</div>

<div class="question">
<h2>Question 3:</h2>
<p>Which CSS property is used to set the text color of an element?</p>
<label>
<input type="radio" name="q3" value="a"> background-color
</label>
<label>
<input type="radio" name="q3" value="b"> color
</label>
<label>
<input type="radio" name="q3" value="c"> text-color
</label>
</div>

<div class="question">
<h2>Question 4:</h2>
<p>Which CSS property is used to control the space between lines of text?</p>
<label>
<input type="radio" name="q4" value="a"> line-height
</label>
<label>
<input type="radio" name="q4" value="b"> spacing
</label>
<label>
<input type="radio" name="q4" value="c"> text-spacing
</label>
</div>

<div class="question">
<h2>Question 5:</h2>
<p>Which CSS property is used to make the text bold?</p>
<label>
<input type="radio" name="q5" value="a"> font-style
</label>
<label>
<input type="radio" name="q5" value="b"> font-weight
</label>
<label>
12
<input type="radio" name="q5" value="c"> text-decoration
</label>
</div>

<button id="submit-button">Submit</button>
<button id="result-button" style="display:none;">View Result</button>
<div id="result"></div>
</div>

<script>
document.getElementById('submit-button').addEventListener('click', function () {
// Calculate score
let score = 0;
if (document.querySelector('input[name="q1"]:checked')?.value === 'a') {
score++;
}
if (document.querySelector('input[name="q2"]:checked')?.value === 'b') {
score++;
}
if (document.querySelector('input[name="q3"]:checked')?.value === 'b') {
score++;
}
if (document.querySelector('input[name="q4"]:checked')?.value === 'a') {
score++;
}
if (document.querySelector('input[name="q5"]:checked')?.value === 'b') {
score++;
}

// Store the score in the result div

document.getElementById('result').innerText = 'Your score is ' + score + ' out of 5';

// Show the result button

document.getElementById('result-button').style.display = 'block';
});

document.getElementById('result-button').addEventListener('click', function () {
// Display the result div
document.getElementById('result').style.display = 'block';
});
</script>
</body>
</html>

13
OUTPUT :
 CONCLUSION

The CSS Quiz microproject serves as a practical tool for reinforcing and testing fundamental CSS knowledge
through an interactive and user-friendly interface. It is effective in providing immediate feedback and engaging
users in a straightforward manner. However, its simplicity also means limited functionality and lack of advanced
features, which could be improved for a more comprehensive learning experience. Overall, it’s a valuable
educational exercise that highlights basic web development skills and can be a good foundation for more
complex projects.

REFERENCE

• https://www.w3schools.com/Css/
• https://www.geeksforgeeks.org/css-tutorial/
• https://www.programiz.com/css
• https://www.coursera.org/courses?query=css
7.0 Skill Developed / Learning outcome of this Micro-Project

1. Teamwork
2. learn to test applications using test cases.
3. Able to get information about Applications.

8.0 Applications of this Micro-Project

• Educational Tools: Use it as a learning resource in web development courses to help students test their
CSS knowledge.
• Skill Assessment: Implement it as a quick assessment tool for evaluating understanding of CSS concepts in
online or offline quizzes.
• Interactive Demos: Incorporate it into portfolios or presentations to demonstrate basic web development
skills and create engaging content.
• Training Exercises: Utilize it in workshops or training sessions to provide hands-on practice with CSS and
JavaScript.
• Engagement Activities: Integrate it into websites or blogs to engage visitors with interactive content that
reinforces CSS knowledge.
 Teacher Evaluation Sheet for Micro Project
Rubrics for Assessment of Micro-Project
Poor Average Good Excellent
Characteristic to be
Sr. No (Marks 4-5) (Marks 6-8)
Assessed
(Marks 1-3) (Marks 9- 10)

1. Relevance to course
2. Literature survey
3. Project proposal
4. Completion of target
Analysis &
5.
representation of data
Quality of
6.
Prototype/Model
7. Report preparation
8. Presentation
9. Defense

Marks:-

Marks obtained
Marks for Total
by the
Roll No. Name Of Student Group Work individual based Marks
(06) on viva (04) (10)

31 AMIT MORADE

Name and designation of Faculty Member

Signature:
 Maharashtra State Board of Technical Education, Mumbai
CERTIFICATE
This is to certify that Mr. AMIT ANIL MORADE . Roll No.31. of 5th Semester of Diploma

in INFORMATION TECHNOLOGY of Mahavir Polytechnic has completed the Micro

Project satisfactorily in course CLIENT SIDE SCRIPTING (22519) for the academic year

2024-2025 as prescribed in the curriculum.

Place. Nashik Enrollment No .2205300165

Date Exam Seat No.

Mr.O.V.Khute Mrs.S.A.Pagare Dr.S.A.Sagare

(Course Coordinator) (HOD) (Principal)

Institute Seal