CSS MICROPROJECT

A PROJECT REPORT

Submitted By:

Sr. No. Roll No. Student Name Enrollment No

01 01 Shaikh Abdullah Abdul Bashir 1705690080

02 33 Sunasra Abdurr Rehman 2005690094

03 34 Fuzail Sayyed 2005690095

IN PARTIAL FULFILLMENT OF THE FIFTH SEMESTER

IN INFORMATION TECHNOLOGY

CERTIFICATE

ABDUL RAZZAQ KALSEKAR POLYTECHNIC,

MAHARASHTRA STATE OF TECHNICAL EDUCATION, New Panvel.

This is certify that the following students. :

Sr. No. Roll No. Student Name Enrollment No

01 01 Shaikh Abdullah Abdul 1705690080

Bashir
02 33 Sunasra Abdurr Rehman 2005690094

03 34 Fuzail Sayyed 2005690095

1
 CSS MICROPROJECT

Of FIFTH Semester of Diploma in Information Technology of Institute of

AIARKP, New Panvel (Code: 0569) have complete the micro-project work satisfactorily
under my supervision and guidance in subject CSS 22519 for the academic
year 2022-2023 as prescribed in the curriculum.

Part-A Micro-Project Proposal

Dynamic Quiz

1.0 Aims/Benefits of the Micro-Project –program to perform Speech To Text application.

2.0 Course Outcomes Addressed

In this project I learn about what is action listener and tags of java Script.

3.0 Proposed Methodology

We completed our work in good co-ordination and hardworking. First we started
collecting information about java Script and html programming And we started to
form report on that concept. Finally we completed the project with good outcomes.

4.0 Action Plan (Sequence and time required for major activity)
Sr. Details of activity Planned Start Planned Name of
No. date Finish date Responsible
Team Members

1 Selection of topic 28-11-2022 03-12- ALL MEMBERS

2022

2 Collecting information 28-11-2022 03-12-2022 ALL MEMBERS

3 Typing in word 28-11-2022 03-12-2022 ALL MEMBERS

4 Coding 28-11-2022 03-12-2022 ALL MEMBERS

5 Setting in word document 28-11-2022 03-12-2022 ALL

MEMBERS

2
 CSS MICROPROJECT

5.0 Resources Required (major resources such as raw material, some machining facility,
software etc.)
Sr. Name of Specifications Qty Remarks
No. Resource/material

1 MS-Word MS-2010 1
2 Laptop AMD RYZEN @3.30GHZ 1
8GB RAM
3 Application Sub-lime text 1

Annexure – II

Part – B Micro-Project Report

Dynamic quiz

1.0 Aims/Benefits of the Micro-Project :

Simple Application Dynamic Quiz

2.0 Course Outcomes Addressed

In this project I learn about what is action listener and tags of java Script.

3.0 Literature Review

The main part of this project is to develop a various Application

4.0 Actual Methodology Followed.

We completed our work in good co-ordination and hardworking. First I started

collecting information about java Script and html programming. And I started to form report
on that concept. Finally we completed the project with good outcomes.

5.0 Outputs of the Micro-Projects successfully

made Dynamic quizz Text converter.

6.0 Skill Developed / Learning outcome of this Micro-Project

From this project I learned about Java Script Programming .

1. Actual Methodology Followed.

3
 CSS MICROPROJECT

1. Discussion about given topic

2. Selection of Google and distributions on responsibilities
3. Collection of information using different resources
4. Analysis of information performance given
5. Representation information in a required format
6. Preparation of project report
7. Computation and submission of assign task
➢ Skill development:

1. Communication
2. Problem-solving
3. Teamwork
4. Adaptability
5. Creativity
6. IT skills
7. Programming skill

4
 CSS MICROPROJECT

Introduction

Java script is limited feature client side

programming language .java script run at the client
end through user’s browsers without sending
massages back and forth to the server. It is widely
used by the web developers to do things such as
build dynamic webpages, respond to events, create
interactive forms, validate data that the visitor enters
into a form, control the browsers, etc.

