Scribd
Upload
34 views

CSS Report-1

The document describes a quiz application form project. It includes sections on collecting applicant details, address details, donation details, and submitting the form. It also provides code snippets for the HTML, CSS, and JavaScript used to build the interactive quiz application form.

Uploaded by

Pankaj Sangale
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
34 views

CSS Report-1

The document describes a quiz application form project. It includes sections on collecting applicant details, address details, donation details, and submitting the form. It also provides code snippets for the HTML, CSS, and JavaScript used to build the interactive quiz application form.

Uploaded by

Pankaj Sangale
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/ 14

Annexure-II

MICRO PROJECT REPORT

ON

“QUIZ APPLICATION FORM”

In the partial fulfillment of the requirement for the Diploma in

Computer Technology

Submitted By

Pankaj Ganesh Sangale


Om Navnath Dongre

Under Guidance of

GUIDE – Musale D.S.

Amrutvahini Sheti and Shikshan Vikas Sanstha’s

AMRUTVAHINI POLYTECHNIC,

SANGAMNER

1
Annexure-II

Amrutvahini Sheti and Shikshan Vikas Sanstha’s


AMRUTVAHINI POLYTECHNIC,
SANGAMNER
Department of Computer Technology

CERTIFICATE
This is to certify that

Pankaj Ganesh Sangale


Om Navnath Dongre
Has satisfactorily carried out and completed the Micro Project entitled,

“QUIZ APPLICATION FORM”


As prescribed by MSBTE, Mumbai, as part of syllabus for the
partial fulfilment of Diploma in Computer Technology in Client Side
Scripting Language(22519)
For the academic year 2022-2023

Prof – Musale.D.S Prof - Kale.G.B


(Guide) (H.O.D)

2
Annexure-II

Program Name – Computer


Technology Program Code –
CM5I (0080)
Course Name – CSS
Course Code –
22519

MICRO PROJECT TITLE

QUIZ APPLICATION FORM

Sr. No. Name of Student Exam Seat No.


Roll Enrollment
No. No.

1. Pankaj Ganesh Sangale 16 2100800196

2. Om Navnath Dongre 37 2100800246

Prof. Musale D.S.


(Faculty &
Signature)

3
Annexure-II

INDEX

Sr.no Name Page No

1 Rationale 5

2 Aim/Benefits 5

3 Course outcomes achieved 5

4 Literature Review 5

5 Actual methodology followed 5

6 Actual Resource Used 23

7 Skill Developed/Learning Outcome 24

8 Applications 25

4
Annexure-II

Micro Project Report


QUIZ APPLICATION FORM

1.0 Rationale:
The QUIZ Application form is a web application for Collect participant information for
communication and identification. Enable registration for accurate participant count.
Customize the quiz experience based on data. Ensure consent via terms and conditions.
Gather feedback for future improvements. Streamline data management for efficient
communication and analysis.
2.0 Aim:
Develop a Web application for QUIZ Application form using CSS/JS.

3.0 Course Outcomes Achieved:


1. Design interactive web pages using program flow control structure.

2. Implement Arrays and functions in java script.

3. Develop event based web forms using java script.

4. Use Java script for handling cookies.

5. Design interactive webpage using regular expressions for validations

6. Design Menus and navigations in web pages.

4.0 Literature Review:


A literature review for a quiz application form would involve examining existing research on topics
such as user experience design, data collection, registration processes, customization, legal
considerations, feedback mechanisms, data management, mobile compatibility, gamification, and
psychological factors. This review helps in understanding best practices and considerations for
designing an effective quiz application form.
5.0 Actual Methodology:
• Donor Applicants Details ():- This module is used for gathering the
user details of the donor.
• Donor Address Details ():- It deals with address details of the blood donor.
• Donation Details ():- In this module donation details are
collected accordingly.
• Submit (): - In this module user is able to submit the entered data.

5
Annexure-II

Coding :Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- Coding with nick -->
<title>Quiz App</title>
</head>
<body>

<div class="quiz-container" id="quiz">


<div class="quiz-header">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">Answer</label>
</li>

<li>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">Answer</label>
</li>

<li>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">Answer</label>
</li>

<li>
<input type="radio" name="answer" id="d" class="answer">
<label for="d" id="d_text">Answer</label>
</li>

</ul>
</div>

<button id="submit">Submit</button>

</div>

<script src="script.js"></script>

</body>
</html>

6
Annexure-II

Script.js

const quizData = [
{
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "javascript",
correct: "d",
},
{
question: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b",
},
{
question: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a",
},
{
question: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b",
},

];

const quiz= document.getElementById('quiz')


const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')

let currentQuiz = 0
let score = 0

loadQuiz()

function loadQuiz() {

7
Annexure-II

deselectAnswers()

const currentQuizData = quizData[currentQuiz]

questionEl.innerText = currentQuizData.question
a_text.innerText = currentQuizData.a
b_text.innerText = currentQuizData.b
c_text.innerText = currentQuizData.c
d_text.innerText = currentQuizData.d
}

function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
}

function getSelected() {
let answer
answerEls.forEach(answerEl => {
if(answerEl.checked) {
answer = answerEl.id
}
})
return answer
}

submitBtn.addEventListener('click', () => {
const answer = getSelected()
if(answer) {
if(answer === quizData[currentQuiz].correct) {
score++
}

currentQuiz++

if(currentQuiz < quizData.length) {


loadQuiz()
} else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>

<button onclick="location.reload()">Reload</button>
`
}
}
})

Style.css
/* coding with nick */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

*{
box-sizing: border-box;
}
8
Annexure-II

body{
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7f7 100%);
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
}
.quiz-header{
padding: 4rem;
}
h2{
padding: 1rem;
text-align: center;
margin: 0;
}

ul{
list-style-type: none;
padding: 0;
}
ul li{
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label{
cursor: pointer;
}
button{
background-color: #03cae4;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover{
background-color: #04adc4;
}
button:focus{
outline: none;
background-color: #44b927;
}

9
Annexure-II

The actual contribution of team members is as follows:


Sr.No Details Of Activity Planned Planned Name Of
Start Date Finish Date Responsible
Team
Members
1. Collection of Information All Group Members
2. Preparation of Proposal All Group Members
2. Coding and Output All Group Members
3. Review of Overall Structure All Group Members
4. Preparation of Micro Project All Group Members
5. Submission of Micro Project All Group Members

6.0 Resources Required:

Sr.No Name Of Resource/Material Specification Quantity Remarks


1. Operating System Windows 10 Intel i-7 01 --
8GB RAM
2. Development Tools Sublime Text-3 01 --

10
Annexure-II

7.0 Output of microproject:

8.0 Skill Developed:


 Understood usage of CSS/HTML.
 Understood validations using JavaScript.

9.0 Applications:
 Easy access to Quiz Application.
 Easy access to the data gathered.

11
Annexure-II

12
Annexure-II

13
Annexure-II

14

You might also like