PuzzleCAPTCHA

• Demo
• How it works
• How to use

Demo

Have a look at the live demo!!

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.