Sunday, 24 July 2022

Drag And Drop English To Urdu Matching Game


---------------------------------------------------------------------------------------------------------------------
Drag And Drop English To Urdu Matching Game
Read More:
https://www.google.com/search?q=%24(%22.answer%22).draggable(%7B&rlz=1C1CHBF_en-GBGB970GB970&sourceid=chrome&ie=UTF-8
http://ostack.cn/qa/?qa=1287679/
https://stackoverflow.com/questions/tagged/jquery-ui-draggable?tab=frequent&page=2
https://htmledit.squarefree.com/
https://atomisystems.com/tutorials/ap8/create-drag-n-drop-questions-2/
https://www.codingnepalweb.com/quiz-app-with-timer-javascript/
Quiz Maker
https://alisoncourses.blogspot.com/2022/08/nato-phonetic-first-letter-missing-game.html
https://www.sitelike.org/similar/sporcle.com/
https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBOQLbu_Crc0%2Fmaxresdefault.jpg&imgrefurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_LYxkClHnV0&tbnid=_BbETPu9fjW80M&vet=12ahUKEwjcwsux-635AhVQOBoKHcn4CrYQMygSegQIARBt..i&docid=kAxZ48i2UXhRIM&w=1280&h=720&q=toggle%20button%20question%20answer%20quiz%20javascript&ved=2ahUKEwjcwsux-635AhVQOBoKHcn4CrYQMygSegQIARBt
https://www.youtube.com/watch?v=_LYxkClHnV0
https://www.youtube.com/watch?v=qio50ujL2nA
toggle button question answer quiz javascript
https://www.google.com/search?q=toggle+button+question+answer+quiz+javascript&rlz=1C1CHBF_en-GBGB970GB970&sxsrf=ALiCzsaPxZ0n_nnbh7t81_oK6fOtAkWoKg:1659642841384&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjGy46w-635AhUPRsAKHf0hDcMQ_AUoAXoECAEQAw&biw=1366&bih=625&dpr=1#imgrc=Cq68PPfzZXYlFM
---------------------------------------------------------------------------------------------------------------------
We can also change sort function
var sortID = function () {
var toSort = document.getElementById('EnglishChangeList').children;
toSort = Array.prototype.slice.call(toSort, 0);
toSort.sort(
function(a, b){
return 0.5 - Math.random()
}
);
for (var i = 0, l = toSort.length; i < l; i++) {
EnglishChangeList.appendChild(toSort[i]);
}
};

We can also change to sort function
toSort.sort(() => Math.random() > 0.5 ? 1 : -1);
or
toSort.push(toSort.splice(Math.floor(Math.random()*toSort.length),1));

---------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<!-- http://fbgadgets.blogspot.com/2017/07/java-script-array.html
https://bitbucket.org/james-schneider/drag-and-drop-api-matching-game/src/main/index.html
https://www.tutorialspoint.com/online_html_editor.php 
https://h5p.org/tutorial-drag-and-drop-question  
-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matching Game</title>  
<style>
.container {
max-width: 960px;
margin: auto;
}
body {
background-color: #eceff1;
font-family: sans-serif;
color: #37474f;
}
h1, h3, p {
text-align: center;
}
main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
.draggable-list {
padding: 5px;
}
li {
list-style: none;
padding: 10px;
margin: 5px;
background-color: #cfd8dc;
border: 5px solid #b0bec5;
color: #263238;
font-size: 16px;
cursor: grab;
}
.over {
background-color: #90a4ae;
}
table {
max-width:640px;
margin: auto;
margin-bottom: 20px;
/* border: 1px solid #b0bec5; */
}
th, td {
padding: 10px 10px;
}
td {
border: 1px solid #90a4ae;
}
tr:nth-child(even) {
background-color: #cfd8dc;
}
button {
margin: auto;
cursor: pointer;
display: block;
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: none;
background-color: #607d8b;
color: #fff;
}
button:hover {
background-color: #516a75;
}
#endMessage {
display: none;
}
</style>
</head>
<body>
<h1>English To Urdu Matching Game</h1>
<p>Drag The English Phrase Over To The Matching Urdu Phrase</p>
<p>انگریزی جملے کو متعلقہ اردو  فقرے پر گھسیٹیں۔</p>
<main class="container">
<div>
 
<ul class="draggable-list">
<ul id="EnglishChangeList">
<li id="e1" draggable="true">What's your name?</li>
<li id="e2" draggable="true">Nice to meet you</li>
<li id="e3" draggable="true">I'm sorry</li>
<li id="e4" draggable="true">What do you do in your free time?</li>
<li id="e5" draggable="true">Is something wrong?</li>
</ul>
</ul>
<input type="button" id="mybutton" value="Sort" />
<script>
var sortID = function () {
var toSort = document.getElementById('EnglishChangeList').children;
toSort = Array.prototype.slice.call(toSort, 0);
toSort.sort(function (a, b) {
var aord = +a.id.split('-')[1];
var bord = +b.id.split('-')[1];
return .5 - Math.random();
});
var parent = document.getElementById('EnglishChangeList');
parent.innerHTML = "";
for (var i = 0, l = toSort.length; i < l; i++) {
parent.appendChild(toSort[i]);
}
};
window.onload = function(){
document.getElementById("mybutton").onclick = sortID;
}
</script>
</div>
<div>
<ul class="draggable-list">
<li id="s1" draggable="true">آپ کا نام کیا ہے؟</li>
<li id="s2" draggable="true">آپ سے مل کر خوشی ہوئی</li>
<li id="s3" draggable="true">میں معافی چاہتا ہوں</li>
<li id="s4" draggable="true">آپ اپنے فارغ اوقات میں کیا کرتے ہیں؟</li>
<li id="s5" draggable="true">کیا کچھ غلط ہے ؟</li>
</ul>
</div>
</main>
<div id="endMessage">
<h3>Well Done 😀!</h3>
<h3>!😀بہت بڑھیا </h3>
<table>
<tr>
<th>English</th>
<th>Urdu</th>
</tr>
<tr>
<td>What's your name?</td>
<td>آپ کا نام کیا ہے؟</td>
</tr>
<tr>
<td>Nice to meet you</td>
<td>آپ سے مل کر خوشی ہوئی</td>
</tr>
<tr>
<td>I'm sorry</td>
<td>میں معافی چاہتا ہوں</td>
</tr>
<tr>
<td>What do you do in your free time?</td>
<td>آپ اپنے فارغ اوقات میں کیا کرتے ہیں؟</td>
</tr>
<tr>
<td>Is something wrong?</td>
<td>کیا کچھ غلط ہے ؟</td>
</tr>
</table>
<button onclick="playAgain()">Play Again</button>
</div>
<script >
const draggableListItems = document.querySelectorAll('.draggable-list li');
const endMessage = document.getElementById('endMessage');
// current phrase being dragged
let selectedId;
// target phrase
let dropTargetId;
// counter for correct phrases
let matchingCounter = 0;
addEventListeners();
function dragStart() {
selectedId = this.id;
}
function dragEnter() {
this.classList.add('over');
}
function dragLeave() {
this.classList.remove('over');
}
function dragOver(ev) {
ev.preventDefault();
}
function dragDrop() {
dropTargetId = this.id;
if (checkForMatch(selectedId, dropTargetId)) {
document.getElementById(selectedId).style.display = 'none';
document.getElementById(dropTargetId).style.display = 'none';
matchingCounter++;
} else if (checkForMatch2(selectedId, dropTargetId)) {
document.getElementById(selectedId).style.display = 'none';
document.getElementById(dropTargetId).style.display = 'none';
matchingCounter++;
}
if (matchingCounter === 5) {
endMessage.style.display = 'block';
}
this.classList.remove('over');
}
function checkForMatch(selected, dropTarget) {
switch (selected) {
case 'e1':
return dropTarget === 's1' ? true : false;
case 'e2':
return dropTarget === 's2' ? true : false;
case 'e3':
return dropTarget === 's3' ? true : false;
case 'e4':
return dropTarget === 's4' ? true : false;
case 'e5':
return dropTarget === 's5' ? true : false;
default:
return false;
}
}
function checkForMatch2(selected, dropTarget) {
switch (selected) {
case 's1':
return dropTarget === 'e1' ? true : false;
case 's2':
return dropTarget === 'e2' ? true : false;
case 's3':
return dropTarget === 'e3' ? true : false;
case 's4':
return dropTarget === 'e4' ? true : false;
case 's5':
return dropTarget === 'e5' ? true : false;
default:
return false;
}
}
function playAgain() {
matchingCounter = 0;
endMessage.style.display = 'none';
draggableListItems.forEach(item => {
document.getElementById(item.id).style.display = 'block';
})
}
function addEventListeners() {
draggableListItems.forEach (item => {
item.addEventListener('dragstart', dragStart);
item.addEventListener('dragenter', dragEnter);
item.addEventListener('drop', dragDrop);
item.addEventListener('dragover', dragOver);
item.addEventListener('dragleave', dragLeave);
})
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
OTHER CODES
---------------------------------------------------------------------------------------------------------------------
<!-- https://jsfiddle.net/Twisty/crdxcg90/3/
https://codepen.io/joelkit98/pen/aLErpx -->
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.box-container {
background: #ccc;
padding: 1em;
display: inline-block;
vertical-align: top;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #000;
color: #fff;
font-size: 2em;
text-align: center;
transition: transform 0.15s ease;
border-radius: 50%;
padding-top: 0.3em;
}
.droparea1 {
background: yellow;
width: 400px;
height: 200px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.score-container {
display: inline-block;
vertical-align: top;
border: 3px solid #000;
font-size: 2em;
padding: 1em;
}
.box.correct {
background: green;
}
.box.incorrect {
background: red;
}
.box.ui-draggable-dragging {
box-shadow: 10px 20px 30px rgba(0,0,0,0.5);
transform: scale(2);
}
/* Enable jquery UI */
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="box-container">
<div class="box" data-numtype="odd">1</div>
<div class="box" data-numtype="even">2</div> 
<div class="box" data-numtype="odd">3</div>
<div class="box" data-numtype="even">4</div>
<div class="box" data-numtype="odd">5</div>
<div class="box" data-numtype="even">6</div>
</div>
<div class="droparea1" data-area-numtype="odd">
<h2>Drop <u>odd</u> boxes here</h2>
</div>
<div class="droparea1" data-area-numtype="even">
<h2>Drop <u>even</u> boxes here</h2>
</div>
<div class="score-container">
Score: <span id="score">0</span>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script id="rendered-js" >
$(document).ready(function () {
// Vars
var score = 0;
var numBoxesDropped = 0;
var numBoxes = $('.box').length;
// Creat sound object
var correctSound = document.createElement('audio');
correctSound.setAttribute('src', 'https://ssl.gstatic.com/dictionary/static/pronunciation/2022-03-02/audio/co/correct_en_us_1.mp3');
var errorSound = document.createElement('audio');
errorSound.setAttribute('src', 'https://ssl.gstatic.com/dictionary/static/pronunciation/2022-03-02/audio/wr/wrong_en_us_1.mp3');
//Make boxes draggable 
$('.box').draggable({
revert: true });
// make droparea droppable
$('.droparea1').droppable({
accept: '.box',
drop: handleBoxDrop });
// function that handles the box being droppped
function handleBoxDrop(event, ui) {
// alert("you dropped a box");   
// vars 
var box = ui.draggable;
var boxNumType = box.attr('data-numtype');
//$(this) = what is inside of?
var dropArea1 = $(this);
var dropArea1NumType = dropArea1.attr('data-area-numtype');
// Check if box number type matches number type of drop area
if (boxNumType == dropArea1NumType) {
// num type matches!
box.addClass('correct');
correctSound.play();
score++; //give points
} else {
// num type does NOT match!
box.addClass('incorrect');
errorSound.play();
}
//disable dragging
box.draggable('disable').draggable('option', 'revert', disable);
numBoxesDropped++;
console.log(numBoxesDropped);
// output score
$('#score').text(score);
// check if game has ended
//  if(numBoxesDropped == 4){
// game finished!
//     alert("Game Finished!");
//  }
if (numBoxesDropped == numBoxes) {
// game finished!
alert("game finished!");
}
}
});
//# sourceURL=pen.js
</script>
</body>
---------------------------------------------------------------------------------------------------------------------
IMAGE DRAG AND DROP IN JAVASCRIPT
Read More
http://fbgadgets.blogspot.com/2014/09/drag-and-drop-practice-game-with-image.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: '120em',
width: '150em',
height: '5em',
opacity: 1
} );
$(document).ready(function(){
$('#sound_tag')[0].play();
});
}
}
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="sectionOne">
<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">&nbsp;</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>&nbsp;</p>
<div class="clear">&nbsp;</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>&nbsp;</p>
<p class="floatright">
<button onclick="location.href=&#39;wrcite2_mag.html&#39;">Continue</button>
</p>
</div>
<div class="clear">&nbsp;</div>
<p>
<button onclick="init()">Reset</button></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
SIMPLE MATCHING GAME
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#TextBox {
background-color: coral;
color: blueviolet;
text-align: center;
font-weight: bold;
}

.matched {
background: green;
}
</style>
</head>
<body>
<div id="TextBox"></div>
<button id="0">A</button>
<button id="0">APPLE</button>
<button id="1">B</button>
<button id="1">BALL</button>

<script>
var firstClickedTile;
var secondClickedTile;

var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', matchingFunction);
}

function matchingFunction(event) {
var clickedButton = event.target;

if (!firstClickedTile) {
firstClickedTile = clickedButton;
} 
else {
if (firstClickedTile !== clickedButton) {
secondClickedTile = clickedButton;
TextBox.innerHTML = "Try Again";

if (firstClickedTile.id == secondClickedTile.id) {
firstClickedTile.classList.add("matched");
secondClickedTile.classList.add("matched");
TextBox.innerHTML = "Good Job";
}

firstClickedTile = undefined;
}
}
}
</script>
</body>
</html>

Posted by on Sunday, 24 July 2022 at 12:57
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets