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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Game</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .container { display: flex; justify-content: center; margin-top: 50px; }
        .draggable-item {
            width: 100px; height: 100px; margin: 10px;
            background-color: lightblue; display: flex;
            align-items: center; justify-content: center;
            border: 2px solid black; cursor: grab;
        }
        .drop-zone {
            width: 120px; height: 120px; margin: 10px;
            border: 2px dashed black; display: flex;
            align-items: center; justify-content: center;
        }
        .correct { border-color: green; background-color: lightgreen; }
        .wrong { border-color: red; background-color: pink; }
    </style>
</head>
<body>

    <h2>Drag and Drop Game</h2>
    <p>Drag the correct item to the right box!</p>

    <div class="container">
        <div id="item1" class="draggable-item" draggable="true" data-match="zone1">A</div>
        <div id="item2" class="draggable-item" draggable="true" data-match="zone2">B</div>
    </div>

    <div class="container">
        <div id="zone1" class="drop-zone" data-match="item1">Drop A Here</div>
        <div id="zone2" class="drop-zone" data-match="item2">Drop B Here</div>
    </div>

    <script>
        const items = document.querySelectorAll('.draggable-item');
        const zones = document.querySelectorAll('.drop-zone');

        items.forEach(item => {
            item.addEventListener('dragstart', (event) => {
                event.dataTransfer.setData('text/plain', event.target.id);
            });
        });

        zones.forEach(zone => {
            zone.addEventListener('dragover', (event) => {
                event.preventDefault();
            });

            zone.addEventListener('drop', (event) => {
                event.preventDefault();
                const itemId = event.dataTransfer.getData('text/plain');
                const draggedItem = document.getElementById(itemId);

                if (draggedItem.dataset.match === zone.id) {
                    zone.appendChild(draggedItem);
                    zone.classList.add('correct');
                } else {
                    zone.classList.add('wrong');
                    setTimeout(() => zone.classList.remove('wrong'), 1000);
                }
            });
        });
    </script>

</body>
</html>


---------------------------------------------------------------------------------------------------------------------
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>
--------------------------------------------------------------------------------------------------------------
Other Code 
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
    <button onclick="match(this)">Apple</button>
    <button onclick="match(this)">Ball</button>
    <button onclick="match(this)">Ant</button>
    <button onclick="match(this)">Banana</button>
    <p>Score: <span id="score">0</span></p>

    <script>
        let lastButton = null;
        let score = 0;
        
        function match(btn) {
            if (!lastButton) {
                lastButton = btn;
                btn.style.background = 'yellow';
            } else if (btn !== lastButton) {
                if (btn.textContent[0] === lastButton.textContent[0]) {
                    score++;
                    document.getElementById('score').textContent = score;
                    btn.remove();
                    lastButton.remove();
                } else {
                    lastButton.style.background = '';
                }
                lastButton = null;
            }
        }
    </script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <style>
    .BtnClass {
      width: 100px;
      height: 60px;
      font-size: 20px;
      margin: 10px;
    }
  </style>
</head>
<body>

<button class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button class="BtnClass" onclick="buttonClicked(this)">Button 2</button>
<button class="BtnClass" onclick="buttonClicked(this)">Button 2</button>

<script>
let clicked1 = null;

function buttonClicked(button) {
  // First button click
  if (clicked1 === null) {
    clicked1 = button;
    clicked1.style.background = 'orange';
    return;
  }

  // Ignore if same button clicked twice
  if (button === clicked1) return;

  // Second button clicked
  button.style.background = 'orange';

  if (clicked1.innerText === button.innerText) {
    // Match: remove both
    setTimeout(() => {
      clicked1.remove();
      button.remove();
      clicked1 = null;
    }, 300);
    alert("✅ Match Found!");
  } else {
    // Not match: reset both
    setTimeout(() => {
      clicked1.style.background = '';
      button.style.background = '';
      clicked1 = null;
    }, 500);
    alert("❌ Try Again");
  }
}
</script>

