I\'m trying to make an alert popup once the images are setup in the correct orde
ID: 3672003 • Letter: I
Question
I'm trying to make an alert popup once the images are setup in the correct order. Something to the effect of "Puzzle Complete" when the user places the images in the proper order, however I'm not sure how to go about getting this accomplished. Here's what I have:
My js:
//allow ability to drop object
function dropEvent(ev) {
ev.preventDefault();
}
//allow dragging of image
function dragEvent(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//drop event
function dropPic(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
//allow drop only if an ID attribute of the image is the same as specified in a DIV attribute
if(ev.target.getAttribute('data-drop') == data)
ev.target.appendChild(document.getElementById(data));
}
My HTML:
<img id="puzzle2" src="images/puzzle2.jpg" draggable="true" width="500" height="100">
<img id="puzzle4" src="images/puzzle4.jpg" draggable="true" width="500" height="100">
<img id="puzzle1" src="images/puzzle1.jpg" draggable="true" width="500" height="100">
<img id="puzzle3" src="images/puzzle3.jpg" draggable="true" width="500" height="100">
<div id="div1" data-drop="puzzle1"></div>
<div id="div2" data-drop="puzzle2"></div>
<div id="div3" data-drop="puzzle3"></div>
<div id="div4" data-drop="puzzle4"></div>
Explanation / Answer
Image pieces will be shown when the button is clicked them
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>
<img id="w" src=""></img>
</td>
<td >
<img id="w1" src=""></img>
</td>
<td >
<img id="w2" src=""></img>
</td>
</tr>
<tr>
<td >
<img id="w3" src=""></img>
</td>
<td >
<img id="w4" src="b5.jpg"></img>
</td>
<td >
<img id="w5" src=""></img>
</td>
</tr>
<tr>
<td>
<img id="w6" src=""></img>
</td>
<td>
<img id="w7" src=""></img>
</td>
<td>
<img id="w8" src=""></img>
</td>
</tr>
</table>
Table which holds the images
<div>
<br />
<center><h2>Navigation Bar</h2>
<br />
<p>Let's play the game and guess the picture
Click the show buttons to unfold parts of the images</p><br /></center>
<center><button id="bu">Click Here</button>
<br /><br />
Guess The Name
<br />
<br />
<form>
<center>
<input type="text" width="50px" id="name">
<br />
<br />
<button class="btn btn-success" type="submit">Submit</button>
</form>
<br />
<br />
</form>
</center>
<h3>Score card</h3>
<center>
<p id="a"></p>
<p id="b"></p>
</center>
<a href="main.html" target="_self"><button class="btn btn-primary">HOME</button></a>
</div>
Javascript code....
<script>
var c=-1;
var f=100;
document.getElementById('a').innerHTML="Initial Score:-100";
document.getElementById('b').innerHTML="Current Score:-100";
function show()
{
if(c==-1)
{
document.getElementById('bu').innerHTML="Show Another";
c++;
}
else if(c==0)
{
document.getElementById("w").src="b1.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==1)
{
document.getElementById("w7").src="b8.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==2)
{
document.getElementById("w5").src="b6.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==3)
{
document.getElementById("w1").src="b2.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==4)
{
document.getElementById("w3").src="b4.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==5)
{
document.getElementById("w8").src="b9.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==6)
{document.getElementById("w6").src="b7.jpg";
f=f-10;
document.getElementById('b').innerHTML="Current Score:-"+f;
c++;
}
else if(c==7)
{
alert("It's Big Ben");
document.getElementById("bu").hidden=true;
document.getElementById("w2").src="b3.jpg";
}
}
</script>
<script>
<br />
<br />function check()
<br />
{
<br />
var na=document.getElementById('name').value;
<br />
na=na.toLowerCase();
<br />
var nb="big ben";
<br />
if(na.match(nb))
<br />
{
<br />
alert("You have guessed it correctly");<br />
return true;
<br />
}
<br />
else<br />
{<br />
alert("Wrong Answer Try Again");
<br /> <br /> }<br /><br />
}<br /></script>
<span id="mce_marker" data-mce-type="bookmark"></span>
mainpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<center>
<div
<br />
<br />
<br />
<h1><b>PICTURE PUZZLE GAME</h1>
</div>
<br />
<br />
<br />
<br />
<br />
<a href="easy.html" target="_self"><button class="btn btn-primary"><b>Easy</button></a>
<a href="medium.html" target="_self"><button class="btn btn-primary"><b>Medium</button></a>
<a href="hard.html" target="_self"><button class="btn btn-primary"><b>Difficult</button></a>
</center>
</body>
</head>
</html>