PuzzleCAPTCHA

• Demo
• How it works
• How to use

Demo

Have a look at the live demo!!

http://plugins.supos.com.au/PuzzleCAPTCHA/

How it works

• It automatically generates a very simple jigsaw kind of puzzle from any image on the web.
• Need to lock the form by using [disabled="true"] on the submit button.
• You can generate a value by Server-side Script and put into the option called [targetVal] then it will pass when the form is submitted so can double check by Server-side script.

How to use

Basic Usage

1. Add the plugin script

   	<pre>&lt;script src="puzzleCAPTCHA.js"&gt;&lt;/script&gt;</pre>
   	
   </li>
   <li>
   	Add the style
   	<pre>&lt;link rel="stylesheet" href="puzzleCAPTCHA.css"&gt;</pre>
   </li>
   <li>
   	Add HTML
   	<pre>&lt;div id="PuzzleCaptcha"&gt;&lt;/div&gt;</pre>
   </li>
   <li>
   	Call me!!
   	<pre>
   

   <script> $("#PuzzleCaptcha").PuzzleCAPTCHA({ imageURL:'http://distilleryimage2.s3.amazonaws.com/c886e1100cbe11e3a77722000a1fbc49_5.jpg' }); </script>

Options // default value

imageURL // My instagram photo ;)

including [http://].

<dt>width // <small>"auto"</small></dt>
<dd>Use number<small>(* without "px")</small>, when you need to specify the width of the puzzle.</dd>

<dt>height // <small>"auto"</small></dt>
<dd>The same as [width].</dd>

<dt>columns // <small>3</small></dt>
<dd>Add number to divide in column.</dd>

<dt>rows // <small>2</small></dt>
<dd>Add number to divide in row.</dd>

<dt>targetInput // <small>null</small></dt>
<dd>
	Using jQuery selector - 
	<br>
	e.g) The input tag looks like:<br>

<input type="hidden" class="any-class-name-selector-for-input" name="the-name-that-you-want-to-confirm-on-server-side-script">

	<br>
	The value could be {targetInput:".any-class-name-selector-for-input"}
</dd>

<dt>targetVal // <small>null</small></dt>
<dd>The value that can be anything what you want to submit so you can confirm on submitted form.</dd>

<dt>targetButton // <small>null</small></dt>
<dd>
	Using jQuery selector - 
	<br>
	e.g) The button tag looks like:<br>
	<pre>&lt;button type="submit" disabled="true" class="any-class-name-selector-for-button" name="any-name"&gt;Submit!!&lt;/button&gt;</pre>
	<br>
	The value could be {targetButton:".any-class-name-selector-for-button"}

</dd>

*Thing to do:

• Validate the value passed when it is called.
• Image preloading is not clear depending on the browser.