</body>
</html>


            } else if (btn !== lastButton) {
                if (btn.textContent[0] === lastButton.textContent[0]) {
                    score++;
                    document.getElementById('score').textContent = score;
                    btn.remove();
                    lastButton.remove();
                } else {
                    lastButton.style.background = '';
                }
                lastButton = null;
            }
        }
    </script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
Other Code   Hide Button Immediately When Clicked
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
.BtnClass {
  width: 100px;
  height: 60px;
  font-size: 20px;
  margin: 10px;
}
</style>
</head>
<body>

<!-- Buttons with matching data-match values -->
<button class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>
<button class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>
<button class="BtnClass" data-match="3" onclick="buttonClicked(this)">Button 3</button>
<button class="BtnClass" data-match="3" onclick="buttonClicked(this)">Button 3</button>

<script>
let firstButton = null;
let clickedButtons = [];

function buttonClicked(button) {
  // Hide button immediately when clicked
  button.style.visibility = 'hidden';
  clickedButtons.push(button);

  // First click
  if (firstButton === null) {
    firstButton = button;
    return;
  }

  // Compare match values
  if (firstButton.dataset.match === button.dataset.match) {
    // Remove both matching buttons permanently
    firstButton.remove();
    button.remove();
    alert("✅ Match Found!");
  } else {
    // Show both buttons again
    clickedButtons.forEach(btn => btn.style.visibility = 'visible');
    alert("❌ Not a Match - Try Again");
  }

  // Reset after second click
  firstButton = null;
  clickedButtons = [];
}
</script>

</body>
</html>

--------------------------------------------------------------------------------------------------------------
Other Code   
Hide Button Immediately When Clicked
Without Data Set Code
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
.BtnClass {
width:100px;
height:60px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>

<!-- Buttons with matching IDs -->
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button 2</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button 2</button>

<script>
let firstButton = null;
let clickedButtons = [];

function buttonClicked(button) {
  // Hide button immediately when clicked
  button.style.visibility = 'hidden';
  clickedButtons.push(button);

  // First click
  if (firstButton === null) {
    firstButton = button;
    return;
  }

  // Compare IDs
  if (firstButton.id === button.id) {
    firstButton.remove();
    button.remove();
    alert("✅ ID Match Found!");
  } else {
    // Show both buttons again
    clickedButtons.forEach(btn => btn.style.visibility = 'visible');
    alert("❌ Not a Match");
  }

  // Reset
  firstButton = null;
  clickedButtons = [];
}
</script>

</body>
</html>

--------------------------------------------------------------------------------------------------------------
Other Code   
Hide Button Immediately When Clicked
Without Data Set Code
Prevent Clicked Same Button 
Short Return Code Don't Need Extra Return Line

if (clicked1 === null) {
    clicked1 = button;
    button = clicked1
    return;
  }

Match Found Buttons Visible But Both
Button Disabled 

/ Compare IDs
  if (clicked1.id === button.id) {
  clicked1.style.visibility = 'visible';
  button.style.visibility = 'visible';
  clicked1.disabled = true;
  button.disabled = true;
  alert("✅ Match Found!");
  clicked1 = null;
  }

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

<!DOCTYPE html>
<html>
<head>
<style>
.BtnClass {
  width: 100px;
  height: 60px;
  font-size: 20px;
  margin: 10px;
  background: #ddd;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.BtnClass:hover {
  background: #ccc;
}

.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<!-- Buttons with matching IDs -->
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button1</button>
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button1</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button2</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button2</button>

<script>
let clicked1 = null;

function buttonClicked(button) {
  // Hide the button immediately when clicked
  button.style.visibility = 'hidden';
  
  // First click
  if (clicked1 === null) {
    clicked1 = button;
    return;
  }

  // Prevent double-clicking the same button
  if (button === clicked1) return;

  // Compare IDs
  if (clicked1.id === button.id) {
    alert("✅ Match Found!");
    clicked1 = null;
  } else {
    // Show both buttons again if no match
    clicked1.style.visibility = 'visible';
    button.style.visibility = 'visible';
    alert("❌ Not a Match");
    clicked1 = null;
  }
}
</script>

</body>
</html>

--------------------------------------------------------------------------------------------------------------
Other Code   Button Code Without Null variable 
--------------------------------------------------------------------------------------------------------------

<button id="btn1">Button 1</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn2">Button 2</button>
<script>
var buttons=document.querySelectorAll("button");
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener("click",buttonClicked);
}
function buttonClicked(event){
var button=event.target;
var buttons=document.querySelectorAll("button");
for(var i=0;i<buttons.length;i++){
if(buttons[i].style.visibility==="hidden"){
if(buttons[i]===button)break;
if(buttons[i].id===button.id){
buttons[i].remove();
button.remove();
alert("✅ Match Found!");
}else{
buttons[i].style.visibility="visible";
alert("❌ Not a Match");
}
return;
}
}
button.style.visibility="hidden";
}
</script>


