JQUERY FANCY DRAGGABLE CAPTCHA

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

jQuery draggable captcha

<script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="A")&&
                            (arr[1].innerHTML=="B")&&
                            (arr[2].innerHTML=="C")&&
                            (arr[3].innerHTML=="D")&&
                            (arr[4].innerHTML=="E")&&
                            (arr[5].innerHTML=="F"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>