Dateigrösse: 7.44 kb
1 <!DOCTYPE html> 2 <html lang="de"> 3 <head> 4 5 <title>jQuery Drag'n'Drop Cards Game</title> 6 7 <meta charset="utf-8"> 8 <meta content='width=device-width, initial-scale=1.0, user-scalable=no' name='viewport'> 9 <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'> 10 11 <link type="text/css" rel="stylesheet" href="http://www.michaelster.ch/ajax_libs/jQuery/touch.punch/style2.css"> 12 13 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 14 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 15 <!-- 16 <script src="jquery.ui.touch-punch.min.js"></script> 17 --> 18 19 <script type="text/javascript"> 20 21 function winClose() { 22 // Hide the success message 23 $('#successMessage').fadeOut(); 24 } 25 26 var correctCards = 0; 27 var incorrectCards = 0; 28 var tryCards = 0; 29 30 $( init ); 31 32 function init() { 33 34 // Hide the success message 35 $('#successMessage').hide(); 36 37 // Reset exercise 38 correctCards = 0; 39 incorrectCards = 0; 40 tryCards = 0; 41 $('#header').html( '<h3>Was passt zusammen?</h3>' ); 42 $('#cardPile').html( '' ); 43 $('#cardSlots').html( '' ); 44 45 /* Shuffle arrays */ 46 function shuffle(array) { 47 var rand, index = -1, 48 length_ = array.length, 49 result = Array(length_); 50 while (++index < length_) { 51 rand = Math.floor(Math.random() * (index + 1)); 52 result[index] = result[rand]; 53 result[rand] = array[index]; 54 } 55 return result; 56 } 57 58 // With ES2015 you can use this one: 59 Array.prototype.shuffle = function() { 60 let m = this.length, i; 61 while (m) { 62 i = (Math.random() * m--) >>> 0; 63 [this[m], this[i]] = [this[i], this[m]] 64 } 65 return this; 66 } 67 68 <?php 69 function cleanArray($arrInput) { 70 foreach($arrInput as $value) { 71 $value = trim($value); 72 if( $value=='' || empty($value) ) 73 continue; 74 $arrCleaned[] = $value; 75 } 76 return $arrCleaned; 77 } 78 $arrRight = array('uno', 'due', 'tre', 'quatro', ' ', 'cinque', 'sei','sette','','',''); 79 $arrDrag = cleanArray($arrRight); 80 $re = ''; 81 $keys = ''; 82 foreach($arrDrag as $key => $value) { 83 $komma = $key ? ',' : ''; 84 $re .= $komma; 85 $re .= '"'. $value .'"'; 86 $keys .= $komma; 87 $keys .= $key; 88 } 89 ?> 90 // Create array list right (draggable) 91 var numbers = [ <?php echo $re; ?> ]; 92 var keys = [ <?php echo $keys; ?> ]; 93 console.log(keys); 94 keys.shuffle(); 95 console.log(keys); 96 for ( var i=0; i<numbers.length; i++ ) { 97 $('<li title="">' + numbers[keys[i]] + '</li>').data( 'number', keys[i] ).attr( 'id', 'card' ).appendTo( '#cardPile' ).draggable( { 98 containment: '#content', 99 stack: '#cardPile li', 100 cursor: 'move', 101 revert: true 102 } ); 103 } 104 <?php 105 $arrLeft = array('eins', 'zwei', 'drei', 'vier','', 'fünf', 'sechs','sieben',''); 106 $arrDrop = cleanArray($arrLeft); 107 $re = ''; 108 $keys = ''; 109 foreach($arrDrop as $key => $value) { 110 $komma = $key ? ',' : ''; 111 $re .= $komma; 112 $re .= '"'. $value .'"'; 113 $keys .= $komma; 114 $keys .= $key; 115 } 116 ?> 117 // Create array list left (droppable) 118 var words = [ <?php echo $re; ?> ]; 119 var keys = [ <?php echo $keys; ?> ]; 120 keys.sort( function() { return Math.random() - .1 } ); 121 keys = shuffle(keys); 122 123 for ( var i=0; i<words.length; i++ ) { 124 $('<li title="">' + words[keys[i]] + '</li>').data( 'number', keys[i] ).appendTo( '#cardSlots' ).droppable( { 125 accept: '#cardPile li', 126 hoverClass: 'hovered', 127 drop: handleCardDrop 128 } ); 129 } 130 131 } 132 133 function handleCardDrop( event, ui ) { 134 var slotNumber = $(this).data( 'number' ); 135 var cardNumber = ui.draggable.data( 'number' ); 136 137 // If the div was dropped to the correct slot, 138 // change the colour, position it directly on top 139 // of the slot, and prevent it being dragged again 140 141 if ( slotNumber == cardNumber ) { 142 ui.draggable.removeClass( 'wrong' ); 143 ui.draggable.addClass( 'correct' ); 144 ui.draggable.draggable( 'disable' ); 145 ui.draggable.animate( { 'opacity':'0.01' }, 'slow' ); 146 //ui.draggable.css( { 'color':'transparent' } ); 147 $( "<span class='appendTo'></span>" ).text( ui.draggable.text() ).appendTo( this ); 148 $(this).droppable( 'disable' ); 149 $(this).css( { 'border-style':'solid' } ); 150 ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); 151 ui.draggable.draggable( 'option', 'revert', false ); 152 correctCards++; 153 tryCards++; 154 } else { 155 ui.draggable.addClass( 'wrong' ); 156 incorrectCards++; 157 tryCards++; 158 } 159 160 // If all the divs have been placed correctly then display 161 // a message and reset the exercise for another go 162 163 var anzMatches = <?php echo count($arrDrag); ?>; 164 if ( correctCards == anzMatches ) { 165 $('#header').html( '' ); 166 $('#successMessage').show(); 167 $('#successMessage').animate( { 168 left: '55%', 169 top: '25%', 170 width: '400px', 171 height: '160px', 172 opacity: 0.9 173 } ); 174 $('#successMessage').draggable(); 175 var msg = tryCards == anzMatches ? 'TOP!' : 'Bravo!'; 176 $('#successMessage').find( 'h2' ).html( msg ); 177 $('#successMessage').find( 'pre' ).html( correctCards-incorrectCards + ' Punkte bei ' + tryCards + ' Versuchen.' ); 178 } 179 else if ( incorrectCards-correctCards == anzMatches ) { 180 $('#header').html( '' ); 181 $('#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>' ); 182 correctCards = 0; 183 incorrectCards = 0; 184 tryCards = 0; 185 $('#cardPile').html( '' ); 186 $('#cardSlots').html( '' ); 187 } else { 188 var total = correctCards-incorrectCards; 189 var pts = total == 1 ? 'Punkt' : 'Punkte'; 190 if(total > 0) { 191 $('#header').css( { 'color':'#666','font':'bold 1.25em "Lucida Sans Unicode",verdana','line-height':'200%' } ).html( correctCards-incorrectCards + ' ' + pts ); 192 } else { 193 $('#header').css( { 'color':'#ebedf2' } ).html( '' ); 194 } 195 } 196 197 } 198 199 /********** screen-infos *********/ 200 201 function dims() { 202 alert( ' \nscreen.height: ' + 203 screen.height + 204 ' \nscreen.width: ' + 205 screen.width + 206 ' \nscreen.availHeight: ' + 207 screen.availHeight + 208 ' \nscreen.availWidth: ' + 209 screen.availWidth + 210 ' \nwindow.innerHeight: ' + 211 window.innerHeight + 212 ' \nwindow.innerWidth: ' + 213 window.innerWidth + 214 ' \ndocument.body.clientHeight: ' + 215 document.body.clientHeight + 216 ' \ndocument.body.clientWidth: ' + 217 document.body.clientWidth ); 218 } 219 </script> 220 221 </head> 222 223 224 225 226 <body> 227 228 <button style="position:absolute; top:0; right:0;">x</button> 229 230 <script> 231 $( "button" ).click(function() { 232 $( "h3" ).hide( "drop", { direction: "down" }, 1000 ); 233 }); 234 </script> 235 236 <div id="successMessage" ondblclick="winClose()"> 237 <h2></h2> 238 <pre></pre> 239 <div class="newgame" onclick="init()">reset</div> 240 </div> 241 242 <div class="wideBox" id="header"> 243 <h2>Was passt zusammen?</h2> 244 </div> 245 246 <div id="content"> 247 248 <div id="cardSlots"> </div> 249 250 <div id="cardPile"> </div> 251 252 <p style="clear:left; height:1px;"></p> 253 254 </div> 255 256 <div class="endBox" onclick="dims()" id="footer"> 257 <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> 258 </div> 259 260 </body> 261 </html> 262