MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

VIDYAVARDHINI’S BHAUSAHEB VARTAK

POLYTECHNIC, VASAI ROAD WEST

MICROPROJECT
Academic year: 2023-24

Title of Micro Project:

MCQ generator

Name: Akshay Raul , Asiel Fereira , Vikas Valvi

Program/Code: Computer Engineering (CO) Semester: 5th

Course/ Code: Client Side Scripting Language(22519)

Enrollment no’s: 2200930320

2200930321
2200930332

Roll No: 1951,52,53

Name of Faculty: Prof. Parvez Vaghela

 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
Certificate
This is to certify that Mr. Akshay Raul,Asiel Fereira,Vikas Valvi
Roll No: 1951,52,53 of FIFTHSemester of Diploma in Computer Engineering of
Institute, B.V. POLYTECHNIC (Code: 0093) has completed the
Micro Project satisfactorily in
Subject – Client Side Scripting Language(22519) for the
academic year 2023- 2024 as prescribed in the curriculum.

Place: Vasai

Date: / / 20

Enrollment no: 2200930320

2200930321
2200930332

Subject Teacher Head of the Department Principal

Seal of

Institution
 Annexure - I

Part A: Micro Project Proposal

Aim/Benefits of the Micro-Project:

1.1 The main aim of the project is to develop MCQ generator

2.1 Course Outcomes integrated:

a. Develop public awareness about environment
d. Apply techniques to reduce environmental pollution

3.1 Proposed Methodology:

1. Literature survey: Different books and websites have been referred to search for the
microproject topic and the libraries that should be used for the project. The concepts were
referred from the book and they are used in the project as well.
2. Collect information through different sources: Information about the project was found
from various sources like reference books, notebooks, PDF's and various websites.
3. Analysis of data: The large amount of data collected has been sorted and the relevant data
is selected for the microproject. The required information is arranged sequentially and
used in the making of the program.
4. Compilation of collected data: The relevant data was compiled into a single document from
various sources and has been edited as well as verified before the submission of the
microproject.

4.0 Action Plan

Sr. Planned Planned Name of

Details of the activity
No. Start date Finish date Members
1 Formation of Group & Topic Selection 14/092023 16/09/2023 All members
2 Submission of Proposed Plan 16/09/2023 30/09/2023 All members
3 Preparation of Report 30/09/2023 4/10/2023 All members
4 Final evaluation of a working Report 4/10/2023 7/10/2023 All members
5 Presentation of Report 4/10/2023 11/10/2023 All members
6 Submission of Final Report 11/10/2023 30/10/2023 All members

5.0 Resource Required:

Sr.
No. Name of resources/Material Specifications Qty Remarks
Processor: i3
1. Computer 1
RAM: 4.00 GB
2. Microsoft Word Word -2016 1
3. Printer Hp Laser Jet 1
Wikipedia.org 1
4. Book/Website name
6.0 Name of Team Members with Roll No:

Roll No Individual
Sr. Process Total
Name of Students Presentation
No. and
Product (04) (10)
assessment
(06)
01 1951 Akshay Raul

02 1952 Asiel Fereira

03 1953 Vikas Valvi

04
05
06
07
08
09
10

Name & Signature of Faculty: Prof. Parvez Vaghela

 Annexure- II

Final Micro Project Report

Title: MCQ generator

Rationale: The main aim of the project is to devlop MCQ generator

2. 0 Course Outcomes Integrated:

a. Create interactive web pages using program flow control structure
d. Implement Arrays and functions in JavaScript
c. Create event-based web forms using JavaScript

3.0 Actual Procedure Followed.

1 Discussion about topic with guide and among group members
2 Literature survey
3 Information collection
4 Compilation of content
5 Editing and revising content
6 Report Preparation

4.0: Actual Resources Required:

Sr.
Name of resources/Material Specifications Qty Remarks
No.
Processor: i3
1. Computer 1
RAM : 4.00 GB
Access -2007
2. Microsoft Access Software
3. Microsoft Word Word -2007 Software
4. Printer Hp Laser Jet 1
Wikipedia.org
5. Book/Site name
www.envirourment.in

