Dateigrösse: 7.44 kb
1<!DOCTYPE html><html lang="de"><head><title>jQuery Drag'n'Drop Cards Game</title><meta charset="utf-8"><meta content='width=device-width, initial-scale=1.0, user-scalable=no' name='viewport'><meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'><link type="text/css" rel="stylesheet" href="http://www.michaelster.ch/ajax_libs/jQuery/touch.punch/style2.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!-- <script src="jquery.ui.touch-punch.min.js"></script> --><script type="text/javascript">function winClose() { // Hide the success message $('#successMessage').fadeOut();}var correctCards = 0;var incorrectCards = 0;var tryCards = 0;$( init );function init() { // Hide the success message $('#successMessage').hide(); // Reset exercise correctCards = 0; incorrectCards = 0; tryCards = 0; $('#header').html( '<h3>Was passt zusammen?</h3>' ); $('#cardPile').html( '' ); $('#cardSlots').html( '' ); /* Shuffle arrays */ function shuffle(array) { var rand, index = -1, length_ = array.length, result = Array(length_); while (++index < length_) { rand = Math.floor(Math.random() * (index + 1)); result[index] = result[rand]; result[rand] = array[index]; } return result; } // With ES2015 you can use this one: Array.prototype.shuffle = function() { let m = this.length, i; while (m) { i = (Math.random() * m--) >>> 0; [this[m], this[i]] = [this[i], this[m]] } return this; } <?php function cleanArray($arrInput) { foreach($arrInput as $value) { $value = trim($value); if( $value=='' || empty($value) ) continue; $arrCleaned[] = $value; } return $arrCleaned; } $arrRight = array('uno', 'due', 'tre', 'quatro', ' ', 'cinque', 'sei','sette','','',''); $arrDrag = cleanArray($arrRight); $re = ''; $keys = ''; foreach($arrDrag as $key => $value) { $komma = $key ? ',' : ''; $re .= $komma; $re .= '"'. $value .'"'; $keys .= $komma; $keys .= $key; } ?> // Create array list right (draggable) var numbers = [ <?php echo $re; ?> ]; var keys = [ <?php echo $keys; ?> ]; console.log(keys); keys.shuffle(); console.log(keys); for ( var i=0; i<numbers.length; i++ ) { $('<li title="">' + numbers[keys[i]] + '</li>').data( 'number', keys[i] ).attr( 'id', 'card' ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile li', cursor: 'move', revert: true } ); } <?php $arrLeft = array('eins', 'zwei', 'drei', 'vier','', 'fünf', 'sechs','sieben',''); $arrDrop = cleanArray($arrLeft); $re = ''; $keys = ''; foreach($arrDrop as $key => $value) { $komma = $key ? ',' : ''; $re .= $komma; $re .= '"'. $value .'"'; $keys .= $komma; $keys .= $key; } ?> // Create array list left (droppable) var words = [ <?php echo $re; ?> ]; var keys = [ <?php echo $keys; ?> ]; keys.sort( function() { return Math.random() - .1 } ); keys = shuffle(keys); for ( var i=0; i<words.length; i++ ) { $('<li title="">' + words[keys[i]] + '</li>').data( 'number', keys[i] ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile li', hoverClass: 'hovered', drop: handleCardDrop } ); }}function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); // If the div was dropped to the correct slot, // change the colour, position it directly on top // of the slot, and prevent it being dragged again if ( slotNumber == cardNumber ) { ui.draggable.removeClass( 'wrong' ); ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); ui.draggable.animate( { 'opacity':'0.01' }, 'slow' ); //ui.draggable.css( { 'color':'transparent' } ); $( "<span class='appendTo'></span>" ).text( ui.draggable.text() ).appendTo( this ); $(this).droppable( 'disable' ); $(this).css( { 'border-style':'solid' } ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; tryCards++; } else { ui.draggable.addClass( 'wrong' ); incorrectCards++; tryCards++; } // If all the divs have been placed correctly then display // a message and reset the exercise for another go var anzMatches = <?php echo count($arrDrag); ?>; if ( correctCards == anzMatches ) { $('#header').html( '' ); $('#successMessage').show(); $('#successMessage').animate( { left: '55%', top: '25%', width: '400px', height: '160px', opacity: 0.9 } ); $('#successMessage').draggable(); var msg = tryCards == anzMatches ? 'TOP!' : 'Bravo!'; $('#successMessage').find( 'h2' ).html( msg ); $('#successMessage').find( 'pre' ).html( correctCards-incorrectCards + ' Punkte bei ' + tryCards + ' Versuchen.' ); } else if ( incorrectCards-correctCards == anzMatches ) { $('#header').html( '' ); $('#header').css( { 'color':'#a00','font':'bold 1.25em "Lucida Sans Unicode",verdana','line-height':'200%' } ).html( '<span onclick="location.reload();" onmouseover="this.style.color=\'#fa7b54\'" onmouseout="this.style.color=\'#a00\'" style="cursor:pointer;">Sorry, das war leider nix! Versuchen Sie\'s noch einmal. ('+anzMatches+')</span>' ); correctCards = 0; incorrectCards = 0; tryCards = 0; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); } else { var total = correctCards-incorrectCards; var pts = total == 1 ? 'Punkt' : 'Punkte'; if(total > 0) { $('#header').css( { 'color':'#666','font':'bold 1.25em "Lucida Sans Unicode",verdana','line-height':'200%' } ).html( correctCards-incorrectCards + ' ' + pts ); } else { $('#header').css( { 'color':'#ebedf2' } ).html( '' ); } }}/********** screen-infos *********/function dims() { alert( ' \nscreen.height: ' + screen.height + ' \nscreen.width: ' + screen.width + ' \nscreen.availHeight: ' + screen.availHeight + ' \nscreen.availWidth: ' + screen.availWidth + ' \nwindow.innerHeight: ' + window.innerHeight + ' \nwindow.innerWidth: ' + window.innerWidth + ' \ndocument.body.clientHeight: ' + document.body.clientHeight + ' \ndocument.body.clientWidth: ' + document.body.clientWidth ); }</script></head><body><button style="position:absolute; top:0; right:0;">x</button> <script>$( "button" ).click(function() { $( "h3" ).hide( "drop", { direction: "down" }, 1000 );});</script><div id="successMessage" ondblclick="winClose()"> <h2></h2> <pre></pre> <div class="newgame" onclick="init()">reset</div></div><div class="wideBox" id="header"> <h2>Was passt zusammen?</h2> </div><div id="content"> <div id="cardSlots"> </div> <div id="cardPile"> </div> <p style="clear:left; height:1px;"></p></div><div class="endBox" onclick="dims()" id="footer"> <p><a target="_blank" href="http://jqueryui.com/droppable/#photo-manager">jQuery</a> | <a target="_blank" href="http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/">code</a> | <a target="_blank" href="https://www.w3schools.com/jquery/default.asp">w3schools</a></p></div></body></html>