MAHARASHTRA STATE BOARD OF TECHNICAL

EDUCATION

Mini-Project Report On
“Quiz Web App”
Submitted in particular fulfilment in the requirement for
5th semester

Diploma In Computer Engineering

Academic year-2022-23

BY
Nilesh Gunvant Mahajan (2000610045)

Under Guidance Of
Miss. Madhuri Varule

Smt. Sharachchandrika Suresh Patil Institute of

Technology (Polytechnic) Chopda-2022-23

1
 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION

Smt.SharachchandrikaSuresh Patil Institute of

Technology (Polytechnic) Chopda-2022-23

Certified that this is a Bonafede record of the project work titled

“Quiz Web App”

Client-Side Scripting Language Project

Done by

NILESH MAHAJAN (2000610045)

of 5th semester Computer Science & Engineering in the year

2022-23 in partial fulfilment of the requirements for the award of
Degree of Diploma in Computer Science & Engineering.

Miss. Madhuri Varule Mr. D.M Fegade

Project Guide Head of the Division

2
3
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
Certificate

This is to certify that Students of CO5I(A) Roll N:16 of 5th Semester of

Diploma Computer Engineering of Institute, Smt. Sharachchandrika Suresh

Patil Chopda- (Code:0061)/has completed the Micro Project satisfactorily in
the Subject –Client-Side Scripting Language (22519) for the Academic Year
2022-23 as prescribed in the curriculum.

Place-Chopda.
Date: / /2021

Miss.Madhuri Varule Mr.D.M Fegade Mr.V.N Borse

Subject Teacher Head of the Department Principal

4
Micro-Project Report
Quiz Web App

1.0 Rationale
Prepare a Quiz App in JavaScript

2.0 Aim/Benefits of the micro-project

Aim of the project is Quiz web app. It teaches you how to deal with
events, manipulate the DOM, handle user input, give feedback to the user and
keep track of their score (for example, using client-side storage)

3.0 Course Outcome Addressed

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

2. Implement Arrays and functions in Java script.
3. Create event-based web forms using Java script.
4. Use JavaScript for handling cookies.
5. Create interactive webpage using regular expressions for validations.
6. Create Menus and navigations in web Pages.

5
 Teachers Evaluation Sheet
Name of student: Nilesh Gunvant Mahajan
Enrolment number: 2000610045
Name of Project: Quiz Web App
Course Title: Client-Side Scripting Language
Code: 22518
Course outcome achieved:
1. Create interactive web pages using program flow control structure.
2. Implement Arrays and functions in Java script.
3. Create event-based web forms using Java script.
4. Use JavaScript for handling cookies.
5. Create interactive webpage using regular expressions for validations.
6. Create Menus and navigations in web Pages.

*Evaluation as per Suggested Rubric Assessment of Micro Project*

Characteristic to be assessed Poor Average Good Excellent
(Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

Relevance to the course

Literature Review/ Information

collection
Analysis of Data and Representation

Completion of the target as per

project proposal
Report preparation

Presentation of the Micro project

Micro-Project Evaluation Sheet

Process and Product Individual Total Marks (10
Assessments Presentation/Viva (4 marks)
(6 marks) marks)

6
 CONTENT

 Acknowledgment -------------------------------------------------------------- 5

 Abstract--------------------------------------------------------------------------7

 About JavaScript --------------------------------------------------------------10

 Features of JavaScript--------------------------------------------------------11

 Applications of JavaScript---------------------------------------------------14

 About Project-------------------------------------------------------------------16

 Source Code---------------------------------------------------------------------17

 Output----------------------------------------------------------------------------27

 Future Scope--------------------------------------------------------------------30

 Conclusion-----------------------------------------------------------------------30

 Reference------------------------------------------------------------------------30

7
 Acknowledgement

In the accomplishment of this project successfully, many people

have best owned upon me their blessings and the heart pledged
support, this time I am utilizing to thank all the people who have been
concerned with this project.
Primarily I would thank God for being able to complete this project
with success. Then I would like to thank my principal Mr.V.N. Borse
and Advanced Java teacher Mr Madhuri Varule Mam, whose valuable
guidance has been the ones that helped me patch this project and
make it full proof success. His suggestions and his instructions have
served as the major contributor towards the completion of the project.
Then I would like to thank my parents and friends who have helped
me with their valuable suggestions and guidance has been very
helpful in various phases of the completion of the project.
Last but not the least I would like to thank my classmates who
have helped me a lot.

8
 Abstract

The project “Quiz Web App” is a collection if number different types

of quizzes like technical games, sports, etc. A user can access play all
of the quiz and can attempt any of the one. There will be limited
number of question and for each correct answer user will get a credit
score. User can see answer as well as can task a query related to it.
There are many quizzes application available currently on internet.
But there are few which provide better understanding between users
and the application like, providing proper answer, user query solving,
uploading user question as well as answer to it, etc. To develop a
user-friendly quiz application, Query solving regarding any question,
uploading of user question and answer, and to improve the knowledge
level of user. To develop application which will contain solutions to
the above problems by this application the user will contain solution
to the above problem. By this application the user will come to know
about his/her level and can learn addition knowledge. Also, by this
application a user can expand his/her knowledge among the world.

9
About JavaScript:
JavaScript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup
menus, etc.).  There are also more advanced server-side versions of JavaScript
such as Node.js, which allow you to add more functionality to a website than
downloading files (such as real-time collaboration between multiple
computers). Inside a host environment (for example, a web browser), JavaScript
can be connected to the objects of its environment to provide programmatic
control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math,