JavaScript is most commonly used as a client

side scripting language. This means that JavaScript
code is written into an HTML page. When a user
requests an HTML page with JavaScript in it, the
script is sent to the browser and it's up to the browser
to do something with it.

Program Code :
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz Project</title>
<link type='text/css' rel='stylesheet'
href='stylesheet.css'/>

5
 CSS MICROPROJECT

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Open
Sans"/>
</head>
<body>
<div id='container'>
<div id='title'>
<h1>Dynamic Quiz</h1>
</div>
<br/>
<div id='quiz'></div>
<div class='button' id='next'><a
href='#'>Next</a></div>
<div class='button' id='prev'><a
href='#'>Prev</a></div>
<div class='button' id='start'> <a href='#'>Start
Over</a></div>
<!-- <button class='' id='next'>Next</a></button>
<button class='' id='prev'>Prev</a></button>
<button class='' id='start'> Start Over</a></button> -->
</div>

<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery
.min.js'></script>

6
 CSS MICROPROJECT

<script type="text/javascript"
src='questions.json'></script>
<script type='text/javascript' src='jsquiz.js'></script>
</body>
</html>

JS code:-
(function() {
var questions = [{
question: "What is 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}, {
question: "What is 3*6?",
choices: [3, 6, 9, 12, 18],
correctAnswer: 4
}, {
question: "What is 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "What is 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {

7
 CSS MICROPROJECT

question: "What is 8*8?",

choices: [20, 30, 40, 50, 64],
correctAnswer: 4
}];

var questionCounter = 0; //Tracks question number

var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object

// Display initial question

displayNext();

// Click handler for the 'next' button

$('#next').on('click', function (e) {
e.preventDefault();

// Suspend click listener during fade animation

if(quiz.is(':animated')) {
return false;
}
choose();

// If no user selection, progress is stopped

if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');

8
 CSS MICROPROJECT

} else {
questionCounter++;
displayNext();
}
});

// Click handler for the 'prev' button

$('#prev').on('click', function (e) {
e.preventDefault();

if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});

// Click handler for the 'Start Over' button

$('#start').on('click', function (e) {
e.preventDefault();

if(quiz.is(':animated')) {
return false;
}

9
 CSS MICROPROJECT

questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});

// Animates buttons on hover

$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});

// Creates and returns the div that contains the questions

and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});

var header = $('<h2>Question ' + (index + 1) + ':</h2>');

qElement.append(header);

10
 CSS MICROPROJECT

var question =
$('<p>').append(questions[index].question);
qElement.append(question);

var radioButtons = createRadios(index);

qElement.append(radioButtons);

return qElement;
}

// Creates a list of the answer choices as radio inputs

function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i +
' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}

11
 CSS MICROPROJECT

// Reads the user selection and pushes the value to an

array
function choose() {
selections[questionCounter] =
+$('input[name="answer"]:checked').val();
}

// Displays next requested element

function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();

if(questionCounter < questions.length){

var nextQuestion =
createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {

$('input[value='+selections[questionCounter]+']').prop('check
ed', true);
}

// Controls display of 'prev' button

if(questionCounter === 1){

12
 CSS MICROPROJECT

$('#prev').show();
} else if(questionCounter === 0){

$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}

// Computes score and returns a paragraph element to be

displayed
function displayScore() {
var score = $('<p>',{id: 'question'});

var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;

13
 CSS MICROPROJECT

}
}

score.append('You got ' + numCorrect + ' questions out of

'+
questions.length + ' right!!!');
return score;
}
})();

Output:

14
 CSS MICROPROJECT

Conclusion:
The project involves a good knowledge of JavaScript and
html programming language. We learnt about html tags,
Events.
Dynamic quiz Recognition system Provides the ability of convert into
well understandable words Due to its ability of real time .

Reference:-
www.wikipedia.com

Thank You!!!!!....

15