Primes Game Example

by Ron Eaglin

HTML

<h1><div class="paddingP"> <br/>
Math Game Example - Dropping Primes </div></h1>

<div id="content">

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

  <div id="successMessage">
    <h2>You know your primes!</h2>
    <button onclick="init()">Try Again</button>
  </div>

</div>

CSS

* {margin:0; padding:0; outline:0}
body 	{font:14px Verdana,Arial; color:#000; 
 	
	background-size:1440px 1000px; 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #985630;	
	
	}
.primes {font-size: 300%;}
.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; background:#3d3d3d}
#info li {width:160px; border-top:none;...

JavaScript

$(init);

function init(){
 
    var primes = [2 ,3, 5, 7, 11, 13 ];
               
    var numbers = [{ 
        number: 4, 
        primes: [2, 2]
       },{
        number:6,
        primes: [2, 3]
      }];      // Add More here           
   
    $('#cardPile').html( '' );
    $('#cardSlots').html( '' );
    
    //Hide the success message
   
   $('#successMessage').hide();
   $('#successMessage').css( {
        left: '580px',
        top: '250px',
        width: 0,
        height: 0
                });


 numbers.sort( function() { return Math.random() - .5} ); 
    
 for (var i = 0; i < primes.length; i++) {
     
     var theDiv = $('<div>' + primes[i] + '</div>');
     theDiv.addClass("primes");
     theDiv.id = i;
     theDiv.data('number',primes[i]);
     theDiv.appendTo('#cardSlots');
     theDiv.draggable( {
            containment: '#content',
            stack: '#cardSlots div',
            cursor: 'move',
            revert: true
        });
    } // end for loop
    
    // Now you would pick a random number, and put down
    // the number and slots for the primes.
    
    
    
                 
} // Close function Init                 
                 
function handleCardDrop(event, ui){
    
}