PuzzleCAPTCHA is a jQuery CAPTCHA plugin, requiring users to solve very simple puzzle.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo README.md Feb 3, 2014
GitHub - Shortcut.lnk test Feb 2, 2014
README.md Update README.md Oct 28, 2015
puzzleCAPTCHA.css PuzzleCAPTCHA - v0.9 Feb 4, 2014
puzzleCAPTCHA.js PuzzleCAPTCHA - v0.9 Feb 4, 2014




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>
    	Add the style
    	<pre>&lt;link rel="stylesheet" href="puzzleCAPTCHA.css"&gt;</pre>
    	Add HTML
    	<pre>&lt;div id="PuzzleCaptcha"&gt;&lt;/div&gt;</pre>
    	Call me!!

    <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>
	Using jQuery selector - 
	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">
	The value could be {targetInput:".any-class-name-selector-for-input"}

<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>
	Using jQuery selector - 
	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>
	The value could be {targetButton:".any-class-name-selector-for-button"}


*Thing to do:

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