A

Micro Project On
“Sliding Puzzle”

Submitted by

7.Mahima Mogal

Under Guidance of
Mrs. J. C.Joshi

Diploma Course in Information Technology

(As per directives of I Scheme, MSBTE)

Sinhgad Institutes
Sinhgad Technical Education Society’s
SOU. VENUTAI CHAVAN POLYTECHNIC, PUNE - 411041
ACADEMIC YEAR 2023 - 2024
 Maharashtra State Board of technical
Education Certificate

This is to certify that Miss. Mahima Mogal with Roll No.7 of Fifth
Semester of Diploma in Information Technology of Institute
Sou. Venutai Chavan Polytechnic (Code:0040) has successfully
completed the Micro-Project in Client Slide Scripting Language (22519)
for the academic year 2023-2024.

Place: SVCP, Pune Enrolment No: 2000400213

Date: Exam Seat No:

Mrs. J. C. Joshi Mr. U. S. Shirshetti Dr. M. S. Jadhav

Course Teacher Head of Program Principal
 Annexure – I
Part A-Micro project proposal

A. BRIEF INTRODUCTION:

In this project guides you in creating a sliding puzzle using HTML, CSS, and JavaScript. It's a
classic game where players rearrange pieces to complete an image. We'll start by building the puzzle
structure with HTML and then use CSS to make it visually appealing and interactive. JavaScript will
handle the game's functionality, like piece movement and win conditions. By the end, you'll have a
fully functional sliding puzzle game to incorporate into your website or app.

B. AIM OF THE PROJECT:

The project entitled “Sliding Puzzle” is aimed to study the Client Slide Scripting.

C.INTENTED COURSE OUTCOME:

a) Create interactive web pages using program flow control structure.

b) Implement Arrays and functions in Java script.
c) Create event based web forms using Java script.
d) Use JavaScript for handling cookies.
e) Create interactive webpage using regular expressions for validations.
f) Create Menus and navigations in web Pages.

D.RESOURCES REQUIRED:

Name of Resource
Sr . No. Specification
Required
1 Laptop Intel (R) Core i7- 16GB RAM
2 Operating system Windows 11
3 Software Googlechrome,Notepad
3. ACTION PLAN:

SR.NO. DETAIL OF ACTIVITY WEEK

1 Discussion and finalization of topic 31-07-23

2 Preparation and submission of Abstract 07-08-23

3 Literature Review 21-08-23

4 Collection of Data 28-08-23

5 Discussion and outline of Content 04-09-23

6 Editing and proof Reading of Content 11-09-23

7 Compilation of Report and Presentation 09-10-23

8 Final submission of Micro Project 16-10-23

GROUP MEMBERS:

Roll. No. Name of group members

7 Mahima Mogal.
 Annexure II
Part B- Micro-Project
1.Rationale

JavaScript is limited featured client side programming language. JavaScript runs at the client end through
the user's browser without sending messages back and forth to the server. It is widely used by the web
developers to do things such as build dynamic web pages, respond to events, create interactive forms,
validate data that the visitor enters into a form, control the browser etc. This course helps student to create
highly interactive web pages using these features.

2.Course Outcome Addressed

• Create interactive web pages using program flow control structure.
• Implement Arrays and functions in Java script.
• Create event based web forms using Java script.

3.Actual Method Followed

The process for this micro project is to make a “Sliding Puzzle”.

We collect information and organize by following points:
1. Collect the information on Sliding Puzzle Game.
2. Show the information to faculty.
3. Learn about Client Slide Scripting Language.
4. First make a raw report and then correct it.
5. After all the corrections make a proposal.
6. Then prepare a project on “ Sliding Puzzle”.
7. Make a power point presentation on the safety management.
8. Make pdf of report and print it.
9. We learn more about JavaScript.
 ANNEXURE III
Evaluation Sheet for the Micro Project
Academic Year: 2023-2024 Name of the Faculty: Mrs. J. C. Joshi
Course: Client Slide Scripting Language Course Code: 22519 Semester: Fifth

Title of the project: “Sliding Puzzle”

COs addressed by Micro Project:

S. No Course Outcomes
A Create interactive web pages using program flow control structure.

B Implement Arrays and functions in Java script.

C Create event based web forms using Java script.