7.0 Skill Developed/Learning outcomes of this Micro-Project

The following skills were developed:

1. Teamwork: Learned to work in a team and boost individual confidence.
2. Problem-Solving: Developed good problem-solving habits.
3. Technical Writing: Preparing the report of proposed plan and the final report.
 Annexure - III

Rubrics for Assessment of Micro-Project

Title: MCQ generator.

Name: Akshay Raul,Asiel Fereira,Vikas Valvi Class: TYCO1
Institute Code: 0093 Academic year: 2023-24

Program: Computer Engineering Course & Code: Client Side Scripting

Language(22519)
Roll No: 1951,52,53

Semester: 5th

Name of Faculty: Prof. Parvez Vaghela

Sr. Poor Average Good Excellent

Characteristic to be Assessed
No. (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

1. Relevance to the Course

Literature Survey/Information
2.
Collection
3. Project Proposal
Completion of the Target as per
4.
Project Proposal
5. Analysis of Data and Representation
6. Quality of Prototype/Model
7. Report Preparation
8. Presentation
9. Viva
 Annexure- IV

Micro-Project Evaluation Sheet

Title: MCQ generator.
Name : Akshay Raul,Asiel Fereira,Vikas Valvi Class : TYCO1
Institute Code: 0093 Academic year:2023-24
Program: Computer Engineering Course & Code: Client Side Scripting
Language(22519)
Roll No: 1951,52,53
Semester: FIFTH Name of Faculty: Prof. Parvez Vaghela
Course Outcomes Achieved:
a. Create interactive web pages using program flow control structure
d. Implement Arrays and functions in JavaScript
c. Create event-based web forms using JavaScript
Evaluation as per Suggested Rubric for Assessment of Micro Project:
Sr. Characteristic to be Poor Average Good Marks Excellent Su
No. assessed Marks Marks 4-5 6-8 Marks 9-10 b
1-3 To
tal
(A) Process and product assessment Out Of 6

1 Relevance to the course

2 Literature Survey .
Information Collection
3 Completion of the
Target as per project
proposal
4 Analysis of Data and
representation
5 Quality of
Prototype/Model/Conte
nt
6 Report Preparation
(B) Individual Presentation/Viva Out of 4
7 Presentation .
8 Viva

Name and designation of the Faculty Member: Prof. Parvez Vaghela

 Weekly Activity Sheet
Topic: MCQ generator.
Name : Akshay Raul,Asiel Fereira,Vikas Valvi Class : TYCO1
Institute Code: 0093 Academic year:2023-24
Program: Computer Engineering Course & Code: Client Side Scripting
Roll No: 1951,52,53

Semester: 5th

SR. NO WEEK ACTIVITY PERFORMED

1. 1stWeek Discussion and Finalization of Topic

(14/09/2022)
2. 2ndWeek Literature Review
(15/09/2022)
3. 3rdWeek Submission of Proposed Plan
(22/09/2022)
4 4thWeek Information Collection
(29/10/2022)
5. 5thWeek Analysis of Data
(06/10/2022)
6. 6thWeek Compilation of content
(13/10/2022)
7. 7thWeek Editing and Revising the Content
(21/10/2022)
8. 8thWeek Report Preparation
(26/10/2022)
9. 9thWeek Report Preparation
(30/10/2022)
10. 10th- 12thWeek Presentation
(1/11/2022)

Dated Signature of Faculty

(Prof. Parvez Vaghela)
 ACKNOWLEDGEMENT

I would like to convey my heartfelt gratitude to Prof. Parvez Vaghelafor his

tremendoussupport and assistance in the completion of our project also for
providing us with this wonderful opportunity to work on a project with the topic:
MCQ generator

The completion of the project would not have been possible without his help and
insights.
 INDEX

Sr.no Topics Page no.

1
1 What is JavaScript?

2 What is html and CSS? 2

What are variables, array and

3 3
functions?

4 JavaScript DOM 5

5 Code 6

6 Output 14

7 Conclusion 15

8 Reference 15
 What is JavaScript?

JavaScript, often abbreviated as JS, is a programming language that is one of

the core technologies of the World Wide Web, alongside HTML and CSS. As
of 2022, 98% of websites use JavaScript on the client side
for webpage behaviour, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users'
devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard. It has dynamic typing, prototype-based object-
orientation, and first-class functions. It is multi-paradigm, supporting event-
driven, functional, and imperative programming styles. It has application
programming interfaces (APIs) for working with text, dates, regular
expressions, standard data structures, and the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or
other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular
runtime system for this usage is Node.js.
"JavaScript" is a trademark of Oracle Corporation in the United States. The
trademark was originally issued to Sun Microsystems on 6 May 1997, and was
transferred to Oracle when they acquired Sun in 2010.
JavaScript is the dominant client-side scripting language of the Web, with 98%
of all websites (mid–2022) using it for this purpose.[37] Scripts are embedded in
or included from HTML documents and interact with the DOM. All major web
browsers have a built-in JavaScript engine that executes the code on the user's
device.
The use of JavaScript has expanded beyond its web browser roots. JavaScript
engines are now embedded in a variety of other software systems, both
for server-side website deployments and non-browser applications.

1
 What is html and CSS?

➢ HTML: -
HTML stands for Hyper Text Markup Language. It is used to
design web pages using a markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the
web pages. A markup language is used to define the text document within
tag which defines the structure of web pages.
HTML is a markup language that is used by the browser to
manipulate text, images, and other content to display it in the required
format.
The basic structure of an HTML page is laid out below. It contains
the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.

➢ CSS: -
CSS (Cascading Style Sheets) is a stylesheet language used to
design the webpage to make it attractive. The reason for using CSS is to
simplify the process of making web pages presentable. CSS allows you to
apply styles to web pages. More importantly, CSS enables you to do this
independent of the HTML that makes up each web page.
There are three types of CSS which are given below:
o Inline CSS : In Inline CSS, we add the style to the tags
using the “style” attribute inside the tag which we want to
design

o Internal or Embedded CSS: Internal CSS allows us to style

our page by adding the <style> tag inside the <head> tag.
Inside the <style> tag, we add the design that we want to
give to our page.
o External CSS : External CSS lets us add style to our HTML
page externally. We can add our styles in a different file with
extension .css and link this page to our HTML page.

2
 What are variables, array and functions?

➢ Variables:
Variables are containers for storing data (storing data values).

4 Ways to Declare a JavaScript Variable:

o Using var
o Using let
o Using const
o Using nothing
Difference between var and let in JavaScript

Var Let

The var is a keyword that is The let is also a keyword that

used to declare a variable is used to declare a variable.

Syntax -: Syntax -:
var name = value; let name = value;

The variables that are defined The variables that are defined
with var statement have with let statement have block
function scope. scope.
We can declare a variable We cannot declare a variable
again even if it has been more than once if we defined
defined previously in the same that previously in the same
scope. scope.
Hoisting is not allowed
Hoisting is allowed with var.
with let.

var is an ECMAScript1 feature. let is a feature of ES6.

3
➢ Functions
In JavaScript, functions can be declared using
the function keyword, followed by the function name, and, in
parentheses, the list of parameters (without a var declaration). The
actual function definition is enclosed in curly brackets.
The return keyword is used to return a value or just terminate the
function.
function function-name(parameter-list){
declarations and statements
}
JavaScript also supports anonymous functions: functions without a
name, that can be defined as an expression and stored in a variable.
The variable can then be used as a function name when invoking
the function.
Invoking a function in JavaScript, whether built-in or user-defined,
is the same as in PHP, Java, and other languages: use the name of
the function, followed by the list of arguments (if applicable) in
parentheses.

➢ Arrays
JavaScript arrays can be created using "new Array()", which
creates an empty array, or "new Array(size)", to create an empty
array of given size, or just "[]" for an empty array, or "[1,2,3]" for
an array initialized with 3 integers. The indexes in an array start
with 0.
<script>
var friends = ["Bill", "Doug", "Jim", "Sarah",
"Jill"];
</script>

Arrays in JavaScript increase their size automatically, as needed.

To get the size of an array, use the .length property of the arrays.
window.alert(primes.length);

4
 JavaScript DOM

The Document Object Model (DOM) is a programming

interface for HTML(HyperText Markup Language) and XML(Extensible
markup language) documents. It defines the logical structure of
documents and the way a document is accessed and manipulated.

DOM is a way to represent the webpage in a structured hierarchical way

so that it will become easier for programmers and users to glide through
the document. With DOM, we can easily access and manipulate tags, IDs,
classes, Attributes, or Elements of HTML using commands or methods
provided by the Document object. Using DOM, the JavaScript gets access
to HTML as well as CSS of the web page and can also add behaviour to
the HTML elements. so basically, Document Object Model is an API
that represents and interacts with HTML or XML documents.

Below are some examples of how you can use the document object to
access and manipulate HTML.

Finding HTML Elements

Method Description

document.getElementById(id) Find an element-by-element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

5
 Changing HTML Elements
Property Description

element.innerHTML = new html content Change the inner HTML of an

element
element.attribute = new value Change the attribute value of an
HTML element
element.style.property = new style Change the style of an HTML
element
Method Description

element.setAttribute(attribute, value) Change the attribute value of an

HTML element

Code(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">
<title>MCQ Generator</title>
</head>

<body>
<div class="main">
<div id="qb">
<div class="qnb">
<div class="time_box">
<div class="timer_text">Timer</div>
<div id="timer_no">120s</div>
</div>
<div class="qn">
Questions <p id="no">0</p> of <P>10</P>

6
 </div>
</div>
<hr>
<div class="question">
<h2 id="que">hii</h2>
</div>
<div class="option" id="opt">
<p class="options" id="a" onclick=check(this)
onmouseover="hover(this)" onmouseout="r_hover(this)"></p>
<p class="options" id="b" onclick=check(this)
onmouseover="hover(this)" onmouseout="r_hover(this)"></p>
<p class="options" id="c" onclick=check(this)
onmouseover="hover(this)" onmouseout="r_hover(this)"></p>
<p class="options" id="d" onclick=check(this)
onmouseover="hover(this)" onmouseout="r_hover(this)"></p>
</div>
<div class="btn">
<button onclick="nxt()" id="nxt">Next</button>
</div>
</div>
<div id="result_box">
<div id="head">Result</div>
<div class="data">
Corrected Ans : <b id="c_ans_no">3</b>
</div>
<div class="data">
Wrong Ans : <b id="w_ans_no">2</b>
</div>
<div class="data">
Attended question : <b id="t_a_no">4</b>
</div>

<div class="data">
Total question : <b id="t_q_no">4</b>
</div>

<div id="bottom">
<button id="restart" onclick="reset()">Restart</button>
</div>
</div>
</div>
<script src="questions.js"></script>
<script src="script.js"></script>
</body>

</html>

7
➢ JavaScript(script.js)
const option = document.getElementsByClassName("options")
const que = document.querySelector("#que");
const result = document.getElementById("result_box")
const qb = document.getElementById("qb")
const num = document.getElementById("no")
var t = 120
var tim;
var que_no = 0;
var correct = 0;
var wrong = 0;
var number = 0

first(que_no);

// timer
interval();
function interval() {
tim = setInterval(time, 1000)
}

var timer = document.getElementById("timer_no");

function time() {
timer.innerHTML = t + "<span>s</span>"
t--;
if (t < 0) {
clearInterval(tim);
question_ends(wrong, correct);
}
}

function increment() {
number++
num.innerText = number;
}

// reset function
function reset() {
que_no = 0;
correct = 0;
wrong = 0;
t = 120
number = parseInt(num.innerText = 0)
qb.style.display = "block"
result.style.display = "none"
first(que_no);

8
 clearInterval(tim);
interval();
}

function first(no) {
que.innerText = question[no].question_no
if (que_no < option.length) {
option_list(no);
for (let i = 0; i < option.length; i++) {
option[i].classList.remove("disable")
option[i].classList.remove("correct")
option[i].classList.remove("incorrect")
}
}
increment();
}
//
// next button
function nxt() {
que_no++;
if (que_no < question.length) {
// this will change the question after click on button;
first(que_no)
option_list(que_no);
for (let i = 0; i < option.length; i++) {
option[i].classList.remove("disable")
option[i].classList.remove("correct")
option[i].classList.remove("incorrect")
}
}
else {
// cal the question end function
question_ends(correct, wrong)
}
}

// this will change the option list of the each question

function option_list(que_no) {

if (que_no < question.length) {

for (let i = 0; i < question[que_no].option.length; i++) {

option[i].innerText = question[que_no].option[i]
}
}
}

9
// check the ans is right or wrong
function check(val) {
var u_ans = val
var selected_option = u_ans.innerText;
if (selected_option == question[que_no].ans) {
u_ans.classList.add("correct");
correct++
}
else {
u_ans.classList.add("incorrect");
for (let i = 0; i < 4; i++) {
if (option[i].innerText == question[que_no].ans) {
option[i].classList.add("correct")
}
}
wrong++
}
for (let j = 0; j < option.length; j++) {
option[j].classList.add("disable")
}
// clearInterval(tim);

// end of th question / result

function question_ends(w, c) {
// console.log("hello");
var c_no = document.getElementById("c_ans_no")
var w_no = document.getElementById("w_ans_no")
var t_a_no = document.getElementById("t_a_no")
var t_q_no = document.getElementById("t_q_no")
qb.style.display = "none"
result.style.display = "block"
c_no.innerText = c;
w_no.innerText = w;
t_a_no.innerText = w + c;
t_q_no.innerText = question.length
}

// hover functions
function hover(hovers) {
hovers.classList.add("hover")
}

function r_hover(element) {
element.classList.remove("hover");
}

10
➢ JavaScript(questions.js)

const question = [
{
question_no: "HTML is what type of language?",
ans: "Markup Language",
option: [
"Macro Language",
"Programming Language",
"Markup Language",
"Scripting Language"
]
},

{
question_no: "What amount of bits commonly equals one byte?",
ans: "8",
option: [
"8",
"1",
"64",
"2"
]
},

{
question_no: "What port does HTTP run on?",
ans: "80",
option: [
"23",
"53",
"443",
"80"
]
},

{
question_no: "What is the Roman numeral for 500?",
ans: "D",
option: [
"L",
"C",

11
 "X",
"D"
]
},

{
question_no: "What is the alphanumeric representation of the
imaginary number?",
ans: "i",
option: [
"e",
"i",
"n",
"x"
]
},

{
question_no: "Which team won 2014 FIFA World Cup in Brazil?",
ans: "Germany",
option: [
"Germany",
"Netherlands",
"Brazil",
"Argentina"
]
},

{
question_no: "Which country has hosted the 2020 Summer
Olympics?",
ans: "Japan",
option: [
"China",
"Australia",
"Japan",
"Germany"
]
},

{
question_no: "How many dots are on a single die?",
ans: "21",
option: [
"21",
"15",
"24",
"18"

12
 ]
},

{
question_no: "In Chess, the Queen has the combined movement of
which two pieces?",
ans: "Bishop and Rook",
option: [
"Rook and King",
"Knight and Bishop",
"King and Knight",
"Bishop and Rook"
]
},

{
question_no: "The collapse of the Soviet Union took place in
which year?",
ans: "1991",
option: [
"1891",
"1991",
"1992",
"1990"
]
},
];

13
Output

14
 Conclusion
We have study the basic of JavaScript concepts like how to access the
elements in JavaScript and how to add or remove the class of CSS on click.
The JavaScript is object-oriented language. We use the oops connects like
functions, object, and the in-built function of JavaScript like clearInterval (),
setInterval () etc…
The main thing in this project we understand how to use the DOM of
JavaScript to handle the events.

Reference
www.geeksforgeeks.org
JavaScript - Wikipedia

15