https://cbe.org.za/webmodules/common/pcap/puzzle.js

1(function ( $ ) {
2
3				$.fn.PuzzleCAPTCHA = function( options ) {
4
5					var sets = $.extend({
6						imageURL: "http://www.choikangstory.com/test-image.jpg",
7						width: "auto",
8						height: "auto",
9						columns: 3,
10						rows: 2,
11						targetInput: null,
12						targetVal: null,
13						targetButton: null
14					}, options );
15
16					tmpW=sets.width;
17					if(tmpW!='auto'){
18						tmpW+='px';
19					}
20					tmpH=sets.height;
21					if(tmpH!='auto'){
22						tmpH+='px';
23					}
24
25					var tmpObj=this;
26					tmpObj.addClass("puzzleCAPTCHA");
27					tmpObj.append('<div class="pcBox"><div class="pcBoxBG"><img src="'+sets.imageURL+'" style="width:'+tmpW+';height:'+tmpH+';"></div></div> <div class="pcAnswer"></div>');
28
29					tmpObj.find(".pcBoxBG img").load(function(){
30						tmpImg=$(this);
31
32						if(sets.width == 'auto'){
33							tmpW=tmpImg.width();
34						}else{
35							tmpW=sets.width;
36						}
37
38						if(sets.height == 'auto'){
39							tmpH=tmpImg.height();
40						}else{
41							tmpH=sets.height;
42						}
43
44						//console.log(tmpW);
45						//console.log(tmpH);
46
47						itemW = Math.round(tmpW/sets.columns);
48						itemH = Math.round(tmpH/sets.rows);
49
50						tmpObj.find(".pcAnswer").width(itemW).height(itemH).append( tmpImg.clone() );
51
52						tmpObj.find(".pcBox").width(tmpW-1);
53						tmpObj.find(".pcBox").height(tmpH-1);
54
55						tmpAnswer=Math.floor(Math.random() * sets.columns * sets.rows);
56
57						var x,y,tmpItem,i;
58
59						tmpItem = $(document.createElement("div"));
60						tmpItem.addClass("pcBoxItem");
61
62						i=0;
63
64						for(x=0;x<sets.columns;x++){
65							for(y=0;y<sets.rows;y++){
66								tmpLeft=itemW*x;
67								tmpTop=itemH*y;
68								if(i==tmpAnswer){
69									answerLeft=tmpLeft;
70									answerTop=tmpTop;
71								}
72
73								_item=tmpItem.clone().attr("data-val",i).css({
74									width:itemW,
75									height:itemH,
76									left:tmpLeft,
77									top:tmpTop
78								}).append(tmpImg.clone());
79								tmpObj.find(".pcBox").append(_item);
80
81								i++;
82							}
83						}
84						tmpObj.find(".pcBoxItem img, .pcAnswer img").css({'margin-left':answerLeft*-1,'margin-top':answerTop*-1}).width(tmpW).height(tmpH);
85
86						tmpObj.find(".pcBoxItem").click(function(){
87							if($(this).data("val")==tmpAnswer){
88								tmpObj.find(".pcBoxItem").fadeOut(300);
89								if(sets.targetInput!=null){
90									$(sets.targetInput).val(sets.targetVal);
91								}
92								if(sets.targetButton!=null){
93									if(typeof sets.targetButton == "function"){
94										sets.targetButton(true)
95									}else{
96										$(sets.targetButton).show();
97									}	
98										
99								}
100							}else{
101								if(sets.targetButton!=null){
102									if(typeof sets.targetButton == "function"){
103										sets.targetButton(false)
104									}else{
105										$(sets.targetButton).hide();
106									}	
107										
108								}
109							}
110						});
111
112					});
113
114					return this;
115					
116
117				};
118
119			}( jQuery ));