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
}
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
}
<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=0; i<=6; i++ ) {
$('<div>' + '<img src=imgcit/book'+ numbers[i] +'.gif>' + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[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>
----------------------------------------------------------------------------------------------------------------
HOW INCREASE IMAGES
-----------------------------------------------------------------------------------------------------------------
<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,7 ];
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',
'file:///C:/Users/Habib/Desktop/New%20folder/imgcit/book7.gif', ];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<7; 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=0; i<=7; i++ ) {
$('<div>' + '<img src=imgcit/book'+ numbers[i] +'.gif>' + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[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 == 7 ) {
$('#successMessage').show();
$('#successMessage').animate( {
top: '34em',
width: '12em',
width: '15em',
height: '5em',
opacity: 1
} );
$(document).ready(function(){
$('#sound_tag')[0].play();
});
}
}
</script>
Related movie you might like to see :
QUICK FIND TOOL GOOGLE CHROME FOR ...
WEB DEVELOPER 0.5
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
BOOLEAN MATCHING GAME JAVASCRIPT
GET BUTTON ID AFTER CLICK IN JAVA S...
JAVA SCRIPT LOOP
QUIZY MEMORY CARD GAME
CTX STYLE
IMAGE SRC ARRAY IN JAVA SCRIPT
QUIZ ACTIVITY MAKER
MEMORY GAME WITH UPPER HIDDEN CARD
HTML SYNTAX HIGHLIGHTER
PADDING BUTTON
CSS CLICK DROPDOWN
HTML CSS GREEN COMMENTS NOTEPAD++
JAVA SCRIPT BOOKS ONLINE
BASIC ELEVATE ZOOM PLUS
ELEVATE ZOOM JAVA SCRIPT WITH ONE I...
Related Post for Drag and Drop Practice Game With Image
IMAGE UPLOAD WITH JAVA WITH PHP CODE
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
DRAG AND DROP PRACTICE GAME WITH IMAGE
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
How to open a .DLL or .EXE file in Resource Editor
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL
JAVA COLOR PICKER WITH
Sprite Sheet Animation
SCREEN TO GIF
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
HTML SYNTAX HIGHLIGHTER
ONLINE ZIP OPNER
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
HTML CSS GREEN COMMENTS NOTEPAD++
DINO PAIRS MATCHING GAME
Recommended Post Slide out for Blogger
DRAG AND DROP WITH IMAGE
RELATED POST WIDGET LIST SHAPE
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
WORD PRESS PARTS
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER 
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE
WEBSITE TRANSLATOR AND THUMBNAIL
Drag and Drop Practice Game With Image
WHACK A RAT CSS GAME
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
NOTEPAD++ REMOVE UNWANTED LINES
FLASH 8 DOWNLOAD
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
EDIT IMAGE IN NOTEPAD++
AUTOMATION ANY WEBSITES.jpg)
INSTALL WORD PRESS TEMPLATE
UnityAssetsExplorer
Related PostWidget WithFirst Big Thumbnail
FANCY BOX JS FIDDLE
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
IMAGE SCROLL BOX WITH MOUSE CURSOR
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.