Drag and Drop Practice Game With Image

Saturday, 6 September 2014

Drag and Drop Practice Game With Image

-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/card-games-with-drag-and-drop-with.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image_6.html
http://www.grammar-quizzes.com/wrcite1_book.html
-------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<style>
a#skipnav{font-family:Arial,Helvetica,sans-serif; font-size:.65em; text-decoration:none; float:right; padding-right:3em}
/*page-styletype*/
.section, .practice{background:#fff; border-bottom:.1em solid #CCC; border-top:.1em solid #E5E5E5; border-left:.1em solid #E5E5E5; border-right:.1em solid #CCC; margin-top:.8em}
#sectionOne{background:#fff; border-bottom:.1em solid #CCC; border-top:.1em solid #E5E5E5; border-left:.1em solid #E5E5E5; border-right:.1em solid #CCC; margin-top:.8em}
ol, ul{padding:0em 0em 0em 3em}
ol li, ul li{font-family:Arial,Helvetica,sans-serif; font-size:.8em; color:#4D4D4D; line-height:2em}
ul.biblio li{text-indent:-5em; margin-left:4em; margin-bottom: 0em; list-style-type:none; font-size:.74em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul{margin-left:2em; margin-top:0em; margin-bottom:0em; padding-left:.4em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul ul{margin-left:1.2em; margin-top:0em; margin-bottom:0em; padding-left:.4em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul li, #grammar .table50.bdr .asub td ul li ul li{font-size:1em}
.borderleft{border-left:.12em solid #D5DCE6}
.borderbottom{border-bottom:.112em solid #D5DCE6}
.border tr td, .border{border-bottom:.07em solid #CCC; border-right:.07em solid #CCC; border-spacing:0}
.bdr tr td{border-left:.12em solid #D5DCE6}
.floatright{float:right; margin:0 .5em 0 0; padding:0 0 0 1em}
.floatleft{float:left; padding-left:.5em; margin:0 1em 0 0}
.clearfloat{clear:both; height:0; font-size:.06em; line-height:0}
.clear{clear:both; width:100%; height:.1em; margin:0:padding:0}
#focusLf, .focusleft, #focusRt, .focusright, #focus, .focus{background-image:url(img/bkgline.gif); border-bottom:.20em solid #D5DCE6; border-top:.09em solid #DDE5F0; border-left:.1em solid #D5DCE6; border-right:.15em solid #D5DCE6; margin-top:.8em}
#focTitle, .foctitle{font-weight:700; font-size:.68em; color:#FFF; font-family:Arial,Helvetica,sans-serif; background-color:#7288B7; padding:.5em}
#Exp, .exp{font-family:Arial,Helvetica,sans-serif; font-size:.70em; color:#3B5998; margin:0; padding:.8em 1em 1em .8em; line-height:1.4}
#Eg, .eg{padding:.15em 0 }
#Eg p, .eg p{padding:.4em .8em; margin:0}
</style>

<style>
/* Add some margin to the page and set a default font and colour */
/* Slots for final card positions */
#cardSlots, #cardPile {
margin: 1em auto 0 auto;
clear:none; float:left;
/*border: .125em solid #666;*/
}
/* The initial pile of unsorted cards */
#cardSlots, #cardPile {
width: 61em;
height: 9.5em;
padding: .02em 0 0 .5em;
margin: 1em auto;
}
/* Individual cards and slots */
#cardPile div {
float: left;
width: 6.5em;
height: 7.75em;
clear:none; float:left; margin-left:0; display:block;
padding: 0em;
border: .125em solid #ccc;
-moz-border-radius: .535em;
-webkit-border-radius: .535em;
border-radius: .535em;
margin: 0 0 0 .5em;
background: #fff;
}
#cardSlots div {
clear:none; float:left; margin-left:0; display:block;
width: 8.5em;
height: 9.75em;
padding: 0em;
border: .125em solid #666;
-moz-border-radius: .535em;
-webkit-border-radius: .535em;
border-radius: .535em;
margin: 0 0 0 .65em ;
background: #fff;
text-align: center;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {border-style:dashed; font-family:Arial, Helvetica, sans-serif; font-size:.8em}
#cardPile div {
background: #fff;
color: #000;
font-size: 1em;
text-shadow: 0 0 3px #666;
}
#cardPile div img {
display: block;
margin-left: auto;
margin-right: auto }
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Correct card border */
#card1.correct, #card2.correct, #card3.correct, #card4.correct, #card5.correct, #card6.correct, #card7.correct, #card8.correct { border-color:#3F5F9E; border-width:medium;}
/* "You did it!" message */
#successMessage {
position: absolute;
left: 20em;
top: 130em;
width: 10em;
height: 4em;
z-index: 100;
background: #FFF;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 15px;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '10em',
top: '100em',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6 ];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<6; i++ ) { $('<div>' + '<img src=imgcit/book'+ numbers[i] +'.gif>' + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#sectionOne', snap: '#sectionOne',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'first', 'second', 'third', 'fourth', 'fifth', 'sixth' ];
for ( var i=1; i<=6; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot and prevent it being dragged again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message and next button
if ( correctCards == 6 ) {
$('#successMessage').show();
$('#successMessage').animate( {
top: '34em',
width: '12em',
width: '15em',
height: '5em',
opacity: 1
} );
$(document).ready(function(){
$('#sound_tag')[0].play();
});
}
}

</script>

</head>

<body>

<div class="gridContainer clearfix">
<div id="sectionOne">
<h1>MLA Citation Style for a  Book</h1>
<h2>Drag and Drop Practice</h2>
<p> </p>
<p> </p>
<h3>Drag the information onto the targets in the correct order.  </h3>
<p>Use the "Reset" button to shuffle or reset the placement of "cards". This drag and drop function does not work on touch screens.</p>

<div id="cardPile">

<div id="card1" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcEWSJ3Nu4Qr6VsIhzW_mEJ1XNzv5U_TN-vBMTn0p-hodEF3VjPeN3rns7cO2-ShDyOfiZK_riivZbmH6yCfmQYB6ao5ASyLoKQagRw9Z11qibmuBNph012Iob9-_IKWMpTlAJ4J2PxsP/s1600/book1.gif"></div>
<div id="card2" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH_vBkxjeGeOr_JAzPB8OnzbahzTCqbwnTLT7jG7zZSe-GJVWJ4bRVVYB5oBQ8RydaRqGmATMZV6e5bgLtq86MvKFQkR-OvKNisOLLPq9FtiQBGWlVGhVdX95GWPGcMkGwUKJ3QPpGmOK/s1600/book2.gif"></div>
<div id="card3" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCed8Rzfkv_Fi7Nt71iHhU6ZxNUyNHWuN5ZiwLr1tHzz-yctSNmZvyeQ7Rx0DLAk1mL809WqZgBrjWsNB_LzG_ciSDzCzbvKXO2RGKV-eOS4oUMJkmmRJitI24DQJHoNcTyS3Z1ChvWQB/s1600/book3.gif"></div>
<div id="card4" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD8A2kMAlh2QaMbD9edthhBWJtcmBemstfi00IHRrNPJe3oO_urpTvVG_cTOWaq7FnT3QSTceqtgCKKxK3i3_dbVcyhelkg6FtabfD_QH0o3ZwauPjtJKAp3RS4LSdlmavppocyKLa74r/s1600/book4.gif"></div>
<div id="card5" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCj3e5G-DiA5KRRDIyDH0D5EQStZFK3mL1RgFG7huE_BsTNni0hXVHDWvph8OjXqz64zoCt34AIt1ej_IhLds_sm4q03Dry1kAoXyUCsGuu-pZ-nudMiRH1Htp_YuchBXMqBt81ufWASA/s1600/book5.gif"></div>
<div id="card6" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGaafq53HE0HQ-LqXkXmC8H6X4XU0WzNIQb2Lmm-G6YlJ4qPbm-hhJvNtBgk8rm9FxI0EkgzJONnpHmdOz0Njufkw_hbhM06nHVYbqNBbULcGq_olE2UcI7DZD2ON7doOLsWrMYeyuiKO/s1600/book6.gif"></div>

</div>
<div class="clear"> </div>

<div id="cardSlots">
<div class="ui-droppable">first</div>
<div class="ui-droppable">second</div>
<div class="ui-droppable">third</div>
<div class="ui-droppable">fourth</div>
<div class="ui-droppable">fifth</div>
<div class="ui-droppable">sixth</div>
</div>
<p> </p>
<div class="clear"> </div>
<audio id="sound_tag" src="http://www.grammar-quizzes.com/sounds/clapping.wav" preload="auto"></audio>
<div id="successMessage" style="display:none;left:10em;top:100em;width:0;height:0">
<h3>You did it! </h3>
<p> </p>
<p class="floatright">
<button onclick="location.href='wrcite2_mag.html'">Continue</button>
</p>
</div>
<div class="clear"> </div>
<p>
<button onclick="init()">Reset</button></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------
OR USE UPPER CODE WITH IMAGE VARIABLES
----------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE AND SAVE IN HTML
-------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<style>
a#skipnav{font-family:Arial,Helvetica,sans-serif; font-size:.65em; text-decoration:none; float:right; padding-right:3em}
/*page-styletype*/
.section, .practice{background:#fff; border-bottom:.1em solid #CCC; border-top:.1em solid #E5E5E5; border-left:.1em solid #E5E5E5; border-right:.1em solid #CCC; margin-top:.8em}
#sectionOne{background:#fff; border-bottom:.1em solid #CCC; border-top:.1em solid #E5E5E5; border-left:.1em solid #E5E5E5; border-right:.1em solid #CCC; margin-top:.8em}
ol, ul{padding:0em 0em 0em 3em}
ol li, ul li{font-family:Arial,Helvetica,sans-serif; font-size:.8em; color:#4D4D4D; line-height:2em}
ul.biblio li{text-indent:-5em; margin-left:4em; margin-bottom: 0em; list-style-type:none; font-size:.74em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul{margin-left:2em; margin-top:0em; margin-bottom:0em; padding-left:.4em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul ul{margin-left:1.2em; margin-top:0em; margin-bottom:0em; padding-left:.4em}
.gridContainer.clearfix #grammar .table50.bdr .asub td ul li, #grammar .table50.bdr .asub td ul li ul li{font-size:1em}
.borderleft{border-left:.12em solid #D5DCE6}
.borderbottom{border-bottom:.112em solid #D5DCE6}
.border tr td, .border{border-bottom:.07em solid #CCC; border-right:.07em solid #CCC; border-spacing:0}
.bdr tr td{border-left:.12em solid #D5DCE6}
.floatright{float:right; margin:0 .5em 0 0; padding:0 0 0 1em}
.floatleft{float:left; padding-left:.5em; margin:0 1em 0 0}
.clearfloat{clear:both; height:0; font-size:.06em; line-height:0}
.clear{clear:both; width:100%; height:.1em; margin:0:padding:0}
#focusLf, .focusleft, #focusRt, .focusright, #focus, .focus{background-image:url(img/bkgline.gif); border-bottom:.20em solid #D5DCE6; border-top:.09em solid #DDE5F0; border-left:.1em solid #D5DCE6; border-right:.15em solid #D5DCE6; margin-top:.8em}
#focTitle, .foctitle{font-weight:700; font-size:.68em; color:#FFF; font-family:Arial,Helvetica,sans-serif; background-color:#7288B7; padding:.5em}
#Exp, .exp{font-family:Arial,Helvetica,sans-serif; font-size:.70em; color:#3B5998; margin:0; padding:.8em 1em 1em .8em; line-height:1.4}
#Eg, .eg{padding:.15em 0 }
#Eg p, .eg p{padding:.4em .8em; margin:0}
</style>

<style>
/* Add some margin to the page and set a default font and colour */
/* Slots for final card positions */
#cardSlots, #cardPile {
margin: 1em auto 0 auto;
clear:none; float:left;
/*border: .125em solid #666;*/
}
/* The initial pile of unsorted cards */
#cardSlots, #cardPile {
width: 61em;
height: 9.5em;
padding: .02em 0 0 .5em;
margin: 1em auto;
}
/* Individual cards and slots */
#cardPile div {
float: left;
width: 6.5em;
height: 7.75em;
clear:none; float:left; margin-left:0; display:block;
padding: 0em;
border: .125em solid #ccc;
-moz-border-radius: .535em;
-webkit-border-radius: .535em;
border-radius: .535em;
margin: 0 0 0 .5em;
background: #fff;
}
#cardSlots div {
clear:none; float:left; margin-left:0; display:block;
width: 8.5em;
height: 9.75em;
padding: 0em;
border: .125em solid #666;
-moz-border-radius: .535em;
-webkit-border-radius: .535em;
border-radius: .535em;
margin: 0 0 0 .65em ;
background: #fff;
text-align: center;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {border-style:dashed; font-family:Arial, Helvetica, sans-serif; font-size:.8em}
#cardPile div {
background: #fff;
color: #000;
font-size: 1em;
text-shadow: 0 0 3px #666;
}
#cardPile div img {
display: block;
margin-left: auto;
margin-right: auto }
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Correct card border */
#card1.correct, #card2.correct, #card3.correct, #card4.correct, #card5.correct, #card6.correct, #card7.correct, #card8.correct { border-color:#3F5F9E; border-width:medium;}
/* "You did it!" message */
#successMessage {
position: absolute;
left: 20em;
top: 130em;
width: 10em;
height: 4em;
z-index: 100;
background: #FFF;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 15px;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '10em',
top: '100em',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcEWSJ3Nu4Qr6VsIhzW_mEJ1XNzv5U_TN-vBMTn0p-hodEF3VjPeN3rns7cO2-ShDyOfiZK_riivZbmH6yCfmQYB6ao5ASyLoKQagRw9Z11qibmuBNph012Iob9-_IKWMpTlAJ4J2PxsP/s1600/book1.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH_vBkxjeGeOr_JAzPB8OnzbahzTCqbwnTLT7jG7zZSe-GJVWJ4bRVVYB5oBQ8RydaRqGmATMZV6e5bgLtq86MvKFQkR-OvKNisOLLPq9FtiQBGWlVGhVdX95GWPGcMkGwUKJ3QPpGmOK/s1600/book2.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCed8Rzfkv_Fi7Nt71iHhU6ZxNUyNHWuN5ZiwLr1tHzz-yctSNmZvyeQ7Rx0DLAk1mL809WqZgBrjWsNB_LzG_ciSDzCzbvKXO2RGKV-eOS4oUMJkmmRJitI24DQJHoNcTyS3Z1ChvWQB/s1600/book3.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD8A2kMAlh2QaMbD9edthhBWJtcmBemstfi00IHRrNPJe3oO_urpTvVG_cTOWaq7FnT3QSTceqtgCKKxK3i3_dbVcyhelkg6FtabfD_QH0o3ZwauPjtJKAp3RS4LSdlmavppocyKLa74r/s1600/book4.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCj3e5G-DiA5KRRDIyDH0D5EQStZFK3mL1RgFG7huE_BsTNni0hXVHDWvph8OjXqz64zoCt34AIt1ej_IhLds_sm4q03Dry1kAoXyUCsGuu-pZ-nudMiRH1Htp_YuchBXMqBt81ufWASA/s1600/book5.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGaafq53HE0HQ-LqXkXmC8H6X4XU0WzNIQb2Lmm-G6YlJ4qPbm-hhJvNtBgk8rm9FxI0EkgzJONnpHmdOz0Njufkw_hbhM06nHVYbqNBbULcGq_olE2UcI7DZD2ON7doOLsWrMYeyuiKO/s1600/book6.gif' ];

numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<6; i++ ) {
$('<div><img src="' + imgs[numbers[i] - 1] + '" alt="alt"/></div>').data( 'number', numbers[i] ).attr( 'id',
'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'first', 'second', 'third', 'fourth', 'fifth', 'sixth' ];
for ( var i=1; i<=6; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot and prevent it being dragged again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message and next button
if ( correctCards == 6 ) {
$('#successMessage').show();
$('#successMessage').animate( {
top: '34em',
width: '12em',
width: '15em',
height: '5em',
opacity: 1
} );
$(document).ready(function(){
$('#sound_tag')[0].play();
});
}
}

</script>

</head>
<body>
<div class="gridContainer clearfix">
<div id="sectionOne">
<h1>MLA Citation Style for a  Book</h1>
<h2>Drag and Drop Practice</h2>
<p> </p>
<p> </p>
<h3>Drag the information onto the targets in the correct order.  </h3>
<p>Use the "Reset" button to shuffle or reset the placement of "cards". This drag and drop function does not work on touch screens.</p>
<div id="cardPile">

<div id="card1" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcEWSJ3Nu4Qr6VsIhzW_mEJ1XNzv5U_TN-vBMTn0p-hodEF3VjPeN3rns7cO2-ShDyOfiZK_riivZbmH6yCfmQYB6ao5ASyLoKQagRw9Z11qibmuBNph012Iob9-_IKWMpTlAJ4J2PxsP/s1600/book1.gif"></div>
<div id="card2" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH_vBkxjeGeOr_JAzPB8OnzbahzTCqbwnTLT7jG7zZSe-GJVWJ4bRVVYB5oBQ8RydaRqGmATMZV6e5bgLtq86MvKFQkR-OvKNisOLLPq9FtiQBGWlVGhVdX95GWPGcMkGwUKJ3QPpGmOK/s1600/book2.gif"></div>
<div id="card3" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCed8Rzfkv_Fi7Nt71iHhU6ZxNUyNHWuN5ZiwLr1tHzz-yctSNmZvyeQ7Rx0DLAk1mL809WqZgBrjWsNB_LzG_ciSDzCzbvKXO2RGKV-eOS4oUMJkmmRJitI24DQJHoNcTyS3Z1ChvWQB/s1600/book3.gif"></div>
<div id="card4" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD8A2kMAlh2QaMbD9edthhBWJtcmBemstfi00IHRrNPJe3oO_urpTvVG_cTOWaq7FnT3QSTceqtgCKKxK3i3_dbVcyhelkg6FtabfD_QH0o3ZwauPjtJKAp3RS4LSdlmavppocyKLa74r/s1600/book4.gif"></div>
<div id="card5" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCj3e5G-DiA5KRRDIyDH0D5EQStZFK3mL1RgFG7huE_BsTNni0hXVHDWvph8OjXqz64zoCt34AIt1ej_IhLds_sm4q03Dry1kAoXyUCsGuu-pZ-nudMiRH1Htp_YuchBXMqBt81ufWASA/s1600/book5.gif"></div>
<div id="card6" class="ui-draggable" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGaafq53HE0HQ-LqXkXmC8H6X4XU0WzNIQb2Lmm-G6YlJ4qPbm-hhJvNtBgk8rm9FxI0EkgzJONnpHmdOz0Njufkw_hbhM06nHVYbqNBbULcGq_olE2UcI7DZD2ON7doOLsWrMYeyuiKO/s1600/book6.gif"></div>

</div>
<div class="clear"> </div>

<div id="cardSlots">
<div class="ui-droppable">first</div>
<div class="ui-droppable">second</div>
<div class="ui-droppable">third</div>
<div class="ui-droppable">fourth</div>
<div class="ui-droppable">fifth</div>
<div class="ui-droppable">sixth</div>
</div>
<p> </p>
<div class="clear"> </div>
<audio id="sound_tag" src="http://www.grammar-quizzes.com/sounds/clapping.wav" preload="auto"></audio>
<div id="successMessage" style="display:none;left:10em;top:100em;width:0;height:0">
<h3>You did it! </h3>
<p> </p>
<p class="floatright">
<button onclick="location.href='wrcite2_mag.html'">Continue</button>
</p>
</div>
<div class="clear"> </div>
<p>
<button onclick="init()">Reset</button></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------
HOW ADD IMAGES INTO TWO DIVE DRAG & DROP
JUST REPLACE YOUR BEFORE HEADER JAVA WITH BELOW CODE

IN THIS CODE YOU WILL FIND THIS IT'S MEAN YOU NEED A FOLDER
SO CREATE NEW FOLDER ON DESKTOP AND SAVE IMAGE FOLDER NAME
imgcit
NAME: imgcit SO CRATE FOLDER AND GIVE NAME imgcit
<img src=imgcit/book'+ numbers[i] +'.gif>' + '</div>

TAKE IMAGES FOR THIS FOLDER FROM THIS LINK
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image_6.html

HOW TO CHANGE DROP ABLE DIVE SIZE BY THIS CHANGE
#cardSlots div {
background:#FFFFFF;
border:0.125em solid #666666;
border-bottom-left-radius:0.535em;
border-bottom-right-radius:0.535em;
border-top-left-radius:0.535em;
border-top-right-radius:0.535em;
clear:none;
display:block;
float:left;
height:9.75em;
margin:0 0 0 0.65em;
padding:0;
text-align:center;
width:1000px;
}
------------------------------------------------------------------------------------------------------------
OR USE THIS CODE

#cardSlots div {
background:#FFFFFF;
border:0.125em solid #666666;
border-bottom-left-radius:0.535em;
border-bottom-right-radius:0.535em;
border-top-left-radius:0.535em;
border-top-right-radius:0.535em;
clear:none;
display:block;
float:left;
height:300px;
margin:0 0 0 0.65em;
padding:0;
text-align:center;
width: 500PX
}

--------------------------------------------------------------------------------------------------------------------