Firefly Card Game

HTML

<h1><div class="paddingP"> <br/>
Assignment 9: How about a game? </div></h1>

<div class="paddingP">
Here we have 9 characters from Firefly.  Click and drag the image to the correct name!  Check out the amazing artist David Desbois at <a href="http://summerglauwiki.com/blog/firefly_sketch_card/2012-10-18-618">sumemrglauwiki.com</a>
</div>

<div id="content">

  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>

  <div id="successMessage">
    <h2>Serenity could use another crew member like you!</h2>
    <button onclick="init()">Play Again</button>
  </div>

</div>

CSS

* {margin:0; padding:0; outline:0}
body 	{font:14px Verdana,Arial; color:#000; 
 	background-image:url("http://www.fallonitsolutions.com/pippinhillvin.jpg");
	background-size:1440px 1000px; 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #985630;	
	
	}
.nav {height:32px; background:#ffffff; color:#3d3d3d; z-index:1000} /*Dark ash*/
.menu a {float:left; color:#14521E; text-decoration:none; width:120px; height:28px; padding-top:8px} /*Kelly Green*/
.menu span {float:left; color:#14521E; text-decoration:none; width:120px; height:28px; padding-top:8px} /*Kelly Green*/
.menu a:hover {color:#14521E} /*Kelly Green*/
.menu {list-style:none; font:16px Arial,Verdana; text-align:center; width:600px; margin:0 auto}
.menu li {position:relative; float:left; width:120px; z-index:1000}
.menu ul {display:none; position:absolute; font:normal 16px Arial,Verdana; top:36px; left:0; background:#aaaaaa; display:none; list-style:none}
.menu ul li {float:none; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:#ffffff; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#ffffff; color:#14521E} /*Kelly Green*/
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:#ffffff; color:#14521E; height:22px; padding-top:5px} /*Kelly Green*/
.menu ul ul {left:120px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.submenu a:hover {color:#14521E;}/*Kelly Green*/
.menu li.submenu a:visited {color:#a31d08;}/*Burnt Orange*/
.menu ul a:visited {color:#a31d08;} /*Burnt Orange*/
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#151869; background:#ffffff} /*Dark Navy*/
li.menuhover span, li.menuhover li.menuhover span {color:#14521E; background:#ffffff} /*Kelly Green*/
#info {width:180px;...

JavaScript

// Credit to Carolyn Fallon for inspiration here
var correctCards = 0;
$(init);
function init(){

    //Hide the success message
    $('#successMessage').hide();
    $('#successMessage').css( {
        left: '580px',
        top: '250px',
        width: 0,
        height: 0
    });

    //Reset the game
    correctCards = 0;
    $('#cardPile').html( '' );
    $('#cardSlots').html( '' );

    var directory = "https://cop4813eaglin.pbworks.com/f/"
    
    //Create the pile of shuffled cards
    var cards = [{ 
        number:1, 
        name: 'Mal'
    },{
        number:2,
        name: 'Zoe'
    },{
        number:3,
        name:'Kaylee'
    },{
        number: 4,
        name: 'Book'
    },{
        number: 5,
        name: 'Simon'
    },{
        number: 6,
        name: 'River'
    },{
        number: 7,
        name:'Jayne'
    },{
        number: 8,
        name: 'Inara'
    },{
        number: 9,
        name: 'Wash'}];



    
    // Randomly sort the cards    
    cards.sort( function() { return Math.random() - .5} );

    for (var i= 0; i<cards.length; i++){
    
     // Place the cards on the card pile while also
     // setting the div key: number to be the card number
     // and setting draggable attribute of the card
     // $('<div>' + cards[i].number + '</div>')
     // constructs a <div> element with the number in the div
     // .data adds metadata and returns the div
     // .attr( 'id' sets the id attribute of the div
     // .appendTo appends the div to cardPile
     // .draggable makes it draggable with the arguments given
     
        var theDiv = $('<div></div>');
        theDiv.data( 'number', cards[i].number );
        theDiv.attr( 'id', 'card'+cards[i].number );
        theDiv.appendTo( '#cardPile' );
        theDiv.css("background", "url(" + directory + cards[i].name + ".jpg) no-repeat");

        theDiv.draggable( {
            containment: '#content',
            stack: '#cardPile div',
            cursor: 'move',
           ...