</head>
<body>
<h1> Can You Match the objects with the correct person </h1>
<button id="ref_butn">Start Over </button>
<div id="container">
<div id="farmer" class=droppable farmer"></div>
<div id="policeman" class=droppable policeman"></div>
<div id="fireman" class=droppable fireman></div>
<div id="barn" class="draggable farmer" ></div>
</div>
<div id="chicken" class="draggable farmer" ></div>
<div id="tractor" class="draggable farmer"></div>
<div id="pig" class="draggable farmer"></div>
<div id="firehouse" class="draggable fireman"></div>
<div id="firetruck" class="draggable fireman"></div>
<div id="extinguisher" class="draggable fireman"></div>
<div id="hydrant" class="draggable fireman"></div>
<div id="policestation" class="draggable policeman"></div>
<div id="stopsign" class="draggable policeman"></div>
<div id="policecar" class="draggable policeman"></div>
<div id="handcuffs" class="draggable policeman"></div>
<div id="flashlight" class="draggable policeman"></div>
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'audio/bell_ring.mp3';
var soundAudio = document.createElement('audio');
soundAudio.controls = true;
soundAudio.src = 'audio/ooooh-sad.wav';
$(document).ready(function() {
$("#ref_butn").click(function(){
location.reload();
});
//
alert("Staging DM5 20140908a");
$(".draggable").draggable({
stack: ".draggable",
revert: "invalid",
cursor: "pointer"
});
$("#farmer").droppable({
accept: ".farmer",
drop: function(event, ui) {
if( $(ui.draggable).hasClass("farmer") ) {
//alert("farmer");
myAudio.play();
} else {
alert("not farmer");
}
}
});
$("#fireman").droppable({
accept: ".fireman",
drop: function(event, ui) {
if( $(ui.draggable).hasClass("fireman") ) {
//alert("fireman");
myAudio.play();
//} else {
//alert("not fireman");
}
}
});
$("#policeman").droppable({
accept: ".policeman",
drop: function(event, ui) {
if( $(ui.draggable).hasClass("policeman") ) {
//alert("policeman")
myAudio.play();
} else {
alert("not policeman");
}
}
});