Major learning outcomes achieved by students by doing the project

(a) Practical outcome:

• Develop JavaScript to implement Array functionalities.

• Develop JavaScript to implement functions.
• Develop JavaScript to implement strings.
.
(b) Unit outcomes in Cognitive domain:

1a. Create object to solve the given problem.

1c. Develop JavaScript to implement loop for solving the given iterative problem.
2a. Create array to solve the given problem.
3a. Write JavaScript to design a form to accept input values for the given problem.

Comments/suggestions about team work /leadership/inter-personal communication (if any)

…………………………………………………………………………………………………

Marks out of 6 Marks out of 4

Roll for performance for performance
No Name of the Student in group activity in oral/ Total Marks
(D5 Col.8) presentation out of 10
(D5 Col.9)

7 Mahima Mogal

(Name & Signature)

Index.html
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Image Puzzle</title>

<link href="css/style.css" rel="stylesheet" />

<link href="css/image-puzzle.css" rel="stylesheet" />

<script src="js/image-puzzle.js"></script>

</head>

<body>

<div id="collage">

<h2 id="heding_1">CAN YOU SOLVE THIS ?</h2>

<div id="playPanel" style="padding:5px;display:none;">

<h3 id="imgTitle"></h3>

<hr />

<div style="display:inline-block; margin:auto; width:95%; vertical-align:top;">

<ul id="sortable" class="sortable"></ul>

<div id="actualImageBox">

<div id="stepBox">

<div>Steps:</div>

<div id="stepCount" class="stepCount">0</div>

</div>

<div id="timeBox">
Time Taken: <span id="timerPanel"></span> secs

</div>

<img id="actualImage" />

<div>Original Image</div>

<p id="levelPanel">

<input type="radio" name="level" id="easy" checked="checked" value="3"

onchange="imagePuzzle.startGame(images, this.value);"

/> <label for="easy">Easy</label>

<input type="radio" name="level" id="medium" value="4" onchange="imagePuzzle.startGame(images,

this.value);" /> <label for="medium">Medium</label>

<input type="radio" name="level" id="hard" value="5" onchange="imagePuzzle.startGame(images,

this.value);" /> <label for="hard">Hard</label>

</p>

<div>

<button id="btnRule" type="button" class="btn" onclick="rules();">Rules</button>

<button id="newPhoto" type="button" class="btn" onclick="restart();">Another Photo</button>

<button id="btnReplay" type="button" class="btn" onclick="about();">About</button>

</div>

</div>

</div>

</div>

<div id="gameOver" style="display:none;">

<div style="background-color: #e2cd30; padding: 5px 10px 20px 10px; text-align: center; ">

<h2 style="text-align:center">Game Over!!</h2>

Congratulations!! <br /> You have completed this picture.

<br />

Steps: <span id="stepCount" class="stepCount">0</span> steps.

<br />

Time Taken: <span class="timeCount">0</span> seconds<br />

<div>
<button type="button" onclick="window.location.reload(true);">Play Again</button>

</div>

</div>

</div>

<script>

var images = [

{ src: 'images/london-bridge.jpg', title: 'London Bridge' },

{ src: 'images/lotus-temple.jpg', title: 'Lotus Temple' },

{ src: 'images/qutub-minar.jpg', title: 'Qutub Minar' },

{ src: 'images/statue-of-liberty.jpg', title: 'Statue Of Liberty' },

{ src: 'images/taj-mahal.jpg', title: 'Taj Mahal' }

];

window.onload = function () {

var gridSize = document.querySelector('#levelPanel input[type="radio"]:checked').getAttribute('value');

imagePuzzle.startGame(images, gridSize);

};

function restart() {

var gridSize = document.querySelector('#levelPanel input[type="radio"]:checked').getAttribute('value');

imagePuzzle.startGame(images, gridSize);

function rules() {

alert('Re arrange the images as shown in Original image ');

function about() {

alert('These are the random images which i have chosen ');

</script>

</div>
</body>

</html>

Puzzle.css
#collage hr{

border:none;

border-top:2px solid #f5f2f2;

height:1px;

#collage #playPanel {

background-color:#c2e4fc;

padding:10px 0px;

margin: 10px auto;

max-width:800px;

width:95%;

#collage #actualImageBox {

display: inline-block;

font-size:0.8em;

margin: 10px 10px;

vertical-align: top;

width:280px;

#collage #stepBox, #collage #timeBox {

display:inline-block;

width:48%;
}

#collage #stepBox div {

background-color:#c0d9f4;

display:inline-block;

padding:1px 4px;

margin: 0px auto;

max-width:800px;

#collage img#actualImage{

border:2px solid #a46;

height:280px;

width:280px;

#collage #sortable {

border:2px solid #a46;

list-style-type: none;

display: inline-block;

margin: 10px;

padding: 0;

width: 400px;

#collage #sortable li {

background-size: 400% 400%;

border: none;

cursor: pointer;

margin: 0;
padding: 0;

float: left;

width: 100px;

height: 100px;

#collage button {

background-color:#f5f2f2;

border:1px solid #cce;

display: inline;

font-size: 14px;

height: auto;

width: auto;

padding: 3px 8px;

Puzzle.js

var timerFunction;

var imagePuzzle = {

stepCount: 0,

startTime: new Date().getTime(),

startGame: function (images, gridSize)

this.setImage(images, gridSize);

helper.shuffle('sortable');

this.stepCount = 0;
this.startTime = new Date().getTime();

this.tick();

},

tick: function () {

var now = new Date().getTime();

var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);

helper.doc('timerPanel').textContent = elapsedTime;

timerFunction = setTimeout(imagePuzzle.tick, 1000);

},

setImage: function (images, gridSize = 4) {

var percentage = 100 / (gridSize - 1);

var image = images[Math.floor(Math.random() * images.length)];

helper.doc('imgTitle').innerHTML = image.title;

helper.doc('actualImage').setAttribute('src', image.src);

helper.doc('sortable').innerHTML = '';

for (var i = 0; i < gridSize * gridSize; i++) {

var xpos = (percentage * (i % gridSize)) + '%';

var ypos = (percentage * Math.floor(i / gridSize)) + '%';

let li = document.createElement('li');

li.id = i;

li.setAttribute('data-value', i);

li.style.backgroundImage = 'url(' + image.src + ')';

li.style.backgroundSize = (gridSize * 100) + '%';

li.style.backgroundPosition = xpos + ' ' + ypos;

li.style.width = 400 / gridSize + 'px';

li.style.height = 400 / gridSize + 'px';

li.setAttribute('draggable', 'true');

li.ondragstart = (event) => event.dataTransfer.setData('data', event.target.id);

li.ondragover = (event) => event.preventDefault();

li.ondrop = (event) => {

let origin = helper.doc(event.dataTransfer.getData('data'));

let dest = helper.doc(event.target.id);

let p = dest.parentNode;

if (origin && dest && p) {

let temp = dest.nextSibling;

let x_diff = origin.offsetLeft-dest.offsetLeft;

let y_diff = origin.offsetTop-dest.offsetTop;

if(y_diff == 0 && x_diff >0){

//LEFT SWAP

p.insertBefore(origin, dest);

p.insertBefore(temp, origin);

else{

p.insertBefore(dest, origin);

p.insertBefore(origin, temp);

let vals = Array.from(helper.doc('sortable').children).map(x => x.id);

var now = new Date().getTime();

helper.doc('stepCount').textContent = ++imagePuzzle.stepCount;

document.querySelector('.timeCount').textContent = (parseInt((now - imagePuzzle.startTime) / 1000, 10));

if (isSorted(vals)) {

// helper.doc('actualImageBox').style.display = 'none';

// helper.doc('gameOver').style.display = 'block';
helper.doc('actualImageBox').innerHTML = helper.doc('gameOver').innerHTML;

helper.doc('stepCount').textContent = imagePuzzle.stepCount;

};

li.setAttribute('dragstart', 'true');

helper.doc('sortable').appendChild(li);

helper.shuffle('sortable');

};

isSorted = (arr) => arr.every((elem, index) => { return elem == index; });

var helper = {

doc: (id) => document.getElementById(id) || document.createElement("div"),

shuffle: (id) => {

var ul = document.getElementById(id);

for (var i = ul.children.length; i >= 0; i--) {

ul.appendChild(ul.children[Math.random() * i | 0]);

}
OUTPUT :-