and a core set of language elements such as operators, control structures, and
statements. Core JavaScript can be extended for a variety of purposes by
supplementing it with additional objects; for example:

 Client-side JavaScript extends the core language by supplying objects to

control a browser and its Document Object Model (DOM). For example,
client-side extensions allow an application to place elements on an HTML
form and respond to user events such as mouse clicks, form input, and
page navigation.
 Server-side JavaScript extends the core language by supplying objects
relevant to running JavaScript on a server. For example, server-side
extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another of the
application, or perform file manipulations on a server.
This means that in the browser, JavaScript can change the way the webpage
(DOM) looks. And, likewise, Node.js JavaScript on the server can respond to
custom requests from code written in the browser.

10
Features Of JavaScript
JavaScript is divided into two main features; they are as follows –

 General JavaScript Features

JavaScript language consists of several different features. Some of the general
JavaScript features are as follows –

1. Validating User’s Input

JavaScript is very useful while using forms. It has the capability to validate user
input for errors and also saves time. If the user leaves a required field empty or
the information is incorrect, JavaScript checks for them before sending the data
over to the server.

2. Simple Client-side Calculations

Since JavaScript is a client-side technology, it can perform basic calculations on
the browser. The browser does not need to ask server time for every task. This
is especially helpful when a user needs to perform these calculations repeatedly.
In these cases, connecting to the server would take a lot more time than
performing the actual calculations.

3. Greater Control
JavaScript provides greater control to the browser rather than being completely
dependent on the web servers. JavaScript provides various browsers with
additional functionalities that help reduce server load and network traffic.

4. Platform Independent
Since browsers interpret JavaScript, it solves the problem of compilation and
compatibility. Thus, it can run on Windows, Macintosh, and other Netscape-
supported systems. Also, it is possible to embed them in any other script
like HTML that keeps JavaScript into use.
5. Handling Dates and Time
Unlike other programming languages, JavaScript has built-in functions to
determine the date and time. Thus it is very easy to code only by using methods
like .get Date().
6. Generating HTML Content
JavaScript has very handy features to dynamically generate HTML content for
the web. It allows us to add text, links, images, tables, etc after an event
occurrence (eg – mouse click).

11
7. Detecting the User’s Browser and OS
JavaScript is very capable in the detection of the user’s browser and OS
information. Though JavaScript runs on every platform, there may occur a
situation where we need the user’s browser before processing. This can be
helpful for writing code that results in different outputs in different browsers.

12
  Modern JavaScript Features
If we dive into some more recently added features of JavaScript that makes it
unique from other programming languages. There are a lot more modern
features of JavaScript invented after some general features. Some of them are as
follows –

1. Let/Const
JavaScript has introduced the keywords ‘let’ and ‘const’ that are available to
replace ‘var’. Unlike ‘var’, they are important due to their blocked scope i.e we
can only access them in the block we defined them in. Whereas ‘var’, even if
we initialize it inside a function, we can access it outside of the function.
2. Arrow Functions
These functions are very useful in simplifying the syntax and tamp down the
lines of codes for the web page or web application. Since these are light-weight
in syntax, they can be very easily used in anonymous functions in JavaScript.
3. Template Literal
This is a common feature in other programming languages that allows you to
save variables directly into strings. This proves to be an important tool for
developers as it permits them to focus more on the development of the
application rather than spending the time on syntax.

4. New Array Functions

Though array functions are not necessary for any programming language, they
do simplify things for the developer. This also compacts the code and makes it
much easier to understand. A regular array and an associative array, JavaScript
supports them both. While a regular array contains integer values for its index,
indexes can be strings for an associative array.

5. Default Parameters
This JavaScript feature helps to avoid collapsing the whole code for a simple
mistake. It is very useful when the developer needs to check the working of a
function without any parameters.

13
6. Property Shorthand
Built-in methods like .get() are available for the developer’s use. These methods
help avoid writing the same code every time and cut back on various lines of
code. These inborn methods are really supportive of cutting back the developing
time and cost.

14
Applications of Javascript:

JavaScript is mainly used in the following:

1. Websites
JavaScript lets you add behaviour to the web page where the page responds to
actions without loading a new page to request processing. It enables the website
to interact with visitors and execute complex actions.
2. Web Applications
As browsers and personal computers have continued to improve, JavaScript
gained the ability to create robust web applications. Consider applications like
Google Maps. If you want to explore a map in Google Maps, all you have to do
is click and drag with the mouse. You will see the part of the map that is less
detailed and then fills itself in. That’s the work of JavaScript behind the scene.

3. Presentations
A very popular use of JavaScript is to create presentations as websites. Using
the Reveal.js framework, this becomes really easy if you are familiar with
HTML and CSS.

4. Server Applications
With the advent of Node.js a few years ago, JavaScript made its way from the
browser into the server. Since then, Node is adopted by major companies such
as Wal-Mart, as a key part of back-end infrastructure.

5. Web Servers
You can create much more robust servers using Node or the standard server
application framework Express.js. Many of the previously mentioned Nodes are
actually built using MEAN stack (Mongo Express Angular Node) of which
Express is the key component.

6. Games
While the browser hasn’t been the traditional games platform in the past,
recently it has become robust for games. Additionally, with the addition of
HTML5 canvas, the level of complexity that is possible in the browser-based
games has increased exponentially. There are even browser games that teach us
programming.

15
7. Art
One of the new features of HTML5 specification is the canvas element, which
allows the browser to render three-dimensional spaces. This helps to open the
browser as a new source for digital art projects.

8. Smartwatch Apps
Popular smartwatch maker Pebble has created Pebble.js, a small JavaScript
framework that allows a developer to create an application for the Pebble
watches in JavaScript.

9. Mobile Apps
One of the most powerful things you can do with JavaScript is to build an
application for non-web contexts.
That’s the other way of saying that you can make apps for things that are aren’t
on the internet.

For example – Mobile devices are now the most popular way to access the
internet. What this means is all of the websites should be responsive. The catch
is that the mobile app comes in two major applications, Apple and Android.
And those applications are written in completely different languages.
10. Flying Robots
Yes, you read that right. Several commercially available quadcopters, some
outfitted with a simple OS, make it possible to install Node.js. This means that
you can program a flying robot with JavaScript. JavaScript is the most
accessible programming language on this planet, having many features. So, it’s
good to see that it is creating such a wide range of applications.

16
About Project:

In this project we have created a Quiz App using HTML , CSS and Javascript.
To create this project we have used six files, three files of html , one CSS file
and four files of javascript.
Html files:
1)start.html- Display starting window of quiz
2)quiz.html-Display main window of quiz where the user can answer the
questions
3)end.html-Display the end window of quiz where the user can see his or her
score with the time taken
Css file:
styleq.css-For styling the quiz
Javascript files:
1)site.js
2)start.js
3)timer.js
4)userInfo.js
At first, on the webpage, there is shown a text field where the user can enter his
or her name and a button labelled as "Start Quiz" and when we click on that
button, then the quiz window will appear. At the top right side of the quiz
window there is a timer. Quiz window contains question with four options the
user must have to select any one option. At the end of the window there is
button called as next question. When we select any one from the given options
only that time next question button will work. We have inserted three questions
in the quiz app with respective options. And at last, it will display the score of
users and the time taken by the user with the batch.

17
Source Code:
 Start.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Quiz</title>
 
    <link rel="stylesheet" href="styleq.css">
</head>
<body>
    <div class="wrapper">
        <div class="welcome_text">
            <form class="welcome_form" name="welcome_form"
onsubmit="submitForm(event)">
                <input type="text" name="name">
                <button>Start Quiz</button>
            </form>
        </div>
    </div>
    <script src="start.js"></script>
</body>
</html>

 Quiz.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quiz Page</title>

    <!-- style.css -->

    <link rel="stylesheet" href="styleq.css" />
  </head>

18
  <body>
    <div class="wrapper">
      <div class="quiz">
        <div class="quiz_header">
          <div class="quiz_user">
            <h4>Welcome! <span class="name"></span></h4>
          </div>
          <div class="quiz_timer">
            <span class="time">00:00</span>
          </div>
        </div>
        <div class="quiz_body">
          <div id="questions">
     

            <!-- <ul class="option_group">

              <li class="option">option 1</li>
              <li class="option">option 2</li>
              <li class="option">option 3</li>
              <li class="option">option 4</li>
            </ul> -->
          </div>

          <button class="btn-next" onclick="next()">Next Question</button>

        </div>
      </div>
    </div>

    <!-- site.js -->

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

      <!-- user info -->

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

     <!-- timer -->

     <script src="timer.js"></script>
  </body>
</html>

 End.html

<!DOCTYPE html>
<html lang="en">
19
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Quiz</title>

<!-- style.css -->

<link rel="stylesheet" href="styleq.css">
</head>
<body>
<div class="wrapper">
<div>
<i class="fas fa-award award_icon"></i>
<h3 class="username">well done! <span class="name"></span></h3>
<p class="userpoints">Your Points <span class="points"></span></p>
<p class="usertime"> Time taken <span class="time_taken"></span></p>
</div>
</div>
<script src="https://kit.fontawesome.com/d56261bbb9.js"></script>

<!-- user info -->

<script src="userInfo.js"></script>
</body>
</html>

 Styleq.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }
  body {
    font-family: "Lato";
 }
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

20
    background-image: linear-gradient(white,pink,rgb(180, 219, 245));
 }
 
  .welcome_text {
    width: 400px;
 }
 
 
  .welcome_form input,
  .welcome_form button {
    display: block;
    width: 100%;
 }
 
  .welcome_form input {
    background-color: transparent;
    color: black;
    font-size: 30px;
    text-align: center;
    border: none;
    border-bottom: 1px solid #fff;
    margin-bottom: 15px;
 }
 
  .welcome_form input:focus {
    outline: none;
 }
 
  .welcome_form button {
    padding: 20px 0;
    border: none;
    border-radius: 100px;
    background-color: #fff;
    color: black;
    font-size: 22px;
    transition: 0.4s all;
 }
 
  .welcome_form button:hover {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    cursor: pointer;
 }

21
 
  .quiz {
    display: grid;
    grid-template-rows: 60px auto;
    width: 800px;
    height: 500px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
 }
 
  .quiz_header {
    display: flex;
    justify-content: space-between;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
    z-index: 1;
 }
  .quiz_body {
    padding: 30px 30px;
 }
  .quiz_user {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 30px;
 }
 
  .quiz_timer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100px;
    background-color:rgb(248, 12, 52);
    color: #fff;
 }
  .quiz_body {
    background-color: #ecf0f1;
 }
 

22
  .option_group {
    list-style-type: none;
    margin: 30px 0;
 }
 
  .option {
    display: block;
    width: 300px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 15px 20px;
    border-radius: 100px;
    border: 2px solid transparent;
    transition: 0.4s all;
 }
 
  .option:hover {
    cursor: pointer;
    /* background-color: rgba(255, 255, 255, 0.1); */
    border: 2px solid #341f97;
    color: #341f97;
 }
  .option.active {
    background-color: #341f97;
    color: #fff;
 }
  .btn-next {
    border: none;
    padding: 15px 35px;
    background-color: rgb(248, 12, 52);
    color: #fff;
    border-radius: 27px;
    transition: 0.4s all;
 }
 
  .btn-next:hover {
    cursor: pointer;
    background-color: #fff;
    color: #341f97;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
 }
 
  .award_icon {

23
    display: block;
    font-size: 300px;
    color: rgb(248, 12, 52);
 }
 
  .username,
  .userpoints,
  .usertime {
    color: black;
    text-align: center;
    margin-top: 15px;
 }

Start.js

function submitForm(e) {
e.preventDefault();
let name = document.forms["welcome_form"]["name"].value;

sessionStorage.setItem("name", name);

location.href = "quiz.html";}

 timer.js

let dt = new Date(new Date().setTime(0));

let ctime = dt.getTime();
let seconds = Math.floor((ctime % (1000 * 60))/ 1000);
let minutes = Math.floor((ctime % (1000 * 60 * 60))/( 1000 * 60));
console.log(seconds, minutes);
let time = 0;
let mytime = setInterval(function(){
        time++;
    
        if(seconds < 59) {
            seconds++;
        } else {
            seconds = 0;
            minutes++;
    }
        let formatted_sec = seconds < 10 ? `0${seconds}`: `${seconds}`;
        let formatted_min = minutes < 10 ? `0${minutes}`: `${minutes}`

24
        document.querySelector("span.time").innerHTML = `${formatted_min} :
${formatted_sec}`;
    }, 1000);

 Site.js

let questions = [
  {
      id: 1,
      question: "Which of the following statements defines JavaScript correctly?",
      answer: "It’s a scripting language used to make the website interactive",
      options: [
        "It’s a scripting language used to make the website interactive",
        "It’s an assembly language used to make the website interactive",
        "It’s compiled language used to make the website interactive",
        "None of the above"
   ]
    },
  {
      id: 2,
      question: "The function and  var are known as:",
      answer: "Declaration statements",
      options: [
        "Keywords",
        "Data types",
        "Declaration statements",
        "Prototypes"
   ]
    },
  {
      id: 3,
      question: " In the JavaScript, which one of the following is not considered
as an error:",
      answer: "Division by zero",
      options: [
        "Syntax error",
        "Missing of semicolons",
        "Division by zero",
        "Missing of Bracket"
    
   ]
  }
25
  ];
 
  let question_count = 0;
  let points = 0;
 
  window.onload = function() {
    show(question_count);
 
  };
 
  function next() {
 
   
    // if the question is last then redirect to final page
    if (question_count == questions.length - 1) {
      sessionStorage.setItem("time", time);
      clearInterval(mytime);
      location.href = "end.html";
  }
    console.log(question_count);
 
    let user_answer = document.querySelector("li.option.active").innerHTML;
    // check if the answer is right or wrong
    if (user_answer == questions[question_count].answer) {
      points += 10;
      sessionStorage.setItem("points", points);
  }
    console.log(points);
 
    question_count++;
    show(question_count);
 }
 
  function show(count) {
    let question = document.getElementById("questions");
    let [first, second, third, fourth] = questions[count].options;
 
    question.innerHTML = `
    <h2>Q${count + 1}. ${questions[count].question}</h2>
     <ul class="option_group">
    <li class="option">${first}</li>
    <li class="option">${second}</li>
    <li class="option">${third}</li>

26
    <li class="option">${fourth}</li>
  </ul>
    `;
    toggleActive();
 }
 
  function toggleActive() {
    let option = document.querySelectorAll("li.option");
    for (let i = 0; i < option.length; i++) {
      option[i].onclick = function() {
        for (let i = 0; i < option.length; i++) {
          if (option[i].classList.contains("active")) {
            option[i].classList.remove("active");
     }
    }
        option[i].classList.add("active");
      };
  }
 }
 

 userInfo.js

let user_name = sessionStorage.getItem("name");

let user_points = sessionStorage.getItem("points");
let user_time = sessionStorage.getItem("time");
document.querySelector("span.name").innerHTML = user_name;
document.querySelector("span.points").innerHTML = user_points;
document.querySelector("span.time_taken").innerHTML = user_time;

27
Output:

28
29
30
Future Scope:
The project is on quiz web app which is coded in Visual Studio with help
HTML, CSS and JavaScript. But this project is only for MCQ
test but in the future, we have plan to extended it to support subjective type of
questions with more functionality. We will add administrative part on it which
able the system to delete test, add user, delete user and so on graphically vie the
web. To conclude, this is a simple Online MCQ Quiz which able a teacher to
punch MCQ question to system which will be store in SQL Server database and
able the student to attempt any test for once. The marks of student will be
calculated according to questions they attempt and will be displayed by the
system to
teachers and student.

Conclusion:
We have learnt various things while building this app. We learnt how to take
user inputs through an nap module. Also, we learnt to concatenate strings.
Learnt about arrays, array of objects and how to loop through them. And one

31
more thing that we learnt from this project is functions and branching
conditions.

Reference:
 https://dev.to/prerana1821/how-to-make-a-cli-quiz-app-using-javascript-for-beginners-cij
 https://www.codingninjas.com/blog/2021/08/02/how-to-create-a-quiz-app-using-
javascript/
 https://www.udemy.com/course/object-oriented-programming-with-javascript-build-quiz-
app/

32