Download now!

These are the two files that make the script work.

style.css


/* Stylesheet file for NPPCaptcha system
   File version: 1.0
   Author: Nenad Lukic
*/

body {
  font-family: "Georgia", serif;
}

h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#content {
  margin: 30px 70px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.nppcaptcha {
  display:none;
  position:absolute;
  width:300px;
  margin:auto;
  width:330px;
  text-align:center;
  z-index:10;
  border:1px solid #fff;
  background:url(img/bw.png);
  padding:20px;
}

.backgray {
  position:absolute;
  top:0;
  left:0;
  background:url(img/bb.png);
}

#arr { 
  float:left;
  padding: 2px;
  margin-top:50px;
}

#containers {
  margin: 50px auto 0 auto;
  background:url(img/bw.png);
}

#numbers {
  margin: 0 auto;
  background:url(img/bw.png);
}

#containers, #numbers {
  float:left;
  margin:20px;
  padding: 20px;
  border: 2px solid #333;
}

#containers div, #numbers div {
  width: 38px;
  height: 40px;
  padding: 10px;
  padding-top: 15px;
  margin-bottom:10px;
  border: 2px solid #333;
  background:#0CF;
}

#containers div:first-child, #numbers div:first-child {
  margin-left: 0;
}

#containers div.hovered {
  background: #aaa;
}

#containers div {
  border-style: dotted;
}

#numbers div {
  background: #666;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 0 3px #000;
}

#numbers div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card10.correct { background: violet; }

.clb { clear:both; }

main.js


 /*
Main script file for NPPCaptcha system
Version: 1.0
Author: Nenad Lukic
Licence: Open Source
Website: http://www.nenadspp.com/projects

Choose the type of captcha that you want to use by adding it into into the function parameters
1-Drag all numbers into their containers respectively
2-Drag a single number into it's container
*/

//Version variable
var nppcver = '1.0';
// Set the guess var to 0
var guessed = 0;
// Total amount of numbers you will use, you must define them in the 'numbers' and 'words' arrays accordingly. There is no limit
var n = 5;

// Success message
var gsmessage = 'You`ve succesfully completed the captcha, you will be redirected';

// Generate captcha when initcaptcha() function is called upon

function initcaptcha(fid,type) {
  var words = [ 'one', 'two', 'three', 'four', 'five' , 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen'];
  // Reset the counter
  var guessed = 0;
  var successful = 0;
  window.formid = fid;
  window.type = type;
  // Instruction messages
  if (type==2) {
  // Generate random number for placement
  window.rn=Math.floor(Math.random()*(n))+1
  var gdmessage = 'Place number '+window.rn+' into it`s container';
  } else { var gdmessage = 'Place all the numbers into their containers';}
  
  // Clear all inner html and display instructions
  $('#numbers').html( '' );
  $('#containers').html( '' );
  $('#gmessage').html( gdmessage );
  
  // Show the captcha popup centered on page and create a full body background with fade-in effect
  $('.nppcaptcha').css("top", (($(window).height() - $('.nppcaptcha').outerHeight()) / 4) + 
                                                $(window).scrollTop() + "px");
  $('.nppcaptcha').css("left", (($(window).width() - $('.nppcaptcha').outerWidth()) / 2) + 
                                                $(window).scrollLeft() + "px");
  $('.nppcaptcha').fadeIn("slow");
  $('.backgray').fadeIn("slow");
  var windowWidth = $(document).width(); 
  var windowHeight = $(document).height();  
  $(".backgray").css({  
  "width": windowWidth,
  "height": windowHeight  
  });
  $(".backgray").click(function() {
  $('.nppcaptcha').fadeOut("slow");
  $('.backgray').fadeOut("slow");
  });
  
  // Generate numbers
  var numbers = new Array();
  for ( var i=0; i<n; i++ ) {
	  numbers[i+1] = i+1;  
  }
  
  // Create the dockers
  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<n; i++ ) {
    $('
' + numbers[i] + '
').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#numbers' ).draggable( { containment: ".nppcaptcha", stack: '#numbers div', cursor: 'move', revert: true } ); } // Create the docking containers for ( var i=1; i<=n; i++ ) { $('
' + words[i-1] + '
').data( 'number', i ).appendTo( '#containers' ).droppable( { accept: '#numbers div', hoverClass: 'hovered', drop: handleCardDrop } ); } $('.nppcaptcha').append('
NPPCaptcha v'+nppcver+' | Visit project page
'); } function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); fid = window.formid; type = window.type; // Check if the container is corectly chosen and apply effects if so. if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); guessed++; if ( slotNumber == window.rn ) { successful = 1;} } // If all the cards have been placed correctly then display a message // and reset the cards for another go if (type==1) { if ( guessed == n ) { $('#gmessage').html( gsmessage ); timeoutID = window.setTimeout(function() {$("#"+fid).submit();},2000); // Wait 2 seconds before submitting to display success message } } else if ( successful == 1) { $('#gmessage').html( gsmessage ); timeoutID = window.setTimeout(function() {$("#"+fid).submit();},2000); // Wait 2 seconds before submitting to display success message } }