MICRO PROJECT

Academic year

2024-25

HANGMAN

Program: Computer Engineering Program code: CO5I

Course: Client Side Scripting Language Course code: 22519

 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Certificate

This is to certify that Mr. /Ms. Gayatri Wadhwara, Harsh More, Khushi Satam
Roll No. 37, 38, 39 of Fifth Semester of Diploma in Computer Engineering of Institute, VES
POLYTECHNIC (Code: 0004) has completed the Micro Project satisfactorily in Subject – Client
Side Scripting Language (22519) for the academic year 2024- 2025 as prescribed in the
curriculum.

Place: Chembur, Mumbai Enrollment No: 2200040421, 422, 423

Date: ……………………… Exam Seat No: ………………………….

Subject Teacher Head of the Department Principal

 INDEX

Academic year: 2024-25 Name of the faculty: Mrs. Sonali Pawar

Program code: CO5IB Course & course code: CSS (22519)

Name of the candidate: Gayatri Wadhwara, Harsh More, Khushi Satam.

Roll No. 37, 38, 39. Enrollment No. 2200040421, 422, 423.

Sr.No Content Page No.

1 Project Proposal 1

2 Action plan 2

3 Resource required 2

4 Introduction 3

5 Actual Procedure

6 Output

7 Skill developed

8 Evaluation sheet
 Annexure – I

Micro-Project Proposal

HANGMAN

1.0 Aim/Benefits of the Micro-Project

The micro-project aims to make an interesting and beautiful game of Hangman using HTML,
CSS, and JavaScript. It offers an enjoyable user experience with a rich interface, responsive
design, and dynamic game logic. In that sense, it is an exciting tool for those learning basic
coding concepts as well as a challenge in honing problem-solving capabilities.

2.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure. þ
2. Implement Arrays and functions in JavaScript. þ
3. Create event based web forms using JavaScript. þ
4. Use JavaScript for handling cookies. o
5. Create interactive webpage using regular expressions for validations. þ
6. Create menus and navigations in web page. o

3.0 Proposed Methodology

We would start our development methodology of our Hangman game project by conducting a group
discussion. It would be a session where every member brings up his or her thoughts and the team
collectively decides on what its core features are going to be. This collective decision would align our
vision and ensure that we have good knowledge about the intended users. After that, we will conduct a
survey to gather the views from the users, which will help us form preferences and expectations in
order to improve the design of the game. Research on what kind of games Hangman already exists;
find the most frequent features of that game, besides the best practices of design, because all these will
impact our development.
Once we realize that, we will then create a rough wireframe of the game interface, such as showing
the word, the visual stages of the hangman, and where letters will be input. The draft will be looked
at and then refined as a group. With the final design we have outlined, we'll flesh it out in a more
detailed plan of what functionality we want to include in the game. We will implement that using
JavaScript by building core mechanics of the game. As we go along, the game will be tested and
debugged so it runs smoothly. In the final stage, we will write the report detailing project
objectives, designs, and functionalities and deliver a presentation to the class where we present the
Hangman game and show how the game is made.
4.0 Action Plan

SR. Details of activity Planned Planned Name of Responsible

N0. Start date Finish date Team Members
31/07/24 13/08/24
1 Finalization of project Title and All
Scope
14/08/24 22/08/24
2 Project Definition All
03/09/24 05/09/24
3 Design Procedure (Algorithm) All
19/09/24 24/09/24
4 Design Structure (Flowchart) All
25/09/24 01/10/24
5 Coding and Testing All
03/10/24 08/10/24
6 Output All
15/10/24 22/10/24
7 Report writing All
24/10/24 30/10/24
8 Demonstration of project & final All
submission

5.0 Resources Required

Sr.No. Equipment Name with Broad Specification Remark if any

-
1 Hardware Computer System: Computer (i5) ,
RAM 4 GB
-
2 Operating System: Windows 11
-
3 Software: VS Code, Chrome, Word

Name of Team Members with Roll Nos.

1. Gayatri Wadhwara 37

2. Harsh More 38

3. Khushi Satam 39

Mrs. Sonali Pawar