--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------

<button id="btn1">Button 1</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn2">Button 2</button>

<script>
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function() {
    var buttons = document.querySelectorAll("button");
    for (var i = 0; i < buttons.length; i++) {
      if (buttons[i].style.visibility === "hidden") {
        if (buttons[i].id === this.id) {
          buttons[i].remove();
          this.remove();
          return alert("✅ Match Found!");
        }
        buttons[i].style.visibility = "visible";
        return alert("❌ Not a Match");
      }
    }
    this.style.visibility = "hidden";
  };
}
</script>

--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<button id="btn1">Button 1</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn2">Button 2</button>

<script>
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].style.visibility === "hidden") {
if (buttons[i].id === this.id) {
buttons[i].disabled = true;  // Disable the hidden matching button
this.disabled = true;        // Disable the clicked button
buttons[i].style.visibility = "visible"; // Show the hidden button
return alert("✅ Match Found!");
}
buttons[i].style.visibility = "visible";
return alert("❌ Not a Match");
}
}
this.style.visibility = "hidden";
};
}
</script>

--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <style>
    .BtnClass {
      width: 100px;
      height: 60px;
      font-size: 20px;
      margin: 10px;
    }
  </style>
</head>
<body>

<!-- Buttons with matching data-match values -->
<button id="btn1a" class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button id="btn1b" class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button id="btn2a" class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>
<button id="btn2b" class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>

<script>
let clicked1 = null;

function buttonClicked(button) {
  // First click
  if (clicked1 === null) {
    clicked1 = button;
    clicked1.style.background = 'orange';
    return;
  }

  // Prevent double-clicking same button
  if (button === clicked1) return;

  button.style.background = 'orange';

  // Compare by data-match (not text)
  if (clicked1.dataset.match === button.dataset.match) {
    setTimeout(() => {
      clicked1.remove();
      button.remove();
      clicked1 = null;
    }, 300);
    alert("✅ ID Match Found!");
  } else {
    setTimeout(() => {
      clicked1.style.background = '';
      button.style.background = '';
      clicked1 = null;
    }, 500);
    alert("❌ Not a Match");
  }
}
</script>

</body>
</html>


--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>

<button id="btn1" onclick="buttonClicked(event)">Button 1</button>
<button id="btn1" onclick="buttonClicked(event)">Button 1</button>
<button id="btn2" onclick="buttonClicked(event)">Button 2</button>
<button id="btn2" onclick="buttonClicked(event)">Button 2</button>

<script>
let firstClick = null;

function buttonClicked(event) {
  const button = event.target;

  if (firstClick) {
    if (button === firstClick) return;

    if (firstClick.id === button.id) {
      firstClick.remove();
      button.remove();
      alert("✅ Match Found!");
    } else {
      alert("❌ Not a Match");
    }

    firstClick = null;
  } else {
    firstClick = button;
  }
}
</script>

</body>
</html>



--------------------------------------------------------------------------------------------------------------
Other Code   
--------------------------------------------------------------------------------------------------------------

<html>
<head>
  <style>
    button {
      width: 120px;
      height: 60px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<!-- Buttons with same IDs for matching -->
<button id="btn1">Button 1</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn2">Button 2</button>

<script>
var firstClick = null;

// Collect all buttons into BtnArray
var BtnArray = document.querySelectorAll("button");

// Loop through all buttons and assign click handler
for (var i = 0; i < BtnArray.length; i++) {
  BtnArray[i].onclick = function(event) {
    var button = event.target;

    if (firstClick) {
      if (button === firstClick) return;

      if (firstClick.id === button.id) {
        firstClick.remove();
        button.remove();
        alert("✅ Match Found!");
      } else {
        alert("❌ Not a Match");
      }

      firstClick = null; // Reset after second click
    } else {
      firstClick = button; // Store first button
    }
  };
}
</script>

</body>


-----------------------------------------------------------------------------------------------
Other Code   
----------------------------------------------------------------------------------------------------

<html>
<body>

<!-- Big buttons -->
<button id="A" onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button id="A" onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button id="B" onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<button id="B" onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>

<p id="result" style="font-size:20px;"></p>

<script>
let clickedId1 = null;
let result = document.querySelector("#result");

function handleClick(event) {
  if (event.target === clickedId1) return;

  if (clickedId1 == null) {
    clickedId1 = event.target;
    clickedId1.style.background = "yellow";
    result.textContent = "";
  } else {
    if (clickedId1.id === event.target.id) {
      result.textContent = "Match!";
      clickedId1.disabled = true;
      event.target.disabled = true;
    } else {
      result.textContent = "Try Again!";
    }
    
    // Reset background
    clickedId1.style.background = "";
    event.target.style.background = "";
    // Clear selection
    clickedId1 = null;
  }
}
</script>
</body>
</html>
</html>
-------------------------------------------------------------------------------------------------------
Other Code   
---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.BtnClass {
width:100px;
height:60px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>

<!-- Buttons with matching data-match values -->
<button id="btn1a" class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button id="btn1b" class="BtnClass" data-match="1" onclick="buttonClicked(this)">Button 1</button>
<button id="btn2a" class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>
<button id="btn2b" class="BtnClass" data-match="2" onclick="buttonClicked(this)">Button 2</button>

<script>
let clicked1 = null;

function buttonClicked(button) {
// First click
if (clicked1 === null) {
clicked1 = button;
clicked1.style.background = 'orange';
return;
}

// Prevent double-clicking the same button
if (button === clicked1) return;

button.style.background = 'orange';

// Compare match values
if (clicked1.dataset.match === button.dataset.match) {
clicked1.remove();
button.remove();
alert("✅ ID Match Found!");
} else {
clicked1.style.background = '';
button.style.background = '';
alert("❌ Not a Match");
}

// Reset after second click
clicked1 = null;
}
</script>

</body>
</html>
-------------------------------------------------------------------------------------------------------
Other Code    Without Dataset 
---------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
.BtnClass {
width:100px;
height:60px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>

<!-- Buttons with matching IDs -->
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button id="A1" class="BtnClass" onclick="buttonClicked(this)">Button 1</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button 2</button>
<button id="B1" class="BtnClass" onclick="buttonClicked(this)">Button 2</button>

<script>
let clicked1 = null;

function buttonClicked(button) {
// First click
if (clicked1 === null) {
clicked1 = button;
clicked1.style.background = 'orange';
return;
}

// Prevent double-clicking the same button
if (button === clicked1) return;

button.style.background = 'orange';

// Compare IDs
if (clicked1.id === button.id) {
clicked1.remove();
button.remove();
alert("✅ ID Match Found!");
} else {
clicked1.style.background = '';
button.style.background = '';
alert("❌ Not a Match");
}

// Reset after second click
clicked1 = null;
}
</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