DRAG AND DROP HTML GAME

Thursday, 4 September 2014

DRAG AND DROP HTML GAME

<!doctype html>
<html lang=en-US>
<head>
<meta charset="UTF-8"/>
<title>Having fun with jQuery UI - Arrange Act Assert</title>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js type=text/javascript></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
var result = $('#incorrectResult');
var correctResult = $('#correctResult');
$(".draggable").draggable({
containment: '#gameContainer',
revert: 'invalid',
start: function(event, ui) {
result.fadeOut(1000);
},
stop: function(event, ui) {
if (!$(this).hasClass('correct')) {
result.html("Try again that's a " + $(this).attr("id"));
result.fadeIn(1000);
}
}
});
$("#droppable").droppable({
accept: '.correct',
drop: function(event, ui) {
$(".draggable").draggable('disable');
correctResult.fadeIn(1000);
correctResult.prepend('Well done! You found the ' + ui.draggable.attr('id') + ' ');
}
});
$("#playAgain").click(function() {
location.reload(true);
});
});
</script>
<style type='text/css'>
body {
width:960px;
background-color:Black;
margin:auto;
min-height:100%;
height:auto;
font-family:'Geo','Trebuchet MS','Courier New'
}
#mainContent, #indexContent {
background:#FFFFFF;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
float:left;
margin-top:7px;
padding:20px;
width:715px;
}
#indexContent h2,#mainContent h1 {
font-size:25px;
margin-bottom:10px;
line-height:30px;
float:left;
width:660px
}
#mainContent p,#indexContent p {
letter-spacing:0;
word-spacing:.2em;
line-height:20px;
margin-bottom:15px
}
#mainContent a:link,#mainContent a:visited {
color:#008000;
text-decoration:none
}
#mainContent a:hover {
color:#008000;
text-decoration: underline
}


#gameContainer {
width:90%;
margin:0 auto;
font-family:Comic Sans MS,Tahoma,Courier New;
height:35em;
background-color:White;
float:left;
border:solid .1em;
padding:0 1em 0em 1em;
}
#gameTitle {
font-size:1.5em;
text-align:center;
padding:0 0 .5em 0;
}
#instructions {
font-size:1em;
margin:0;
padding:1em;
text-align:center;
}
#droppable p {
text-align:center;
padding:0.1em;
background:yellow;
font-size:1.5em;
}
#droppable {
width:45%;
padding:0 0 20em 0;
background:orange;
border:solid 0.1em;
float:right;
}
.draggable {
padding:1em 0 0 0;
}
#items {
float:left;
width:50%;
}
#results {
padding:1em;
text-align:center;
clear:both;
}
#correctResult {
display:none;
color:Green;
}
#incorrectResult {
display:none;
color: Red;
}

</style>

</head>
<body>
<section id="container">
<section id="mainContent">
<div id="gameContainer">
<div id="gameTitle">Can you match the picture to the word?</div>
<p id="instructions">Drag the picture to the box on the right</p>
<div id="items">
<img class="draggable correct ui-draggable" id="Cow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rluTpJXYpxsaw6OBKbNI19sBPzhhwfvDdBmbLUrsRCXl7636VXKvK790qblpWXP6v5qs3u-8tGOW7udxV9S6LOzo_6kFLU16snYq4BfzXWEFPBrnaV0gbqtFspVFI8KzVXAfrZQU0Fzu/s1600/cow.png" style="position:relative"><br>
<img class="draggable ui-draggable" id="Pig" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLK56eGL3Ly6iTHwjjEp2OrJGozmUpOxFxwsUZZRCQX5BJ_SPjp7jKlM2uIgp_p23Fg2ZTjT08EQPvRHx4RBB5rQlKHG6bnj75UV_erdtDKf9C617xqLO3fo6FRHClqz-k5qeZKrWYkN5l/s1600/pig.png" style="position:relative;left:0;top:0"><br>
<img class="draggable ui-draggable" id="Sheep" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wKUia3aOMimUDtvYJvfejmWI2fhhFN9IRtyu_g1H2MDLXYgEuPkWwg-tZDgQLchO0i5uVpimC9wRZmsO6Pcm_Xu1r4_BqJUCDZlwT8E6PRN46-MTxfH232pyx4UcdPuuoe6BWaXGfEvk/s1600/sheep.png" style="position:relative">
</div>
<div id="droppable">
<p id="itemName">Cow</p>
</p></div>
<div id="results">
<div id="correctResult"><input id="playAgain" type="button" value="Click here to play again"/></div>
<div id="incorrectResult"></div>
</p></div>
</div>
<p><br/><br />
</section>
<footer id="footer">
</footer>
</body>
</html>