Name and Signature of Course Teacher
 Annexure – II

Micro-Project Report

HANGMAN

1.0 Rationale

In actuality, the proposed methodology for our Hangman game project is structured into several steps.
For starters, we would hold a group discussion that would not only give us ideas but also help us
decide in unison on the characteristics and mechanics that define the game. That would help clarify the
vision of our game and identify the target audience. Next, we would conduct a survey of potential
users seeking their feedback on the game, thereby allowing us insight into their preferences and
expectations in regard to the game. After gathering preliminary feedback, we will refer to the current
games of Hangman in the process of developing popular features and best practices. It will help us in
the design to create a great user experience. Then, we will make a lightweight wireframe of the game's
interface by specifying the key elements: words displaying, hangman's picture, and inputting spaces
for letters. Once the lay out is discussed and refined, we will come up with a final design and concrete
plan of details on functionalities we wish to build. We would enter the coding phase, where we would
have applied JavaScript for scripting on the client-side in coding the game mechanics. Testing and
debugging at all stages of this process will help ensure that the game is a pleasurable user experience.
We'd also have a nicely prepared report at the end detailing the project's objectives, design, and
functionality. We will present our findings before the class with the Hangman game in place, which
will elucidate its features and gameplay.

2.0 Aim/Benefits of the Micro-Project

The micro-project aims to make an interesting and beautiful game of Hangman using HTML, CSS,
and JavaScript. It offers an enjoyable user experience with a rich interface, responsive design, and
dynamic game logic. In that sense, it is an exciting tool for those learning basic coding concepts as
well as a challenge in honing problem-solving capabilities.

3.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure

2. Implement Arrays and functions in JavaScript.
3. Create event based web forms using JavaScript.
4. Create interactive webpage using regular expressions for validations.
3.0 Literature Review

1) HTML: HTML is going to be a back-end language in our game, used for structuring the web pages.
All the essentials of the game - namely, the word to guess, alphabet buttons, and the hangman figure -
will be developed and displayed using HTML. We will outline parts of the game using HTML tags,
such as a display of the blanks of the word, a row of alphabet letters for guessing the letters, and space
for the drawing of hangman. In addition to giving structure to the user inputs and how the game will
interact with them is what will make Hangman game functional.

2) CSS: Utilizing the Cascading Style Sheets or CSS for styling the game will make the user interface
attractive. The different game elements, such as the background gradient, letter buttons, and the
hangman figure, will be determined by the presentation of the Cascading Style Sheets. In this aspect,
the layout, colors, and animations for our game will be controlled through the use of CSS, making the
game, despite being functional, enjoyable to play. This portion with a responsive design of the game
will ensure that the elements transfer really well both from mobile phones to desktops.

3) JavaScript: JS. It is going to form the core technology behind the logic and functionality of our
game, Hangman. It will be in charge of dealing with user's interactions: to guess letters, update the
display when a correct guess and an incorrect one happen and draw the figure of a hangman as the
number of incorrect guesses is growing. JavaScript will control the game flow, from resetting it when
the player starts another round to determining at which point the player has won or lost. Using event-
driven programming, JavaScript will be sure that each letter click responds appropriately-to display a
letter in a word or add a part to the hangman figure.

4) Game Logic: The game logic of Hangman will be defined by JavaScript in terms of controlling the
sequence of the game. When a player guesses a letter, JavaScript will check whether the guessed letter
exists in the hidden word or not. If it is there, then that letter will appear in the correct blank spaces,
and if not, then a part of the hangman figure will appear. JavaScript will count the number of incorrect
attempts and determine when the game is over-hangman drawing is complete or through displaying
the entire word. The code will be written such that the game is interactive and responsive to each
player's action at the different stages.

5) Interaction with User Experience: To make Hangman a game that is interesting and intuitive for the
user, interactivity features using JavaScript will be used. For example, clicking on a letter will disable
that button so that the user does not 'guess' the same letter again. Visual feedback will also be
provided, such as the underlining of an incorrect guess, and a dynamically updated hangman figure.
Transitions and animations will be dealt with fluently in JavaScript to provide an excellent user
experience. Hint or score features can be included, among others, to make it more fun and challenging
for the player.

