Drag and Drop Captcha Demo

What is it:

Perl Fancy Captcha is a remake of PHP Ajax Fancy jQuery plugin that helps you protect your web pages from spammers and bots. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Perl Fancy Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize (take a look at file structure for more information).
If you have any ideas, comment or just want to say hello, please do - any feedback, ideas and support will be greatly appreciated.

Update for September 2009:

• reduced size,
• easier integration,
• easy translate,
• few common problems fixed.

File structure:

-captcha
–imgs
–captcha.css
–jquery.captcha.js
–captcha.cgi
–iepngfix.htc
-latest-jquery
-latest-jquery-ui
-example.html
-readme.txt

How it works:

It calls captcha.cgi file and gets a random number. Perl file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of “pencil”, “scissors”, “clock”, “heart”, “note”, so if number 3 is returned it will take “heart” and look for item-heart.png file in /imgs directory.

How to install:

1. As usual, copy /captcha folder somewhere in your hosting.
2. If you don’t have latest jquery and jquery.ui integrated already, copy these two folders.
3. Edit page where you want to put captcha and insert:

1. <!-- Begin of captcha -->
2. <div class="ajax-fc-container"></div>
3. <!-- End of captcha -->

Put this in header of your page

1. <script type="text/javascript" charset="utf-8">
2. $(function() {
3. $(".ajax-fc-container").captcha({formId: "myForm"});
4. });
5. </script>


Default Options:


1. borderColor: "",
2. captchaDir: "captcha",
3. url: "captcha/captcha.cgi",
4. formId: "myForm",
5. text: "Verify that you are a human,
drag scissors into the circle.”,
6. items: Array(”pencil”, “scissors”, “clock”, “heart”, “note”)


Dependencies:

• ui.core.js
• ui.draggable.js
• ui.droppable.js

Download:

Please note, if you downloaded files to your computer it won’t work properly unless you start it through web server since it uses AJAX requests.

• Click here to download Perl source code! (68kb)

Links:

• Perl and Ajax Fancy Captcha
• PHP and Ajax Fancy Captcha
• WordPress and Ajax Fancy Captcha
• jQuery plugin page
• Home Page

Staying up to date:

If you like Perl Ajax Fancy Captcha, please subscribe to RSS and you will receive latest info.

Tags: ajax, captcha, fancy, perl, plugin

This entry was posted on Tuesday, September 8th, 2009 at 10:54 am and is filed under Playground. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.