<!doctype html> <html lang="en"> <head> <title>Cards</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript"> var correctCards = 0; $( init ); function init() { var numbers = ['W', 'H', 'A', 'T']; numbers.sort( function() { return Math.random() - .5 } ); for ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } function handleWhat( event, ui ) { var draggable = ui.draggable; var android = $(this).data( 'U' ); var science = ui.draggable.data( 'Y' ); if ( android == science ) { ui.draggable.addClass( 'correct' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; } } } </script> </head> <body> <div id="content"> <div id="cardPile"> </div> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)