6. Responsive Design and Accessibility: This would be responsive design, so the game would work
seamlessly across lots of different screen sizes and devices. That means, regardless of the screen
dimension people are using to play, whether mobile tablet, or desktop, the layout will intuitively adapt
to that screen size, being done via CSS. We will pay particular attention to accessibility: semantic
HTML elements and ensuring that the interactive parts of the game are easily accessible through the
keyboard or any kind of screen reader. So, this means making the game playable for an even broader
audience-just in case they have chosen to use any special devices for it or have distinct needs as
regards accessibility.
4.0 Actual Procedure Followed.

Design Procedure

Design

Structure

Coding

HTML
<!DOCTYPE html> box-shadow: 5px 5px 7px 0px rgba(0, 0, 0,
<html lang="en"> 0.1);
<head> }
<meta charset="UTF-8"> #alphabet {
<meta name="viewport" content="width=device-
width: 100%;
width, initial-scale=1.0">
<link rel="stylesheet" href="hangman.css">
}
<title>Hang Man</title> #hint {
<style> height: 25px;
@import url('https://fonts.googleapis.com/css2? font-size: 20px;
family=Poppins:ital,wght@0,100;0,200;0,300;0, line-height: 25px;
400;0,500;0,600;0,700;0,800;0,900;1,100;1,200; width: 200px;
1,300;1,400;1,500;1,600;1,700;1,800;1,900&disp background-color: #a2a4ed;
lay=swap'); margin: 0 auto;
*{ padding: 5px;
margin: 0%; }
padding: 0%; .row {
} display: flex;
body { justify-content: center;
background: radial-gradient(#6f9fce,#6f6fff, gap: 0.7rem;
#6f68ff); margin: 0.2rem 0;
/* background-color: #686de0; */ }
width: 100%; .letter {
font-family: 'Poppins', sans-serif; width: 45px;
text-transform: uppercase; height: 45px;
} background: #adaeef;
.text-center{ color: #555;
text-align: center; float: left;
} border-radius: 50%;
#container { line-height: 45px;
width: 60rem; cursor: pointer;
height: 41rem; box-shadow: 0 4px rgba(0, 0, 0, 0.5);
background: #FFF; transition: all .2s;
box-sizing: border-box; position: relative;
padding: 20px; font-size: 35px;
border-radius: 10px; margin: 0.7rem;
margin: 32px auto; }
position: relative; .letter:active,
#startstop:active{ 0.5);
background: #adaeef; background: linear-gradient(rgba(111, 104, 255,
opacity: 0.5; 0.5), rgba(111, 159, 206, 0.5));
top: 4px; }
box-shadow: 0 0;
} #score{
.active { opacity: 0.5; } background: #adaeef;
#hangman { color: #555;
height: 14.25em; box-shadow: 0 4px rgba(0, 0, 0 , 0.5);
background-color: #EEE; padding: 9px;
margin: 1.5rem 14rem; position: absolute;
border-radius: 20px; right: 70px;
box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.1); border-radius: 5px;
} }
#alphabet { </style>
height: 13.25em; </head>
/* background-color: #CCC; */ <body>
} <div id="container">
<div id="score">Score: <span
#blanksToFill {
id="scoreValue"></span></div>
height: 30px; <canvas id="hangman"></canvas>
line-height: 30px; <div id="alphabet">
font-size: 30px; <div id="hint" class="text-center">hint: </div>
margin: 10px; <div id="blanksToFill" class="text-center"></div>
} <div class="row">
#startstop { <div id="btn1" class="letter text-center">Q</div>
width: 150px; <div id="btn2" class="letter text-center">W</div>
height: 35px; <div id="btn3" class="letter text-center">E</div>
background: #adaeef; <div id="btn4" class="letter text-center">R</div>
margin: 10px auto; <div id="btn5" class="letter text-center">T</div>
<div id="btn6" class="letter text-center">Y</div>
line-height: 38px;
<div id="btn7" class="letter text-center">U</div>
box-shadow: 0 4px rgba(0, 0, 0 , 0.5); <div id="btn8" class="letter text-center">I</div>
cursor: pointer; <div id="btn9" class="letter text-center">O</div>
position: relative; <div id="btn10" class="letter text-center">P</div>
transition: all .2s; </div>
border-radius: 20px; <div class="row">
} <div id="btn11" class="letter text-center">A</div>
#gameover { <div id="btn12" class="letter text-center">S</div>
width: 700px; <div id="btn13" class="letter text-center">D</div>
height: 300px; <div id="btn14" class="letter text-center">F</div>
line-height: 9rem; <div id="btn15" class="letter text-center">G</div>
<div id="btn16" class="letter text-center">H</div>
color: #FFF;
<div id="btn17" class="letter text-center">J</div>
font-size: 4rem; <div id="btn18" class="letter text-center">K</div>
position: absolute; <div id="btn19" class="letter text-center">L</div>
top: 170px; </div>
left: 130px; <div class="row">
z-index: 9999; <div id="btn20" class="letter text-center">Z</div>
display: none; <div id="btn21" class="letter text-center">X</div>
align-items: center; <div id="btn22" class="letter text-center">C</div>
border-radius: 20px; <div id="btn23" class="letter text-center">V</div>
backdrop-filter: blur(1rem); <div id="btn24" class="letter text-center">B</div>
box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, <div id="btn25" class="letter text-center">N</div>
<div id="btn26" class="letter text-center">M</div> //support line
</div> ctx.moveTo(80, 40);
<div id="startstop" class="text-center">Start ctx.lineTo(100, 20);
Game</div> line.play();
<div id="gameover" class="text-center"></div> ctx.stroke();
</div> }
</div> function initializeEvents() {
<script"> hide("#hint");
const hints = { hide("#score");
countries: ['india', 'france', 'germany', 'brazil', startStopBtn.addEventListener('click',
'canada', 'mexico', 'italy', 'japan', 'belgium', 'sweden', startStopGame);
'austria', 'norway', 'poland', 'russia'], }
animals: ['elephant', 'giraffe', 'kangaroo', 'dolphin', function generateWord() {
'panther', 'octopus', 'cheetah', 'squirrel', 'penguin', hintCategories = Object.keys(hints);
'buffalo', 'parrot', 'rabbit'], randomCategory =
fruits: ['apple', 'banana', 'pineapple', 'mangoes', hintCategories[Math.floor(Math.random() *
'blueberry', 'dragonfruit', 'papaya', 'kiwi', 'avocodo', hintCategories.length)];
'peaches', 'cherries', 'watermelon'], hintArray = hints[randomCategory];
color: ['green', 'yellow', 'black', 'maroon', 'orange', word = hintArray[Math.floor(Math.random() *
'violet', 'indigo', 'teal'], hintArray.length)];
home: ['bedroom', 'kitchen', 'bathroom', 'garage', counter = 0;
'balcony', 'livingroom', 'basement', 'laundry', 'terrace', gussedArray = []
'closet', 'pantry', 'storage'], for (let i=0; i<word.length; i++) {
sports: ['soccer', 'cricket', 'baseball', 'hockey', gussedArray[i] = '_';
'tennis', 'golf', 'cycling', 'boxing', 'bowling', 'fishing'], }
cities: ['newyork', 'chicago', 'delhi', 'mumbai', blanksToFill.innerHTML = '';
'chennai', 'pune', 'surat', 'lucknow', 'kanpur', 'jaipur'], show("#hint");
flowers: ['sunflow', 'orchid', 'tulip', 'lavender', show("#score");
'jasmine', 'lotus'] drawCanva();
}; underscore.innerHTML = randomCategory;
const startStopBtn = hintBox.appendChild(underscore);
document.getElementById('startstop'); for (let i=0; i<word.length; i++) {
const hintBox = document.getElementById('hint'); const underscore =
const blanksToFill = document.createElement('span');
document.getElementById('blanksToFill'); underscore.innerHTML = '_';
const underscore = document.createElement('span'); blanksToFill.appendChild(underscore);
let hintCategories; }
let randomCategory; for(let i=1; i<=26; i++) {
let hintArray; document.getElementById(`btn$
let word; {i}`).addEventListener('click', getLetterPressed);
let hangman = document.getElementById(`btn${i}`).className
document.getElementById('hangman'); = "letter text-center";
let ctx = hangman.getContext("2d"); }
var line = new Audio('line.mp3'); console.log(word);
var circle = new Audio('circle.mp3'); }
let wrongGuess = 0;
let isPlaying = false; function getLetterPressed(evt) {
let score = 0; let matched = false;
let counter; evt.preventDefault();
function drawCanva() { for(let i=0; i<word.length; i++) {
ctx.beginPath(); if(evt.target.innerHTML.toLowerCase() ===
ctx.moveTo(70, 130); word.charAt(i))
ctx.lineTo(90, 130); {
//vertical line gussedArray[i] = word.charAt(i);
ctx.moveTo(80, 130); matched = true;
ctx.lineTo(80, 20); counter++;
 } line.play();
} break;
if(word.length === counter) { case 7: //7th wrong -- right hand
score++; ctx.moveTo(210, 90);
setInnerHTML("#scoreValue", score); ctx.lineTo(200, 105);
generateWord(); line.play();
return; break;
} case 8: //8th wrong -- left hand
if(!matched) ctx.moveTo(210, 90);
drawHaningMan(); ctx.lineTo(220, 105);
blanksToFill.innerHTML = ""; line.play();
for(let i=0; i<gussedArray.length; i++) { endGame();
const underscore = break;
document.createElement('span'); }
underscore.innerHTML = gussedArray[i]; ctx.stroke();
blanksToFill.appendChild(underscore); }
} function show(selector)
evt.target.removeEventListener('click', document.querySelector(selector).style.display =
getLetterPressed); 'block';
evt.target.classList.add('active'); function hide(selector)
// console.log(counter); document.querySelector(selector).style.display =
} 'none';
function drawHaningMan() { function setInnerHTML(selector, text)
console.log(wrongGuess); document.querySelector(selector).innerHTML =
wrongGuess++; text;
switch(wrongGuess) { function endGame() {
case 1: //1st wrong -- horizontal line ctx.clearRect(0, 0, hangman.width,
ctx.moveTo(80, 20); hangman.height);
ctx.lineTo(210, 20); show("#gameover");
line.play(); for(let i=1; i<=26; i++) {
break; document.getElementById(`btn$
case 2: //2nd wrong -- vertical line {i}`).removeEventListener('click', getLetterPressed);
ctx.moveTo(210, 20); }
ctx.lineTo(210, 40); const SCORE_TEXT = `<p>GAME
line.play(); OVER!</p><p>Your Score: ${score}</p>`;
break; setInnerHTML("#gameover", SCORE_TEXT);
case 3: //3rd wrong -- face setInnerHTML("#startstop", "Start Game");
circle.play(); isPlaying = false;
ctx.moveTo(210, 40); score = 0;
ctx.arc(210, 40, 10, 0, 2 * Math.PI); wrongGuess = 0;
ctx.fillStyle = "black"; }
ctx.fill(); function startGame() {
break; ctx.clearRect(0, 0, hangman.width,
case 4: //4th wrong -- body hangman.height);
ctx.moveTo(210, 50); hide("#gameover");
ctx.lineTo(210, 90); generateWord();
line.play(); setInnerHTML("#startstop", "Stop Game");
break; setInnerHTML("#scoreValue", 0);
case 5: //5th wrong -- right hand }
ctx.moveTo(210, 60); function stopGame() {
ctx.lineTo(200, 75); setInnerHTML("#startstop", "Start Game");
line.play(); endGame();
break; }
case 6: //6th wrong -- left hand function startStopGame(evt) {
ctx.moveTo(210, 60); evt.preventDefault()
ctx.lineTo(220, 75); isPlaying = !isPlaying;
 if(isPlaying)
startGame();
else
stopGame();
initializeEvents();
</script></body></html>
5.0 Actual Resources Used

Sr.No. Equipment Name with Broad Specification Remark if any

-
1 Hardware Computer System: Computer (i5) ,
RAM 4 GB
-
2 Operating System: Windows 11
-
3 Software: VS Code, Chrome, Word

6.0 Outputs of the Micro-

Projects
7.0 Skill Developed / learning out of this Micro-Project

The following skills were developed while performing and developing this micro-project:-
•Teamwork: Learned to work in a team and boost individual confidence.
•Time Management: Timely completion of micro project as scheduled.
•Data Analysis: Interpretation of data
•Problem-solving: Develop good problem-solving habits.
•Technical writing: Preparing a report of the proposed plan and final report

8.0 Application of this Micro-Project

This micro-project demonstrates an idea of web development skills, such as making a game of
Hangman interactive using HTML, CSS, and JavaScript. It involves client-side scripting to
manage the interaction of users, dynamic updating of the game, and real-time feedback.
Moreover, it adds to problem-solving abilities with the implementation of game logic, user
interaction, and visual design. The micro-project can also be scaled up for other applications
requiring dynamically updating contents, efficient navigation, and instant end feedback.
 Annexure – III

Suggested Rubric for Assessment of Micro-

Project

S. Characteristic Poor Average Good Excellent

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

1 Relevance to the Relate to very Related to some Take care of at-least Take care of more
course few LOs LOs one CO than one CO

2 Literature review Not more than At-least 5 At –least 7 relevant About 10 relevant
/information two sources relevant sources, sources, most latest sources, most latest
collection very old at least 2 latest
reference

3 Completion of the Completed less Completed 50 to Completed 60 to Completed more

Target as per than 50% 60% 80% than 80 %
project proposal

4 Analysis of Data Data neither Sufficient and Sufficient and Enough data
and representation organized nor appropriate appropriate enough collected and
presented well enough data data generated sufficient and
generated but which is organized presenting data.
not organized and but not used.
and not
presented well.

5 Quality of Incomplete Just assembled Well assembled Well assembled

Prototype/Model Programming and some codeis and functioning with proper
code not functioning parts. But no functioning parts..
well. creativity in design Creativity in design
and use of graphics and use of graphics
function function

6 Report Preparation Very short, Nearly sufficient Detailed, correct Very detailed,
Details about and correct and clear correct, clear
methods, and details about description of description of
conclusions methods, and methods and methods, and
omitted, some conclusion. but Conclusions. conclusions.
details are clarity is not Sufficient Graphic
wrong there in Description.
presentation.

7 Presentation of Major Includes major Includes major Well organized,

the micro project information is information but information and includes major
not included, not well well organized but information ,well
information is organized and not presented well presented
not well not presented
organized. well

8 Defense Could not reply Replied to Replied properly to Replied most of the
to considerable considerable considerable questions properly
number of number of number of question.
question. questions but not
very properly
 Annexure – IV

Micro Project Evaluation

Sheet
Name of Student: Gayatri W, Harsh M, Khushi S. Enrollment No: 2200040421, 22, 23

Name of Program: Computer Engineering Semester: Fifth

Course Title: Client Side Scripting Course Code:22519

Title of the Micro-Project: HANGMAN

Cos addressed by Micro Project:

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

2. Implement Arrays and functions in JavaScript. þ
3. Create event based web forms using JavaScript. þ
4. Use JavaScript for handling cookies. o
5. Create interactive webpage using regular expressions for validations. þ
6. Create menus and navigations in web page. o

Characteristic to be assessed Poor Average Good Excellent Sub Total

Sr. ( Marks (Marks 4-5 ) (Marks 6-8) ( Marks9-10)
No 1-3 )

Process and Product Assessment (Convert Above Total marks out of 6 Marks)

1 Relevance to the course

2 Literature review/
Information Collection

3 Completion of the Target

as per project proposal

4 Analysis of Data and

representation

5 Quality of
Prototype/Model

6 Report Preparation

Individual Presentation / Viva (Convert above total marks out of 4 marks)

7 Presentation

8 Defense/Viva
 Roll No. Process and Product Assessment Individual Presentation / Total Marks
(6 Marks) Viva (4 Marks)
10

37

38

39

Name and designation of the Teacher: Mrs. Sonali Pawar (Lecturer)

Dated Signature: