Government Polytechnic Thane

Institute Code: 0116

Vision
To create competent technical manpower to cater industrial and societal needs.
Mission
We are committed to –
M1 : Provide an environment that values and encourages knowledge acquisition
with effective curriculum implementation.
M2 : Maintain the well-equipped laboratories to develop industrial competencies
among the students.
M3 : Empower and motivate faculties towards building their domain expertise in
technology and management.
M4 : Groom all round personality of students towards leadership, self-
employability, and lifelong learning.
M5 : Promote Industry Institute Interaction through training and placement services,
continuing education programs, consultancy & Technical services, etc. for socio-
economic development.
Our Core Values are –
Ethics, Equity, Women Empowerment, safety and Eco-friendly practices
 Computer Engineering Department

Vision
To be a trend setting department in technical education providing highly
competent, efficient manpower to meet the ever technology.

Mission
We are committed to –
M1 : To provide an atmosphere for students and faculty to enhance problem
solving skills, leadership qualities, team spirit & ethical responsibilities.
M2 : To develop technical & professional skills to face Evolving Challenges and
Social Needs through Innovative Learning Process.
M3 : Establish Industry institute interaction program to enhance entrepreneurship
skills.
M4 : Enabling the Students to Excel in their Professions and Careers with life-long
learning keeping speedy growth with emerging technology.
 ASSESSMENT MANUAL
OF
CLIENT SIDE SCRIPTING LANGUAGE

Micro-Project
CO5I Diploma Program

MAHARASHTRA STATE BOARD

OF TECHNICAL EDUCTION, MUMBAI

(Autonomous) (Iso-9001-2008)
(ISO/ICE 27001:2013)
(2022-2023)
 Government Polytechnic Thane

CERTIFICATE

This is to certified that following Third Year Computer Engineering students

have successfully and satisfactory completed their micro project work,entitled
“Typing Speed Testing Web-Site” in partial fulfilment of the requirement for
diploma in Computer Engineering Academic Year 2023-2024.

Roll no Name of the Members Enrollment No

63 Vishal Awate 2201160475

62 Sandip Gade 2201160473

67 Snehal Palaspagar 2101160049

Mrs. Swati Kharat Dr Dattatray Mahajan

Subject In charge Principal

Mr. J. R. Nikhade
Head of Department
 GOVERNMENT POLYTECHNIC,
THANE

Microproject on
Typing Speed Test Website

SUBJECT:- CLIENT-SIDE SCRIPTING LANGUAGE.

COMPUTER ENGINEERING
GOVERNMENT POLYTECHNIC,
THANE-400612

2023-2024
 Annexure II

A Micro-Project Report
On
“Typing Speed Test Website”
Submitted In partial fulfilment of the
the diploma in
Computer Engineering
UNDER GUIDENCE OF
PROF. SWATI KHARAT
Department of
Computer Engineering

Submitted by:
Roll No. Enrollment No Name of the Student

63 2101160028 Vishal Damodhar Awate

62. 2101160059 Sandip Trimbak Gade
67. 2101160072 Snehal Sunil Palaspagar
 TABLE OF CONTENTS

Sr. No. Topics Page No.

1 Rationale 11
2 Aim / Benefits of Micro-Project. 11
3 Course Outcomes Addressed. 11
4 Literature review 11
5 Actual Methodology followed 12
6 Actual resources used 12
7 Outputs of the Micro-Project 13
8 Skill Developed through this Project 22
9 Applications of the Micro-Project 22
10 Evaluation Sheet 23
1.0 RATIONALE:
Client-side scripts are commonly used when we want to validate data before
sending it to the web server, adjusting the interface in response to user feedback,
and for implementing other advanced features. Since JavaScript is part of the
browser, it can be run without a web server present.

2.0 AIMS/ BENEFITS OF THE MICRO-PROJECT:

 Implement Cascading Style Sheets (CSS) for enhancing the visual presentation
of the Typing Speed Test Website
 Utilize Hyper Text Markup Language (HTML) for structuring and organizing
the Web-site interface.
 Integrate JavaScript for creating interactive elements and functionalities within
the Web-site

3.0 COURSE OUTCOME ADRESSED:

 To learn the uses of Cascading Style sheet, Hyper Text Markup Language and
JavaScript.
 Create interactive web pages using program flow control structure.
 Create Menus and navigations in web pages.
 Implement dynamic changes &functions in java script.

4.0 LITERATURE REVIEW:

1. Internet (Google chrome).
2. YouTube.
3. Client-Side Scripting Language (By Nirali Publication).
4. Group Discussion.
5.0 ACTUAL METHODOLOGY FOLLOWED:
1. We first discussed the topic of our Microproject among the Team members
and then made a timetable.
2. Then distributed the work of gathering information within the group
members.
3. We did research on other Typing Speed Test Web-site through various
sources and articles gathered the information related to our topic.
4. We also check the authenticity of the information.
5. Then finally started working on our project.
6. Through proper co-ordination among the team members, we rectified the
oncoming errors and corrected the Web-site.
7. Afterwards, we made the Report of the Microproject and then we
contributed some money to print a hard copy.
8. To complete the project (from collection of information to making report of
microproject) we took approximately 45 days.

6.0 ACTUAL RESORCES USED:

Sr No. Name of the Resources Specification Remarks

1. Computer system and Windows 11 with Basic

mobiles configuration
2. MS Word Version 2019
3. Sublime Text Latest
4. Internet Google Chrome

7.0 OUTPUT OF THE PROJECT

HTML SOURCE CODE :-
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vishal Typing Test</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<div class="wrapper">
<input type="text" class="input-field">
<div class="content-box">
<div class="typing-text">
<p></p>
</div>
<div class="content">
<ul class="result-details">
<li class="time">
<p>Time Left:</p>
<span><b>60</b>s</span>
</li>
<li class="mistake">
<p>Mistakes:</p>
<span>0</span>
</li>
<li class="wpm">
<p>WPM:</p>
<span>0</span>
</li>
<li class="cpm">
<p>CPM:</p>
<span>0</span>
</li>
</ul>
<button>Try Again</button>
</div>
</div>
</div>

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

</body>
</html>
CSS CODE:-
/* Import Google Font - Poppins */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=
swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #17A2B8;
}
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: 770px;
padding: 35px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0,0,0,0.05);
}
.wrapper .input-field{
opacity: 0;
z-index: -999;
position: absolute;
}
.wrapper .content-box{
padding: 13px 20px 0;
border-radius: 10px;
border: 1px solid #bfbfbf;
}
.content-box .typing-text{
overflow: hidden;
max-height: 256px;
}
.typing-text::-webkit-scrollbar{
width: 0;
}
.typing-text p{
font-size: 21px;
 text-align: justify;
letter-spacing: 1px;
word-break: break-all;
}
.typing-text p span{
position: relative;
}
.typing-text p span.correct{
color: #56964f;
}
.typing-text p span.incorrect{
color: #bd130d;
outline: 1px solid #fff;
background: #ffc0cb;
border-radius: 4px;
}
.typing-text p span.active{
color: #17A2B8;
}
.typing-text p span.active::before{
position: absolute;
content: "";
height: 2px;
width: 100%;
bottom: 0;
left: 0;
opacity: 0;
border-radius: 5px;
background: #1724b8;
animation: blink 1s ease-in-out infinite;
}
@keyframes blink{
50%{
opacity: 1;
}
}
.content-box .content{
margin-top: 17px;
display: flex;
padding: 12px 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-top: 1px solid #bfbfbf;
}
.content button{
outline: none;
border: none;
width: 105px;
 color: #fff;
padding: 8px 0;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
background: #17A2B8;
transition: transform 0.3s ease;
}
.content button:active{
transform: scale(0.97);
}
.content .result-details{
display: flex;
flex-wrap: wrap;
align-items: center;
width: calc(100% - 140px);
justify-content: space-between;
}
.result-details li{
display: flex;
height: 20px;
list-style: none;
position: relative;
align-items: center;
}
.result-details li:not(:first-child){
padding-left: 22px;
border-left: 1px solid #bfbfbf;
}
.result-details li p{
font-size: 19px;
}
.result-details li span{
display: block;
font-size: 20px;
margin-left: 10px;
}
li span b{
font-weight: 500;
}
li:not(:first-child) span{
font-weight: 500;
}
@media (max-width: 745px) {
.wrapper{
padding: 20px;
}
.content-box .content{
padding: 20px 0;
 }
.content-box .typing-text{
max-height: 100%;
}
.typing-text p{
font-size: 19px;
text-align: left;
}
.content button{
width: 100%;
font-size: 15px;
padding: 10px 0;
margin-top: 20px;
}
.content .result-details{
width: 100%;
}
.result-details li:not(:first-child){
border-left: 0;
padding: 0;
}
.result-details li p,
.result-details li span{
font-size: 17px;
}
}
@media (max-width: 518px) {
.wrapper .content-box{
padding: 10px 15px 0;
}
.typing-text p{
font-size: 18px;
}
.result-details li{
margin-bottom: 10px;
}
.content button{
margin-top: 10px;
}
}

JAVA-SCRIPT SOURCE CODE:-

const paragraphs = [
"hello everyone my name is vishal and i am computer engineering student in gpt",
"this is a simple paragraph that is meant to be nice and easy to type which is
why there will be mommas no periods or any capital letters so i guess this means
that it cannot really be considered a paragraph but just a series of run on
sentences this should help you get faster at typing as im trying not to use too
many difficult words in it although i think that i might start making it hard by
including some more difficult letters I'm typing pretty quickly so forgive me for
any mistakes i think that i will not just tell you a story about the time i went to
the zoo and found a monkey and a fox playing together they were so cute and i think
that they were not supposed to be in the same cage but they somehow were and i
loved watching them horse"
];
const typingText = document.querySelector(".typing-text p"),
inpField = document.querySelector(".wrapper .input-field"),
tryAgainBtn = document.querySelector(".content button"),
timeTag = document.querySelector(".time span b"),
mistakeTag = document.querySelector(".mistake span"),
wpmTag = document.querySelector(".wpm span"),
cpmTag = document.querySelector(".cpm span");
let timer,
maxTime = 120,
timeLeft = maxTime,
charIndex = mistakes = isTyping = 0;
function loadParagraph() {
const ranIndex = Math.floor(Math.random() * paragraphs.length);
typingText.innerHTML = "";
paragraphs[ranIndex].split("").forEach(char => {
let span = `<span>${char}</span>`
typingText.innerHTML += span;
});
typingText.querySelectorAll("span")[0].classList.add("active");
document.addEventListener("keydown", () => inpField.focus());
typingText.addEventListener("click", () => inpField.focus());
}
function initTyping() {
let characters = typingText.querySelectorAll("span");
let typedChar = inpField.value.split("")[charIndex];
if(charIndex < characters.length - 1 && timeLeft > 0) {
if(!isTyping) {
timer = setInterval(initTimer, 1000);
isTyping = true;
}
if(typedChar == null) {
if(charIndex > 0) {
charIndex--;
if(characters[charIndex].classList.contains("incorrect")) {
mistakes--;
}
 characters[charIndex].classList.remove("correct", "incorrect");
}
} else {
if(characters[charIndex].innerText == typedChar) {
characters[charIndex].classList.add("correct");
} else {
mistakes++;
characters[charIndex].classList.add("incorrect");
}
charIndex++;
}
characters.forEach(span => span.classList.remove("active"));
characters[charIndex].classList.add("active");
let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) *
60);
wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm;

wpmTag.innerText = wpm;
mistakeTag.innerText = mistakes;
cpmTag.innerText = charIndex - mistakes;
} else {
clearInterval(timer);
inpField.value = "";
}
}
function initTimer() {
if(timeLeft > 0) {
timeLeft--;
timeTag.innerText = timeLeft;
let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) *
60);
wpmTag.innerText = wpm;
} else {
clearInterval(timer);
}
}
function resetGame() {
loadParagraph();
clearInterval(timer);
timeLeft = maxTime;
charIndex = mistakes = isTyping = 0;
inpField.value = "";
timeTag.innerText = timeLeft;
wpmTag.innerText = 0;
mistakeTag.innerText = 0;
cpmTag.innerText = 0;
}
8.0 SKILLS DEVELOPED THROUGH THIS PROJECT:
 Studied different concepts related to Card Flipping Game and how it is
enjoyable for users.
 Effective Communication Skills are developed among the students.
 Students can perform group activities and time management is introduced in the
students.
 Risk management, critical thinking and problem solving are developedamong
the students.
 Effective coordinating was seen in the students.
 Teamwork and collaborative skills are introduced in the students.

9.0 APPLICATION OF THESE MICRO-PROJECT:

 The game can be used as an educational tool to teach concepts like strategy,
memory, pattern recognition, and critical thinking.
 Cognitive Training:
 It can serve as a cognitive training tool, helping individuals of all ages improve
their memory, concentration, and problem-solving skills.
 The game can be enjoyed by people of different age groups, making it a versatile
entertainment option for families, friends, and individuals.
 The game can be part of brain health programs, potentially helping in cognitive
maintenance for older adults and potentially reducing the risk of cognitive
decline..
 Annexure IV

Evaluation Sheet for the Micro Project

NAME OF STUDENT: Chaitanya Vishal Damodhar Awate
ROLL NO: 63
NAME OF PROGRAMME: Computer Engineering. SEMESTER: FIFTH.
COURSE TITLE: Client-Side Scripting Language (CSS).
COURSE CODE: 22519.
TITLE OF THE MICRO PROJECT Typing Speed Test Web-site
COURSE OUTCOMES ACHIEVED:
1. To learn the uses of Cascading Style sheet, Hyper Text Markup Language and JavaScript.
2. Create interactive web pages using program flow control structure.

Characteristic to be Poor Excellent

Sr. Average Good
assessed (Marks 1- (Marks 9- Sub Total
No (Marks 4-5) (Marks 6-8)
3) 10)

(A) Process and Product Assessment (convert above total marks out of 6 Marks)
Relevance to the
1
course
Literature
2 Review/information
collection
Completion of the
3 Target as per project
proposal
Analysis of Data and
4
representation
Quality of
5
Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (convert above total marks out of 4 Marks)
7 Presentation
8 Viva
Comments/Suggestions about team work/leadership(if any):
Name and designation of the faculty member:
Signature:
 Evaluation Sheet for the Micro Project
NAME OF STUDENT: Sandip Trimbak Gade
ROLL NO: 62
NAME OF PROGRAMME: Computer Engineering. SEMESTER: FIFTH.
COURSE TITLE: Client-Side Scripting Language (CSS).
COURSE CODE: 22519.
TITLE OF THE MICRO PROJECT: Typing Speed Test Web-site
COURSE OUTCOMES ACHIEVED:
1. To learn the uses of Cascading Style sheet, Hyper Text Markup Language and JavaScript.
2. Create interactive web pages using program flow control structure.

Characteristic to be Poor Excellent

Sr. Average Good
assessed (Marks 1- (Marks 9- Sub Total
No (Marks 4-5) (Marks 6-8)
3) 10)

(A) Process and Product Assessment (convert above total marks out of 6 Marks)
Relevance to the
1
course
Literature
2 Review/information
collection
Completion of the
3 Target as per project
proposal
Analysis of Data and
4
representation
Quality of
5
Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (convert above total marks out of 4 Marks)
7 Presentation
8 Viva
Comments/Suggestions about team work/leadership(if any):
Name and designation of the faculty member:
Signature:
 Evaluation Sheet for the Micro Project
NAME OF STUDENT: Snehal Sunil Palaspagar
ROLL NO: 67
COURSE TITLE: Client-Side Scripting Language (CSS).
COURSE CODE: 22519.
TITLE OF THE MICRO PROJECT: Typing Speed Test Web-site
COURSE OUTCOMES ACHIEVED:
1. To learn the uses of Cascading Style sheet, Hyper Text Markup Language and JavaScript.
2. Create interactive web pages using program flow control structure.

Characteristic to be Poor Excellent

Sr. Average Good
assessed (Marks 1- (Marks 9- Sub Total
No (Marks 4-5) (Marks 6-8)
3) 10)

(A) Process and Product Assessment (convert above total marks out of 6 Marks)
Relevance to the
1
course
Literature
2 Review/information
collection
Completion of the
3 Target as per project
proposal
Analysis of Data and
4
representation
Quality of
5
Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (convert above total marks out of 4 Marks)
7 Presentation
8 Viva
Comments/Suggestions about team work/leadership(if any):
Name and designation of the faculty member:

Signature: