Annexure – I

Micro-Project Proposal
Academic Year:2024-2025
Title of Micro-Project: Simple Quiz App Using JavaScript
Course: Client Side Scripting Language
Course Code:22519 Program:CM5I-A Semester:5th

1.0 Aim/Benefits of the Micro-Project:-

Aims: 1.Learning JavaScript Fundamentals: Developing a quiz app involves working with
JavaScript to handle user interactions, dynamically update the UI, and manage the quiz logic.
It's a great way to reinforce your understanding of basic JavaScript concepts like variables,
functions, loops, and conditionals.

2. Applying HTML and CSS Skills: You'll practice structuring your app's user interface using
HTML and styling it with CSS. This project allows you to enhance your skills in creating
responsive and visually appealing web designs.

3. Understanding DOM Manipulation: Manipulating the Document Object Model (DOM) is a

core skill in web development. A quiz app provides hands-on experience in modifying the
DOM based on user input and displaying different elements dynamically.

4. Working with Events: You'll learn how to handle various events like button clicks, user input,
and timers. This is important for creating interactive web applications.

5. Implementing Quiz Logic: Developing the logic for displaying questions, checking answers,
calculating scores, and transitioning between questions can help you grasp the concept of state
management and program flow.

Benefits: 1.Practical Application of Concepts: The project lets you apply the theoretical
knowledge you've gained in JavaScript, HTML, and CSS to a real-world scenario.

2. Problem-Solving: You'll encounter challenges while building the app, such as handling user
inputs, displaying results, and managing transitions.

3. Customization and Creativity:This encourages creativity and design thinking.

4. Team Collaboration: If you're working with others, this project offers insights into
collaborating on a small-scale project, including version control, task allocation, and
communication.

2.0 Course Outcomes Addressed

Co. No. Course Outcome Statement

CI505.1 Use3 different program flow control structure for design interactive web pages .
CI505.2 Exceute3 programs on Arrays and functions in Java script.

CI505.3 Implement3 event based web forms and handling cookies using Java script.

CI505.4 Apply3 regular expressions for validations to design interactive webpages.

CI505.5 Implement3 Menus and navigations in web Pages.

 3.0 Proposed Methodology:

1. Planning and Design: We will start by outlining the project's goals and designing the user interface.
This includes sketching the layout of questions, answer choices, and the result display.

2. Styling the UI: Using CSS, we'll style the app according to our design. We'll ensure the interface
looks appealing on various devices by applying responsive design principles.

3. Creating Question Data: We will prepare an array of objects containing quiz questions, correct
answers, and options. This data will serve as the foundation for the quiz.

4. Implementing Quiz Logic: Using JavaScript, we'll dynamically load questions onto the UI from the
data array. We'll create logic to display answer options, check user responses, and calculate the score.

5. User Interaction: We'll set up event listeners to capture user interactions, like clicking answer buttons.
JavaScript functions will manage user responses and update the UI accordingly.

6. Displaying Results: Designing a results screen is our next step. Here, users will see their score and
feedback based on their answers. We'll incorporate logic to calculate and show the final score.

7. Testing and Debugging: Thorough testing on different devices and browsers will help us identify and
fix any issues. Our goal is to ensure smooth functionality and a consistent user experience.

8. Project Completion: With these steps completed, we will have successfully developed the Simple
Quiz App using JavaScript, HTML, and CSS. This hands-on experience will boost our web
development skills and project portfolio.

4.0 Action Plan

Sr. Planned Planned Name of Team

Details of activity
No. Start date Finish date Members

1. Formation of Group & Selection of Topic 15-7-2024 18-07-24 All members

2. Submission of Proposed Plan 19-07-24 28-07-24 All members

Project Definition and Design Structure,

3. 29-07-24 8-8-24 All members
Design Algorithm, Design Flowchart

4. Coding of Project and Testing of Program 9-8-24 3-9-24 All members

5. Demonstration of project 4-9-24 2-10-24 All members

6. Submission of Final Report 3-10-24 28-10-24 All members

5.0 Resources Required
Sr.
Name of Resource/material Specifications Quantity Remarks
No.
Hp Laptop
1. Computer System with broad specifications
8GB RAM

2. Operating System WINDOWS 10

1
3. Software Office, VScode

4. Keyboard HP

5. Mouse HP

Names of Team Members with Roll Nos:

Roll.
Sr. No. Name of Team Members Enrollment No.
No.

1. 24 Pathan Kamran Amjad 2200800140

2. 28 Raut Shreyas Ashok 2200800143

3. 37 Kotkar Omkar Santosh 2200800183

Subject Teacher
(Ms.Wakchaure S.L)